Angular example

Angular/package.json

@@ -24,8 +24,12 @@
     "@angular/router": "^18.0.3",
     "devextreme": "25.1.3",
     "devextreme-angular": "25.1.3",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "unified": "^11.0.5",
     "zone.js": "~0.14.7"
   },
   "devDependencies": {

Angular/src/app/app.component.html

@@ -1,3 +1,42 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div class="demo-container">
+  <dx-chat
+    [class.chat-disabled]="isDisabled"
+    [dataSource]="dataSource"
+    [reloadOnChange]="false"
+    [showAvatar]="false"
+    [showDayHeaders]="false"
+    [user]="user"
+    [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>

Angular/src/app/app.component.scss

@@ -1,4 +1,72 @@
-.default-style {
-  margin: 50px;
-  width: 90vw;
+.demo-container {
+  display: flex;
+  justify-content: center;
+  height: 90vh;
+}
+
+::ng-deep .chat-disabled .dx-chat-messagebox {
+  opacity: 0.5;
+  pointer-events: none !important;
+}
+
+::ng-deep .dx-chat {
+  max-width: 900px;
+  height: 100%;
+}
+
+::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;
 }

Angular/src/app/app.component.ts

@@ -1,20 +1,74 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { Observable } from 'rxjs';
+import { type DxChatTypes } from 'devextreme-angular/ui/chat';
+import { DataSource } from 'devextreme-angular/common/data';
+import { loadMessages } from 'devextreme/localization';
+import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'Angular';
+  dataSource: DataSource | [];
 
-  counter = 0;
+  user: DxChatTypes.User;
 
-  buttonText = 'Click count: 0';
+  typingUsers$: Observable<DxChatTypes.User[]>;
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  alerts$: Observable<DxChatTypes.Alert[]>;
+
+  copyButtonIcon: string;
+
+  isDisabled = false;
+
+  regenerationText: string;
+
+  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';
+  }
+
+  convertToHtml(message: DxChatTypes.Message): string {
+    return this.appService.convertToHtml(message.text || '');
+  }
+
+  async onMessageEntered(e: DxChatTypes.MessageEnteredEvent): Promise<void> {
+    this.isDisabled = true;
+    try {
+      await this.appService.onMessageEntered(e);
+    } finally {
+      this.isDisabled = false;
+    }
+  }
+
+  onCopyButtonClick(message: DxChatTypes.Message): void {
+    navigator.clipboard?.writeText(message.text ?? '').catch(() => {});
+
+    this.copyButtonIcon = 'check';
+
+    setTimeout(() => {
+      this.copyButtonIcon = 'copy';
+    }, 2500);
+  }
+
+  async onRegenerateButtonClick(): Promise<void> {
+    this.appService.updateLastMessage();
+    this.appService.toggleDisabledState(true, undefined);
+    this.isDisabled = true;
+
+    try {
+      await this.appService.regenerate();
+    } finally {
+      this.appService.toggleDisabledState(false, undefined);
+      this.isDisabled = false;
+    }
   }
 }

Angular/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxButtonModule, DxChatModule } from 'devextreme-angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,6 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
+    DxChatModule,
     DxButtonModule,
   ],
   providers: [],