Chat: Add MessageBox's height restrictions and scrolling (#31578)

marker-dao · marker dao ® · web-flow · commit 002885aef3d9 · 2025-11-05T10:00:55.000+01:00
Co-authored-by: marker dao ® &lt;youdontknow@marker-dao.eth&gt;
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent.blue.light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent.blue.light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent.blue.light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent.blue.light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/messageGroup.ts b/e2e/testcafe-devextreme/tests/editors/chat/messageGroup.ts
@@ -9,10 +9,11 @@ import {
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
-import { appendElementTo, insertStylesheetRulesToPage, setStyleAttribute } from '../../../helpers/domUtils';
+import { appendElementTo, setStyleAttribute } from '../../../helpers/domUtils';
 import asyncForEach from '../../../helpers/asyncForEach';
 
 const AVATAR_SELECTOR = '.dx-avatar';
+const CHAT_WRAPPER_STYLES = 'display: flex; flex-wrap: wrap; gap: 2px; width: 1270px; padding: 20px; transform: scale(0.9);';
 
 fixture.disablePageReloads`ChatMessageGroup`
   .page(url(__dirname, '../../container.html'));
@@ -111,11 +112,9 @@ test('Messagegroup scenarios in disabled state', async (t) => {
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
 
-  await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 2px; padding: 20px; }');
-
   await asyncForEach([1, 2, 3, 4], async (bubbleCount, idx) => {
     const chatId = `#chat_${idx}`;
-    await appendElementTo('#container', 'div', `chat_${idx}`);
+    await appendElementTo('#chat-wrapper', 'div', `chat_${idx}`);
 
     const items = generateMessages(bubbleCount, userFirst, userSecond, false, false, 4, 2);
 
@@ -131,11 +130,14 @@ test('Messagegroup scenarios in disabled state', async (t) => {
     await chat.repaint();
   });
 
-  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#chat-wrapper' });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat-wrapper');
+  await setStyleAttribute(Selector('#chat-wrapper'), CHAT_WRAPPER_STYLES);
 });
 
 test('Messagegroup scenarios in RTL mode', async (t) => {
@@ -144,11 +146,9 @@ test('Messagegroup scenarios in RTL mode', async (t) => {
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
 
-  await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 2px; padding: 20px; }');
-
   await asyncForEach([1, 2, 3, 4], async (bubbleCount, idx) => {
     const chatId = `#chat_${idx}`;
-    await appendElementTo('#container', 'div', `chat_${idx}`);
+    await appendElementTo('#chat-wrapper', 'div', `chat_${idx}`);
 
     const items = generateMessages(bubbleCount, userFirst, userSecond, false, false, 4, 2);
 
@@ -164,11 +164,14 @@ test('Messagegroup scenarios in RTL mode', async (t) => {
     await chat.repaint(); // NOTE: WA to make it stable in Material theme.
   });
 
-  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in RTL mode.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in RTL mode.png', { element: '#chat-wrapper' });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat-wrapper');
+  await setStyleAttribute(Selector('#chat-wrapper'), CHAT_WRAPPER_STYLES);
 });
 
 test('MessageGroup with edited messages', async (t) => {
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/messageList.ts b/e2e/testcafe-devextreme/tests/editors/chat/messageList.ts
@@ -133,7 +133,7 @@ test('Messagelist should scrolled to the latest messages after being rendered in
 
   return createWidget('dxTabPanel', {
     width: 400,
-    height: 500,
+    height: 600,
     deferRendering: true,
     templatesRenderAsynchronously: true,
     dataSource: [{
diff --git a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
@@ -100,6 +100,8 @@
 }
 
 .dx-fileuploader-file-container {
+  display: flex;
+  align-items: center;
   width: 100%;
   padding: 4px 0 4px;
 
@@ -189,7 +191,7 @@
 }
 
 .dx-fileuploader-file-size {
-  margin-left: 4px;
+  padding-left: 4px;
   float: left;
   vertical-align: super;
   font-size: 10px;
@@ -221,7 +223,7 @@
     }
 
     .dx-fileuploader-file-size {
-      margin-right: 4px;
+      padding-right: 4px;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
@@ -21,6 +21,10 @@
       .dx-placeholder::before {
         padding: 0;
       }
+
+      .dx-texteditor-input {
+        max-height: 7.1em;
+      }
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss
@@ -2,6 +2,7 @@
 
 .dx-chat-messagelist {
   flex-grow: 1;
+  min-height: 3.57em;
   overflow: hidden;
 
   .dx-scrollable-container {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_index.scss
@@ -3,8 +3,9 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  min-width: 20em;
-  min-height: 20em;
+  min-width: 22.45em;
+  min-height: 38em;
+  overflow-y: auto;
 
   &.dx-state-disabled {
     opacity: 0.5;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss
@@ -101,7 +101,6 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
   }
 
   .dx-fileuploader-file-container {
-    display: flex;
     padding: $fluent-fileuploader-file-container-padding;
     margin-bottom: 4px;
     border-radius: $fluent-fileuploader-files-container-rounding;
@@ -156,7 +155,7 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
 
 .dx-fileuploader-file-size {
   float: right;
-  margin: $fluent-fileuploader-file-size-margin;
+  padding: $fluent-fileuploader-file-size-margin;
   color: $base-label-color;
 }
 
diff --git a/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts b/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts
@@ -94,7 +94,7 @@ class ChatTextArea extends TextArea<Properties> {
       placeholder: messageLocalization.format('dxChat-textareaPlaceholder'),
       autoResizeEnabled: true,
       valueChangeEvent: 'input',
-      maxHeight: '16em',
+      maxHeight: '53.86em',
       fileUploaderOptions: undefined,
     };
   }
@@ -185,8 +185,7 @@ class ChatTextArea extends TextArea<Properties> {
 
     // eslint-disable-next-line no-restricted-globals
     this._informerTimeoutId = setTimeout(() => {
-      this._cleanInformer();
-      this._updateInputHeight();
+      this._processInformerCleaning();
     }, INFORMER_DELAY);
   }
 
@@ -238,13 +237,10 @@ class ChatTextArea extends TextArea<Properties> {
         hoverStateEnabled,
         elementAttr: { class: CHAT_TEXT_AREA_ATTACH_BUTTON },
         icon: 'attach',
-        onClick: (): void => {
-          this._cleanInformer();
-          this._updateInputHeight();
-        },
         onInitialized: (e: InitializedEvent): void => {
           this._attachButton = e.component;
         },
+        onClick: (): void => this._processInformerCleaning(),
       },
     } as ToolbarItem;
 
@@ -449,10 +445,10 @@ class ChatTextArea extends TextArea<Properties> {
         this._sendButton?.option(name, value);
         break;
 
-      case 'text': {
+      case 'text':
+        this._processInformerCleaning();
         this._toggleButtonDisableState();
         break;
-      }
 
       case 'onSend':
         this._createSendAction();
@@ -461,6 +457,7 @@ class ChatTextArea extends TextArea<Properties> {
       case 'fileUploaderOptions':
         this._handleFileUploaderOptionsChange(args);
         break;
+
       default:
         super._optionChanged(args);
     }
@@ -516,6 +513,11 @@ class ChatTextArea extends TextArea<Properties> {
     this._$fileUploader = null;
   }
 
+  _processInformerCleaning(): void {
+    this._cleanInformer();
+    this._updateInputHeight();
+  }
+
   _cleanInformer(): void {
     this._clearInformerTimeout();
     this._removeInformer();
diff --git a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts
@@ -72,6 +72,8 @@ const FILEUPLOADER_INVALID_CLASS = 'dx-fileuploader-invalid';
 
 const FILEUPLOADER_AFTER_LOAD_DELAY = 400;
 const DRAG_EVENT_DELTA = 1;
+const GAP = 10;
+const ETALON_TEXT = '1023 bytes';
 
 const DIALOG_TRIGGER_EVENT_NAMESPACE = 'dxFileUploaderDialogTrigger';
 
@@ -791,11 +793,13 @@ class FileUploader extends Editor<FileUploaderProperties> {
     const iconWidth = _showFileIcon ? getOuterWidth($icon) : 0;
 
     const prevFileSize = $fileSize?.text();
-    $fileSize?.text('1000 Mb');
+    $fileSize?.text(ETALON_TEXT);
     const fileSizeWidth = getWidth($fileSize);
     $fileSize?.text(prevFileSize ?? '');
 
-    this._$filesContainer?.find(`.${FILEUPLOADER_FILE_NAME_CLASS}`).css('maxWidth', filesContainerWidth - buttonsWidth - fileSizeWidth - iconWidth);
+    const maxWidth = filesContainerWidth - buttonsWidth - fileSizeWidth - iconWidth - GAP;
+
+    this._$filesContainer?.find(`.${FILEUPLOADER_FILE_NAME_CLASS}`).css('maxWidth', maxWidth);
   }
 
   _renderFileButtons(file: FileUploaderItem, $container: dxElementWrapper): void {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.tests.js
@@ -84,7 +84,7 @@ QUnit.module('ChatTextArea', moduleConfig, () => {
                 placeholder: 'Type a message',
                 autoResizeEnabled: true,
                 fileUploaderOptions: undefined,
-                maxHeight: '16em',
+                maxHeight: '53.86em',
                 valueChangeEvent: 'input',
             };
 
@@ -544,7 +544,7 @@ QUnit.module('ChatTextArea', moduleConfig, () => {
                 const $informer = this.$element.find(`.${INFORMER_CLASS}`);
 
                 assert.strictEqual($informer.length, 0, 'informer is not rendered');
-                assert.strictEqual(this.getInformer(), undefined, 'informer instance is undefined');
+                assert.strictEqual(this.getInformer(), null, 'informer instance is not defined');
             });
 
             QUnit.test('informer should be rendered when _showInformer is called', function(assert) {
@@ -770,5 +770,64 @@ QUnit.module('ChatTextArea', moduleConfig, () => {
                 assert.strictEqual(this.sendButton.option('disabled'), true, 'send button is disabled after file removal');
             });
         });
+
+        QUnit.module('Integration with text option', () => {
+            QUnit.test('informer should be hidden when text option is changed', function(assert) {
+                this.showInformer('Test error message');
+
+                assert.strictEqual(this.$element.find(`.${INFORMER_CLASS}`).length, 1, 'informer is visible initially');
+
+                this.instance.option('text', 'new text');
+
+                assert.strictEqual(this.$element.find(`.${INFORMER_CLASS}`).length, 0, 'informer is hidden after text change');
+                assert.strictEqual(this.getInformer(), null, 'informer instance is null');
+            });
+
+            QUnit.test('informer should be hidden when text is typed in textarea', function(assert) {
+                this.showInformer('Test error message');
+
+                assert.strictEqual(this.$element.find(`.${INFORMER_CLASS}`).length, 1, 'informer is visible initially');
+
+                this.typeText('new text');
+
+                assert.strictEqual(this.$element.find(`.${INFORMER_CLASS}`).length, 0, 'informer is hidden after typing');
+                assert.strictEqual(this.getInformer(), null, 'informer instance is null');
+            });
+
+            QUnit.test('element height should be recalculated when informer is hidden by text change', function(assert) {
+                const initialHeight = this.$element.outerHeight();
+
+                this.showInformer('Test error message');
+
+                this.instance.option('text', 'new text');
+
+                const heightAfterTextChange = this.$element.outerHeight();
+
+                assert.strictEqual(heightAfterTextChange, initialHeight, 'element height returned to initial value after informer is hidden');
+            });
+
+            QUnit.test('informer timeout should be cleared when text option is changed', function(assert) {
+                this.showInformer('Test error message');
+
+                const timeoutId = this.instance._informerTimeoutId;
+
+                assert.notStrictEqual(timeoutId, undefined, 'timeout is set');
+
+                this.instance.option('text', 'new text');
+
+                assert.strictEqual(this.instance._informerTimeoutId, undefined, 'timeout is cleared');
+            });
+
+            QUnit.test('informer should be hidden when text is cleared', function(assert) {
+                this.typeText('new text');
+                this.showInformer('Test error message');
+
+                assert.strictEqual(this.$element.find(`.${INFORMER_CLASS}`).length, 1, 'informer is visible initially');
+
+                this.instance.option('text', '');
+
+                assert.strictEqual(this.$element.find(`.${INFORMER_CLASS}`).length, 0, 'informer is hidden after text is cleared');
+            });
+        });
     });
 });

Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,8 @@`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`.dx-fileuploader-file-container {`
	`103`	`+ display: flex;`
	`104`	`+ align-items: center;`
`103`	`105`	`width: 100%;`
`104`	`106`	`padding: 4px 0 4px;`
`105`	`107`
`@@ -189,7 +191,7 @@`
`189`	`191`	`}`
`190`	`192`
`191`	`193`	`.dx-fileuploader-file-size {`
`192`		`- margin-left: 4px;`
	`194`	`+ padding-left: 4px;`
`193`	`195`	`float: left;`
`194`	`196`	`vertical-align: super;`
`195`	`197`	`font-size: 10px;`
`@@ -221,7 +223,7 @@`
`221`	`223`	`}`
`222`	`224`
`223`	`225`	`.dx-fileuploader-file-size {`
`224`		`- margin-right: 4px;`
	`226`	`+ padding-right: 4px;`
`225`	`227`	`}`
`226`	`228`	`}`
`227`	`229`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,10 @@`
`21`	`21`	`.dx-placeholder::before {`
`22`	`22`	`padding: 0;`
`23`	`23`	`}`
	`24`	`+`
	`25`	`+ .dx-texteditor-input {`
	`26`	`+ max-height: 7.1em;`
	`27`	`+ }`
`24`	`28`	`}`
`25`	`29`	`}`
`26`	`30`	`}`