From 465599db269c0af359f2c7fa1a39e0d902d09596 Mon Sep 17 00:00:00 2001 From: volvl Date: Wed, 27 Nov 2024 11:43:11 +0400 Subject: [PATCH] Add new chat component (#238) * Add new chat component * Fix lint errors --- .../export-popup/export-popup.component.ts | 2 +- src/app/left-menu/left-menu.aliases.ts | 29 +++++++ src/app/preview/chat/chat.component.css | 8 ++ src/app/preview/chat/chat.component.html | 48 ++++++++++++ src/app/preview/chat/chat.component.ts | 75 +++++++++++++++++++ src/app/preview/index.component.css | 2 +- src/app/preview/preview.module.ts | 3 + .../preview/preview/preview.component.html | 14 +++- 8 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 src/app/preview/chat/chat.component.css create mode 100644 src/app/preview/chat/chat.component.html create mode 100644 src/app/preview/chat/chat.component.ts diff --git a/src/app/layouts/header/export-popup/export-popup.component.ts b/src/app/layouts/header/export-popup/export-popup.component.ts index 87c93aa1..d010bc33 100644 --- a/src/app/layouts/header/export-popup/export-popup.component.ts +++ b/src/app/layouts/header/export-popup/export-popup.component.ts @@ -35,7 +35,7 @@ export class ExportPopupComponent implements OnInit { 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'] diff --git a/src/app/left-menu/left-menu.aliases.ts b/src/app/left-menu/left-menu.aliases.ts index 7b80eba2..d0f4db8a 100644 --- a/src/app/left-menu/left-menu.aliases.ts +++ b/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', diff --git a/src/app/preview/chat/chat.component.css b/src/app/preview/chat/chat.component.css new file mode 100644 index 00000000..ede22b05 --- /dev/null +++ b/src/app/preview/chat/chat.component.css @@ -0,0 +1,8 @@ +.chat-container { + display: flex; + justify-content: center; +} + +.full-chat { + margin-right: 40px; +} diff --git a/src/app/preview/chat/chat.component.html b/src/app/preview/chat/chat.component.html new file mode 100644 index 00000000..aad0c985 --- /dev/null +++ b/src/app/preview/chat/chat.component.html @@ -0,0 +1,48 @@ +
+ + + + + + + + +
+ + +
+
+ + + + + + +
+ diff --git a/src/app/preview/chat/chat.component.ts b/src/app/preview/chat/chat.component.ts new file mode 100644 index 00000000..4c170f0d --- /dev/null +++ b/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(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(); + } +} diff --git a/src/app/preview/index.component.css b/src/app/preview/index.component.css index 0a1a02d8..0967be51 100644 --- a/src/app/preview/index.component.css +++ b/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 { diff --git a/src/app/preview/preview.module.ts b/src/app/preview/preview.module.ts index 4cebbca8..71444e30 100644 --- a/src/app/preview/preview.module.ts +++ b/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, diff --git a/src/app/preview/preview/preview.component.html b/src/app/preview/preview/preview.component.html index 2a3357a3..7a105b56 100644 --- a/src/app/preview/preview/preview.component.html +++ b/src/app/preview/preview/preview.component.html @@ -65,10 +65,10 @@

Form

-

List

+

Chat

- - + +
@@ -80,6 +80,14 @@

Splitter

+
+

List

+
+ + +
+
+

Filter Builder