Skip to content

Commit

Permalink
Merge branch '24_2' into grids/cardview/main
Browse files Browse the repository at this point in the history
  • Loading branch information
pomahtri committed Dec 11, 2024
2 parents 763d32a + 8ea8ffb commit f7dd6da
Show file tree
Hide file tree
Showing 1,671 changed files with 22,159 additions and 19,044 deletions.
2 changes: 1 addition & 1 deletion apps/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"zone.js": "0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.3.8",
"@angular-devkit/build-angular": "17.3.11",
"@angular/cli": "17.3.11",
"@angular/language-service": "17.3.12",
"@angular/platform-server": "17.3.12",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.demo-container {
display: flex;
justify-content: center;
}

::ng-deep .dx-chat {
max-width: 900px;
}

::ng-deep .dx-chat-messagelist-empty-image {
display: none;
}

::ng-deep .dx-chat-messagelist-empty-message {
font-size: var(--dx-font-size-heading-5);
}

::ng-deep .dx-chat-messagebubble-content,
::ng-deep .dx-chat-messagebubble-text {
display: flex;
flex-direction: column;
}

::ng-deep .dx-bubble-button-container {
display: none;
}

::ng-deep .dx-button {
display: inline-block;
color: var(--dx-color-icon);
}

::ng-deep .dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {
display: flex;
gap: 4px;
margin-top: 8px;
}

::ng-deep .dx-template-wrapper > div > p:first-child {
margin-top: 0;
}

::ng-deep .dx-template-wrapper > div > p:last-child {
margin-bottom: 0;
}

::ng-deep .dx-chat-messagebubble-content ol,
::ng-deep .dx-chat-messagebubble-content ul {
white-space: normal;
}

::ng-deep .dx-chat-messagebubble-content h1,
::ng-deep .dx-chat-messagebubble-content h2,
::ng-deep .dx-chat-messagebubble-content h3,
::ng-deep .dx-chat-messagebubble-content h4,
::ng-deep .dx-chat-messagebubble-content h5,
::ng-deep .dx-chat-messagebubble-content h6 {
font-size: revert;
font-weight: revert;
}

::ng-deep .dx-chat-disabled .dx-chat-messagebox {
opacity: 0.5;
pointer-events: none;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<div class="demo-container">
<dx-chat
[class.dx-chat-disabled]="isDisabled"
[dataSource]="dataSource"
[reloadOnChange]="false"
[showAvatar]="false"
[showDayHeaders]="false"
[user]="user"
height="710"
[typingUsers]="typingUsers$ | async"
[alerts]="alerts$ | async"
(onMessageEntered)="onMessageEntered($event)"
messageTemplate="messageTemplate"
>
<div *dxTemplate="let data of 'messageTemplate'">
<ng-container *ngIf="data.message.text === regenerationText">
<span>{{ regenerationText }}</span>
</ng-container>
<ng-container *ngIf="data.message.text !== regenerationText">
<div
class="dx-chat-messagebubble-text"
[innerHTML]="convertToHtml(data.message)"
>
</div>
<div class="dx-bubble-button-container">
<dx-button
[icon]="copyButtonIcon"
stylingMode="text"
hint="Copy"
(onClick)="onCopyButtonClick(data.message)"
>
</dx-button>
<dx-button
icon="refresh"
stylingMode="text"
hint="Regenerate"
(onClick)="onRegenerateButtonClick()"
>
</dx-button>
</div>
</ng-container>
</div>
</dx-chat>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { DxChatModule } from 'devextreme-angular';
import { DxButtonModule } from 'devextreme-angular';
import {
User,
Alert,
Message,
MessageEnteredEvent
} from 'devextreme/ui/chat';
import { Observable } from 'rxjs';
import { AppService } from './app.service';
import { loadMessages } from 'devextreme/localization';
import { DataSource } from 'devextreme/common/data';

if (!/localhost/.test(document.location.host)) {
enableProdMode();
}

let modulePrefix = '';
// @ts-ignore
if (window && window.config.packageConfigPaths) {
modulePrefix = '/app';
}

@Component({
selector: 'demo-app',
templateUrl: `.${modulePrefix}/app.component.html`,
styleUrls: [`.${modulePrefix}/app.component.css`],
})
export class AppComponent {
dataSource: DataSource;

user: User;

typingUsers$: Observable<User[]>;

alerts$: Observable<Alert[]>;

regenerationText: string;

copyButtonIcon: string;

isDisabled: boolean;

constructor(private readonly appService: AppService) {
loadMessages(this.appService.getDictionary());

this.dataSource = this.appService.dataSource;
this.user = this.appService.user;
this.alerts$ = this.appService.alerts$;
this.typingUsers$ = this.appService.typingUsers$;
this.regenerationText = this.appService.REGENERATION_TEXT;
this.copyButtonIcon = 'copy';
this.isDisabled = false;
}

convertToHtml(message: Message): string {
return this.appService.convertToHtml(message.text);
}

toggleDisabledState(disabled: boolean, event = undefined) {
this.isDisabled = disabled;

if (disabled) {
event?.target.blur();
} else {
event?.target.focus();
}
};

async onMessageEntered(e: MessageEnteredEvent) {
if (!this.appService.alerts.length) {
this.toggleDisabledState(true, e.event);
}

try {
await this.appService.onMessageEntered(e);
} finally {
this.toggleDisabledState(false, e.event);
}
}

onCopyButtonClick(message: Message) {
navigator.clipboard?.writeText(message.text);

this.copyButtonIcon = 'check';

setTimeout(() => {
this.copyButtonIcon = 'copy';
}, 2500);
}

async onRegenerateButtonClick() {
this.appService.updateLastMessage();
this.toggleDisabledState(true);

try {
await this.appService.regenerate();
} finally {
this.toggleDisabledState(false);
}
}
}

@NgModule({
imports: [
BrowserModule,
DxChatModule,
DxButtonModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [AppService],
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);
Loading

0 comments on commit f7dd6da

Please sign in to comment.