Chat: add Customizations demo for Vue, React and Angular (#28482)

Co-authored-by: EugeniyKiyashko <[email protected]>

apps/demos/Demos/Chat/Customization/Angular/app/app.component.css

@@ -0,0 +1,38 @@
+.demo-container {
+  min-width: 720px;
+  display: flex;
+  gap: 20px;
+}
+
+::ng-deep .chat-container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+::ng-deep .options {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  background-color: rgba(191, 191, 191, 0.15);
+  gap: 16px;
+}
+
+::ng-deep .dx-chat {
+  max-width: 480px;
+}
+
+::ng-deep .caption {
+  font-size: var(--dx-font-size-sm);
+  font-weight: 500;
+}
+
+::ng-deep .option-separator {
+  border-bottom: 1px solid var(--dx-color-border);
+}
+
+::ng-deep .dx-avatar {
+  border: 1px solid var(--dx-color-border);
+}

apps/demos/Demos/Chat/Customization/Angular/app/app.component.html

@@ -0,0 +1,79 @@
+<div class="demo-container">
+  <div class="chat-container">
+    <dx-chat
+      #chat
+      [height]="710"
+      [user]="currentUser"
+      [items]="messages$ | async"
+      [showAvatar]="true"
+      [showUserName]="true"
+      [showDayHeaders]="true"
+      [showMessageTimestamp]="true"
+      [dayHeaderFormat]="dayHeaderFormats[0]"
+      [messageTimestampFormat]="messageTimestampFormats[0]"
+      [disabled]="false"
+      (onMessageEntered)="onMessageEntered($event)"
+    >
+    </dx-chat>
+  </div>
+
+  <div class="options">
+    <div class="caption">Options</div>
+
+    <div class="option">
+      <dx-check-box text="Avatar" [(value)]="chat.showAvatar"></dx-check-box>
+    </div>
+
+    <div class="option">
+      <dx-check-box
+        text="User Name"
+        [(value)]="chat.showUserName"
+      ></dx-check-box>
+    </div>
+
+    <div class="option-separator"></div>
+
+    <div class="option">
+      <dx-check-box
+        text="Day Headers"
+        [(value)]="chat.showDayHeaders"
+      ></dx-check-box>
+    </div>
+
+    <div class="option">
+      <span>Day Header Format:</span>
+      <dx-select-box
+        [items]="dayHeaderFormats"
+        [(value)]="chat.dayHeaderFormat"
+        [inputAttr]="dayHeaderLabel"
+      ></dx-select-box>
+    </div>
+
+    <div class="option-separator"></div>
+
+    <div class="option">
+      <dx-check-box
+        text="Message Timestamp"
+        [(value)]="chat.showMessageTimestamp"
+      ></dx-check-box>
+    </div>
+
+    <div class="option">
+      <span>Message Timestamp Format:</span>
+      <dx-select-box
+        [items]="messageTimestampFormats"
+        [(value)]="chat.messageTimestampFormat"
+        [inputAttr]="messageTimestampLabel"
+      ></dx-select-box>
+    </div>
+
+    <div class="option-separator"></div>
+
+    <div class="option">
+      <dx-check-box
+        text="Disable Chat"
+        [(value)]="chat.disabled"
+      ></dx-check-box>
+    </div>
+  </div>
+</div>

apps/demos/Demos/Chat/Customization/Angular/app/app.component.ts

@@ -0,0 +1,63 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { DxChatModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
+import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat';
+import { Observable } from 'rxjs';
+import { AppService } from './app.service';
+
+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 {
+  currentUser: User;
+
+  supportAgent: User;
+
+  messages$: Observable<Message[]>;
+
+  dayHeaderFormats = this.appService.dayHeaderFormats;
+
+  messageTimestampFormats = this.appService.messageTimestampFormats;
+
+  dayHeaderLabel = this.appService.dayHeaderLabel;
+
+  messageTimestampLabel = this.appService.messageTimestampLabel;
+
+  constructor(private readonly appService: AppService) {
+    [this.currentUser, this.supportAgent] = this.appService.getUsers();
+    this.messages$ = this.appService.messages$;
+  }
+
+  onMessageEntered(event: MessageEnteredEvent) {
+    this.appService.onMessageEntered(event);
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxChatModule,
+    DxCheckBoxModule,
+    DxSelectBoxModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  providers: [AppService],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

apps/demos/Demos/Chat/Customization/Angular/app/app.service.ts

@@ -0,0 +1,90 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppService {
+  date: Date;
+
+  currentUser: User = {
+    id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
+    name: 'John Doe',
+  };
+
+  supportAgent: User = {
+    id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3',
+    name: 'Support Agent',
+    avatarUrl: '../../../../images/petersmith.png',
+  };
+
+  dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd'];
+
+  messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss'];
+
+  messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' };
+
+  dayHeaderLabel = { 'aria-label': 'Day Header Format' };
+
+  messages: Message[] = [];
+
+  messagesSubject: BehaviorSubject<Message[]> = new BehaviorSubject([]);
+
+  constructor() {
+    this.date = new Date();
+    this.date.setHours(0, 0, 0, 0);
+
+    this.messages = [
+      {
+        timestamp: this.getTimestamp(this.date, -9),
+        author: this.supportAgent,
+        text: 'Hello, John!\nHow can I assist you today?',
+      },
+      {
+        timestamp: this.getTimestamp(this.date, -7),
+        author: this.currentUser,
+        text: 'Hi, I\'m having trouble accessing my account.',
+      },
+      {
+        timestamp: this.getTimestamp(this.date, -7),
+        author: this.currentUser,
+        text: 'It says my password is incorrect.',
+      },
+      {
+        timestamp: this.getTimestamp(this.date, -7),
+        author: this.supportAgent,
+        text: 'I can help you with that. Can you please confirm your UserID for security purposes?',
+      },
+      {
+        timestamp: this.getTimestamp(this.date, 1),
+        author: this.currentUser,
+        text: 'john.doe1357',
+      },
+      {
+        timestamp: this.getTimestamp(this.date, 1),
+        author: this.supportAgent,
+        text: '✅ Instructions to restore access have been sent to the email address associated with your account.',
+      },
+    ];
+
+    this.messagesSubject.next(this.messages);
+  }
+
+  get messages$(): Observable<Message[]> {
+    return this.messagesSubject.asObservable();
+  }
+
+  getUsers(): User[] {
+    return [this.currentUser, this.supportAgent];
+  }
+
+  getTimestamp(date: Date, offsetMinutes = 0): number {
+    return date.getTime() + offsetMinutes * 60000;
+  }
+
+  onMessageEntered(event: MessageEnteredEvent) {
+    this.messages = [...this.messages, event.message];
+    this.messagesSubject.next(this.messages);
+  }
+}

apps/demos/Demos/Chat/Customization/Angular/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+
+    <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
+    <script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+
+    <script src="config.js"></script>
+    <script>
+      System.import("app").catch(console.error.bind(console));
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <demo-app>Loading...</demo-app>
+    </div>
+  </body>
+</html>