Chat: Basic rendering

packages/devextreme-angular/src/ui/chat/index.ts

@@ -139,6 +139,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.title]
+    
+     */
+    @Input()
+    get title(): string {
+        return this._getOption('title');
+    }
+    set title(value: string) {
+        this._setOption('title', value);
+    }
+
+
     /**
      * [descr:WidgetOptions.visible]
     
@@ -238,6 +251,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() rtlEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() titleChange: EventEmitter<string>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -286,6 +306,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'hoverStateEnabledChange' },
             { emit: 'itemsChange' },
             { emit: 'rtlEnabledChange' },
+            { emit: 'titleChange' },
             { emit: 'visibleChange' },
             { emit: 'widthChange' }
         ]);

packages/devextreme-scss/scss/widgets/base/chat/_index.scss

@@ -0,0 +1,166 @@
+// adduse
+
+$chat-box-shadow: 0 0 2px 0 #0000001F, 0 4px 8px 0 #00000014;
+$chat-width: 480px;
+$chat-height: 660px;
+$chat-padding: 20px;
+$chat-border-radius: 24px;
+$chat-information-font-size: 12px;
+$chat-information-color: #707070;
+$chat-avatar-size: 32px;
+$chat-bubble-background-color-primary: #EBF3FC;
+$chat-bubble-background-color-secondary: #F5F5F5;
+$chat-bubble-border-radius: 12px;
+$chat-text-area-height: 40px;
+
+.dx-chat {
+  display: flex;
+  flex-direction: column;
+  width: $chat-width;
+  height: $chat-height;
+  padding: $chat-padding;
+  border-radius: $chat-border-radius;
+  box-shadow: $chat-box-shadow;
+}
+
+.dx-chat-header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding-bottom: 4px;
+}
+
+.dx-chat-header-text {
+  margin: 0;
+}
+
+.dx-chat-message-list {
+  box-sizing: border-box;
+  flex: 1;
+  overflow: auto;
+}
+
+.dx-chat-message-list-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+}
+
+.dx-chat-message-group {
+  display: grid;
+  align-items: start;
+  row-gap: 4px;
+  margin: 24px 0;
+}
+
+.dx-chat-message-group-alignment-start {
+  justify-items: start;
+  grid-template-columns: 44px 1fr;
+}
+
+.dx-chat-message-group-alignment-end {
+  justify-items: end;
+}
+
+.dx-chat-message-group-information {
+  display: flex;
+  grid-row: 1;
+}
+
+.dx-chat-message-group-alignment-start .dx-chat-message-group-information {
+  grid-column: 2;
+}
+
+.dx-chat-message-time,
+.dx-chat-message-name {
+  font-size: $chat-information-font-size;
+  color: $chat-information-color;
+}
+
+.dx-chat-message-name {
+  margin-right: 8px;
+}
+
+.dx-chat-message-avatar {
+  grid-row: span 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $chat-avatar-size;
+  height: $chat-avatar-size;
+  border-radius: 50%;
+  background-color: #878787;
+}
+
+.dx-chat-message-bubble {
+  padding: 8px 12px;
+  max-width: 90%;
+  border-radius: $chat-bubble-border-radius;
+  background-color: $chat-bubble-background-color-secondary;
+}
+
+.dx-chat-message-group-alignment-start .dx-chat-message-bubble.dx-chat-message-bubble-first {
+  border-bottom-left-radius: 0;
+}
+
+.dx-chat-message-group-alignment-start .dx-chat-message-bubble.dx-chat-message-bubble-last {
+  border-top-left-radius: 0;
+}
+
+.dx-chat-message-group-alignment-start .dx-chat-message-bubble-first.dx-chat-message-bubble-last {
+  border-bottom-left-radius: $chat-bubble-border-radius;
+  border-top-left-radius: $chat-bubble-border-radius;
+}
+
+.dx-chat-message-group-alignment-start .dx-chat-message-bubble:not(
+  .dx-chat-message-bubble-first.dx-chat-message-bubble-last,
+  .dx-chat-message-bubble-first,
+  .dx-chat-message-bubble-last) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.dx-chat-message-group-alignment-end .dx-chat-message-bubble.dx-chat-message-bubble-first {
+  border-bottom-right-radius: 0;
+}
+
+.dx-chat-message-group-alignment-end .dx-chat-message-bubble.dx-chat-message-bubble-last {
+  border-top-right-radius: 0;
+}
+
+.dx-chat-message-group-alignment-end .dx-chat-message-bubble-first.dx-chat-message-bubble-last {
+  border-bottom-right-radius: $chat-bubble-border-radius;
+  border-top-right-radius: $chat-bubble-border-radius;
+}
+
+.dx-chat-message-group-alignment-end .dx-chat-message-bubble:not(
+  .dx-chat-message-bubble-first.dx-chat-message-bubble-last,
+  .dx-chat-message-bubble-first,
+  .dx-chat-message-bubble-last) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.dx-chat-message-group-alignment-start .dx-chat-message-bubble {
+  grid-column: 2;
+}
+
+.dx-chat-message-group-alignment-end .dx-chat-message-bubble {
+  background-color: $chat-bubble-background-color-primary;
+}
+
+.dx-chat-message-box {
+  display: flex;
+  align-items: center;
+}
+
+.dx-chat .dx-chat-message-box-text-area {
+  flex-grow: 1;
+  height: $chat-text-area-height;
+}
+
+.dx-chat-message-box-button {
+  margin-left: 8px;
+}

packages/devextreme-scss/scss/widgets/fluent/_index.scss

@@ -1,5 +1,6 @@
 // public widgets
 @use "./box";
+@use "./chat";
 @use "./responsiveBox";
 @use "./button";
 @use "./buttonGroup";

packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss

@@ -0,0 +1,3 @@
+@use "../../base/chat";
+
+// adduse

packages/devextreme-scss/scss/widgets/generic/_index.scss

@@ -1,5 +1,6 @@
 // public widgets
 @use "./box";
+@use "./chat";
 @use "./responsiveBox";
 @use "./button";
 @use "./buttonGroup";

packages/devextreme-scss/scss/widgets/generic/chat/_index.scss

@@ -0,0 +1,3 @@
+@use "../../base/chat";
+
+// adduse

packages/devextreme-scss/scss/widgets/material/_index.scss

@@ -1,5 +1,6 @@
 // public widgets
 @use "./box";
+@use "./chat";
 @use "./responsiveBox";
 @use "./button";
 @use "./buttonGroup";

packages/devextreme-scss/scss/widgets/material/chat/_index.scss

@@ -0,0 +1,3 @@
+@use "../../base/chat";
+
+// adduse

packages/devextreme-themebuilder/tests/data/dependencies.ts

@@ -16,6 +16,7 @@ export const dependencies: FlatStylesDependencies = {
   buttongroup: ['validation', 'button'],
   dropdownbutton: ['validation', 'button', 'buttongroup', 'popup', 'loadindicator', 'loadpanel', 'scrollview', 'list'],
   calendar: ['validation', 'button'],
+  chat: ['button', 'loadindicator', 'textbox', 'validation'],
   checkbox: ['validation'],
   numberbox: ['validation', 'button', 'loadindicator'],
   colorbox: ['validation', 'button', 'loadindicator', 'numberbox', 'textbox', 'popup'],

packages/devextreme-vue/src/chat.ts

@@ -13,6 +13,7 @@ type AccessibleOptions = Pick<Properties,
   "onMessageSend" |
   "onOptionChanged" |
   "rtlEnabled" |
+  "title" |
   "visible" |
   "width"
 >;
@@ -32,6 +33,7 @@ const DxChat = createComponent({
     onMessageSend: Function,
     onOptionChanged: Function,
     rtlEnabled: Boolean,
+    title: String,
     visible: Boolean,
     width: [Function, Number, String]
   },
@@ -48,6 +50,7 @@ const DxChat = createComponent({
     "update:onMessageSend": null,
     "update:onOptionChanged": null,
     "update:rtlEnabled": null,
+    "update:title": null,
     "update:visible": null,
     "update:width": null,
   },

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -3,31 +3,76 @@ import $ from '@js/core/renderer';
 import type { Properties } from '@js/ui/chat';
 
 import Widget from '../widget';
+import ChatHeader from './chat_header';
+import MessageBox from './chat_message_box';
+import MessageList from './chat_message_list';
 
 const CHAT_CLASS = 'dx-chat';
 
+const MOCK_CURRENT_USER_ID = 'CURRENT_USER_ID';
+
 class Chat extends Widget<Properties> {
+  _chatHeader?: ChatHeader;
+
+  _messageBox?: MessageBox;
+
+  _messageList?: MessageList;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
-      ...{
-        items: [],
-        onMessageSend: undefined,
-      },
+      title: '',
+      items: [],
+      onMessageSend: undefined,
     };
   }
 
   _initMarkup(): void {
     $(this.element()).addClass(CHAT_CLASS);
 
     super._initMarkup();
+
+    this._renderHeader();
+    this._renderMessageList();
+    this._renderMessageBox();
+  }
+
+  _renderHeader(): void {
+    const { title } = this.option();
+
+    const $header = $('<div>').appendTo(this.element());
+
+    // @ts-expect-error
+    this._chatHeader = this._createComponent($header, ChatHeader, { title });
+  }
+
+  _renderMessageList(): void {
+    const { items } = this.option();
+
+    const $messageList = $('<div>').appendTo(this.element());
+
+    this._messageList = this._createComponent($messageList, MessageList, {
+      items,
+      currentUserId: MOCK_CURRENT_USER_ID,
+    });
+  }
+
+  _renderMessageBox(): void {
+    const $messageBox = $('<div>').appendTo(this.element());
+
+    this._messageBox = this._createComponent($messageBox, MessageBox, {});
   }
 
   _optionChanged(args: Record<string, unknown>): void {
-    const { name } = args;
+    const { name, value } = args;
 
     switch (name) {
+      case 'title':
+        // @ts-expect-error
+        this._chatHeader?.option(name, value);
+        break;
       case 'items':
+        this._invalidate();
         break;
       case 'onMessageSend':
         break;