Chat: fix remarks after tribe testing (#29792)

EugeniyKiyashko · web-flow · commit baa0ad7b3af2 · 2025-05-06T22:14:12.000+04:00
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (fluent-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (generic-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (generic-light).png
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (generic-light-compact).png b/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (generic-light-compact).png
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (material-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -96,7 +96,7 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
   $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
 
-  $chat-confirmation-popup-toolbar-gap: 16px !default;
+  $chat-confirmation-popup-toolbar-gap: 8px !default;
 }
 
 @else if $size == "compact" {
@@ -129,5 +129,5 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
   $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
 
-  $chat-confirmation-popup-toolbar-gap: 8px !default;
+  $chat-confirmation-popup-toolbar-gap: 4px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -94,7 +94,7 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
 
   $chat-confirmation-popup-content-padding: 0 !default;
-  $chat-confirmation-popup-toolbar-gap: 16px !default;
+  $chat-confirmation-popup-toolbar-gap: 8px !default;
 }
 
 @else if $size == "compact" {
@@ -126,5 +126,5 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
 
   $chat-confirmation-popup-content-padding: $generic-popup-content-padding !default;
-  $chat-confirmation-popup-toolbar-gap: 8px !default;
+  $chat-confirmation-popup-toolbar-gap: 4px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -96,7 +96,7 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-confirmation-popup-content-padding: 16px !default;
   $chat-confirmation-popup-toolbar-padding-block: 0 16px !default;
   $chat-confirmation-popup-toolbar-padding-inline: 24px !default;
-  $chat-confirmation-popup-toolbar-gap: 16px !default;
+  $chat-confirmation-popup-toolbar-gap: 8px !default;
 }
 
 @else if $size == "compact" {
@@ -132,5 +132,5 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-confirmation-popup-content-padding: 8px !default;
   $chat-confirmation-popup-toolbar-padding-block: 0 8px !default;
   $chat-confirmation-popup-toolbar-padding-inline: 16px !default;
-  $chat-confirmation-popup-toolbar-gap: 8px !default;
+  $chat-confirmation-popup-toolbar-gap: 4px !default;
 }
diff --git a/packages/devextreme/js/__internal/ui/chat/editing_preview.ts b/packages/devextreme/js/__internal/ui/chat/editing_preview.ts
@@ -15,6 +15,9 @@ export const CHAT_EDITING_PREVIEW_TEXT_CLASS = 'dx-chat-editing-preview-text';
 export const CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS = 'dx-chat-editing-preview-cancel-button';
 
 export interface Properties extends DOMComponentProperties<EditingPreview> {
+  activeStateEnabled?: boolean;
+  focusStateEnabled?: boolean;
+  hoverStateEnabled?: boolean;
   text?: string;
   onCancel?: (e: ClickEvent) => void;
 }
@@ -27,6 +30,9 @@ class EditingPreview extends DOMComponent<EditingPreview, Properties> {
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
+      activeStateEnabled: true,
+      focusStateEnabled: true,
+      hoverStateEnabled: true,
       text: '',
       onCancel: undefined,
     };
@@ -78,13 +84,21 @@ class EditingPreview extends DOMComponent<EditingPreview, Properties> {
   }
 
   _renderCloseButton(): void {
-    const { onCancel } = this.option();
+    const {
+      onCancel,
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+    } = this.option();
 
     const $button = $('<div>')
       .addClass(CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS)
       .appendTo(this.element());
 
     this._closeButton = this._createComponent($button, Button, {
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
       icon: 'remove',
       type: 'normal',
       stylingMode: 'text',
@@ -126,6 +140,12 @@ class EditingPreview extends DOMComponent<EditingPreview, Properties> {
     const { name, value, previousValue } = args;
 
     switch (name) {
+      case 'activeStateEnabled':
+      case 'focusStateEnabled':
+      case 'hoverStateEnabled': {
+        this._closeButton.option(name, value);
+        break;
+      }
       case 'text':
         this._processTextUpdate(previousValue);
         break;
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebox.ts b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
@@ -115,9 +115,17 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
 
   _renderEditingPreview(): void {
     const $editingPreview = $('<div>').prependTo(this.element());
-    const { text } = this.option();
+    const {
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+      text,
+    } = this.option();
 
     this._editingPreview = this._createComponent($editingPreview, EditingPreview, {
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
       text,
       onCancel: () => this._cancelMessageEdit(),
     });
@@ -286,7 +294,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       case 'hoverStateEnabled': {
         this._button.option(name, value);
         this._textArea.option(name, value);
-
+        this._editingPreview?.option(name, value);
         break;
       }
       case 'onMessageEntered':
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebubble.ts b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
@@ -11,9 +11,12 @@ export const CHAT_MESSAGEBUBBLE_DELETED_CLASS = 'dx-chat-messagebubble-deleted';
 export const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
 export const CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS = `${ICON_CLASS}-cursorprohibition`;
 
+export const MESSAGE_DATA_KEY = 'dxMessageData';
+
 export interface Properties extends WidgetOptions<MessageBubble> {
   text?: string;
   isDeleted?: boolean;
+  isEdited?: boolean;
   template?: ((text: string, container: Element) => void) | null;
 }
 
@@ -23,6 +26,7 @@ class MessageBubble extends Widget<Properties> {
       ...super._getDefaultOptions(),
       text: '',
       isDeleted: false,
+      isEdited: false,
       template: null,
     };
   }
@@ -78,15 +82,28 @@ class MessageBubble extends Widget<Properties> {
     $bubbleContainer.text(text);
   }
 
+  _updateMessageData(property: string, value: string | boolean | undefined): void {
+    const messageData = this.$element().data(MESSAGE_DATA_KEY) || {};
+
+    messageData[property] = value;
+    this.$element().data(MESSAGE_DATA_KEY, messageData);
+  }
+
   _optionChanged(args: OptionChanged<Properties>): void {
-    const { name } = args;
+    const { name, value } = args;
 
     switch (name) {
       case 'text':
       case 'isDeleted':
+        this._updateMessageData(name, value);
+        this._updateContent();
+        break;
       case 'template':
         this._updateContent();
         break;
+      case 'isEdited':
+        this._updateMessageData(name, value);
+        break;
       default:
         super._optionChanged(args);
     }
diff --git a/packages/devextreme/js/__internal/ui/chat/messagegroup.ts b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts
@@ -12,11 +12,12 @@ import Widget from '@ts/core/widget/widget';
 
 import Avatar from './avatar';
 import type { Properties as MessageBubbleProperties } from './messagebubble';
-import MessageBubble, { CHAT_MESSAGEBUBBLE_CLASS } from './messagebubble';
+import MessageBubble, {
+  CHAT_MESSAGEBUBBLE_CLASS,
+  MESSAGE_DATA_KEY,
+} from './messagebubble';
 import type { MessageTemplate } from './messagelist';
 
-export const MESSAGE_DATA_KEY = 'dxMessageData';
-
 export const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
 export const CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS = 'dx-chat-messagegroup-alignment-start';
 export const CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS = 'dx-chat-messagegroup-alignment-end';
diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
@@ -28,13 +28,15 @@ import { getScrollTopMax } from '@ts/ui/scroll_view/utils/get_scroll_top_max';
 
 import type { DataChange } from '../collection/collection_widget.base';
 import { isElementVisible } from '../splitter/utils/layout';
-import MessageBubble, { CHAT_MESSAGEBUBBLE_CLASS } from './messagebubble';
+import MessageBubble, {
+  CHAT_MESSAGEBUBBLE_CLASS,
+  MESSAGE_DATA_KEY,
+} from './messagebubble';
 import type { MessageGroupAlignment } from './messagegroup';
 import MessageGroup, {
   CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS,
   CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS,
   CHAT_MESSAGEGROUP_CLASS,
-  MESSAGE_DATA_KEY,
 } from './messagegroup';
 import TypingIndicator from './typingindicator';
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.tests.js
@@ -37,6 +37,9 @@ QUnit.module('EditingPreview', moduleConfig, () => {
 
         QUnit.test('cancel button should be initialized with the corresponding configuration', function(assert) {
             const expectedOptions = {
+                activeStateEnabled: true,
+                focusStateEnabled: true,
+                hoverStateEnabled: true,
                 icon: 'remove',
                 type: 'normal',
                 stylingMode: 'text',
@@ -47,6 +50,23 @@ QUnit.module('EditingPreview', moduleConfig, () => {
                 assert.deepEqual(value, this.cancelEditButton.option(key), `${key} value is correct`);
             });
         });
+
+        QUnit.test('state options of cancel button should be updated at runtime', function(assert) {
+            const options = {
+                activeStateEnabled: false,
+                focusStateEnabled: false,
+                hoverStateEnabled: false,
+            };
+
+            this.instance.option({
+                ...options,
+                text: 'message text'
+            });
+
+            Object.entries(options).forEach(([key, value]) => {
+                assert.strictEqual(this.cancelEditButton.option(key), false, `cancel button ${key} option value is correct`);
+            });
+        });
     });
 
     QUnit.module('Text option', () => {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js
@@ -644,11 +644,17 @@ QUnit.module('MessageBox', moduleConfig, () => {
                     hoverStateEnabled: value,
                 };
 
-                this.reinit(options);
+                this.reinit({
+                    ...options,
+                    text: 'message text'
+                });
+
+                const editingPreview = this.getEditingPreviewInstance();
 
                 Object.entries(options).forEach(([key, value]) => {
                     assert.deepEqual(value, this.sendButton.option(key), `button ${key} value is correct`);
                     assert.deepEqual(value, this.textArea.option(key), `textarea ${key} value is correct`);
+                    assert.deepEqual(value, editingPreview.option(key), `editing preview ${key} value is correct`);
                 });
             });
 
@@ -659,11 +665,17 @@ QUnit.module('MessageBox', moduleConfig, () => {
                     hoverStateEnabled: value,
                 };
 
-                this.instance.option(options);
+                this.instance.option({
+                    ...options,
+                    text: 'message text'
+                });
+
+                const editingPreview = this.getEditingPreviewInstance();
 
                 Object.entries(options).forEach(([key, value]) => {
                     assert.deepEqual(value, this.sendButton.option(key), `button ${key} value is correct`);
                     assert.deepEqual(value, this.textArea.option(key), `textarea ${key} value is correct`);
+                    assert.deepEqual(value, editingPreview.option(key), `editing preview ${key} value is correct`);
                 });
             });
         });
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
@@ -1,7 +1,9 @@
 import $ from 'jquery';
 import messageLocalization from 'common/core/localization/message';
 
-import MessageBubble from '__internal/ui/chat/messagebubble';
+import MessageBubble, {
+    MESSAGE_DATA_KEY
+} from '__internal/ui/chat/messagebubble';
 
 const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
 
@@ -61,6 +63,20 @@ QUnit.module('MessageBubble', moduleConfig, () => {
             assert.strictEqual(this.$element.text(), messageLocalization.format('dxChat-deletedMessageText'));
         });
 
+        [
+            { name: 'text', newValue: 'updated message text' },
+            { name: 'isDeleted', newValue: true },
+            { name: 'isEdited', newValue: true },
+        ].forEach(({ name, newValue }) => {
+            QUnit.test(`message data should be updated after changing ${name} option at runtime`, function(assert) {
+                this.reinit({});
+
+                this.instance.option(name, newValue);
+
+                assert.strictEqual(this.instance.$element().data(MESSAGE_DATA_KEY)[name], newValue, 'message data is updated');
+            });
+        });
+
         QUnit.test('template render function should be called if it has been passed', function(assert) {
             const templateSpy = sinon.spy();
             const messageText = 'message text';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js
@@ -1403,6 +1403,7 @@ testComponentDefaults(ChatMessageBubble,
     {
         text: '',
         isDeleted: false,
+        isEdited: false,
     }
 );
 
@@ -1446,6 +1447,9 @@ testComponentDefaults(ChatTypingIndicator,
 testComponentDefaults(ChatEditingPreview,
     {},
     {
+        activeStateEnabled: true,
+        focusStateEnabled: true,
+        hoverStateEnabled: true,
         text: '',
         onCancel: undefined,
     }

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ $chat-confirmation-popup-toolbar-gap: null !default;`
`96`	`96`	`$chat-typingindicator-padding: $chat-messagegroup-padding !default;`
`97`	`97`	`$chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;`
`98`	`98`
`99`		`- $chat-confirmation-popup-toolbar-gap: 16px !default;`
	`99`	`+ $chat-confirmation-popup-toolbar-gap: 8px !default;`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`@else if $size == "compact" {`
`@@ -129,5 +129,5 @@ $chat-confirmation-popup-toolbar-gap: null !default;`
`129`	`129`	`$chat-typingindicator-padding: $chat-messagegroup-padding !default;`
`130`	`130`	`$chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;`
`131`	`131`
`132`		`- $chat-confirmation-popup-toolbar-gap: 8px !default;`
	`132`	`+ $chat-confirmation-popup-toolbar-gap: 4px !default;`
`133`	`133`	`}`
Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ $chat-confirmation-popup-toolbar-gap: null !default;`
`94`	`94`	`$chat-typingindicator-padding: $chat-messagegroup-padding !default;`
`95`	`95`
`96`	`96`	`$chat-confirmation-popup-content-padding: 0 !default;`
`97`		`- $chat-confirmation-popup-toolbar-gap: 16px !default;`
	`97`	`+ $chat-confirmation-popup-toolbar-gap: 8px !default;`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`@else if $size == "compact" {`
`@@ -126,5 +126,5 @@ $chat-confirmation-popup-toolbar-gap: null !default;`
`126`	`126`	`$chat-typingindicator-padding: $chat-messagegroup-padding !default;`
`127`	`127`
`128`	`128`	`$chat-confirmation-popup-content-padding: $generic-popup-content-padding !default;`
`129`		`- $chat-confirmation-popup-toolbar-gap: 8px !default;`
	`129`	`+ $chat-confirmation-popup-toolbar-gap: 4px !default;`
`130`	`130`	`}`