Skip to content

Commit

Permalink
feat(ai-chat-log): Adding docs for new component (#3963)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>

---------

Co-authored-by: TheSisb <[email protected]>
Co-authored-by: Nora Krantz <[email protected]>
Co-authored-by: “nora <[email protected]>
Co-authored-by: Sarah <[email protected]>
  • Loading branch information
@krisantrobus @TheSisb
@nkrantz @serifluous
5 people authored Jul 1, 2024
1 parent b5e6d3f commit 5558496
Show file tree
Hide file tree
Showing 12 changed files with 835 additions and 19 deletions.
2 changes: 1 addition & 1 deletion .changeset/pretty-melons-punch.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
"@twilio-paste/core": patch
---

[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
[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
3 changes: 3 additions & 0 deletions cypress/integration/sitemap-vrt/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export const SITEMAP = [
"/components/account-switcher/",
"/components/account-switcher/api",
"/components/account-switcher/changelog",
"/components/ai-chat-log/",
"/components/ai-chat-log/api",
"/components/ai-chat-log/changelog",
"/components/aspect-ratio/",
"/components/aspect-ratio/api",
"/components/aspect-ratio/changelog",
Expand Down
Empty file added packages/paste-core/components/ai-chat-log/CHANGELOG.md
View file
Empty file.
2 changes: 1 addition & 1 deletion packages/paste-core/components/ai-chat-log/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.0.0",
"category": "data display",
"status": "production",
"description": "Ai chat log.",
"description": "An AI Chat Log is a collection of AI Chat components for displaying conversations between a human and an AI bot.",
"author": "Twilio Inc.",
"license": "MIT",
"main:dev": "src/index.tsx",
Expand Down
1 change: 1 addition & 0 deletions packages/paste-website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"@tanstack/react-query": "^5.17.9",
"@tanstack/react-query-devtools": "^5.17.10",
"@twilio-paste/account-switcher": "^3.0.1",
"@twilio-paste/ai-chat-log": "^0.0.0",
"@twilio-paste/alert": "^14.1.0",
"@twilio-paste/alert-dialog": "^9.2.0",
"@twilio-paste/anchor": "^12.1.0",
Expand Down
310 changes: 310 additions & 0 deletions packages/paste-website/src/component-examples/AIChatLogExamples.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,310 @@
export const basicBotMessage = `
const BasicMessage = () => {
return (
<AIChatLog>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
<AIChatMessageBody>
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.
</AIChatMessageBody>
</AIChatMessage>
</AIChatLog>
);
};
render(
<BasicMessage />
)`.trim();
export const basicHumanMessage = `
const BasicMessage = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageBody>
I would like some information on twilio error codes for undelivered messages
</AIChatMessageBody>
</AIChatMessage>
</AIChatLog>
);
};
render(
<BasicMessage />
)`.trim();
export const botWithFeedback = `
const MessageWithFeedback = () => {
return (
<AIChatLog>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
<AIChatMessageBody>
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.
</AIChatMessageBody>
<AIChatMessageActionGroup>
<AIChatMessageActionCard aria-label="Feedback form">
Is this helpful?
<Button variant="reset" size="reset" aria-label="this is a helpful response">
<ThumbsUpIcon decorative={false} title="like result" />
</Button>
<Button variant="reset" size="reset">
<ThumbsDownIcon decorative={false} title="dislike result" aria-label="this is not a helpful response" />
</Button>
</AIChatMessageActionCard>
<AIChatMessageActionCard aria-label="Rewrite and copy buttons">
<Button variant="reset" size="reset">
<RefreshIcon decorative={true}/> Rewrite
</Button>
<Button variant="reset" size="reset">
<CopyIcon decorative={true}/> Copy
</Button>
</AIChatMessageActionCard>
</AIChatMessageActionGroup>
</AIChatMessage>
</AIChatLog>
);
};
render(
<MessageWithFeedback />
)`.trim();
export const botWithBodyActions = `
const MessageWithFeedback = () => {
return (
<AIChatLog>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
<AIChatMessageBody>
<Paragraph>Below is a list of actions that can be taken with flex wrapping supported:</Paragraph>
<ButtonGroup>
<Button variant="secondary" size="rounded_small" onClick={() => {}} >
View Logs
</Button>
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
Run Diagnostics
</Button>
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
Submit Bug Report
</Button>
</ButtonGroup>
</AIChatMessageBody>
</AIChatMessage>
</AIChatLog>
);
};
render(
<MessageWithFeedback />
)`.trim();
export const botWithLoadingStopButton = `
const MessageWithLoadingAndStop = () => {
return (
<AIChatLog>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said" bot>
Good Bot
</AIChatMessageAuthor>
<AIChatMessageBody>
<AIChatMessageLoading onStopLoading={() => {}} />
</AIChatMessageBody>
</AIChatMessage>
</AIChatLog>
);
};
render(
<MessageWithLoadingAndStop />
)`.trim();
export const botWithLoading = `
const MessageWithLoading = () => {
return (
<AIChatLog>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said" bot>
Good Bot
</AIChatMessageAuthor>
<AIChatMessageBody>
<AIChatMessageLoading />
</AIChatMessageBody>
</AIChatMessage>
</AIChatLog>
);
};
render(
<MessageWithLoading />
)`.trim();
export const kitchenSink = `
const AIChatLogExample = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageBody>
Hi, I'm getting errors codes when sending an SMS.
</AIChatMessageBody>
</AIChatMessage>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
<AIChatMessageBody>
<Paragraph>Error codes can be returned from various parts of the process. What error codes are you encountering?</Paragragh>
<ButtonGroup>
<Button variant="secondary" size="rounded_small" onClick={() => {}} >
21608
</Button>
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
30007
</Button>
<Button variant="secondary" size="rounded_small" onClick={() => {}}>
30009
</Button>
</ButtonGroup>
</AIChatMessageBody>
</AIChatMessage>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
<AIChatMessageBody>
Error 21608 means you're trying to send a message from an unverified number. Is your number verified in your Twilio account?
</AIChatMessageBody>
<AIChatMessageActionGroup>
<AIChatMessageActionCard aria-label="Feedback form">
Is this helpful?
<Button variant="reset" size="reset" aria-label="this is a helpful response">
<ThumbsUpIcon decorative={false} title="like result" />
</Button>
<Button variant="reset" size="reset">
<ThumbsDownIcon decorative={false} title="dislike result" aria-label="this is not a helpful response"/>
</Button>
</AIChatMessageActionCard>
</AIChatMessageActionGroup>
</AIChatMessage>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said" bot>
Gibby Radki
</AIChatMessageAuthor>
<AIChatMessageBody>
No, how do I verify it?
</AIChatMessageBody>
</AIChatMessage>
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said" bot>
Good Bot
</AIChatMessageAuthor>
<AIChatMessageBody>
<AIChatMessageLoading onStopLoading={() => {}} />
</AIChatMessageBody>
</AIChatMessage>
</AIChatLog>
);
};
render(
<AIChatLogExample />
)`.trim();
export const aiChatLoggerExample = `
const aiChatFactory = ([ message, variant, metaLabel, meta ]) => {
const time = new Date(0).toLocaleString(
'en-US',
{ hour: 'numeric', minute: 'numeric', timeZone: 'UTC', hour12: true }
)
return {
variant,
content: (
<AIChatMessage variant={variant}>
<AIChatMessageAuthor aria-label={metaLabel + time}>{meta}</AIChatMessageAuthor>
<AIChatMessageBody>
{message}
</AIChatMessageBody>
</AIChatMessage>
)
}
};
const chatTemplates = [
["Hello", "user", "You said at ", "Gibby Radki"],
["Hi there", "bot", "AI said at ", "Good Bot"],
["Greetings", "user", "You said at ", "Gibby Radki"],
["Good to meet you", "bot", "AI said at ", "Good Bot"]
];
const AIChatLoggerExample = () => {
const [templateIdx, setTemplateIdx] = React.useState(2);
const { aiChats, push, pop, clear } = useAIChatLogger(
aiChatFactory(chatTemplates[0]),
aiChatFactory(chatTemplates[1])
);
const [loading, setLoading] = React.useState(false);
const pushChat = () => {
const template = chatTemplates[templateIdx];
setTemplateIdx((idx) => ++idx % chatTemplates.length);
const chat = aiChatFactory(template);
if (template[1] === "bot") {
const id = uid(chat.content);
setLoading(true);
push({
id,
variant: template[1],
content: (
<AIChatMessage variant="bot">
<AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
<AIChatMessageBody>
<AIChatMessageLoading />
</AIChatMessageBody>
</AIChatMessage>
),
});
setTimeout(() => {
pop(id);
setLoading(false);
push(chat);
}, 1000);
} else {
push(chat);
}
}
const popChat = () => {
pop();
setTemplateIdx((idx) => idx === 0 ? idx : --idx % chatTemplates.length);
}
return(
<Stack orientation="vertical">
<ButtonGroup>
<Button variant="primary" disabled={loading} onClick={pushChat}>
Push Chat
</Button>
<Button variant="primary" disabled={loading} onClick={popChat}>
Pop Chat
</Button>
<Button variant="primary" disabled={loading} onClick={clear}>
Clear Chat
</Button>
</ButtonGroup>
<AIChatLogger aiChats={aiChats} />
</Stack>
)
}
render(<AIChatLoggerExample />);
`.trim();
export const avatarExample = `
const AvatarExample = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor avatarIcon={LogoTwilioIcon} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
</AIChatMessage>
<AIChatMessage variant="user">
<AIChatMessageAuthor avatarSrc={Logo.src} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
</AIChatMessage>
</AIChatLog>
);
};
render(
<AvatarExample />
)`.trim();
Loading

0 comments on commit 5558496

Please sign in to comment.