Chat: implement onMessageUpdating, onMessageUpdated functionality (DevExpress#29763)

Author: EugeniyKiyashko

e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (fluent-blue-light).png

@@ -50,8 +50,7 @@
         display: inline;
         vertical-align: middle;
         white-space: nowrap;
-
-        @include dx-overflow(ellipsis);
+        text-overflow: ellipsis;
       }
 
       .dx-menu-item-text-with-url {

e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png

@@ -1,10 +1,13 @@
 @mixin chat-confirmation-popup(
+  $border-radius,
   $content-padding-bottom,
   $toolbar-padding-block,
   $toolbar-padding-inline,
   $toolbar-gap
 ) {
   .dx-chat-confirmation-popup-wrapper {
+    border-radius: $border-radius;
+
     .dx-popup-content {
       padding-bottom: $content-padding-bottom;
     }

e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (material-blue-light).png

@@ -2,6 +2,15 @@
   display: flex;
   align-items: center;
   position: relative;
+  animation: dx-messagebox-editing-preview-fadein 0.25s ease-out;
+
+  &.dx-chat-editing-preview-hiding {
+    animation: dx-messagebox-editing-preview-fadeout 0.1s ease-out;
+  }
+
+  .dx-chat-editing-preview-text {
+    animation: dx-messagebox-editing-preview-fadein 0.25s ease-out;
+  }
 }
 
 .dx-chat-editing-preview-content {
@@ -28,3 +37,23 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+@keyframes dx-messagebox-editing-preview-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dx-messagebox-editing-preview-fadeout {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

e2e/testcafe-devextreme/tests/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png

@@ -85,4 +85,13 @@
       }
     }
   }
+
+  .dx-chat-messagelist {
+    .dx-scrollable-container {
+      > .dx-overlay-wrapper {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
 }

packages/devextreme-scss/scss/widgets/base/_menuBase.scss

@@ -105,6 +105,7 @@
   $chat-message-editing-preview-cancel-button-color,
 );
 @include chat-confirmation-popup(
+  $chat-border-radius,
   $chat-confirmation-popup-content-padding,
   0 $chat-confirmation-popup-toolbar-padding-block,
   $chat-confirmation-popup-toolbar-padding-inline,

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

@@ -108,6 +108,7 @@
   $chat-message-editing-preview-cancel-button-color,
 );
 @include chat-confirmation-popup(
+  $chat-border-radius,
   $chat-confirmation-popup-content-padding,
   $chat-confirmation-popup-toolbar-padding-block,
   $chat-confirmation-popup-toolbar-padding-inline,