Add new chat component

src/app/layouts/header/export-popup/export-popup.component.ts

@@ -35,8 +35,8 @@
 
     viewIndex = 0;
 
-    mainWidgets: string[] = ['Scheduler', 'Diagram', 'Gantt', 'DataGrid', 'PivotGrid', 'TreeList'];
+    mainWidgets: string[] = ['Scheduler', 'Diagram', 'Gantt', 'DataGrid', 'PivotGrid', 'TreeList', 'Chat'];
     widgetGroups: any[] = [{
         group: 'Navigation and Layout',
         widgets: ['Tabs', 'Toolbar', 'Menu', 'TreeView', 'TileView', 'Accordion', 'ContextMenu', 'TabPanel', 'MultiView', 'Drawer', 'Box', 'ResponsiveBox', 'Splitter']
     }, {
@@ -84,14 +84,14 @@
         this.viewIndex = index;
     }
 
     selectGroup(e: any, groupItems: WidgetData[]): void {
         if(e.event === undefined) return;
         groupItems.forEach((item) => {
             item.selected = e.value;
         });
     }
 
     selectAll(e: any): void {
         if(e.event === undefined) return;
 
         const select = (item: WidgetData, value: boolean): boolean => item.selected = value;
@@ -167,7 +167,7 @@
                `dx.${this.importService.getThemeName()}.${this.schemeName}`;
     }
 
     validate(): any {
         return validationEngine.validateGroup();
     }
 

src/app/left-menu/left-menu.aliases.ts

@@ -145,6 +145,35 @@ export class LeftMenuAlias {
             equivalents: 'ListView, TableView, ListBox, dxList, dx-list',
             regs: [/list-/i],
             route: 'list'
+        }, {
+            name: 'Chat',
+            equivalents: 'Chat, dxChat, dx-chat',
+            route: 'chat',
+            groups: [{
+                name: 'BASIC SETTINGS',
+                equivalents: 'Chat, dxChat, dx-chat',
+                regs: [/chat-background-color/i, /chat-border-color/i]
+            }, {
+                name: 'AVATAR',
+                equivalents: 'Chat, dxChat, dx-chat',
+                regs: [/chat-avatar-color/i, /chat-avatar-background-color/i]
+            }, {
+                name: 'MESSAGE BUBBLE',
+                equivalents: 'Chat, dxChat, dx-chat',
+                regs: [/chat-bubble-color-primary/i, /chat-bubble-background-color-primary/i, /chat-bubble-color-secondary/i, /chat-bubble-background-color-secondary/i, /chat-information-color/i]
+            }, {
+                name: 'SYSTEM INFO',
+                equivalents: 'Chat, dxChat, dx-chat',
+                regs: [/chat-information-author-name-color/i, /chat-information-timestamp-color/i, /chat-messagelist-day-header-color/i, /chat-alertlist-color/i]
+            }, {
+                name: 'EMPTY VIEW',
+                equivalents: 'Chat, dxChat, dx-chat',
+                regs: [/chat-messagelist-empty-icon-color/i, /chat-messagelist-empty-icon-background-color/i, /chat-messagelist-empty-message-color/i, /chat-messagelist-empty-prompt-color/i]
+            }, {
+                name: 'TYPING INDICATOR',
+                equivalents: 'Chat, dxChat, dx-chat',
+                regs: [/chat-typingindicator-color/i, /chat-typingindicator-bubble-bg-color/i, /chat-typingindicator-circle-bg-color-center/, /chat-typingindicator-circle-bg-color$/]
+            }]
         }, {
             name: 'Splitter',
             equivalents: 'Splitter, dxSplitter, dx-splitter',

src/app/preview/chat/chat.component.css

@@ -0,0 +1,8 @@
+.chat-container {
+  display: flex;
+  justify-content: center;
+}
+
+.full-chat {
+  margin-right: 40px;
+}

src/app/preview/chat/chat.component.html

@@ -0,0 +1,48 @@
+<div *ngIf="isExpanded.getValue(); then expandedBlock; else collapsedBlock"></div>
+
+<ng-template #collapsedBlock>
+  <dx-chat
+    id="chat"
+    width="100%"
+    height="100%"
+    [showDayHeaders]="false"
+    [items]="previewMessages"
+    [user]="johnDoe"
+  >
+  </dx-chat>
+
+</ng-template>
+
+<ng-template #expandedBlock>
+  <div class="options-block">
+    <dx-check-box
+        text="Show Typing Indicator"
+        [value]="showTyping"
+        (onValueChanged)="toogleTyping($event)"
+    ></dx-check-box>
+    <dx-check-box
+        text="Show Alert"
+        [value]="showAlert"
+        (onValueChanged)="toogleErrors($event)"
+    ></dx-check-box>
+  </div>
+  <div class="chat-container">
+    <dx-chat
+      class="full-chat"
+      width="100%"
+      height="100%"
+      [typingUsers]="showTyping ? [supportAgent] : []"
+      [items]="messages"
+      [user]="johnDoe"
+    >
+      <dxi-chat-alert *ngIf="showAlert" message="You have been disconnected"></dxi-chat-alert>
+    </dx-chat>
+    <dx-chat
+      class="empty-chat"
+      width="100%"
+      height="auto"
+    >
+      <dxi-chat-alert *ngIf="showAlert" message="You have been disconnected"></dxi-chat-alert>
+    </dx-chat>
+  </div>
+</ng-template>

src/app/preview/chat/chat.component.ts

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { Component, OnDestroy } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+    selector: 'app-chat',
+    templateUrl: './chat.component.html',
+    styleUrls: ['./chat.component.css']
+})
+export class ChatComponent implements OnDestroy {
+    isExpanded = new BehaviorSubject<boolean>(false);
+    widgetGroup = 'chat';
+
+    showTyping = true;
+    showAlert = true;
+    date = new Date('October 11, 2024, 11:51:00');
+
+    johnDoe = {
+        id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
+        name: 'John Doe'
+    };
+
+    supportAgent = {
+        id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3',
+        name: 'Support Agent'
+    };
+
+    previewMessages = [
+        {
+            timestamp: new Date().setTime(this.date.getTime()),
+            author: this.supportAgent,
+            text: 'Hello, John! How can I assist you today?'
+        },
+        {
+            timestamp: new Date().setTime(this.date.getTime() + 2 * 60000),
+            author: this.johnDoe,
+            text: 'Hi, I\'m having trouble accessing my account.'
+        }
+    ];
+
+    messages = [
+        {
+            timestamp: new Date().setTime(this.date.getTime()),
+            author: this.supportAgent,
+            text: 'Hello, John! How can I assist you today?'
+        },
+        {
+            timestamp: new Date().setTime(this.date.getTime() + 2 * 60000),
+            author: this.johnDoe,
+            text: 'Hi, I\'m having trouble accessing my account.\nIt says my password is incorrect.'
+        },
+        {
+            timestamp: new Date().setTime(this.date.getTime() + 2 * 60000),
+            author: this.johnDoe,
+            text: 'My UserID is john.doe1357'
+        },
+        {
+            timestamp: new Date().setTime(this.date.getTime() + 10 * 60000),
+            author: this.supportAgent,
+            text: '✅ Instructions to restore access have been sent to the email address registered to your account.'
+        }
+    ];
+
+    toogleTyping() {
+        this.showTyping = !this.showTyping;
+    }
+
+    toogleErrors() {
+        this.showAlert = !this.showAlert;
+    }
+
+    ngOnDestroy(): void {
+        this.isExpanded.unsubscribe();
+    }
+}

