Skip to content

Commit 85a7545

Browse files
PixeledCodePixeledCode
authored
feat(ai-chat-log): add error states (#4086)
* feat(ai-chat-error): add stories * feat(ai-chat-error): add AI responses errors to error state pattern * feat(ai-chat-error): add error states to docs * feat(ai-chat-error): update docs * feat(ai-chat-error): fix Sending Message Error story
1 parent 2cf9ff8 commit 85a7545

File tree

4 files changed

+1033
-21
lines changed

4 files changed

+1033
-21
lines changed

‎packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx‎

Lines changed: 372 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,372 @@
1+
// eslint-disable-next-line eslint-comments/disable-enable-pair
2+
/* eslint-disable import/no-extraneous-dependencies */
3+
4+
import { Alert } from "@twilio-paste/alert";
5+
import { Anchor } from "@twilio-paste/anchor";
6+
import { Box } from "@twilio-paste/box";
7+
import { Button } from "@twilio-paste/button";
8+
import { ButtonGroup } from "@twilio-paste/button-group";
9+
import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer";
10+
import { HelpText } from "@twilio-paste/help-text";
11+
import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
12+
import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon";
13+
import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon";
14+
import { RepeatIcon } from "@twilio-paste/icons/esm/RepeatIcon";
15+
import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
16+
import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon";
17+
import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon";
18+
import { ClearEditorPlugin } from "@twilio-paste/lexical-library";
19+
import { Text } from "@twilio-paste/text";
20+
import * as React from "react";
21+
22+
import { Callout, CalloutHeading, CalloutText } from "../../callout/src";
23+
import {
24+
SummaryDetail,
25+
SummaryDetailContent,
26+
SummaryDetailHeading,
27+
SummaryDetailHeadingContent,
28+
SummaryDetailToggleButton,
29+
} from "../../summary-detail/src";
30+
import {
31+
AIChatLog,
32+
AIChatMessage,
33+
AIChatMessageActionCard,
34+
AIChatMessageActionGroup,
35+
AIChatMessageAuthor,
36+
AIChatMessageBody,
37+
} from "../src";
38+
39+
export default {
40+
title: "Components/AI Chat Log/Errors",
41+
component: AIChatLog,
42+
};
43+
44+
const Composer = (): JSX.Element => {
45+
return (
46+
<ChatComposerContainer variant="contained">
47+
<ChatComposer
48+
maxHeight="size10"
49+
config={{
50+
namespace: "foo",
51+
onError: (error) => {
52+
throw error;
53+
},
54+
}}
55+
ariaLabel="Message"
56+
placeholder="Type here..."
57+
>
58+
<ClearEditorPlugin />
59+
</ChatComposer>
60+
<ChatComposerActionGroup>
61+
<Button variant="secondary_icon" size="reset">
62+
<AttachIcon decorative={false} title="attach a file to your message" />
63+
</Button>
64+
<Button variant="primary_icon" size="reset">
65+
<SendIcon decorative={false} title="Send" />
66+
</Button>
67+
</ChatComposerActionGroup>
68+
</ChatComposerContainer>
69+
);
70+
};
71+
72+
export const MessageGenerationError = (): React.ReactNode => {
73+
return (
74+
<>
75+
<AIChatLog>
76+
<AIChatMessage variant="user">
77+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Ridki">
78+
You
79+
</AIChatMessageAuthor>
80+
<AIChatMessageBody>Message filtered (30007)</AIChatMessageBody>
81+
</AIChatMessage>
82+
<AIChatMessage variant="bot">
83+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
84+
<AIChatMessageBody>
85+
<Callout variant="error">
86+
<CalloutHeading as="h3">There was an error generating a response.</CalloutHeading>
87+
<CalloutText>
88+
Please try again, if the error persists please <Anchor href="#">contact us</Anchor>.
89+
</CalloutText>
90+
</Callout>
91+
</AIChatMessageBody>
92+
<AIChatMessageActionGroup>
93+
<AIChatMessageActionCard aria-label="Feedback form">
94+
<Button variant="secondary_icon" aria-label="this is not a helpful response" size="reset">
95+
<RefreshIcon decorative title="dislike result" />
96+
Regenerate
97+
</Button>
98+
</AIChatMessageActionCard>
99+
</AIChatMessageActionGroup>
100+
</AIChatMessage>
101+
</AIChatLog>
102+
<Box marginTop="space70">
103+
<Composer />
104+
</Box>
105+
</>
106+
);
107+
};
108+
109+
MessageGenerationError.parameters = {
110+
a11y: {
111+
disable: true,
112+
},
113+
};
114+
115+
export const AIActionClickError = (): React.ReactNode => {
116+
return (
117+
<>
118+
<AIChatLog>
119+
<AIChatMessage variant="user">
120+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Ridki">
121+
You
122+
</AIChatMessageAuthor>
123+
<AIChatMessageBody>Message filtered (30007)</AIChatMessageBody>
124+
</AIChatMessage>
125+
<AIChatMessage variant="bot">
126+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
127+
<AIChatMessageBody>
128+
We recommend reviewing our guidelines on filtering and scaling to better manage high volumes of messages.
129+
<Box paddingY="space50">
130+
<ButtonGroup>
131+
<Button variant="secondary" size="rounded_small">
132+
30007
133+
</Button>
134+
<Button variant="secondary" size="rounded_small">
135+
30007
136+
</Button>
137+
<Button variant="secondary" size="rounded_small">
138+
30009
139+
</Button>
140+
</ButtonGroup>
141+
</Box>
142+
143+
<Callout variant="error">
144+
<CalloutHeading as="h3">The action couldn’t be completed.</CalloutHeading>
145+
<CalloutText>
146+
Please try again, if the error persists please <Anchor href="#">contact us</Anchor>.
147+
</CalloutText>
148+
</Callout>
149+
</AIChatMessageBody>
150+
</AIChatMessage>
151+
</AIChatLog>
152+
<Box marginTop="space70">
153+
<Composer />
154+
</Box>
155+
</>
156+
);
157+
};
158+
159+
AIActionClickError.parameters = {
160+
a11y: {
161+
disable: true,
162+
},
163+
};
164+
165+
export const ActionGroupError = (): React.ReactNode => {
166+
return (
167+
<>
168+
<AIChatLog>
169+
<AIChatMessage variant="user">
170+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Ridki">
171+
You
172+
</AIChatMessageAuthor>
173+
<AIChatMessageBody>Message body text</AIChatMessageBody>
174+
</AIChatMessage>
175+
<AIChatMessage variant="bot">
176+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
177+
<AIChatMessageBody>
178+
Message body text
179+
<Box marginTop="space50">
180+
<SummaryDetail>
181+
<SummaryDetailHeading>
182+
<SummaryDetailToggleButton aria-label="BOOP" />
183+
<SummaryDetailHeadingContent>
184+
<Text as="p" fontWeight="fontWeightBold">
185+
View data sources
186+
</Text>
187+
</SummaryDetailHeadingContent>
188+
</SummaryDetailHeading>
189+
<SummaryDetailContent>Data Content</SummaryDetailContent>
190+
</SummaryDetail>
191+
</Box>
192+
193+
<AIChatMessageActionGroup>
194+
<AIChatMessageActionCard aria-label="Feedback form">
195+
Is this helpful?
196+
<Button variant="reset" size="reset" aria-label="this is a helpful response">
197+
<ThumbsUpIcon decorative={false} title="like result" />
198+
</Button>
199+
<Button variant="reset" size="reset" aria-label="this is not a helpful response">
200+
<ThumbsDownIcon decorative={false} title="dislike result" />
201+
</Button>
202+
</AIChatMessageActionCard>
203+
<AIChatMessageActionCard aria-label="Feedback form">
204+
<Button variant="secondary_icon" aria-label="this is not a helpful response" size="reset">
205+
<RefreshIcon decorative title="dislike result" />
206+
Regenerate
207+
</Button>
208+
<Button variant="secondary_icon" aria-label="this is not a helpful response" size="reset">
209+
<CopyIcon decorative title="dislike result" />
210+
Copy
211+
</Button>
212+
</AIChatMessageActionCard>
213+
</AIChatMessageActionGroup>
214+
<HelpText variant="error">The action couldn’t be completed. Please try again.</HelpText>
215+
</AIChatMessageBody>
216+
</AIChatMessage>
217+
</AIChatLog>
218+
<Box marginTop="space70">
219+
<Composer />
220+
</Box>
221+
</>
222+
);
223+
};
224+
225+
ActionGroupError.parameters = {
226+
a11y: {
227+
disable: true,
228+
},
229+
};
230+
231+
export const SendingMessageError = (): React.ReactNode => {
232+
return (
233+
<>
234+
<AIChatLog>
235+
<AIChatMessage variant="bot">
236+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
237+
<AIChatMessageBody>
238+
Messages from +1 234-292-2349 are failing due to the following top 3 errors which occurred in the past 7
239+
days:
240+
<Box paddingY="space50">
241+
<ButtonGroup>
242+
<Button variant="secondary" size="rounded_small">
243+
30007
244+
</Button>
245+
<Button variant="secondary" size="rounded_small">
246+
30034
247+
</Button>
248+
<Button variant="secondary" size="rounded_small">
249+
30024
250+
</Button>
251+
</ButtonGroup>
252+
</Box>
253+
<AIChatMessageActionGroup>
254+
<AIChatMessageActionCard aria-label="Feedback form">
255+
Is this helpful?
256+
<Button variant="reset" size="reset" aria-label="this is a helpful response">
257+
<ThumbsUpIcon decorative={false} title="like result" />
258+
</Button>
259+
<Button variant="reset" size="reset" aria-label="this is not a helpful response">
260+
<ThumbsDownIcon decorative={false} title="dislike result" />
261+
</Button>
262+
</AIChatMessageActionCard>
263+
</AIChatMessageActionGroup>
264+
</AIChatMessageBody>
265+
</AIChatMessage>
266+
267+
<AIChatMessage variant="user">
268+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Ridki">
269+
You
270+
</AIChatMessageAuthor>
271+
<AIChatMessageBody>
272+
Message body text
273+
<AIChatMessageActionGroup>
274+
<AIChatMessageActionCard aria-label="Feedback form">
275+
<HelpText marginTop="space0" variant="error">
276+
Message failed to send
277+
</HelpText>
278+
<Button variant="secondary_icon" aria-label="this is not a helpful response" size="reset">
279+
<RepeatIcon decorative title="try again" />
280+
Try again
281+
</Button>
282+
</AIChatMessageActionCard>
283+
</AIChatMessageActionGroup>
284+
</AIChatMessageBody>
285+
</AIChatMessage>
286+
</AIChatLog>
287+
<Box marginTop="space70">
288+
<Composer />
289+
</Box>
290+
</>
291+
);
292+
};
293+
294+
SendingMessageError.parameters = {
295+
a11y: {
296+
disable: true,
297+
},
298+
};
299+
300+
export const SystemError = (): React.ReactNode => {
301+
return (
302+
<>
303+
<AIChatLog>
304+
<AIChatMessage variant="user">
305+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Ridki">
306+
You
307+
</AIChatMessageAuthor>
308+
<AIChatMessageBody>Message body text</AIChatMessageBody>
309+
</AIChatMessage>
310+
<AIChatMessage variant="bot">
311+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
312+
<AIChatMessageBody>
313+
Message body text
314+
<Box marginTop="space50">
315+
<SummaryDetail>
316+
<SummaryDetailHeading>
317+
<SummaryDetailToggleButton aria-label="BOOP" />
318+
<SummaryDetailHeadingContent>
319+
<Text as="p" fontWeight="fontWeightBold">
320+
View data sources
321+
</Text>
322+
</SummaryDetailHeadingContent>
323+
</SummaryDetailHeading>
324+
<SummaryDetailContent>Data Content</SummaryDetailContent>
325+
</SummaryDetail>
326+
</Box>
327+
328+
<AIChatMessageActionGroup>
329+
<AIChatMessageActionCard aria-label="Feedback form">
330+
Is this helpful?
331+
<Button variant="reset" size="reset" aria-label="this is a helpful response">
332+
<ThumbsUpIcon decorative={false} title="like result" />
333+
</Button>
334+
<Button variant="reset" size="reset" aria-label="this is not a helpful response">
335+
<ThumbsDownIcon decorative={false} title="dislike result" />
336+
</Button>
337+
</AIChatMessageActionCard>
338+
<AIChatMessageActionCard aria-label="Feedback form">
339+
<Button variant="secondary_icon" aria-label="this is not a helpful response" size="reset">
340+
<RefreshIcon decorative title="dislike result" />
341+
Regenerate
342+
</Button>
343+
<Button variant="secondary_icon" aria-label="this is not a helpful response" size="reset">
344+
<CopyIcon decorative title="dislike result" />
345+
Copy
346+
</Button>
347+
</AIChatMessageActionCard>
348+
</AIChatMessageActionGroup>
349+
</AIChatMessageBody>
350+
</AIChatMessage>
351+
</AIChatLog>
352+
<Box marginTop="space70">
353+
<Alert variant="error">
354+
<div>
355+
<strong>Something went wrong.</strong>
356+
</div>
357+
If this issue persists please contact us through our help center.
358+
</Alert>
359+
</Box>
360+
361+
<Box marginTop="space50">
362+
<Composer />
363+
</Box>
364+
</>
365+
);
366+
};
367+
368+
SystemError.parameters = {
369+
a11y: {
370+
disable: true,
371+
},
372+
};

0 commit comments

Comments
 (0)