Chat.Editing: implementing API and UI for deleted messages (DevExpress#29749)

Author: pharret31

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template and deleted messages (fluent-blue-light).png

@@ -185,6 +185,79 @@ test('Messagelist with loadindicator appearance on initial loading', async (t) =
   });
 });
 
+test('Messagelist with deleted items', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist without message template and with deleted messages.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+  const items = [{
+    author: userFirst,
+    text: 'AAA',
+  }, {
+    author: userFirst,
+    text: 'BBB',
+    isDeleted: true,
+  }, {
+    author: userSecond,
+    text: 'CCC',
+    isDeleted: true,
+  }];
+
+  return createWidget('dxChat', {
+    items,
+    user: userFirst,
+    width: 400,
+    height: 600,
+    showDayHeaders: false,
+  });
+});
+
+test('Messagelist with deleted items and custom template', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist with message template and deleted messages.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+  const items = [{
+    author: userFirst,
+    text: 'AAA',
+  }, {
+    author: userFirst,
+    text: 'BBB',
+    isDeleted: true,
+  }, {
+    author: userSecond,
+    text: 'CCC',
+    isDeleted: true,
+  }];
+
+  return createWidget('dxChat', {
+    items,
+    user: userFirst,
+    width: 400,
+    height: 600,
+    showDayHeaders: false,
+    messageTemplate: ({ message }, container) => {
+      if (message.isDeleted) {
+        $('<div>').text(`${message.author.name} deleted this message`).appendTo(container);
+        return;
+      }
+      $('<div>').text(message.text).appendTo(container);
+    },
+  });
+});
+
 test('Messagelist with messageTemplate', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const chat = new Chat('#container');

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template and deleted messages (generic-light).png

@@ -7,6 +7,14 @@
   width: auto;
   word-break: break-word;
   white-space: break-spaces;
+
+  .dx-chat-messagebubble-content {
+    &.dx-chat-messagebubble-deleted {
+      display: flex;
+      align-items: flex-end;
+      font-style: italic;
+    }
+  }
 }
 
 .dx-chat-messagegroup-alignment-start {

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template and deleted messages (material-blue-light).png

@@ -6,6 +6,8 @@
   $color-primary,
   $background-color-primary,
   $bubble-container-gap,
+  $bubble-delete-gap,
+  $bubble-delete-icon-size,
 ) {
   .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
@@ -14,6 +16,16 @@
   .dx-chat-messagebubble {
     padding: $padding;
     border-radius: $border-radius;
+
+    .dx-chat-messagebubble-content {
+      &.dx-chat-messagebubble-deleted {
+        gap: $bubble-delete-gap;
+
+        .dx-icon {
+          font-size: $bubble-delete-icon-size;
+        }
+      }
+    }
   }
 
   .dx-chat-messagegroup-alignment-start {

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist without message template and with deleted messages (fluent-blue-light).png

@@ -38,6 +38,8 @@
   $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
   $chat-bubble-container-gap,
+  $chat-bubble-delete-gap,
+  $chat-bubble-delete-icon-size,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,