Draft: Chat

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-socondary: #F5F5F5;
+$chat-bubble-border-radius: 12px;
+$chat-textarea-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-socondary;
+}
+
+.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-message-box-text-area {
+  flex-grow: 1;
+  height: $chat-textarea-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-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,14 +3,26 @@ 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(),
       ...{
+        title: '',
         items: [],
         onMessageSend: undefined,
       },
@@ -21,12 +33,44 @@ class Chat extends Widget<Properties> {
     $(this.element()).addClass(CHAT_CLASS);
 
     super._initMarkup();
+
+    this._renderHeader();
+    this._renderMessageList();
+    this._renderMessageBox();
+  }
+
+  _renderHeader(): void {
+    const { title } = this.option();
+
+    this._chatHeader = this._createComponent($('<div>'), ChatHeader, { title });
+
+    $(this._chatHeader.element()).appendTo(this.element());
+  }
+
+  _renderMessageList(): void {
+    const { items } = this.option();
+
+    this._messageList = this._createComponent($('<div>'), MessageList, {
+      items,
+      currentUserId: MOCK_CURRENT_USER_ID,
+    });
+
+    $(this._messageList.element()).appendTo(this.element());
+  }
+
+  _renderMessageBox(): void {
+    this._messageBox = this._createComponent($('<div>'), MessageBox, {});
+
+    $(this._messageBox.element()).appendTo(this.element());
   }
 
   _optionChanged(args: Record<string, unknown>): void {
-    const { name } = args;
+    const { name, value } = args;
 
     switch (name) {
+      case 'title':
+        this._chatHeader?.option(name, (value as string));
+        break;
       case 'items':
         break;
       case 'onMessageSend':

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

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import $ from '@js/core/renderer';
+import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+
+import Widget from '../widget';
+
+const CHAT_HEADER_CLASS = 'dx-chat-header';
+const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text';
+
+export interface ChatHeaderOptions extends WidgetOptions<ChatHeader> {
+  title?: string;
+}
+
+class ChatHeader extends Widget<ChatHeaderOptions> {
+  _getDefaultOptions(): ChatHeaderOptions {
+    return {
+      ...super._getDefaultOptions(),
+      ...{
+        title: '',
+      },
+    };
+  }
+
+  _initMarkup(): void {
+    $(this.element()).addClass(CHAT_HEADER_CLASS);
+
+    super._initMarkup();
+
+    const { title } = this.option();
+
+    $('<p>')
+      .addClass(CHAT_HEADER_TEXT_CLASS)
+      .text((title as any))
+      .appendTo(this.element());
+  }
+
+  _updateTitle(value: any): void {
+    $(`.${CHAT_HEADER_TEXT_CLASS}`).text(value);
+  }
+
+  _optionChanged(args: Record<string, unknown>): void {
+    const { name, value } = args;
+
+    switch (name) {
+      case 'title':
+        this._updateTitle(value);
+        break;
+      default:
+        super._optionChanged(args);
+    }
+  }
+}
+
+export default ChatHeader;