Chat FU: Add display flex to message bubble & refactor

Ruslan Farkhutdinov · Ruslan Farkhutdinov · commit 6cf248133de2 · 2025-10-29T15:18:20.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,
+  $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: $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,
+  $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;
+$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,
+  $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;
+$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,
+  $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;
+$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,8 +7,7 @@ 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';
@@ -83,8 +82,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();
 
@@ -143,11 +143,11 @@ class MessageBubble extends Widget<Properties> {
     if (attachments?.length && !isDeleted) {
       const $fileView = $('<div>');
       this._createComponent($fileView, FileView, {
-        files: attachments,
-        onDownload: onAttachmentDownload,
         activeStateEnabled,
         focusStateEnabled,
         hoverStateEnabled,
+        files: attachments,
+        onDownload: onAttachmentDownload,
       });
 
       this._$attachmentsContainer.append($fileView);
@@ -173,6 +173,7 @@ class MessageBubble extends Widget<Properties> {
         this._updateContent();
         this._renderAttachments();
         break;
+      case 'type':
       case 'template':
         this._updateContent();
         break;
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.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
@@ -5,6 +5,7 @@ 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';
@@ -165,6 +166,24 @@ 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 }] });
 

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;`