Chat: implement errorlist component (DevExpress#28187)

apps/react-storybook/stories/chat/Chat.stories.tsx

@@ -3,7 +3,7 @@ import {Chat, ChatTypes} from 'devextreme-react/chat'
 import type {Meta, StoryObj} from '@storybook/react';
 import DataSource from 'devextreme/data/data_source';
 import CustomStore from 'devextreme/data/custom_store';
-import { firstAuthor, secondAuthor, initialMessages } from './data';
+import { firstAuthor, secondAuthor, initialMessages, longError } from './data';
 import { Popup } from 'devextreme-react/popup';
 
 import './styles.css';
@@ -36,6 +36,7 @@ export const Overview: Story = {
     args: {
         items: initialMessages,
         user: firstAuthor,
+        errors: [],
         ...commonArgs,
     },
     argTypes: {
@@ -50,6 +51,23 @@ export const Overview: Story = {
         },
         hint: {
             control: 'text',
+        },
+        errors: {
+            control: 'select',
+            options: ['None', 'One error', 'One error with long text', 'Three errors'],
+            mapping: {
+                ['None']: [],
+                ['One error']: [
+                    { id: 1, message: 'Error Message 1. Error Description...' }
+                ],
+                ['One error with long text']: [longError],
+                ['Three errors']: [
+                    { id: 1, message: 'Error Message 1. Error Description...' },
+                    { id: 2, message: 'Error Message 2. Message was not sent' },
+                    longError,
+                ],
+            },
+            defaultValue: 'Empty',
         }
     },
     render: ({
@@ -59,6 +77,7 @@ export const Overview: Story = {
         rtlEnabled,
         user,
         items,
+        errors,
         visible,
         hint,
         activeStateEnabled,
@@ -86,6 +105,7 @@ export const Overview: Story = {
                     disabled={disabled}
                     rtlEnabled={rtlEnabled}
                     user={user}
+                    errors={errors}
                     onMessageSend={onMessageSend}
                     visible={visible}
                     hint={hint}

apps/react-storybook/stories/chat/data.ts

@@ -74,3 +74,5 @@ export const initialMessages: ChatTypes.Message[] = [
         text: "Great! Looking forward to it!"
     }
 ];
+
+export const longError = { id: '1234', message: 'Error Message. An unexpected issue occurred while processing your request. Please check your internet connection or contact support for further assistance.' };

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

@@ -0,0 +1,77 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Chat from 'devextreme-testcafe-models/chat';
+import { createUser } from './data';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { getFullThemeName, testScreenshot } from '../../helpers/themeUtils';
+
+fixture.disablePageReloads`ChatErrorList`
+  .page(url(__dirname, '../container.html'));
+
+test('Errorlist appearance', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
+
+  await testScreenshot(t, takeScreenshot, 'Errorlist with one error.png', { element: '#container' });
+
+  await chat.option('errors', [
+    { id: 1, message: 'Error Message 1. Error Description...' },
+    { id: 2, message: 'Error Message 2. Message was not sent' },
+    { id: 3, message: 'Error Message 3. An unexpected issue occurred while processing your request. Please check your internet connection or contact support for further assistance.' },
+  ]);
+
+  await testScreenshot(t, takeScreenshot, 'Errorlist with long text in error.png', {
+    element: '#container',
+    shouldTestInCompact: true,
+    compactCallBack: async () => {
+      await chat.repaint();
+    },
+  });
+
+  const darkTheme = getFullThemeName().replace('light', 'dark');
+  await testScreenshot(t, takeScreenshot, 'Errorlist with long text in error.png', { element: '#container', theme: darkTheme });
+
+  await chat.option('rtlEnabled', true);
+
+  await testScreenshot(t, takeScreenshot, 'Errorlist appearance in RTL mode.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: yesterday,
+    author: userSecond,
+    text: 'Message text 1',
+  }, {
+    timestamp: yesterday,
+    author: userSecond,
+    text: 'Message text 2',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'Message text 3',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'Message text 4',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'Message text 5',
+  }];
+
+  return createWidget('dxChat', {
+    items,
+    user: userFirst,
+    width: 400,
+    height: 600,
+    errors: [{ id: 1, message: 'Error Message 1. Error Description...' }],
+  });
+});

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

@@ -2,6 +2,7 @@
 @use "layout/chat" as *;
 @use "layout/chat-avatar" as *;
 @use "layout/chat-header" as *;
+@use "layout/chat-errorlist" as *;
 @use "layout/chat-messagebox" as *;
 @use "layout/chat-messagebubble" as *;
 @use "layout/chat-messagegroup" as *;

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

@@ -1,5 +1,6 @@
 @import 'layout/chat/mixins';
 @import 'layout/chat-avatar/mixins';
+@import 'layout/chat-errorlist/mixins';
 @import 'layout/chat-header/mixins';
 @import 'layout/chat-messagebox/mixins';
 @import 'layout/chat-messagebubble/mixins';

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

@@ -0,0 +1,10 @@
+.dx-chat-errorlist {
+  display: flex;
+  flex-direction: column;
+}
+
+.dx-chat-errorlist-error {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,33 @@
+@use "../../../icons" as *;
+
+@mixin chat-errorlist(
+  $color,
+  $padding-block,
+  $padding-inline,
+  $error-padding-block,
+  $row-gap,
+  $icon-size,
+  $content-column-gap,
+) {
+  .dx-chat-errorlist {
+    color: $color;
+    padding-block: $padding-block;
+    padding-inline: $padding-inline;
+    row-gap: $row-gap;
+  }
+
+  .dx-chat-errorlist:empty {
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  .dx-chat-errorlist-error {
+    column-gap: $content-column-gap;
+    padding-block: $error-padding-block;
+  }
+
+  .dx-chat-errorlist-error-icon {
+    @include dx-icon(errorcircle);
+    @include dx-icon-sizing($icon-size);
+  }
+}

packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss

@@ -20,6 +20,8 @@ $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-errorlist-color: $base-invalid-color !default;
+
 @if $mode == "light" {
   $chat-information-color: darken($base-bg, 56.08) !default;
   $chat-messagelist-day-header-color: darken($base-bg, 56.08) !default;

packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss

@@ -8,20 +8,29 @@
 @include chat(
   $chat-background-color,
   $chat-border-color,
-  $chat-border-radius
+  $chat-border-radius,
 );
 @include chat-avatar(
   $chat-avatar-size,
   $chat-avatar-color,
-  $chat-avatar-background-color
+  $chat-avatar-background-color,
 );
 @include chat-header($chat-header-padding);
+@include chat-errorlist(
+  $chat-errorlist-color,
+  $chat-errors-padding-block,
+  $chat-errors-padding-inline,
+  $chat-error-padding-block,
+  $chat-errors-row-gap,
+  $chat-error-icon-size,
+  $chat-error-content-column-gap,
+);
 @include chat-messagebox(
   $chat-messagebox-padding,
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap
+  $chat-messagebox-buton-gap,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss

@@ -1,4 +1,5 @@
 @use "../textEditor/colors" as *;
+@use "../common/sizes" as *;
 @use "../sizes" as *;
 
 // adduse
@@ -20,6 +21,12 @@ $chat-messagegroup-alignment-start-template: auto 1fr !default;
 $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
+$chat-error-icon-size: $fluent-base-icon-size !default;
+$chat-error-content-column-gap: null !default;
+$chat-errors-padding-block: null !default;
+$chat-errors-padding-inline: null !default;
+$chat-errors-row-gap: null !default;
+$chat-error-padding-block: null !default;
 
 $chat-messagelist-empty-icon-box-size: null !default;
 $chat-messagelist-empty-icon-size: null !default;
@@ -37,6 +44,12 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
+  $chat-error-content-column-gap: 6px !default;
+  $chat-errors-padding-block: 12px !default;
+  $chat-errors-padding-inline: 20px !default;
+  $chat-errors-row-gap: 2px !default;
+  $chat-error-padding-block: 6px !default;
+
   $chat-messagelist-empty-icon-box-size: 64px !default;;
   $chat-messagelist-empty-icon-size: 40px !default;
   $chat-messagelist-empty-icon-margin-bottom: 12px !default;
@@ -52,6 +65,12 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
+  $chat-error-content-column-gap: 4px !default;
+  $chat-errors-padding-block: 8px !default;
+  $chat-errors-padding-inline: 16px !default;
+  $chat-errors-row-gap: 2px !default;
+  $chat-error-padding-block: 5px !default;
+
   $chat-messagelist-empty-icon-box-size: 48px !default;;
   $chat-messagelist-empty-icon-size: 32px !default;
   $chat-messagelist-empty-icon-margin-bottom: 14px !default;

packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss

@@ -20,6 +20,7 @@ $chat-messagelist-empty-message-color: null !default;
 $chat-messagelist-empty-prompt-color: null !default;
 
 $chat-avatar-background-color: $base-border-color !default;
+$chat-errorlist-color: $base-invalid-color !default;
 
 @if $color == "light" {
   $chat-avatar-color: $base-text-color !default;

packages/devextreme-scss/scss/widgets/generic/chat/_index.scss

@@ -10,28 +10,37 @@
 @include chat(
   $chat-background-color,
   $chat-border-color,
-  $chat-border-radius
+  $chat-border-radius,
 );
 @include chat-avatar(
   $chat-avatar-size,
   $chat-avatar-color,
   $chat-avatar-background-color,
 );
 @include chat-header($chat-header-padding);
+@include chat-errorlist(
+  $chat-errorlist-color,
+  $chat-errors-padding-block,
+  $chat-errors-padding-inline,
+  $chat-error-padding-block,
+  $chat-errors-row-gap,
+  $chat-error-icon-size,
+  $chat-error-content-column-gap,
+);
 @include chat-messagebox(
   $chat-messagebox-padding,
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap
+  $chat-messagebox-buton-gap,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
   $chat-bubble-border-radius,
   $chat-bubble-background-color-secondary,
   $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
-  $chat-bubble-container-gap
+  $chat-bubble-container-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
@@ -40,7 +49,7 @@
   $chat-messagegroup-padding,
   $chat-information-font-size,
   $chat-information-color,
-  $chat-information-gap
+  $chat-information-gap,
 );
 @include chat-messagelist-empty(
   $chat-messagelist-padding,

packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss

@@ -1,7 +1,7 @@
 @use "../textEditor/colors" as *;
-@use "../sizes" as *;
-@use "../colors" as *;
 @use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
 
 // adduse
 
@@ -22,6 +22,12 @@ $chat-messagegroup-alignment-start-template: auto 1fr !default;
 $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
+$chat-error-icon-size: null !default;
+$chat-error-content-column-gap: null !default;
+$chat-errors-padding-block: null !default;
+$chat-errors-padding-inline: null !default;
+$chat-errors-row-gap: null !default;
+$chat-error-padding-block: null !default;
 
 $chat-messagelist-empty-icon-box-size: null !default;
 $chat-messagelist-empty-icon-size: null !default;
@@ -38,6 +44,13 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
+  $chat-error-icon-size: $generic-base-icon-size !default;
+  $chat-error-content-column-gap: 6px !default;
+  $chat-errors-padding-block: 16px !default;
+  $chat-errors-padding-inline: 20px !default;
+  $chat-errors-row-gap: 4px !default;
+  $chat-error-padding-block: 9px !default;
+
   $chat-messagelist-empty-icon-box-size: 64px !default;;
   $chat-messagelist-empty-icon-size: 40px !default;
   $chat-messagelist-empty-icon-margin-bottom: 12px !default;
@@ -52,6 +65,13 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
+  $chat-error-icon-size: $generic-base-icon-size + 2px !default;
+  $chat-error-content-column-gap: 4px !default;
+  $chat-errors-padding-block: 12px !default;
+  $chat-errors-padding-inline: 16px !default;
+  $chat-errors-row-gap: 2px !default;
+  $chat-error-padding-block: 6px !default;
+
   $chat-messagelist-empty-icon-box-size: 48px !default;;
   $chat-messagelist-empty-icon-size: 32px !default;
   $chat-messagelist-empty-icon-margin-bottom: 14px !default;