Chat FU: Add display flex to message bubble & refactor

Ruslan Farkhutdinov · Ruslan Farkhutdinov · commit af49a1627b4d · 2025-10-29T18:18:42.000+02:00
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
@@ -49,12 +49,10 @@
 
 @mixin chat-fileview(
   $chat-file-view-items-gap,
-  $chat-file-view-margin-top,
   $chat-file-container-width,
 ) {
   .dx-chat-file-view {
     gap: $chat-file-view-items-gap;
-    margin-top: $chat-file-view-margin-top;
     grid-template-columns: repeat(auto-fit, $chat-file-container-width);
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
@@ -9,6 +9,8 @@ $chat-messagebubble-max-height-image: 400px !default;
 }
 
 .dx-chat-messagebubble {
+  display: flex;
+  flex-direction: column;
   width: auto;
   word-break: break-word;
   white-space: break-spaces;
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss
@@ -8,6 +8,7 @@
   $bubble-container-gap,
   $bubble-delete-gap,
   $bubble-delete-icon-size,
+  $chat-bubble-gap,
 ) {
   .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
@@ -16,6 +17,7 @@
   .dx-chat-messagebubble {
     padding: $padding;
     border-radius: $border-radius;
+    gap: $chat-bubble-gap;
 
     &.dx-chat-messagebubble-deleted {
       .dx-chat-messagebubble-content {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -30,7 +30,6 @@
 );
 @include chat-fileview(
   $chat-file-view-items-gap,
-  $chat-file-view-margin-top,
   $chat-file-container-width,
 );
 @include chat-alertlist(
@@ -58,6 +57,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -74,7 +74,7 @@ $chat-file-secondary-font-size: 10px !default;
 $chat-file-base-section-gap: 4px !default;
 $chat-file-file-size-max-width: 4em !default;
 $chat-file-view-items-gap: 8px !default;
-$chat-file-view-margin-top: 8px !default;
+$chat-bubble-gap: 8px !default;
 
 @if $size == "default" {
   $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -33,7 +33,6 @@
 );
 @include chat-fileview(
   $chat-file-view-items-gap,
-  $chat-file-view-margin-top,
   $chat-file-container-width,
 );
 @include chat-alertlist(
@@ -61,6 +60,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -73,7 +73,7 @@ $chat-file-secondary-font-size: 10px !default;
 $chat-file-base-section-gap: 4px !default;
 $chat-file-file-size-max-width: 4em !default;
 $chat-file-view-items-gap: 8px !default;
-$chat-file-view-margin-top: 8px !default;
+$chat-bubble-gap: 8px !default;
 
 @if $size == "default" {
   $chat-bubble-padding: 8px 12px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -31,7 +31,6 @@
 );
 @include chat-fileview(
   $chat-file-view-items-gap,
-  $chat-file-view-margin-top,
   $chat-file-container-width,
 );
 @include chat-alertlist(
@@ -59,6 +58,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -71,7 +71,7 @@ $chat-file-secondary-font-size: 10px !default;
 $chat-file-base-section-gap: 4px !default;
 $chat-file-file-size-max-width: 4em !default;
 $chat-file-view-items-gap: 8px !default;
-$chat-file-view-margin-top: 8px !default;
+$chat-bubble-gap: 8px !default;
 
 @if $size == "default" {
   $chat-bubble-border-radius: 8px !default;
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebubble.ts b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
@@ -7,13 +7,11 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import { ICON_CLASS } from '@ts/core/utils/m_icon';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
-
-import FileView from './file_view/file_view';
+import FileView from '@ts/ui/chat/file_view/file_view';
 
 export const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
 export const CHAT_MESSAGEBUBBLE_DELETED_CLASS = 'dx-chat-messagebubble-deleted';
 export const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
-export const CHAT_MESSAGEBUBBLE_ATTACHMENTS_CLASS = 'dx-chat-messagebubble-attachments';
 export const CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS = `${ICON_CLASS}-cursorprohibition`;
 export const CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS = 'dx-has-image';
 export const CHAT_MESSAGEBUBBLE_IMAGE_CLASS = 'dx-chat-messagebubble-image';
@@ -35,7 +33,7 @@ export interface Properties extends WidgetOptions<MessageBubble> {
 class MessageBubble extends Widget<Properties> {
   _$content!: dxElementWrapper;
 
-  _$attachmentsContainer!: dxElementWrapper;
+  _$attachments?: dxElementWrapper;
 
   _getDefaultOptions(): Properties {
     return {
@@ -68,9 +66,14 @@ class MessageBubble extends Widget<Properties> {
   }
 
   _renderAttachmentsContainer(): void {
-    this._$attachmentsContainer = $('<div>')
-      .addClass(CHAT_MESSAGEBUBBLE_ATTACHMENTS_CLASS)
-      .appendTo(this.$element());
+    const { attachments, isDeleted } = this.option();
+
+    this._$attachments?.remove();
+    this._$attachments = undefined;
+
+    if (attachments?.length && !isDeleted) {
+      this._$attachments = $('<div>').appendTo(this.$element());
+    }
   }
 
   _updateContent(): void {
@@ -83,8 +86,9 @@ class MessageBubble extends Widget<Properties> {
       isDeleted = false,
     } = this.option();
 
-    this.$element().removeClass(CHAT_MESSAGEBUBBLE_DELETED_CLASS);
-    this.$element().removeClass(CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS);
+    this.$element()
+      .removeClass(CHAT_MESSAGEBUBBLE_DELETED_CLASS)
+      .removeClass(CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS);
 
     this._$content.empty();
 
@@ -130,27 +134,27 @@ class MessageBubble extends Widget<Properties> {
 
   _renderAttachments(): void {
     const {
-      isDeleted,
       attachments,
       activeStateEnabled,
       focusStateEnabled,
       hoverStateEnabled,
       onAttachmentDownload,
     } = this.option();
 
-    this._$attachmentsContainer.empty();
+    if (!this._$attachments) {
+      return;
+    }
 
-    if (attachments?.length && !isDeleted) {
-      const $fileView = $('<div>');
-      this._createComponent($fileView, FileView, {
-        files: attachments,
-        onDownload: onAttachmentDownload,
+    this._$attachments.empty();
+
+    if (attachments?.length) {
+      this._createComponent(this._$attachments, FileView, {
         activeStateEnabled,
         focusStateEnabled,
         hoverStateEnabled,
+        files: attachments,
+        onDownload: onAttachmentDownload,
       });
-
-      this._$attachmentsContainer.append($fileView);
     }
   }
 
@@ -171,7 +175,11 @@ class MessageBubble extends Widget<Properties> {
       case 'isDeleted':
         this._updateMessageData(name, value);
         this._updateContent();
-        this._renderAttachments();
+        this._renderAttachmentsContainer();
+        break;
+      case 'type':
+        this._updateContent();
+        this._renderAttachmentsContainer();
         break;
       case 'template':
         this._updateContent();
@@ -181,6 +189,7 @@ class MessageBubble extends Widget<Properties> {
         break;
       case 'onAttachmentDownload':
       case 'attachments':
+        this._renderAttachmentsContainer();
         this._renderAttachments();
         break;
       default:
diff --git a/packages/devextreme/js/__internal/ui/chat/messagegroup.ts b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts
@@ -125,14 +125,16 @@ class MessageGroup extends Widget<Properties> {
   _getMessageBubbleOptions(message: Message): MessageBubbleProperties {
     const { messageTemplate, onAttachmentDownload } = this.option();
 
+    const { isDeleted, type, attachments } = message;
+
     const options: MessageBubbleProperties = {
-      isDeleted: message.isDeleted,
-      type: message.type,
-      attachments: message.attachments,
+      isDeleted,
+      type,
+      attachments,
       onAttachmentDownload,
     };
 
-    if (message.type === 'image') {
+    if (type === 'image') {
       options.alt = (message as ImageMessage).alt;
       options.src = (message as ImageMessage).src;
     } else {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js
@@ -7,9 +7,10 @@ import MessageBubble, {
     CHAT_MESSAGEBUBBLE_DELETED_CLASS,
     CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS,
     CHAT_MESSAGEBUBBLE_IMAGE_CLASS,
-    CHAT_MESSAGEBUBBLE_ATTACHMENTS_CLASS
 } from '__internal/ui/chat/messagebubble';
 
+import { CHAT_FILE_VIEW_CLASS } from '__internal/ui/chat/file_view/file_view';
+
 const moduleConfig = {
     beforeEach: function() {
         const init = (options = {}) => {
@@ -40,8 +41,9 @@ QUnit.module('MessageBubble', moduleConfig, () => {
             assert.strictEqual($content.parent().is(this.$element), true, 'content element is direct child of root element');
         });
 
-        QUnit.test('root element should have a child attachments element with correct class', function(assert) {
-            const $content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_ATTACHMENTS_CLASS}`);
+        QUnit.test('root element should have a child attachments element with correct class if attachments provided', function(assert) {
+            this.reinit({ attachments: [{ name: 'text.txt', size: 1024 }] });
+            const $content = this.$element.find(`.${CHAT_FILE_VIEW_CLASS}`);
 
             assert.strictEqual($content.length, 1, 'attachments element exist');
             assert.strictEqual($content.parent().is(this.$element), true, 'attachments element is direct child of root element');
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
@@ -3,8 +3,8 @@ import messageLocalization from 'common/core/localization/message';
 
 import MessageBubble, {
     MESSAGE_DATA_KEY,
-    CHAT_MESSAGEBUBBLE_ATTACHMENTS_CLASS,
     CHAT_MESSAGEBUBBLE_CONTENT_CLASS,
+    CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS
 } from '__internal/ui/chat/messagebubble';
 import { BUTTON_CLASS } from '__internal/ui/button/button';
 import { CHAT_FILE_VIEW_CLASS } from '__internal/ui/chat/file_view/file_view';
@@ -16,7 +16,7 @@ const moduleConfig = {
             this.instance = new MessageBubble($('#component'), options);
             this.$element = $(this.instance.$element());
             this.$content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
-            this.$attachments = this.$element.find(`.${CHAT_MESSAGEBUBBLE_ATTACHMENTS_CLASS}`);
+            this.$getAttachments = () => this.$element.find(`.${CHAT_FILE_VIEW_CLASS}`);
             this.getDownloadButton = () => this.$element.find(`.${BUTTON_CLASS}`);
         };
 
@@ -165,10 +165,28 @@ QUnit.module('MessageBubble', moduleConfig, () => {
             assert.strictEqual($bubbleContentChild.text(), 'template text: text', 'content text is correct');
         });
 
+        QUnit.test('should remove image class when message type changes from image to text', function(assert) {
+            const imageSrc = 'test.png';
+
+            this.reinit({ type: 'image', src: imageSrc });
+
+            assert.ok(
+                this.$element.hasClass(CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS),
+                'initially has image class'
+            );
+
+            this.instance.option({ type: 'text' });
+
+            assert.notOk(
+                this.$element.hasClass(CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS),
+                'image class is removed after changing type to text'
+            );
+        });
+
         QUnit.test('should render FileView when attachments passed', function(assert) {
             this.reinit({ attachments: [{ name: 'text.txt', size: 1024 }] });
 
-            const $fileView = this.$attachments.find(`.${CHAT_FILE_VIEW_CLASS}`);
+            const $fileView = this.$getAttachments();
             const $file = $fileView.find(`.${CHAT_FILE_CLASS}`);
             const $fileName = $file.find(`.${CHAT_FILE_NAME_CLASS}`);
             const $fileSize = $file.find(`.${CHAT_FILE_SIZE_CLASS}`);
@@ -178,10 +196,16 @@ QUnit.module('MessageBubble', moduleConfig, () => {
             assert.strictEqual($fileSize.text(), '1 KB', 'size rendered correctly');
         });
 
+        QUnit.test('should not render attachments container when no attachments passed', function(assert) {
+            this.reinit({ attachments: [] });
+
+            assert.strictEqual(this.$getAttachments().length, 0, 'attachments container is empty');
+        });
+
         QUnit.test('should not render FileView when no attachments passed', function(assert) {
             this.reinit({ attachments: [] });
 
-            assert.strictEqual(this.$attachments.children().length, 0, 'attachments container is empty');
+            assert.strictEqual(this.$getAttachments().children().length, 0, 'attachments container is empty');
         });
 
         QUnit.test('should not render FileView when isDeleted is true', function(assert) {
@@ -190,18 +214,18 @@ QUnit.module('MessageBubble', moduleConfig, () => {
                 attachments: [{ name: 'text.txt', size: 1024 }],
             });
 
-            assert.strictEqual(this.$attachments.children().length, 0, 'no attachments rendered for deleted message');
+            assert.strictEqual(this.$getAttachments().children().length, 0, 'no attachments rendered for deleted message');
         });
 
         QUnit.test('should render attachments in runtime', function(assert) {
             const attachments = [{ name: 'text.txt', size: 1024 }];
-            let $fileView = this.$attachments.find(`.${CHAT_FILE_VIEW_CLASS}`);
+            let $fileView = this.$getAttachments();
 
             assert.strictEqual($fileView.length, 0, 'FileView is empty initially');
 
             this.instance.option({ attachments });
 
-            $fileView = this.$attachments.find(`.${CHAT_FILE_VIEW_CLASS}`);
+            $fileView = this.$getAttachments();
 
             assert.strictEqual($fileView.length, 1, 'FileView is rendered inside attachments container');
         });

Original file line number	Diff line number	Diff line change
`@@ -49,12 +49,10 @@`
`49`	`49`
`50`	`50`	`@mixin chat-fileview(`
`51`	`51`	`$chat-file-view-items-gap,`
`52`		`- $chat-file-view-margin-top,`
`53`	`52`	`$chat-file-container-width,`
`54`	`53`	`) {`
`55`	`54`	`.dx-chat-file-view {`
`56`	`55`	`gap: $chat-file-view-items-gap;`
`57`		`- margin-top: $chat-file-view-margin-top;`
`58`	`56`	`grid-template-columns: repeat(auto-fit, $chat-file-container-width);`
`59`	`57`	`}`
`60`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ $chat-messagebubble-max-height-image: 400px !default;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.dx-chat-messagebubble {`
	`12`	`+ display: flex;`
	`13`	`+ flex-direction: column;`
`12`	`14`	`width: auto;`
`13`	`15`	`word-break: break-word;`
`14`	`16`	`white-space: break-spaces;`