Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Chat: implement errorlist component
Browse files Browse the repository at this point in the history
EugeniyKiyashko committed Oct 18, 2024
1 parent 8bed7a5 commit 87d3af9
Showing 68 changed files with 692 additions and 19 deletions.
22 changes: 21 additions & 1 deletion apps/react-storybook/stories/chat/Chat.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useCallback, useEffect } from 'react';
import {Chat, ChatTypes} from 'devextreme-react/chat'
import type {Meta, StoryObj} from '@storybook/react';
import { firstAuthor, secondAuthor, initialMessages } from './data';
import { firstAuthor, secondAuthor, initialMessages, longError } from './data';
import { Popup } from 'devextreme-react/popup';

import './styles.css';
@@ -34,6 +34,7 @@ export const Overview: Story = {
args: {
items: initialMessages,
user: firstAuthor,
errors: [],
...commonArgs,
},
argTypes: {
@@ -48,6 +49,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: ({
@@ -57,6 +75,7 @@ export const Overview: Story = {
rtlEnabled,
user,
items,
errors,
visible,
hint,
activeStateEnabled,
@@ -84,6 +103,7 @@ export const Overview: Story = {
disabled={disabled}
rtlEnabled={rtlEnabled}
user={user}
errors={errors}
onMessageSend={onMessageSend}
visible={visible}
hint={hint}
2 changes: 2 additions & 0 deletions apps/react-storybook/stories/chat/data.ts
Original file line number Diff line number Diff line change
@@ -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.' };
77 changes: 77 additions & 0 deletions e2e/testcafe-devextreme/tests/chat/errorList.ts
Original file line number Diff line number Diff line change
@@ -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...' }],
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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 *;
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.dx-chat-errorlist {
display: flex;
flex-direction: column;
}

.dx-chat-errorlist-error {
align-items: center;
display: flex;
justify-content: center;
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 12 additions & 3 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
Original file line number Diff line number Diff line change
@@ -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,
19 changes: 19 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
17 changes: 13 additions & 4 deletions packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
Original file line number Diff line number Diff line change
@@ -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,
24 changes: 22 additions & 2 deletions packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 87d3af9

Please sign in to comment.