DevExpress · ksercs · Oct 16, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024
diff --git a/...vextreme/tests/chat/etalons/Avatar has correct position (fluent-blue-light).png b/...vextreme/tests/chat/etalons/Avatar has correct position (fluent-blue-light).png
diff --git a/...e-devextreme/tests/chat/etalons/Avatar has correct position (generic-light).png b/...e-devextreme/tests/chat/etalons/Avatar has correct position (generic-light).png
diff --git a/...xtreme/tests/chat/etalons/Avatar has correct position (material-blue-light).png b/...xtreme/tests/chat/etalons/Avatar has correct position (material-blue-light).png
diff --git a/.../Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png b/.../Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png
diff --git a/...lons/Avatar sizes do not affect indentation between bubbles (generic-light).png b/...lons/Avatar sizes do not affect indentation between bubbles (generic-light).png
diff --git a/...vatar sizes do not affect indentation between bubbles (material-blue-light).png b/...vatar sizes do not affect indentation between bubbles (material-blue-light).png
diff --git a/...estcafe-devextreme/tests/chat/etalons/Avatar with image (fluent-blue-light).png b/...estcafe-devextreme/tests/chat/etalons/Avatar with image (fluent-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Avatar with image (generic-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Avatar with image (generic-light).png
diff --git a/...tcafe-devextreme/tests/chat/etalons/Avatar with image (material-blue-light).png b/...tcafe-devextreme/tests/chat/etalons/Avatar with image (material-blue-light).png
diff --git a/...xtreme/tests/chat/etalons/Avatar with two word initials (fluent-blue-light).png b/...xtreme/tests/chat/etalons/Avatar with two word initials (fluent-blue-light).png
diff --git a/...devextreme/tests/chat/etalons/Avatar with two word initials (generic-light).png b/...devextreme/tests/chat/etalons/Avatar with two word initials (generic-light).png
diff --git a/...reme/tests/chat/etalons/Avatar with two word initials (material-blue-light).png b/...reme/tests/chat/etalons/Avatar with two word initials (material-blue-light).png
diff --git a/...fe-devextreme/tests/chat/etalons/Bubbles with long text (fluent-blue-light).png b/...fe-devextreme/tests/chat/etalons/Bubbles with long text (fluent-blue-light).png
diff --git a/...stcafe-devextreme/tests/chat/etalons/Bubbles with long text (generic-light).png b/...stcafe-devextreme/tests/chat/etalons/Bubbles with long text (generic-light).png
diff --git a/...-devextreme/tests/chat/etalons/Bubbles with long text (material-blue-light).png b/...-devextreme/tests/chat/etalons/Bubbles with long text (material-blue-light).png
diff --git a/...ts/chat/etalons/Bubbles with long text with line breaks (fluent-blue-light).png b/...ts/chat/etalons/Bubbles with long text with line breaks (fluent-blue-light).png
diff --git a/.../tests/chat/etalons/Bubbles with long text with line breaks (generic-light).png b/.../tests/chat/etalons/Bubbles with long text with line breaks (generic-light).png
diff --git a/.../chat/etalons/Bubbles with long text with line breaks (material-blue-light).png b/.../chat/etalons/Bubbles with long text with line breaks (material-blue-light).png
diff --git a/.../tests/chat/etalons/Information row with long user name (fluent-blue-light).png b/.../tests/chat/etalons/Information row with long user name (fluent-blue-light).png
diff --git a/...reme/tests/chat/etalons/Information row with long user name (generic-light).png b/...reme/tests/chat/etalons/Information row with long user name (generic-light).png
diff --git a/...ests/chat/etalons/Information row with long user name (material-blue-light).png b/...ests/chat/etalons/Information row with long user name (material-blue-light).png
diff --git a/.../tests/chat/etalons/Messagegroup appearance in RTL mode (fluent-blue-light).png b/.../tests/chat/etalons/Messagegroup appearance in RTL mode (fluent-blue-light).png
diff --git a/...reme/tests/chat/etalons/Messagegroup appearance in RTL mode (generic-light).png b/...reme/tests/chat/etalons/Messagegroup appearance in RTL mode (generic-light).png
diff --git a/...ests/chat/etalons/Messagegroup appearance in RTL mode (material-blue-light).png b/...ests/chat/etalons/Messagegroup appearance in RTL mode (material-blue-light).png
diff --git a/.../chat/etalons/Messagegroup appearance in disabled state (fluent-blue-light).png b/.../chat/etalons/Messagegroup appearance in disabled state (fluent-blue-light).png
diff --git a/...ests/chat/etalons/Messagegroup appearance in disabled state (generic-light).png b/...ests/chat/etalons/Messagegroup appearance in disabled state (generic-light).png
diff --git a/...hat/etalons/Messagegroup appearance in disabled state (material-blue-light).png b/...hat/etalons/Messagegroup appearance in disabled state (material-blue-light).png
diff --git a/...evextreme/tests/chat/etalons/Messagegroup with 1 bubble (fluent-blue-light).png b/...evextreme/tests/chat/etalons/Messagegroup with 1 bubble (fluent-blue-light).png
diff --git a/...fe-devextreme/tests/chat/etalons/Messagegroup with 1 bubble (generic-light).png b/...fe-devextreme/tests/chat/etalons/Messagegroup with 1 bubble (generic-light).png
diff --git a/...extreme/tests/chat/etalons/Messagegroup with 1 bubble (material-blue-light).png b/...extreme/tests/chat/etalons/Messagegroup with 1 bubble (material-blue-light).png
diff --git a/...vextreme/tests/chat/etalons/Messagegroup with 2 bubbles (fluent-blue-light).png b/...vextreme/tests/chat/etalons/Messagegroup with 2 bubbles (fluent-blue-light).png
diff --git a/...e-devextreme/tests/chat/etalons/Messagegroup with 2 bubbles (generic-light).png b/...e-devextreme/tests/chat/etalons/Messagegroup with 2 bubbles (generic-light).png
diff --git a/...xtreme/tests/chat/etalons/Messagegroup with 2 bubbles (material-blue-light).png b/...xtreme/tests/chat/etalons/Messagegroup with 2 bubbles (material-blue-light).png
diff --git a/...vextreme/tests/chat/etalons/Messagegroup with 3 bubbles (fluent-blue-light).png b/...vextreme/tests/chat/etalons/Messagegroup with 3 bubbles (fluent-blue-light).png
diff --git a/...e-devextreme/tests/chat/etalons/Messagegroup with 3 bubbles (generic-light).png b/...e-devextreme/tests/chat/etalons/Messagegroup with 3 bubbles (generic-light).png
diff --git a/...xtreme/tests/chat/etalons/Messagegroup with 3 bubbles (material-blue-light).png b/...xtreme/tests/chat/etalons/Messagegroup with 3 bubbles (material-blue-light).png
diff --git a/...vextreme/tests/chat/etalons/Messagegroup with 4 bubbles (fluent-blue-light).png b/...vextreme/tests/chat/etalons/Messagegroup with 4 bubbles (fluent-blue-light).png
diff --git a/...e-devextreme/tests/chat/etalons/Messagegroup with 4 bubbles (generic-light).png b/...e-devextreme/tests/chat/etalons/Messagegroup with 4 bubbles (generic-light).png
diff --git a/...xtreme/tests/chat/etalons/Messagegroup with 4 bubbles (material-blue-light).png b/...xtreme/tests/chat/etalons/Messagegroup with 4 bubbles (material-blue-light).png
diff --git a/... scroll position after rendering in invisible container (fluent-blue-light).png b/... scroll position after rendering in invisible container (fluent-blue-light).png
diff --git a/...xtreme/tests/chat/etalons/Messagelist with date headers (fluent-blue-light).png b/...xtreme/tests/chat/etalons/Messagelist with date headers (fluent-blue-light).png
diff --git a/...e/tests/chat/etalons/Messagelist with date headers (fluent-blue-light)_mask.png b/...e/tests/chat/etalons/Messagelist with date headers (fluent-blue-light)_mask.png
diff --git a/...devextreme/tests/chat/etalons/Messagelist with date headers (generic-light).png b/...devextreme/tests/chat/etalons/Messagelist with date headers (generic-light).png
diff --git a/...treme/tests/chat/etalons/Messagelist with date headers (generic-light)_mask.png b/...treme/tests/chat/etalons/Messagelist with date headers (generic-light)_mask.png
diff --git a/...reme/tests/chat/etalons/Messagelist with date headers (material-blue-light).png b/...reme/tests/chat/etalons/Messagelist with date headers (material-blue-light).png
diff --git a/...tests/chat/etalons/Messagelist with date headers (material-blue-light)_mask.png b/...tests/chat/etalons/Messagelist with date headers (material-blue-light)_mask.png
diff --git a/e2e/testcafe-devextreme/tests/chat/messageList.ts b/e2e/testcafe-devextreme/tests/chat/messageList.ts
@@ -104,6 +104,7 @@ test('Messagelist appearance with scrollbar', async (t) => {
     user: userSecond,
     width: 400,
     height: 600,
+    showDayHeaders: false,
     onMessageSend: (e) => {
       const { component, message } = e;
 
@@ -150,3 +151,48 @@ test('Messagelist should scrolled to the latest messages after being rendered in
     }],
   });
 });
