Skip to content

Chat: Add Suggestions #33264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marker-dao merged 13 commits into from
Apr 15, 2026
Merged

Chat: Add Suggestions #33264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
be6d49f
Chat: Add Suggestions
Apr 14, 2026
32daa2d
feat(sb): Add a story
Apr 14, 2026
9e3c081
refactor && fix
Apr 14, 2026
b64b707
fix(tb)
Apr 14, 2026
4f3a6c6
refactor && feat()
Apr 14, 2026
767a1a7
refactor()
Apr 14, 2026
136d542
refactor()
Apr 14, 2026
5d7e86a
revert(scheduler)
Apr 14, 2026
901e9fa
feat(suggs): Add clean into dispose && Refactor tests
Apr 15, 2026
3c318c2
refactor()
Apr 15, 2026
5abfe85
fix(scss)
Apr 15, 2026
b4ac08f
feat(chat.d.ts): Omit selectedItems
Apr 15, 2026
ad2b719
regenerate
Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions apps/react-storybook/stories/chat/Chat.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import HTMLReactParser from 'html-react-parser';
import './styles.css';
import { Guid } from 'devextreme-react/cjs/common';
import { Message } from 'devextreme/artifacts/npm/devextreme/ui/chat';
import type { ItemClickEvent as ButtonGroupItemClickEvent, Item as ButtonGroupItem } from 'devextreme/ui/button_group';

const meta: Meta<typeof Chat> = {
title: 'Components/Chat',
Expand Down Expand Up @@ -1039,3 +1040,61 @@ export const SendButtonOptions: Story = {
);
},
};

const suggestionItems: ButtonGroupItem[] = [
{ text: '📦 Track my orders' },
{ text: '⭐ Check in-stock favorites' },
{ text: '🔄 Start a return' },
{ text: '🔍 Find my order' },
{ text: '💳 Payment & billing help with Soul' },
];

export const Suggestions: Story = {
args: {
sendImmediately: false,
},
argTypes: {
sendImmediately: {
name: 'Send immediately on suggestion click',
control: 'boolean',
},
},
render: ({ sendImmediately }) => {
const [messages, setMessages] = useState<ChatTypes.Message[]>([]);
const [inputFieldText, setInputFieldText] = useState('');

const onMessageEntered = useCallback(({ message }: ChatTypes.MessageEnteredEvent) => {
setMessages((prev) => [...prev, message]);
setInputFieldText('');
}, []);

const suggestions = useMemo<ChatTypes.Properties['suggestions']>(() => ({
items: suggestionItems,
onItemClick: (e: ButtonGroupItemClickEvent) => {
if (sendImmediately) {
setMessages((prev) => [...prev, {
timestamp: new Date(),
author: firstAuthor,
text: e.itemData?.text,
}]);
} else {
setInputFieldText(e.itemData?.text ?? '');
}
},
}), [sendImmediately]);

return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Chat
width={740}
height={500}
items={messages}
user={firstAuthor}
inputFieldText={inputFieldText}
onMessageEntered={onMessageEntered}
suggestions={suggestions}
/>
</div>
);
},
};
1 change: 1 addition & 0 deletions packages/devextreme-scss/scss/widgets/base/chat/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@use "layout/chat-confirmationpopup" as *;
@use "layout/chat-messagegroup" as *;
@use "layout/chat-messagelist" as *;
@use "layout/chat-suggestions" as *;
@use "layout/chat-typingindicator" as *;