src/app/preview/index.component.css

@@ -10,7 +10,7 @@
 ::ng-deep .options-block {
     display: flex;
     gap: 24px;
-    margin-bottom: 48px;
+    margin-bottom: 20px;
 }
 
 ::ng-deep .options-block .option {

src/app/preview/preview.module.ts

@@ -6,6 +6,7 @@ import { DevExtremeModule } from 'devextreme-angular';
 import { AccordionComponent } from './accordion/accordion.component';
 import { ButtonsComponent } from './buttons/buttons.component';
 import { ButtonGroupComponent } from './button-group/button-group.component';
+import { ChatComponent } from './chat/chat.component';
 import { DatagridComponent } from './datatgrid/datatgrid.component';
 import { DrawerComponent } from './drawer/drawer.component';
 import { EditorsComponent } from './editors/editors.component';
@@ -41,6 +42,7 @@ import { ButtonDetailedComponent } from './button-detailed/button-detailed.compo
         DatagridComponent,
         ButtonsComponent,
         ButtonGroupComponent,
+        ChatComponent,
         EditorsComponent,
         FilterbuilderComponent,
         FieldSetComponent,
@@ -69,6 +71,7 @@ import { ButtonDetailedComponent } from './button-detailed/button-detailed.compo
         DatagridComponent,
         ButtonsComponent,
         ButtonGroupComponent,
+        ChatComponent,
         EditorsComponent,
         FilterbuilderComponent,
         FieldSetComponent,

src/app/preview/preview/preview.component.html

@@ -65,10 +65,10 @@ <h1 class="component-title">Form</h1>
         </div>
 
         <div class="component-item component-item--half">
-            <h1 class="component-title">List</h1>
+            <h1 class="component-title">Chat</h1>
             <div class="component-display">
-                <app-button-detailed widget="list" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>
-                <app-list #widget></app-list>
+                <app-button-detailed widget="chat" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>
+                <app-chat #widget></app-chat>
             </div>
         </div>
 
@@ -80,6 +80,14 @@ <h1 class="component-title">Splitter</h1>
             </div>
         </div>
 
+        <div class="component-item component-item--half">
+            <h1 class="component-title">List</h1>
+            <div class="component-display">
+                <app-button-detailed widget="list" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>
+                <app-list #widget></app-list>
+            </div>
+        </div>
+
         <div class="component-item component-item--half">
             <h1 class="component-title">Filter Builder</h1>
             <div class="component-display">