Skip to content

Commit 1b40023

Browse files
marker-daomarker dao ®
marker-dao
and
marker dao ®
authored
Chat: Add Suggestions (#33264)
Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>
1 parent 5316974 commit 1b40023

File tree

25 files changed

+561
-7
lines changed

25 files changed

+561
-7
lines changed

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import HTMLReactParser from 'html-react-parser';
2323
import './styles.css';
2424
import { Guid } from 'devextreme-react/cjs/common';
2525
import { Message } from 'devextreme/artifacts/npm/devextreme/ui/chat';
26+
import type { ItemClickEvent as ButtonGroupItemClickEvent, Item as ButtonGroupItem } from 'devextreme/ui/button_group';
2627

2728
const meta: Meta<typeof Chat> = {
2829
title: 'Components/Chat',
@@ -1039,3 +1040,61 @@ export const SendButtonOptions: Story = {
10391040
);
10401041
},
10411042
};
1043+
1044+
const suggestionItems: ButtonGroupItem[] = [
1045+
{ text: '📦 Track my orders' },
1046+
{ text: '⭐ Check in-stock favorites' },
1047+
{ text: '🔄 Start a return' },
1048+
{ text: '🔍 Find my order' },
1049+
{ text: '💳 Payment & billing help with Soul' },
1050+
];
1051+
1052+
export const Suggestions: Story = {
1053+
args: {
1054+
sendImmediately: false,
1055+
},
1056+
argTypes: {
1057+
sendImmediately: {
1058+
name: 'Send immediately on suggestion click',
1059+
control: 'boolean',
1060+
},
1061+
},
1062+
render: ({ sendImmediately }) => {
1063+
const [messages, setMessages] = useState<ChatTypes.Message[]>([]);
1064+
const [inputFieldText, setInputFieldText] = useState('');
1065+
1066+
const onMessageEntered = useCallback(({ message }: ChatTypes.MessageEnteredEvent) => {
1067+
setMessages((prev) => [...prev, message]);
1068+
setInputFieldText('');
1069+
}, []);
1070+
1071+
const suggestions = useMemo<ChatTypes.Properties['suggestions']>(() => ({
1072+
items: suggestionItems,
1073+
onItemClick: (e: ButtonGroupItemClickEvent) => {
1074+
if (sendImmediately) {
1075+
setMessages((prev) => [...prev, {
1076+
timestamp: new Date(),
1077+
author: firstAuthor,
1078+
text: e.itemData?.text,
1079+
}]);
1080+
} else {
1081+
setInputFieldText(e.itemData?.text ?? '');
1082+
}
1083+
},
1084+
}), [sendImmediately]);
1085+
1086+
return (
1087+
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
1088+
<Chat
1089+
width={740}
1090+
height={500}
1091+
items={messages}
1092+
user={firstAuthor}
1093+
inputFieldText={inputFieldText}
1094+
onMessageEntered={onMessageEntered}
1095+
suggestions={suggestions}
1096+
/>
1097+
</div>
1098+
);
1099+
},
1100+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@use "layout/chat-confirmationpopup" as *;
1010
@use "layout/chat-messagegroup" as *;
1111
@use "layout/chat-messagelist" as *;
12+
@use "layout/chat-suggestions" as *;
1213
@use "layout/chat-typingindicator" as *;
1314

1415
// adduse

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@
77
@forward 'layout/chat-messagebubble/mixins';
88
@forward 'layout/chat-messagegroup/mixins';
99
@forward 'layout/chat-messagelist/mixins';
10+
@forward 'layout/chat-suggestions/mixins';
1011
@forward 'layout/chat-typingindicator/mixins';
1112
@forward 'layout/chat-confirmationpopup/mixins';

‎packages/devextreme-scss/scss/widgets/base/chat/layout/chat-suggestions/_index.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.dx-chat-suggestions {
2+
.dx-buttongroup-wrapper {
3+
flex-wrap: wrap;
4+
}
5+
}

‎packages/devextreme-scss/scss/widgets/base/chat/layout/chat-suggestions/_mixins.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@mixin chat-suggestions(
2+
$padding,
3+
$border-radius,
4+
$border-width,
5+
$max-width,
6+
$gap,
7+
$box-shadow,
8+
) {
9+
.dx-chat-suggestions {
10+
padding: $padding;
11+
12+
&:empty {
13+
padding: 0;
14+
}
15+
16+
.dx-button {
17+
max-width: $max-width;
18+
box-shadow: $box-shadow;
19+
}
20+
21+
&.dx-buttongroup {
22+
&.dx-buttongroup-mode-contained {
23+
border-radius: 0;
24+
box-shadow: unset;
25+
}
26+
27+
.dx-buttongroup-wrapper {
28+
gap: $gap;
29+
}
30+
}
31+
32+
.dx-buttongroup-item {
33+
&.dx-button-mode-outlined,
34+
&.dx-button-mode-contained {
35+
border-inline-start-width: $border-width;
36+
37+
&.dx-button {
38+
border-radius: $border-radius;
39+
}
40+
}
41+
}
42+
}
43+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ $chat-file-container-background-color: $base-bg !default;
129129
$chat-file-container-box-shadow: null !default;
130130
$chat-file-secondary-color: null !default;
131131

132+
$chat-suggestions-box-shadow: null !default;
133+
132134
@if $mode == "light" {
133135
$chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
134136
$chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
@@ -146,6 +148,8 @@ $chat-file-secondary-color: null !default;
146148
$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;
147149
$chat-file-secondary-color: $base-icon-color !default;
148150

151+
$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;
152+
149153
@if $color == "blue" {
150154
$chat-bubble-background-color-primary: color.adjust($base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%, $space: hsl) !default;
151155
$chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
@@ -175,6 +179,8 @@ $chat-file-secondary-color: null !default;
175179

176180
$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;
177181
$chat-file-secondary-color: $base-icon-color !default;
182+
183+
$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;
178184
}
179185

180186
/**

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,14 @@
136136
$chat-confirmation-popup-toolbar-padding-inline,
137137
$chat-confirmation-popup-toolbar-gap,
138138
);
139+
@include chat-suggestions(
140+
$chat-suggestions-padding,
141+
$chat-suggestions-button-border-radius,
142+
$chat-suggestions-border-width,
143+
$chat-suggestions-button-max-width,
144+
$chat-suggestions-gap,
145+
$chat-suggestions-box-shadow,
146+
);
139147

140148
.dx-chat-file {
141149
@include dx-base-typography();

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use "../sizes" as *;
55
@use "../typography/sizes" as *;
66
@use "../popup/sizes" as *;
7+
@use "../button/colors" as *;
78

89
// adduse
910

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

40+
$chat-suggestions-padding: null !default;
41+
$chat-suggestions-border-width: $fluent-base-border-width !default;
42+
$chat-suggestions-button-border-radius: $button-border-radius !default;
43+
$chat-suggestions-button-max-width: 200px !default;
44+
$chat-suggestions-gap: 12px !default;
45+
3946
$chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default;
4047
$chat-message-editing-preview-content-row-gap: null !default;
4148
$chat-message-editing-preview-content-padding-inline: null !default;
@@ -95,6 +102,8 @@ $chat-bubble-gap: 8px !default;
95102
$chat-alerts-row-gap: 2px !default;
96103
$chat-alert-padding-block: 6px !default;
97104

105+
$chat-suggestions-padding: 20px !default;
106+
98107
$chat-message-editing-preview-content-padding-inline: 12px !default;
99108
$chat-message-editing-preview-content-row-gap: 4px !default;
100109

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

145+
$chat-suggestions-padding: 16px !default;
146+
136147
$chat-message-editing-preview-content-padding-inline: 8px !default;
137148
$chat-message-editing-preview-content-row-gap: 2px !default;
138149

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ $chat-file-container-background-color: $base-bg !default;
129129
$chat-file-container-box-shadow: null !default;
130130
$chat-file-secondary-color: $base-icon-color !default;
131131

132+
$chat-suggestions-box-shadow: null !default;
133+
132134
@if $color == "light" {
133135
$chat-avatar-color: $base-text-color !default;
134136
$chat-bubble-color-primary: $base-text-color !default;
@@ -148,6 +150,8 @@ $chat-file-secondary-color: $base-icon-color !default;
148150
$chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
149151
$chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;
150152

153+
$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;
154+
151155
$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;
152156
}
153157

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

177+
$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;
178+
173179
$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;
174180
}
175181

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

201+
$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;
202+
195203
$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;
196204
}
197205

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

225+
$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;
226+
217227
$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;
218228
}
219229

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

249+
$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;
250+
239251
$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;
240252
}
241253

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

273+
$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;
274+
261275
$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;
262276
}
263277

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

297+
$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;
298+
283299
$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;
284300
}
285301

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

321+
$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;
322+
305323
$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;
306324
}
307325

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,14 @@
139139
$chat-confirmation-popup-toolbar-padding-inline,
140140
$chat-confirmation-popup-toolbar-gap,
141141
);
142+
@include chat-suggestions(
143+
$chat-suggestions-padding,
144+
$chat-suggestions-button-border-radius,
145+
$chat-suggestions-border-width,
146+
$chat-suggestions-button-max-width,
147+
$chat-suggestions-gap,
148+
$chat-suggestions-box-shadow,
149+
);
142150

143151
.dx-chat-file {
144152
@include dx-base-typography();

0 commit comments

Comments
 (0)