// adduse
1 change: 1 addition & 0 deletions packages/devextreme-scss/scss/widgets/base/chat/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
@forward 'layout/chat-messagebubble/mixins';
@forward 'layout/chat-messagegroup/mixins';
@forward 'layout/chat-messagelist/mixins';
@forward 'layout/chat-suggestions/mixins';
@forward 'layout/chat-typingindicator/mixins';
@forward 'layout/chat-confirmationpopup/mixins';
5 changes: 5 additions & 0 deletions packages/devextreme-scss/scss/widgets/base/chat/layout/chat-suggestions/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.dx-chat-suggestions {
.dx-buttongroup-wrapper {
flex-wrap: wrap;
}
}
43 changes: 43 additions & 0 deletions packages/devextreme-scss/scss/widgets/base/chat/layout/chat-suggestions/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@mixin chat-suggestions(
$padding,
$border-radius,
$border-width,
$max-width,
$gap,
$box-shadow,
) {
.dx-chat-suggestions {
padding: $padding;

&:empty {
padding: 0;
}

.dx-button {
max-width: $max-width;
box-shadow: $box-shadow;
}
Comment thread
marker-dao marked this conversation as resolved.

&.dx-buttongroup {
&.dx-buttongroup-mode-contained {
border-radius: 0;
box-shadow: unset;
}

.dx-buttongroup-wrapper {
gap: $gap;
}
}

.dx-buttongroup-item {
&.dx-button-mode-outlined,
&.dx-button-mode-contained {
border-inline-start-width: $border-width;

&.dx-button {
border-radius: $border-radius;
}
}
}
}
}
6 changes: 6 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ $chat-file-container-background-color: $base-bg !default;
$chat-file-container-box-shadow: null !default;
$chat-file-secondary-color: null !default;

$chat-suggestions-box-shadow: null !default;

