Chat: implement edited text element render (DevExpress#29759)

Author: Zedwag

e2e/testcafe-devextreme/tests/chat/data/index.ts

@@ -40,6 +40,7 @@ export const generateMessages = (
   useLineBreaks = false,
   coefficient = 4,
   n = 1,
+  isEdited = false,
 ): any => {
   const messages = Array.from({ length: length * n }, (_, i) => {
     const text = useLongText
@@ -58,6 +59,7 @@ export const generateMessages = (
       timestamp,
       author: getAuthor(),
       text,
+      isEdited,
     };
 
     return item;

e2e/testcafe-devextreme/tests/chat/etalons/MessageGroup with edited messages (fluent-blue-light).png

@@ -170,3 +170,26 @@ test('Messagegroup scenarios in RTL mode', async (t) => {
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 });
+
+test('MessageGroup with edited messages', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'MessageGroup with edited messages.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+  const items = generateMessages(2, userFirst, userSecond, false, false, 2, 2, true);
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+    user: userSecond,
+    items,
+  }, '#chat');
+});

e2e/testcafe-devextreme/tests/chat/etalons/MessageGroup with edited messages (generic-light).png

@@ -16,6 +16,11 @@
   @include dx-overflow();
 }
 
+.dx-chat-message-edited {
+  display: flex;
+  align-items: center;
+}
+
 .dx-chat-messagegroup-time {
   white-space: nowrap;
 }

e2e/testcafe-devextreme/tests/chat/etalons/MessageGroup with edited messages (material-blue-light).png

@@ -1,3 +1,5 @@
+@use "../../../icons" as *;
+
 @mixin chat-messagegroup(
   $messagegroup-gap,
   $messagegroup-start-template,
@@ -6,7 +8,9 @@
   $information-font-size,
   $information-author-name-color,
   $information-timestamp-color,
-  $information-gap
+  $information-gap,
+  $information-icon-size,
+  $information-edited-gap,
 ) {
   .dx-chat-messagegroup {
     row-gap: $messagegroup-gap;
@@ -38,4 +42,15 @@
     font-size: $information-font-size;
     color: $information-author-name-color;
   }
+
+  .dx-chat-message-edited {
+    font-size: $information-font-size;
+    color: $information-author-name-color;
+    column-gap: $information-edited-gap;
+
+    .dx-chat-message-edited-icon {
+      @include dx-icon(edit);
+      @include dx-icon-sizing($information-icon-size);
+    }
+  }
 }

e2e/testcafe-devextreme/tests/chat/messageGroup.ts

@@ -48,6 +48,8 @@
   $chat-information-author-name-color,
   $chat-information-timestamp-color,
   $chat-information-gap,
+  $chat-information-icon-size,
+  $chat-information-edited-gap,
 );
 @include chat-messagelist-empty(
   $chat-messagelist-padding,

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

@@ -24,6 +24,8 @@ $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
 $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
+$chat-information-icon-size: 12px !default;
+$chat-information-edited-gap: 2px !default;
 
 $chat-alerts-padding-block: null !default;
 $chat-alerts-padding-inline: 8px !default;

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

@@ -51,6 +51,8 @@
   $chat-information-author-name-color,
   $chat-information-timestamp-color,
   $chat-information-gap,
+  $chat-information-icon-size,
+  $chat-information-edited-gap,
 );
 @include chat-messagelist-empty(
   $chat-messagelist-padding,