Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - 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
<div style="margin-bottom: 16px;"> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-left: auto; margin-bottom: 4px;"> Hello, what can I help you with? </div> <div style="text-align: right; font-size: 12px; color: #606B85;"> <span style="display: inline-flex; align-items: center; gap: 4px;"> <div style="width: 20px; height: 20px; border-radius: 50%; background: #0263E0; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px;">GR</div> Gibby Radki ・ 3:35 PM </span> </div> </div> <div style="margin-bottom: 16px;"> <div style="background: #0263E0; color: white; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-bottom: 4px;"> Hi! What is your return policy? </div> <div style="text-align: left; font-size: 12px; color: #606B85;">3:35 PM</div> </div> </div> `; } // Inbound Example const inboundExample = document.getElementById('inbound-example'); if (inboundExample) { inboundExample.innerHTML = ` <div role="log"> <div style="margin-bottom: 16px;"> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%;"> Hello, what can I help you with? </div> </div> </div> `; } // Outbound Example const outboundExample = document.getElementById('outbound-example'); if (outboundExample) { outboundExample.innerHTML = ` <div role="log"> <div style="margin-bottom: 16px;"> <div style="background: #0263E0; color: white; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-left: auto;"> Hi! What is your return policy? </div> </div> </div> `; } // Meta Example const metaExample = document.getElementById('meta-example'); if (metaExample) { metaExample.innerHTML = ` <div role="log"> <div style="margin-bottom: 16px;"> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-bottom: 4px;"> Hello, what can I help you with? </div> <div style="text-align: left; font-size: 12px; color: #606B85;" aria-label="said by Gibby Radki at 3:35 PM"> <span style="display: inline-flex; align-items: center; gap: 4px;"> <div style="width: 20px; height: 20px; border-radius: 50%; background: #0263E0; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px;">GR</div> Gibby Radki ・ 3:35 PM </span> </div> </div> </div> `; } // Attachment Example const attachmentExample = document.getElementById('attachment-example'); if (attachmentExample) { attachmentExample.innerHTML = ` <div role="log"> <div style="margin-bottom: 16px;"> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-bottom: 8px;"> Here is the document you requested </div> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; border: 1px solid #E1E3EA;"> <div style="display: flex; align-items: center; gap: 8px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 12l-4-4h2.5V4h3v4H12l-4 4z"/> </svg> <div> <div style="font-weight: 600; font-size: 14px;">document.pdf</div> <div style="font-size: 12px; color: #606B85;">PDF • 2.5 MB</div> </div> </div> </div> </div> </div> `; } // Event Example const eventExample = document.getElementById('event-example'); if (eventExample) { eventExample.innerHTML = ` <div role="log"> <div style="text-align: center; margin: 16px 0;"> <div style="background: #F4F4F6; padding: 8px 16px; border-radius: 16px; display: inline-block; font-size: 12px; color: #606B85;"> Gibby Radki joined the chat </div> </div> </div> `; } // Bookend Example const bookendExample = document.getElementById('bookend-example'); if (bookendExample) { bookendExample.innerHTML = ` <div role="log"> <div style="text-align: center; margin: 20px 0;"> <div style="background: #F4F4F6; padding: 8px 16px; border-radius: 16px; display: inline-block; font-size: 12px; color: #606B85;"> Chat started on March 15, 2024 </div> </div> </div> `; } // Complete Example const completeExample = document.getElementById('complete-example'); if (completeExample) { completeExample.innerHTML = ` <div role="log" style="max-height: 400px; overflow-y: auto;"> <div style="text-align: center; margin: 20px 0;"> <div style="background: #F4F4F6; padding: 8px 16px; border-radius: 16px; display: inline-block; font-size: 12px; color: #606B85;"> Chat started on March 15, 2024 </div> </div> <div style="margin-bottom: 16px;"> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-bottom: 4px;"> Hello! How can I help you today? </div> <div style="text-align: left; font-size: 12px; color: #606B85;"> <span style="display: inline-flex; align-items: center; gap: 4px;"> <div style="width: 20px; height: 20px; border-radius: 50%; background: #0263E0; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px;">GR</div> Gibby Radki ・ 3:35 PM </span> </div> </div> <div style="margin-bottom: 16px;"> <div style="background: #0263E0; color: white; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-left: auto; margin-bottom: 4px;"> Hi! I need help with my recent order </div> <div style="text-align: right; font-size: 12px; color: #606B85;">3:36 PM</div> </div> <div style="text-align: center; margin: 16px 0;"> <div style="background: #F4F4F6; padding: 8px 16px; border-radius: 16px; display: inline-block; font-size: 12px; color: #606B85;"> Agent is typing... </div> </div> <div style="margin-bottom: 16px;"> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; margin-bottom: 8px;"> I can help you with that! Let me pull up your order details. </div> <div style="background: #F4F4F6; padding: 12px 16px; border-radius: 8px; max-width: 70%; border: 1px solid #E1E3EA;"> <div style="display: flex; align-items: center; gap: 8px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 12l-4-4h2.5V4h3v4H12l-4 4z"/> </svg> <div> <div style="font-weight: 600; font-size: 14px;">order-receipt.pdf</div> <div style="font-size: 12px; color: #606B85;">PDF • 1.2 MB</div> </div> </div> </div> <div style="text-align: left; font-size: 12px; color: #606B85; margin-top: 4px;"> <span style="display: inline-flex; align-items: center; gap: 4px;"> <div style="width: 20px; height: 20px; border-radius: 50%; background: #0263E0; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px;">GR</div> Gibby Radki ・ 3:37 PM </span> </div> </div> </div> `; } // Logger Example with interactive functionality let chatMessages = [ { id: 1, text: "Welcome to our chat!", variant: "inbound", time: "3:30 PM" }, { id: 2, text: "Hello! Thanks for reaching out.", variant: "outbound", time: "3:31 PM" } ]; function renderLoggerExample() { const loggerExample = document.getElementById('logger-example'); if (loggerExample) { loggerExample.innerHTML = ` <div role="log" style="min-height: 200px; max-height: 300px; overflow-y: auto; border: 1px solid #E1E3EA; border-radius: 8px; padding: 16px;"> ${chatMessages.map(msg => ` <div style="margin-bottom: 16px;"> <div style="background: ${msg.variant === 'inbound' ? '#F4F4F6' : '#0263E0'}; color: ${msg.variant === 'inbound' ? 'inherit' : 'white'}; padding: 12px 16px; border-radius: 8px; max-width: 70%; ${msg.variant === 'outbound' ? 'margin-left: auto;' : ''}"> ${msg.text} </div> <div style="text-align: ${msg.variant === 'inbound' ? 'left' : 'right'}; font-size: 12px; color: #606B85; margin-top: 4px;">${msg.time}</div> </div> `).join('')} </div> `; } } window.addMessage = function() { const newMessage = { id: Date.now(), text: `New message ${chatMessages.length + 1}`, variant: Math.random() > 0.5 ? 'inbound' : 'outbound', time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) }; chatMessages.push(newMessage); renderLoggerExample(); }; window.removeMessage = function() { if (chatMessages.length > 0) { chatMessages.pop(); renderLoggerExample(); } }; window.clearMessages = function() { chatMessages = []; renderLoggerExample(); }; renderLoggerExample(); }, 1000); </script> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub. </p></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">