Chat: implement day headers (#28160)

Signed-off-by: EugeniyKiyashko <[email protected]> Co-authored-by: EugeniyKiyashko <[email protected]>
DevExpress · Oct 16, 2024 · ad8f0c8 · ad8f0c8
1 parent 5933228
commit ad8f0c8
Show file tree

Hide file tree

Showing 90 changed files with 520 additions and 27 deletions.
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
@@ -14,13 +14,15 @@ $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: $base-border-color !default;
 $chat-information-color: null !default;
 
+$chat-messagelist-day-header-color: null !default;
 $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;
 
 @if $mode == "light" {
   $chat-information-color: darken($base-bg, 56.08) !default;
+  $chat-messagelist-day-header-color: darken($base-bg, 56.08) !default;
   $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default;
@@ -39,7 +41,8 @@ $chat-messagelist-empty-prompt-color: null !default;
 @if $mode == "dark" {
   $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default;
   $chat-information-color: lighten($base-bg, 43.92) !default;
-
+
+  $chat-messagelist-day-header-color: lighten($base-bg, 43.92) !default;
   $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default;
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default;

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -53,4 +53,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
@@ -8,12 +8,12 @@ $chat-background-color: $base-bg !default;
 $chat-border-color: $base-border-color !default;
 $chat-avatar-color: null !default;
 $chat-messagebox-border-color: $base-border-color !default;
-$chat-avatar-background-color: null !default;
 $chat-bubble-color-primary: null !default;
 $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
+$chat-messagelist-day-header-color: null !default;
 $chat-messagelist-empty-icon-color: null !default;
 $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: null !default;
@@ -28,6 +28,7 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
   $chat-information-color: darken($base-bg, 41.57) !default;
 
+  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
   $chat-messagelist-empty-icon-color: lighten($base-icon-color, 46.67) !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default;
@@ -40,7 +41,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
   $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
   $chat-information-color: lighten($base-bg, 32.55) !default;
-
+
+  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
   $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
@@ -53,7 +55,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
   $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
   $chat-information-color: darken($base-bg, 41.57) !default;
-
+
+  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
@@ -66,7 +69,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: $base-inverted-bg !default;
   $chat-bubble-background-color-secondary: $base-hover-color !default;
   $chat-information-color: $base-text-color !default;
-
+
+  $chat-messagelist-day-header-color: $base-text-color !default;
   $chat-messagelist-empty-icon-color: $base-bg !default;
   $chat-messagelist-empty-icon-background-color: $base-inverted-bg !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
@@ -79,7 +83,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
   $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
   $chat-information-color: lighten($base-bg, 32.55) !default;
-
+
+  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
@@ -92,7 +97,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
   $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
   $chat-information-color: lighten($base-bg, 32.55) !default;
-
+
+  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
   $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
@@ -104,7 +110,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
   $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
   $chat-information-color: darken($base-bg, 41.57) !default;
-
+
+  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
@@ -117,7 +124,8 @@ $chat-avatar-background-color: $base-border-color !default;
   $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
   $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
   $chat-information-color: darken($base-bg, 41.57) !default;
-
+
+  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -55,4 +55,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
@@ -29,6 +29,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
@@ -14,6 +14,7 @@ $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
+$chat-messagelist-day-header-color: null !default;
 $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;
@@ -23,10 +24,12 @@ $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
   $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
   $chat-information-color: rgba(darken($base-bg, 100.00), 0.6) !default;
+  $chat-messagelist-day-header-color: rgba(darken($base-bg, 100.00), 0.6) !default;
 }
 
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
   $chat-bubble-background-color-secondary: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.08) !default;
   $chat-information-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
+  $chat-messagelist-day-header-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -53,4 +53,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);
     }