Chat Bubble
Messaging and AI chat transcript bubble component supporting incoming, outgoing, and system message variants.
// Plain markup
import { ChatBubble } from "@shavin/ui";Incoming
Studio AI
Hi! I can help track orders or answer product questions.
1:59 pm
<ChatBubble variant="incoming" author="Studio AI" avatarFallback="AI" timestamp="1:59 pm">
Hi! I can help track orders or answer product questions.
</ChatBubble>Outgoing
You
Where's my order 1043?
2:01 pm
<ChatBubble variant="outgoing" author="You" avatarFallback="AB" timestamp="2:01 pm">
Where's my order 1043?
</ChatBubble>System
Studio AI is typing…
<ChatBubble variant="system">Studio AI is typing…</ChatBubble>A conversation
Today
Studio AI
Your order shipped this morning and arrives tomorrow by 8pm.
You
Perfect, thanks!
Without avatar
Just the bubble.
<ChatBubble variant="incoming" hideAvatar>Just the bubble.</ChatBubble>Props
| Prop | Type | Default |
|---|---|---|
| children* | React.ReactNode | — |
| author | string | — |
| timestamp | string | — |
| avatarSrc | string | — |
| avatarFallback | string | — |
| hideAvatar | boolean | — |
| className | string | — |
| variant | "incoming" | "outgoing" | "system" | "incoming" |
* required