Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - ai-chat-log
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
{ return h(AIChatLog, null, h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageBody, null, "I am a helpful AI assistant. How can I help you today?") ) ); }; // User Message Example const UserMessageExample = () => { return h(AIChatLog, null, h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "Hello, I need help with my Twilio account.") ) ); }; // Feedback Actions Example const FeedbackActionsExample = () => { return h(AIChatLog, null, h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageBody, null, "Here's the information you requested. Was this helpful?"), h(AIChatMessageActionGroup, null, h(AIChatMessageActionCard, { "aria-label": "Thumbs up" }, h(Button, { variant: "reset", size: "reset" }, h(ThumbsUpIcon, { decorative: true, size: "sizeIcon20" }) ) ), h(AIChatMessageActionCard, { "aria-label": "Thumbs down" }, h(Button, { variant: "reset", size: "reset" }, h(ThumbsDownIcon, { decorative: true, size: "sizeIcon20" }) ) ), h(AIChatMessageActionCard, { "aria-label": "Copy response" }, h(Button, { variant: "reset", size: "reset" }, h(CopyIcon, { decorative: true, size: "sizeIcon20" }) ) ), h(AIChatMessageActionCard, { "aria-label": "Refresh response" }, h(Button, { variant: "reset", size: "reset" }, h(RefreshIcon, { decorative: true, size: "sizeIcon20" }) ) ) ) ) ); }; // Loading Example const LoadingExample = () => { return h(AIChatLog, null, h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "Can you help me understand Twilio's pricing?") ), h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageLoading, null) ) ); }; // Loading with Stop Example const LoadingStopExample = () => { return h(AIChatLog, null, h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "Generate a long explanation about Twilio services.") ), h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageLoading, null, h(Button, { variant: "secondary", size: "small" }, "Stop generating") ) ) ); }; // Avatar Example const AvatarExample = () => { return h(AIChatLog, null, h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "Twilio AI said", avatarIcon: h(LogoTwilioIcon, { decorative: true }) }, "Twilio Assistant"), h(AIChatMessageBody, null, "Hello! I'm your Twilio assistant. How can I help you today?") ) ); }; // Kitchen Sink Example const KitchenSinkExample = () => { return h(AIChatLog, null, h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "What are the best practices for SMS delivery?") ), h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageBody, null, "Here are some best practices for SMS delivery:\n\n1. Use verified sender IDs\n2. Avoid spam trigger words\n3. Include opt-out instructions\n4. Monitor delivery rates"), h(AIChatMessageActionGroup, null, h(AIChatMessageActionCard, { "aria-label": "Thumbs up" }, h(Button, { variant: "reset", size: "reset" }, h(ThumbsUpIcon, { decorative: true, size: "sizeIcon20" }) ) ), h(AIChatMessageActionCard, { "aria-label": "Thumbs down" }, h(Button, { variant: "reset", size: "reset" }, h(ThumbsDownIcon, { decorative: true, size: "sizeIcon20" }) ) ), h(AIChatMessageActionCard, { "aria-label": "Copy response" }, h(Button, { variant: "reset", size: "reset" }, h(CopyIcon, { decorative: true, size: "sizeIcon20" }) ) ) ) ), h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "Can you provide more details about delivery rates?") ), h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageLoading, null) ) ); }; // Generation Error Example const GenerationErrorExample = () => { return h(Box, null, h(AIChatLog, null, h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "Explain Twilio's API rate limits.") ), h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(Callout, { variant: "error" }, h(CalloutHeading, null, "Unable to generate response"), h(CalloutText, null, "I'm having trouble generating a response right now. ", h(Anchor, { href: "#" }, "Try again"), " or ", h(Anchor, { href: "#" }, "contact support"), " if the issue persists." ) ), h(AIChatMessageActionGroup, null, h(AIChatMessageActionCard, { "aria-label": "Regenerate response" }, h(Button, { variant: "reset", size: "reset" }, h(RefreshIcon, { decorative: true, size: "sizeIcon20" }) ) ) ) ) ) ); }; // Action Error Example const ActionErrorExample = () => { return h(Box, null, h(AIChatLog, null, h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageBody, null, "Here's information about Twilio's pricing structure."), h(Callout, { variant: "error" }, h(CalloutHeading, null, "Action failed"), h(CalloutText, null, "Unable to process your request. ", h(Anchor, { href: "#" }, "Contact support"), " if the issue persists." ) ), h(AIChatMessageActionGroup, null, h(AIChatMessageActionCard, { "aria-label": "Thumbs up" }, h(Button, { variant: "reset", size: "reset" }, h(ThumbsUpIcon, { decorative: true, size: "sizeIcon20" }) ) ), h(AIChatMessageActionCard, { "aria-label": "Thumbs down" }, h(Button, { variant: "reset", size: "reset" }, h(ThumbsDownIcon, { decorative: true, size: "sizeIcon20" }) ) ) ) ) ) ); }; // System Error Example const SystemErrorExample = () => { return h(Box, null, h(Alert, { variant: "error" }, h(Text, null, "Connection lost. Please refresh the page to continue chatting.") ), h(AIChatLog, null, h(AIChatMessage, { variant: "user" }, h(AIChatMessageBody, null, "What are Twilio's supported countries?") ), h(AIChatMessage, { variant: "bot" }, h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageBody, null, "Twilio supports messaging in over 180 countries worldwide...") ) ) ); }; // Chat Logger Example const ChatLoggerExample = () => { const [messages, setMessages] = useState([ { id: "1", variant: "user", content: "Hello, can you help me?" }, { id: "2", variant: "bot", content: "Of course! I'm here to help. What do you need assistance with?" } ]); const addUserMessage = () => { const newMessage = { id: Date.now().toString(), variant: "user", content: "This is a new user message." }; setMessages(prev => [...prev, newMessage]); }; const addBotMessage = () => { const newMessage = { id: Date.now().toString(), variant: "bot", content: "This is a new bot response." }; setMessages(prev => [...prev, newMessage]); }; const clearMessages = () => { setMessages([]); }; return h(Box, null, h(ButtonGroup, null, h(Button, { onClick: addUserMessage, variant: "secondary" }, "Add User Message"), h(Button, { onClick: addBotMessage, variant: "secondary" }, "Add Bot Message"), h(Button, { onClick: clearMessages, variant: "destructive_secondary" }, "Clear All") ), h(Box, { marginTop: "space40" }, h(AIChatLog, null, ...messages.map(message => h(AIChatMessage, { key: message.id, variant: message.variant }, message.variant === "bot" && h(AIChatMessageAuthor, { "aria-label": "AI said" }, "Good Bot"), h(AIChatMessageBody, null, message.content) ) ) ) ) ); }; // Render all examples createRoot(document.getElementById("basic-example")).render(h(BasicExample)); createRoot(document.getElementById("bot-message-example")).render(h(BotMessageExample)); createRoot(document.getElementById("user-message-example")).render(h(UserMessageExample)); createRoot(document.getElementById("feedback-actions-example")).render(h(FeedbackActionsExample)); createRoot(document.getElementById("loading-example")).render(h(LoadingExample)); createRoot(document.getElementById("loading-stop-example")).render(h(LoadingStopExample)); createRoot(document.getElementById("avatar-example")).render(h(AvatarExample)); createRoot(document.getElementById("kitchen-sink-example")).render(h(KitchenSinkExample)); createRoot(document.getElementById("generation-error-example")).render(h(GenerationErrorExample)); createRoot(document.getElementById("action-error-example")).render(h(ActionErrorExample)); createRoot(document.getElementById("system-error-example")).render(h(SystemErrorExample)); createRoot(document.getElementById("chat-logger-example")).render(h(ChatLoggerExample)); } </script></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">