@if $mode == "light" {
$chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
$chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
Expand All @@ -146,6 +148,8 @@ $chat-file-secondary-color: null !default;
$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
$chat-file-secondary-color: $base-icon-color !default;

$chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;

@if $color == "blue" {
$chat-bubble-background-color-primary: color.adjust($base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%, $space: hsl) !default;
$chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
Expand Down Expand Up @@ -175,6 +179,8 @@ $chat-file-secondary-color: null !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
$chat-file-secondary-color: $base-icon-color !default;

$chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
}

/**
Expand Down
8 changes: 8 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,14 @@
$chat-confirmation-popup-toolbar-padding-inline,
$chat-confirmation-popup-toolbar-gap,
);
@include chat-suggestions(
$chat-suggestions-padding,
$chat-suggestions-button-border-radius,
$chat-suggestions-border-width,
$chat-suggestions-button-max-width,
$chat-suggestions-gap,
$chat-suggestions-box-shadow,
);

.dx-chat-file {
@include dx-base-typography();
Expand Down
11 changes: 11 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@use "../sizes" as *;
@use "../typography/sizes" as *;
@use "../popup/sizes" as *;
@use "../button/colors" as *;

// adduse

Expand Down Expand Up @@ -36,6 +37,12 @@ $chat-alerts-padding-inline: 8px !default;
$chat-alerts-row-gap: null !default;
$chat-alert-padding-block: null !default;

$chat-suggestions-padding: null !default;
$chat-suggestions-border-width: $fluent-base-border-width !default;
$chat-suggestions-button-border-radius: $button-border-radius !default;
$chat-suggestions-button-max-width: 200px !default;
$chat-suggestions-gap: 12px !default;

$chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default;
$chat-message-editing-preview-content-row-gap: null !default;
$chat-message-editing-preview-content-padding-inline: null !default;
Expand Down Expand Up @@ -95,6 +102,8 @@ $chat-bubble-gap: 8px !default;
$chat-alerts-row-gap: 2px !default;
$chat-alert-padding-block: 6px !default;

$chat-suggestions-padding: 20px !default;

$chat-message-editing-preview-content-padding-inline: 12px !default;
$chat-message-editing-preview-content-row-gap: 4px !default;

Expand Down Expand Up @@ -133,6 +142,8 @@ $chat-bubble-gap: 8px !default;
$chat-alerts-row-gap: 2px !default;
$chat-alert-padding-block: 5px !default;

$chat-suggestions-padding: 16px !default;

$chat-message-editing-preview-content-padding-inline: 8px !default;
$chat-message-editing-preview-content-row-gap: 2px !default;

Expand Down
18 changes: 18 additions & 0 deletions packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ $chat-file-container-background-color: $base-bg !default;
$chat-file-container-box-shadow: null !default;
$chat-file-secondary-color: $base-icon-color !default;

$chat-suggestions-box-shadow: null !default;

@if $color == "light" {
$chat-avatar-color: $base-text-color !default;
$chat-bubble-color-primary: $base-text-color !default;
Expand All @@ -148,6 +150,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
}

Expand All @@ -170,6 +174,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 41.07%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
}

Expand All @@ -192,6 +198,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
}

Expand All @@ -214,6 +222,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
$chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;

$chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
}

Expand All @@ -236,6 +246,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 41.07%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
}

Expand All @@ -258,6 +270,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 41.07%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
}

Expand All @@ -280,6 +294,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
}

Expand All @@ -302,6 +318,8 @@ $chat-file-secondary-color: $base-icon-color !default;
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;

$chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
}

Expand Down
8 changes: 8 additions & 0 deletions packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,14 @@
$chat-confirmation-popup-toolbar-padding-inline,
$chat-confirmation-popup-toolbar-gap,
);
@include chat-suggestions(
$chat-suggestions-padding,
$chat-suggestions-button-border-radius,
$chat-suggestions-border-width,
$chat-suggestions-button-max-width,
$chat-suggestions-gap,
$chat-suggestions-box-shadow,
);

.dx-chat-file {
@include dx-base-typography();
Expand Down
12 changes: 12 additions & 0 deletions packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@use "../colors" as *;
@use "../sizes" as *;
@use "../popup/sizes" as *;
@use "../button/colors" as *;

// adduse

Expand Down Expand Up @@ -32,11 +33,18 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
$chat-information-font-size: 12px !default;
$chat-information-icon-size: 12px !default;
$chat-information-edited-gap: 2px !default;

$chat-alerts-padding-block: null !default;
$chat-alerts-padding-inline: 8px !default;
$chat-alerts-row-gap: null !default;
$chat-alert-padding-block: null !default;

$chat-suggestions-padding: null !default;
$chat-suggestions-border-width: $generic-base-border-width !default;
$chat-suggestions-button-border-radius: $button-border-radius !default;
$chat-suggestions-button-max-width: 200px !default;
$chat-suggestions-gap: 12px !default;

$chat-message-editing-preview-caption-font-size: 12px !default;
$chat-message-editing-preview-content-row-gap: null !default;
$chat-message-editing-preview-content-padding-inline: null !default;
Expand Down Expand Up @@ -97,6 +105,8 @@ $chat-bubble-gap: 8px !default;
$chat-alerts-row-gap: 4px !default;
$chat-alert-padding-block: 9px !default;

$chat-suggestions-padding: 20px !default;

$chat-message-editing-preview-content-padding-inline: 12px !default;
$chat-message-editing-preview-content-row-gap: 4px !default;

Expand Down Expand Up @@ -136,6 +146,8 @@ $chat-bubble-gap: 8px !default;
$chat-alerts-row-gap: 2px !default;
$chat-alert-padding-block: 6px !default;

$chat-suggestions-padding: 16px !default;

$chat-message-editing-preview-content-padding-inline: 8px !default;
$chat-message-editing-preview-content-row-gap: 2px !default;

Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,14 +134,18 @@ $chat-file-container-background-color: $base-bg !default;
$chat-file-container-box-shadow: null !default;
$chat-file-secondary-color: $base-icon-color !default;

$chat-suggestions-box-shadow: null !default;

@if $mode == "light" {
$chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
$chat-file-container-box-shadow: 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.14), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.2) !default;
$chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
}

@else if $mode == "dark" {
$chat-bubble-background-color-primary: rgba(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), 0.08) !default;
$chat-file-container-box-shadow: 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.4) !default;
$chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
}

$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
Expand Down
8 changes: 8 additions & 0 deletions packages/devextreme-scss/scss/widgets/material/chat/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,14 @@
$chat-confirmation-popup-toolbar-padding-inline,
$chat-confirmation-popup-toolbar-gap,
);
@include chat-suggestions(
$chat-suggestions-padding,
$chat-suggestions-button-border-radius,
$chat-suggestions-border-width,
$chat-suggestions-button-max-width,
$chat-suggestions-gap,
$chat-suggestions-box-shadow,
);

.dx-chat-file {
@include dx-base-typography();
Expand Down
Loading
Loading