+
+test('Messagelist with date headers', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist with date headers.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+  const msInDay = 86400000;
+  const today = new Date().setHours(7, 22, 0, 0);
+  const yesterday = today - msInDay;
+
+  const items = [{
+    timestamp: new Date('05.01.2024'),
+    author: userFirst,
+    text: 'AAA',
+  }, {
+    timestamp: new Date('06.01.2024'),
+    author: userFirst,
+    text: 'BBB',
+  }, {
+    timestamp: new Date('06.01.2024'),
+    author: userSecond,
+    text: 'CCC',
+  }, {
+    timestamp: yesterday,
+    author: userSecond,
+    text: 'DDD',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'EEE',
+  }];
+
+  return createWidget('dxChat', {
+    items,
+    user: userSecond,
+    width: 400,
+    height: 600,
+  });
+});
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss
@@ -39,3 +39,7 @@
   border-radius: 999em;
 }
 
+.dx-chat-messagelist-day-header {
+  text-align: center;
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
@@ -1,11 +1,25 @@
 @use "sass:math";
 
-@mixin chat-messagelist($padding) {
+@mixin chat-messagelist(
+  $padding,
+  $day-header-color,
+  $day-header-padding-bottom,
+  $day-header-first-padding-top,
+) {
   .dx-chat-messagelist {
     .dx-scrollable-content {
       padding-inline: $padding;
     }
   }
+
+  .dx-chat-messagelist-day-header {
+    padding-bottom: $day-header-padding-bottom;
+    color: $day-header-color;
+
+    &:first-child {
+      padding-top: $day-header-first-padding-top;
+    }
+  }
 }
 
 @mixin chat-messagelist-empty(

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -16,6 +16,7 @@ $chat-messagelist-empty-icon-color: null !default;
 $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: $base-text-color !default;
 $chat-messagelist-empty-prompt-color: null !default;
+$chat-messagelist-day-header-color: null !default;
 
 @if $mode == "light" {
   $chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
@@ -26,6 +27,7 @@ $chat-messagelist-empty-prompt-color: null !default;
   $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default; // #B3B3B3
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default; // #F5F5F5
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default; // #616161
+  $chat-messagelist-day-header-color: lighten($base-text-color, 65.5) !default; // #B3B3B3
 }
 
 @else if $mode == "dark" {
@@ -37,4 +39,5 @@ $chat-messagelist-empty-prompt-color: null !default;
   $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default; // #6B6B6B
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3D3D3D
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default; // #ADADAD
+  $chat-messagelist-day-header-color: darken($base-text-color, 58.9) !default; // #6B6B6B
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -48,4 +48,9 @@
   $chat-messagelist-empty-prompt-font-size,
   $chat-messagelist-empty-prompt-color,
 );
-@include chat-messagelist($chat-messagelist-padding);
+@include chat-messagelist(
+  $chat-messagelist-padding,
+  $chat-messagelist-day-header-color,
+  $chat-messagelist-day-header-padding-bottom,
+  $chat-messagelist-day-header-first-padding-top,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -27,6 +27,8 @@ $chat-messagelist-empty-icon-margin-bottom: null !default;
 $chat-messagelist-empty-row-gap: null !default;
 $chat-messagelist-empty-message-font-size: null !default;
 $chat-messagelist-empty-prompt-font-size: null !default;
+$chat-messagelist-day-header-padding-bottom: 12px !default;
+$chat-messagelist-day-header-first-padding-top: 20px !default;
 
 @if $size == "default" {
   $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -16,6 +16,7 @@ $chat-messagelist-empty-icon-color: null !default;
 $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: null !default;
 $chat-messagelist-empty-prompt-color: null !default;
+$chat-messagelist-day-header-color: null !default;
 
 @if $color == "light" {
   $chat-avatar-background-color: darken($base-bg, 13.33) !default; // #DDDDDD
@@ -27,6 +28,7 @@ $chat-messagelist-empty-prompt-color: null !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; // #EBEBEB 
   $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default; // #222222
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default; // #959595
+  $chat-messagelist-day-header-color: lighten($base-text-color, 58.6) !default; // #AAAAAA
 }
 
 @else if $color == "dark" {
@@ -39,4 +41,5 @@ $chat-messagelist-empty-prompt-color: null !default;
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3E3E3E
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default; // #FFFFFF
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default; // #7D7D7D
+  $chat-messagelist-day-header-color: darken($base-text-color, 42.6) !default; // #7F7F7F
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -48,4 +48,9 @@
   $chat-messagelist-empty-prompt-font-size,
   $chat-messagelist-empty-prompt-color,
 );
-@include chat-messagelist($chat-messagelist-padding);
+@include chat-messagelist(
+  $chat-messagelist-padding,
+  $chat-messagelist-day-header-color,
+  $chat-messagelist-day-header-padding-bottom,
+  $chat-messagelist-day-header-first-padding-top,
+);
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -28,6 +28,8 @@ $chat-messagelist-empty-icon-margin-bottom: null !default;
 $chat-messagelist-empty-row-gap: null !default;
 $chat-messagelist-empty-message-font-size: null !default;
 $chat-messagelist-empty-prompt-font-size: null !default;
+$chat-messagelist-day-header-padding-bottom: 12px !default;
+$chat-messagelist-day-header-first-padding-top: 20px !default;
 
 @if $size == "default" {
   $chat-bubble-padding: 8px 12px !default;

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -16,6 +16,7 @@ $chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
 $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
 $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
 $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
+$chat-messagelist-day-header-color: rgba($base-inverted-bg, 0.38) !default;
 
 @if $mode == "light" {
   $chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -48,4 +48,9 @@
   $chat-messagelist-empty-prompt-font-size,
   $chat-messagelist-empty-prompt-color,
 );
-@include chat-messagelist($chat-messagelist-padding);
+@include chat-messagelist(
+  $chat-messagelist-padding,
+  $chat-messagelist-day-header-color,
+  $chat-messagelist-day-header-padding-bottom,
+  $chat-messagelist-day-header-first-padding-top,
+);
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -26,6 +26,8 @@ $chat-messagelist-empty-icon-margin-bottom: null !default;
 $chat-messagelist-empty-row-gap: null !default;
 $chat-messagelist-empty-message-font-size: null !default;
 $chat-messagelist-empty-prompt-font-size: null !default;
+$chat-messagelist-day-header-padding-bottom: 12px !default;
+$chat-messagelist-day-header-first-padding-top: 20px !default;
 
 @if $size == "default" {
   $chat-messagebox-buton-gap: 10px !default;

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -21,7 +21,7 @@ import MessageList from './messagelist';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
-type Properties = ChatProperties & { title: string };
+type Properties = ChatProperties & { title: string; showDayHeaders: boolean };
 
 class Chat extends Widget<Properties> {
   _chatHeader?: ChatHeader;
@@ -43,6 +43,7 @@ class Chat extends Widget<Properties> {
       dataSource: null,
       user: { id: new Guid().toString() },
       onMessageSend: undefined,
+      showDayHeaders: true,
     };
   }
 
@@ -98,7 +99,7 @@ class Chat extends Widget<Properties> {
   }
 
   _renderMessageList(): void {
-    const { items = [], user } = this.option();
+    const { items = [], user, showDayHeaders } = this.option();
 
     const currentUserId = user?.id;
     const $messageList = $('<div>');
@@ -108,6 +109,7 @@ class Chat extends Widget<Properties> {
     this._messageList = this._createComponent($messageList, MessageList, {
       items,
       currentUserId,
+      showDayHeaders,
     });
   }
 
@@ -214,6 +216,9 @@ class Chat extends Widget<Properties> {
       case 'onMessageSend':
         this._createMessageSendAction();
         break;
+      case 'showDayHeaders':
+        this._messageList.option(name, value);
+        break;
       default:
         super._optionChanged(args);
     }