Skip to content

Commit 5558496

Browse files
krisantrobusTheSisbnkrantzserifluous
authored
feat(ai-chat-log): Adding docs for new component (#3963)
* chore: checkpoint ai log and ai msg * chore: checkpoint * chore: checkpoint more progress * chore: typo fix * chore: wip working useAILogger * feat: message typewriter component * chore: working typewriter * chore: name cleanup and JSDoc * chore: lint updates * chore: chageset * chore: fix lint & build * chore: build update * chore: yarn update * chore: cleanup, renaming, small refactors * chore(docs): ai chat log init * chore(docs): functional init * chore(docs): new sections complete with examples * chore(docs): wip * chore(docs): update package decription * chore(docs): chat log typo * chore(docs): renaming for enw imports and AIChatLogger example * chore(docs): loading notes and removal of action buttons * chore(docs): reference other type of ChatLog * chore: checkpoint ai log and ai msg * chore: checkpoint * chore: checkpoint more progress * chore: typo fix * chore: wip working useAILogger * feat: message typewriter component * chore: working typewriter * chore: name cleanup and JSDoc * chore: lint updates * chore: chageset * chore: fix lint & build * chore: build update * chore: yarn update * chore: cleanup, renaming, small refactors * chore: animations * chore: refactors renaming and composer story * feat(button): allow `pressed` on reset buttons * test: add tests and update stories * chore: type docs * chore: codemods changeset * chore(docs): ai logs update * chore(docs): ui logs update * chore(docs): revert flex test * chore(docs): ia logs update * chore(button): undo toggle reset change and add border radius to reset * chore(button-group): flex unattached groups * chore: actioin card changes from huddle * chore: update all stories with changes * chore: typedocs * chore(docs): update action card naming * chore(docs): cleanup PR * chore(docs): add vrt for new docs pages * feat(docs): update imports * feat(docs): updated imports * chore(docs): add dependency * chore(docs): update lock file * chore(docs): update descprition * chore(docs): typo fix * feat(docs/ai): address PR comments * feat(docs/ai): move buttons to next line * Apply suggestions from code review Co-authored-by: Sarah <sali@twilio.com> --------- Co-authored-by: TheSisb <shadiisber@gmail.com> Co-authored-by: Nora Krantz <75342690+nkrantz@users.noreply.github.com> Co-authored-by: “nora <nkrantz@twilio.com> Co-authored-by: Sarah <sali@twilio.com>
1 parent b5e6d3f commit 5558496

File tree

12 files changed

+835
-19
lines changed

12 files changed

+835
-19
lines changed

‎.changeset/pretty-melons-punch.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
"@twilio-paste/core": patch
44
---
55

6-
[Button] Add border radius 20 to size="reset" buttons which can be overridden by passing a border radius token to variant="reset" and size="reset" buttons
6+
[Button] Add border radius 20 to size="reset" buttons which can be overridden by passing a border radius token to variant="reset" and size="reset" buttons

‎cypress/integration/sitemap-vrt/constants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ export const SITEMAP = [
2424
"/components/account-switcher/",
2525
"/components/account-switcher/api",
2626
"/components/account-switcher/changelog",
27+
"/components/ai-chat-log/",
28+
"/components/ai-chat-log/api",
29+
"/components/ai-chat-log/changelog",
2730
"/components/aspect-ratio/",
2831
"/components/aspect-ratio/api",
2932
"/components/aspect-ratio/changelog",

‎packages/paste-core/components/ai-chat-log/CHANGELOG.md

Whitespace-only changes.

‎packages/paste-core/components/ai-chat-log/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0",
44
"category": "data display",
55
"status": "production",
6-
"description": "Ai chat log.",
6+
"description": "An AI Chat Log is a collection of AI Chat components for displaying conversations between a human and an AI bot.",
77
"author": "Twilio Inc.",
88
"license": "MIT",
99
"main:dev": "src/index.tsx",

‎packages/paste-website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@tanstack/react-query": "^5.17.9",
3535
"@tanstack/react-query-devtools": "^5.17.10",
3636
"@twilio-paste/account-switcher": "^3.0.1",
37+
"@twilio-paste/ai-chat-log": "^0.0.0",
3738
"@twilio-paste/alert": "^14.1.0",
3839
"@twilio-paste/alert-dialog": "^9.2.0",
3940
"@twilio-paste/anchor": "^12.1.0",

‎packages/paste-website/src/component-examples/AIChatLogExamples.ts

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
export const basicBotMessage = `
2+
const BasicMessage = () => {
3+
return (
4+
<AIChatLog>
5+
<AIChatMessage variant="bot">
6+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
7+
<AIChatMessageBody>
8+
Here is what I found, error code 30003 means: The destination phone is unavailable or turned off, or it may be a landline or phone that doesn't support SMS.
9+
</AIChatMessageBody>
10+
</AIChatMessage>
11+
</AIChatLog>
12+
);
13+
};
14+
15+
render(
16+
<BasicMessage />
17+
)`.trim();
18+
export const basicHumanMessage = `
19+
const BasicMessage = () => {
20+
return (
21+
<AIChatLog>
22+
<AIChatMessage variant="user">
23+
<AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
24+
<AIChatMessageBody>
25+
I would like some information on twilio error codes for undelivered messages
26+
</AIChatMessageBody>
27+
</AIChatMessage>
28+
</AIChatLog>
29+
);
30+
};
31+
32+
render(
33+
<BasicMessage />
34+
)`.trim();
35+
export const botWithFeedback = `
36+
const MessageWithFeedback = () => {
37+
return (
38+
<AIChatLog>
39+
<AIChatMessage variant="bot">
40+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
41+
<AIChatMessageBody>
42+
Here is what I found, error code 30003 means: The destination phone is unavailable or turned off, or it may be a landline or phone that doesn't support SMS.
43+
</AIChatMessageBody>
44+
<AIChatMessageActionGroup>
45+
<AIChatMessageActionCard aria-label="Feedback form">
46+
Is this helpful?
47+
<Button variant="reset" size="reset" aria-label="this is a helpful response">
48+
<ThumbsUpIcon decorative={false} title="like result" />
49+
</Button>
50+
<Button variant="reset" size="reset">
51+
<ThumbsDownIcon decorative={false} title="dislike result" aria-label="this is not a helpful response" />
52+
</Button>
53+
</AIChatMessageActionCard>
54+
<AIChatMessageActionCard aria-label="Rewrite and copy buttons">
55+
<Button variant="reset" size="reset">
56+
<RefreshIcon decorative={true}/> Rewrite
57+
</Button>
58+
<Button variant="reset" size="reset">
59+
<CopyIcon decorative={true}/> Copy
60+
</Button>
61+
</AIChatMessageActionCard>
62+
</AIChatMessageActionGroup>
63+
</AIChatMessage>
64+
</AIChatLog>
65+
);
66+
};
67+
68+
render(
69+
<MessageWithFeedback />
70+
)`.trim();
71+
export const botWithBodyActions = `
72+
const MessageWithFeedback = () => {
73+
return (
74+
<AIChatLog>
75+
<AIChatMessage variant="bot">
76+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
77+
<AIChatMessageBody>
78+
<Paragraph>Below is a list of actions that can be taken with flex wrapping supported:</Paragraph>
79+
<ButtonGroup>
80+
<Button variant="secondary" size="rounded_small" onClick={() => {}} >
81+
View Logs
82+
</Button>
83+
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
84+
Run Diagnostics
85+
</Button>
86+
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
87+
Submit Bug Report
88+
</Button>
89+
</ButtonGroup>
90+
</AIChatMessageBody>
91+
</AIChatMessage>
92+
</AIChatLog>
93+
);
94+
};
95+
96+
render(
97+
<MessageWithFeedback />
98+
)`.trim();
99+
export const botWithLoadingStopButton = `
100+
const MessageWithLoadingAndStop = () => {
101+
return (
102+
<AIChatLog>
103+
<AIChatMessage variant="bot">
104+
<AIChatMessageAuthor aria-label="AI said" bot>
105+
Good Bot
106+
</AIChatMessageAuthor>
107+
<AIChatMessageBody>
108+
<AIChatMessageLoading onStopLoading={() => {}} />
109+
</AIChatMessageBody>
110+
</AIChatMessage>
111+
</AIChatLog>
112+
);
113+
};
114+
115+
render(
116+
<MessageWithLoadingAndStop />
117+
)`.trim();
118+
export const botWithLoading = `
119+
const MessageWithLoading = () => {
120+
return (
121+
<AIChatLog>
122+
<AIChatMessage variant="bot">
123+
<AIChatMessageAuthor aria-label="AI said" bot>
124+
Good Bot
125+
</AIChatMessageAuthor>
126+
<AIChatMessageBody>
127+
<AIChatMessageLoading />
128+
</AIChatMessageBody>
129+
</AIChatMessage>
130+
</AIChatLog>
131+
);
132+
};
133+
134+
render(
135+
<MessageWithLoading />
136+
)`.trim();
137+
export const kitchenSink = `
138+
const AIChatLogExample = () => {
139+
return (
140+
<AIChatLog>
141+
<AIChatMessage variant="user">
142+
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
143+
<AIChatMessageBody>
144+
Hi, I'm getting errors codes when sending an SMS.
145+
</AIChatMessageBody>
146+
</AIChatMessage>
147+
<AIChatMessage variant="bot">
148+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
149+
<AIChatMessageBody>
150+
<Paragraph>Error codes can be returned from various parts of the process. What error codes are you encountering?</Paragragh>
151+
<ButtonGroup>
152+
<Button variant="secondary" size="rounded_small" onClick={() => {}} >
153+
21608
154+
</Button>
155+
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
156+
30007
157+
</Button>
158+
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
159+
30009
160+
</Button>
161+
</ButtonGroup>
162+
</AIChatMessageBody>
163+
</AIChatMessage>
164+
<AIChatMessage variant="bot">
165+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
166+
<AIChatMessageBody>
167+
Error 21608 means you're trying to send a message from an unverified number. Is your number verified in your Twilio account?
168+
</AIChatMessageBody>
169+
<AIChatMessageActionGroup>
170+
<AIChatMessageActionCard aria-label="Feedback form">
171+
Is this helpful?
172+
<Button variant="reset" size="reset" aria-label="this is a helpful response">
173+
<ThumbsUpIcon decorative={false} title="like result" />
174+
</Button>
175+
<Button variant="reset" size="reset">
176+
<ThumbsDownIcon decorative={false} title="dislike result" aria-label="this is not a helpful response"/>
177+
</Button>
178+
</AIChatMessageActionCard>
179+
</AIChatMessageActionGroup>
180+
</AIChatMessage>
181+
<AIChatMessage variant="user">
182+
<AIChatMessageAuthor aria-label="You said" bot>
183+
Gibby Radki
184+
</AIChatMessageAuthor>
185+
<AIChatMessageBody>
186+
No, how do I verify it?
187+
</AIChatMessageBody>
188+
</AIChatMessage>
189+
<AIChatMessage variant="bot">
190+
<AIChatMessageAuthor aria-label="AI said" bot>
191+
Good Bot
192+
</AIChatMessageAuthor>
193+
<AIChatMessageBody>
194+
<AIChatMessageLoading onStopLoading={() => {}} />
195+
</AIChatMessageBody>
196+
</AIChatMessage>
197+
</AIChatLog>
198+
);
199+
};
200+
201+
render(
202+
<AIChatLogExample />
203+
)`.trim();
204+
export const aiChatLoggerExample = `
205+
const aiChatFactory = ([ message, variant, metaLabel, meta ]) => {
206+
const time = new Date(0).toLocaleString(
207+
'en-US',
208+
{ hour: 'numeric', minute: 'numeric', timeZone: 'UTC', hour12: true }
209+
)
210+
211+
return {
212+
variant,
213+
content: (
214+
<AIChatMessage variant={variant}>
215+
<AIChatMessageAuthor aria-label={metaLabel + time}>{meta}</AIChatMessageAuthor>
216+
<AIChatMessageBody>
217+
{message}
218+
</AIChatMessageBody>
219+
</AIChatMessage>
220+
)
221+
}
222+
};
223+
224+
const chatTemplates = [
225+
["Hello", "user", "You said at ", "Gibby Radki"],
226+
["Hi there", "bot", "AI said at ", "Good Bot"],
227+
["Greetings", "user", "You said at ", "Gibby Radki"],
228+
["Good to meet you", "bot", "AI said at ", "Good Bot"]
229+
];
230+
231+
const AIChatLoggerExample = () => {
232+
const [templateIdx, setTemplateIdx] = React.useState(2);
233+
const { aiChats, push, pop, clear } = useAIChatLogger(
234+
aiChatFactory(chatTemplates[0]),
235+
aiChatFactory(chatTemplates[1])
236+
);
237+
const [loading, setLoading] = React.useState(false);
238+
239+
const pushChat = () => {
240+
const template = chatTemplates[templateIdx];
241+
setTemplateIdx((idx) => ++idx % chatTemplates.length);
242+
const chat = aiChatFactory(template);
243+
244+
if (template[1] === "bot") {
245+
const id = uid(chat.content);
246+
setLoading(true);
247+
push({
248+
id,
249+
variant: template[1],
250+
content: (
251+
<AIChatMessage variant="bot">
252+
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
253+
<AIChatMessageBody>
254+
<AIChatMessageLoading />
255+
</AIChatMessageBody>
256+
</AIChatMessage>
257+
),
258+
});
259+
setTimeout(() => {
260+
pop(id);
261+
setLoading(false);
262+
push(chat);
263+
}, 1000);
264+
} else {
265+
push(chat);
266+
}
267+
}
268+
269+
const popChat = () => {
270+
pop();
271+
setTemplateIdx((idx) => idx === 0 ? idx : --idx % chatTemplates.length);
272+
}
273+
274+
return(
275+
<Stack orientation="vertical">
276+
<ButtonGroup>
277+
<Button variant="primary" disabled={loading} onClick={pushChat}>
278+
Push Chat
279+
</Button>
280+
<Button variant="primary" disabled={loading} onClick={popChat}>
281+
Pop Chat
282+
</Button>
283+
<Button variant="primary" disabled={loading} onClick={clear}>
284+
Clear Chat
285+
</Button>
286+
</ButtonGroup>
287+
<AIChatLogger aiChats={aiChats} />
288+
</Stack>
289+
)
290+
}
291+
292+
render(<AIChatLoggerExample />);
293+
`.trim();
294+
export const avatarExample = `
295+
const AvatarExample = () => {
296+
return (
297+
<AIChatLog>
298+
<AIChatMessage variant="user">
299+
<AIChatMessageAuthor avatarIcon={LogoTwilioIcon} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
300+
</AIChatMessage>
301+
<AIChatMessage variant="user">
302+
<AIChatMessageAuthor avatarSrc={Logo.src} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
303+
</AIChatMessage>
304+
</AIChatLog>
305+
);
306+
};
307+
308+
render(
309+
<AvatarExample />
310+
)`.trim();

0 commit comments

Comments
 (0)