Conversation bubbles with a typing indicator, streamed replies, timestamps, and delivery status.
import * as React from 'react'
import MessageBubble, { type MessageStatus } from '@/components/ui/message-bubble'
const reply =
'The email field is missing a persistent label. I can add one and preserve the current layout.'
const frames: {
status: MessageStatus
reply: 'none' | 'typing' | 'streaming' | 'done'
wait: number
}[] = [
{ status: 'sending', reply: 'none', wait: 700 },
{ status: 'sent', reply: 'none', wait: 700 },
{ status: 'read', reply: 'typing', wait: 1500 },
{ status: 'read', reply: 'streaming', wait: 1800 },
{ status: 'read', reply: 'done', wait: 3200 },
]
export default function Demo() {
const [index, setIndex] = React.useState(3)
const [round, setRound] = React.useState(0)
const frame = frames[index]
React.useEffect(() => {
const timer = setTimeout(() => {
if (index === frames.length - 1) setRound((value) => value + 1)
setIndex((value) => (value + 1) % frames.length)
}, frame.wait)
return () => clearTimeout(timer)
}, [frame.wait, index])
return (
<div className="flex min-h-64 w-full max-w-lg flex-col gap-3" key={round}>
<MessageBubble from="system">Today</MessageBubble>
<MessageBubble from="user" status={frame.status} time="09:41">
Find the accessibility issue in this form.
</MessageBubble>
{frame.reply !== 'none' && (
<MessageBubble
streaming={frame.reply === 'streaming'}
time={frame.reply === 'done' ? '09:41' : undefined}
typing={frame.reply === 'typing'}
>
{reply}
</MessageBubble>
)}
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.