Conversation
ChatBubble
If it's in a bubble, it must be true.
Chat bubbles for fake conversations. AI bubbles ship with a meta row (sparkle + agent name + thinking pill); replace any of those by passing props or `false`.
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/chat-bubble.json
Examples
User + AI
Summarize Q3 churn by cohort and tell me what's bleeding.
Synthetica reasoning…
Q3 churn is bleeding from your SMB cohort. Net retention is 71% vs. 104% in mid-market.
<ChatBubble role="user">Summarize Q3 churn…</ChatBubble> <ChatBubble role="ai" agent="Synthetica" thinking="reasoning…"> Q3 churn is bleeding from your SMB cohort… </ChatBubble>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| role* | "user" | "ai" | - | Bubble direction + styling. |
| agent | Snippet | - | Agent name (AI bubbles). |
| thinking | Snippet | false | - | Thinking pill content; false to hide. |
| icon | Snippet | false | - | Leading icon override. |