Chat MessageBox: Integrate Toolbar

e2e/testcafe-devextreme/tests/editors/chat/messageBox.ts

@@ -81,3 +81,24 @@ test('Chat: messagebox with editing preview', async (t) => {
     height: 600,
   }, '#chat');
 });
+
+test('Chat: messagebox with attach button', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+
+  await chat.focus();
+  await testScreenshot(t, takeScreenshot, 'Messagebox with attach button.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+    fileUploaderOptions: {},
+  }, '#chat');
+});

e2e/testcafe-devextreme/tests/editors/chat/messageList.ts

@@ -34,7 +34,7 @@ test('Messagelist empty view scenarios', async (t) => {
 
   await chat.option({
     width: 200,
-    height: 200,
+    height: 400,
     disabled: false,
   });
 

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

@@ -5,11 +5,28 @@
   border-top-style: solid;
 }
 
-.dx-chat-messagebox-input-container {
+.dx-chat-messagebox-textarea-container {
   display: flex;
   align-items: flex-end;
 }
 
-.dx-chat-messagebox-textarea {
+.dx-chat-messagebox-textarea.dx-textarea {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+
+  &.dx-texteditor {
+    > .dx-texteditor-container {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        padding: 0;
+      }
+    }
+  }
+}
+
+.dx-textarea-toolbar.dx-toolbar {
+  .dx-toolbar-items-container {
+    height: auto;
+  }
 }

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss

@@ -1,27 +1,39 @@
 @mixin chat-messagebox(
-  $padding,
-  $border-color,
+  $messagebox-padding,
+  $messagebox-border-color,
   $gap,
   $textarea-border-radius,
-  $button-gap
+  $textarea-padding,
+  $toolbar-min-height
 ) {
   .dx-chat-messagebox {
-    padding: $padding;
-    border-top-color: $border-color;
-    gap: $padding;
+    padding: $messagebox-padding;
+    border-top-color: $messagebox-border-color;
+    gap: $messagebox-padding;
   }
 
-  .dx-chat-messagebox-input-container {
+  .dx-chat-messagebox-textarea-container {
     gap: $gap;
   }
 
-  .dx-chat-messagebox-textarea {
-    &.dx-textarea.dx-texteditor {
+  .dx-chat-messagebox-textarea.dx-textarea {
+    gap: $gap;
+    padding: $textarea-padding;
+
+    &.dx-texteditor {
       border-radius: $textarea-border-radius;
+
+      &.dx-editor-outlined::before {
+        height: $textarea-border-radius;
+        border-bottom-left-radius: $textarea-border-radius;
+        border-bottom-right-radius: $textarea-border-radius;
+      }
     }
   }
 
-  .dx-chat-messagebox-button {
-    margin-bottom: $button-gap;
+  .dx-textarea-toolbar.dx-toolbar {
+    .dx-toolbar-items-container {
+      min-height: $toolbar-min-height;
+    }
   }
 }

packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss

@@ -8,7 +8,7 @@
   $underlined-top-padding,
 ) {
   .dx-textarea {
-    .dx-texteditor-input-container {
+    > .dx-texteditor-container > .dx-texteditor-input-container {
       margin: $input-container-margin;
     }
 

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

@@ -28,7 +28,8 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

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

@@ -14,9 +14,10 @@ $chat-bubble-container-gap: 4px !default;
 $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
-$chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-textarea-border-radius: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
-$chat-messagebox-buton-gap: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -72,6 +73,9 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-border-radius: 8px !default;
+  $chat-messagebox-textarea-padding: 12px !default;
+  $chat-messagebox-toolbar-min-height: 32px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -105,6 +109,9 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-border-radius: 8px !default;
+  $chat-messagebox-textarea-padding: 8px !default;
+  $chat-messagebox-toolbar-min-height: 24px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 

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

@@ -31,7 +31,8 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

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

@@ -15,8 +15,9 @@ $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
-$chat-messagebox-buton-gap: 0 !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -70,6 +71,8 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 18px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-padding: 9px !default;
+  $chat-messagebox-toolbar-min-height: 36px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -102,6 +105,8 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 14px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-padding: 5px !default;
+  $chat-messagebox-toolbar-min-height: 26px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 

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

@@ -29,7 +29,8 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

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

@@ -13,7 +13,8 @@ $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $base-border-radius * 2 !default;
-$chat-messagebox-buton-gap: null !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
@@ -64,12 +65,13 @@ $chat-confirmation-popup-toolbar-padding-inline: null !default;
 $chat-confirmation-popup-toolbar-gap: null !default;
 
 @if $size == "default" {
-  $chat-messagebox-buton-gap: 10px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 8px 16px !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-padding: 16px !default;
+  $chat-messagebox-toolbar-min-height: 36px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -100,12 +102,13 @@ $chat-confirmation-popup-toolbar-gap: null !default;
 }
 
 @else if $size == "compact" {
-  $chat-messagebox-buton-gap: 7px !default;
   $chat-bubble-border-radius: 4px !default;
   $chat-bubble-padding: 6px 8px !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-padding: 12px !default;
+  $chat-messagebox-toolbar-min-height: 28px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 

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

@@ -15,10 +15,11 @@ import type {
   MessageEnteredEvent,
   MessageUpdatedEvent,
   MessageUpdatingEvent,
-  Properties,
+  Properties as PublicProperties,
   TypingEndEvent,
   TypingStartEvent,
 } from '@js/ui/chat';
+import type { Properties as FileUploaderProperties } from '@js/ui/file_uploader';
 import { invokeConditionally } from '@ts/core/utils/conditional_invoke';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -28,8 +29,8 @@ import type {
   MessageEnteredEvent as MessageBoxMessageEnteredEvent,
   Properties as MessageBoxProperties,
   TypingStartEvent as MessageBoxTypingStartEvent,
-} from '@ts/ui/chat/messagebox';
-import MessageBox from '@ts/ui/chat/messagebox';
+} from '@ts/ui/chat/message_box/message_box';
+import MessageBox from '@ts/ui/chat/message_box/message_box';
 import type {
   EmptyViewTemplate,
   MessageEditingEvent,
@@ -42,6 +43,10 @@ import type { DataChange } from '@ts/ui/collection/collection_widget.base';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
+type Properties = PublicProperties & {
+  fileUploaderOptions?: FileUploaderProperties;
+};
+
 class Chat extends Widget<Properties> {
   _messageBox!: MessageBox;
 
@@ -76,34 +81,35 @@ class Chat extends Widget<Properties> {
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
-      showDayHeaders: true,
       activeStateEnabled: true,
+      alerts: [],
+      dataSource: null,
+      dayHeaderFormat: 'shortdate',
       editing: {
         allowUpdating: false,
         allowDeleting: false,
       },
+      emptyViewTemplate: null,
+      fileUploaderOptions: undefined,
       focusStateEnabled: true,
       hoverStateEnabled: true,
       items: [],
-      dataSource: null,
-      user: { id: new Guid().toString() },
-      dayHeaderFormat: 'shortdate',
       messageTemplate: null,
       messageTimestampFormat: 'shorttime',
-      emptyViewTemplate: null,
-      alerts: [],
+      reloadOnChange: true,
       showAvatar: true,
-      showUserName: true,
+      showDayHeaders: true,
       showMessageTimestamp: true,
+      showUserName: true,
       typingUsers: [],
+      user: { id: new Guid().toString() },
+      onMessageDeleted: undefined,
+      onMessageDeleting: undefined,
+      onMessageEditCanceled: undefined,
+      onMessageEditingStart: undefined,
       onMessageEntered: undefined,
-      reloadOnChange: true,
-      onTypingStart: undefined,
       onTypingEnd: undefined,
-      onMessageEditingStart: undefined,
-      onMessageEditCanceled: undefined,
-      onMessageDeleting: undefined,
-      onMessageDeleted: undefined,
+      onTypingStart: undefined,
     };
   }
 
@@ -408,6 +414,7 @@ class Chat extends Widget<Properties> {
   _renderMessageBox(): void {
     const {
       activeStateEnabled,
+      fileUploaderOptions,
       focusStateEnabled,
       hoverStateEnabled,
     } = this.option();
@@ -418,6 +425,7 @@ class Chat extends Widget<Properties> {
 
     const configuration: MessageBoxProperties = {
       activeStateEnabled,
+      fileUploaderOptions,
       focusStateEnabled,
       hoverStateEnabled,
       onMessageEntered: (e) => {
@@ -570,6 +578,7 @@ class Chat extends Widget<Properties> {
       case 'activeStateEnabled':
       case 'focusStateEnabled':
       case 'hoverStateEnabled':
+      case 'fileUploaderOptions':
         this._messageBox.option(name, value);
         break;
       case 'user': {