A support assistant in the corner of your site. It starts as a button with a “Need help?” bubble, opens into a chat, can ask who you are first, and hands over to a person when it is not sure.
Your site. Open the assistant in the corner, then ask about refunds, or something it can’t answer.
pnpm dlx shadcn@latest add @latheui/support-bubblePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Support Bubble is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| respond* (required) | (prompt, history, { signal, contact }) => AsyncIterable<string | { unsure: true }> | Promise<string | { text; unsure? }> | — | Produces a reply. Yield text to stream it; yield { unsure: true } to offer a person under it. |
| collect | { name?, email?, phone?: boolean | "required" } | — | Asks for these before chatting. true is optional; "required" must be filled. |
| onContact | (contact) => void | — | Called once the contact form is sent. |
| escalation | "unsure" | "always" | false | "unsure" | When to offer a person: under unsure replies, in the header too, or never. |
| onRequestSupport | ({ contact, transcript }) => void | Promise<void> | — | Hands the conversation to your team. Resolve to confirm, reject to show it failed. |
| title | string | "Assistant" | The assistant's name, in the header. |
| subtitle | string | "Typically replies instantly" | Under the name. |
| avatar | ReactNode | — | The assistant's picture, drawn however you like. |
| avatarSrc | string | — | Or an image for it, also used on the launcher. |
| icon | ReactNode | — | The closed launcher's icon. |
| teaser | string | false | "Need help?" | The bubble beside the closed launcher. It can be dismissed. |
| emptyTitle | string | "Ask us anything" | Heading before the first message. |
| emptyDescription | string | — | Line under it. |
| placeholder | string | "Write a message…" | Placeholder of the message box. |
| open | boolean | — | Whether the chat is open, when controlled. |
| defaultOpen | boolean | false | Starting state. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| side | "right" | "left" | "right" | Which bottom corner. |
| position | "fixed" | "absolute" | "fixed" | Pinned to the window, or inside a positioned parent for previews. |
<SupportBubble
respond={respond}
avatarSrc="/support/mia.jpg"
teaser="Questions? Ask Mia"
className="[&>div>button:last-child]:bg-indigo-600"
/>