Chat Launcher

Overlays · AnnouncementBar, ChatLauncher, ChatMessage, Composer, CookieConsent, PromptStarters

Site-wide chrome for customer-facing apps: ChatLauncher (floating assistant with page context), CookieConsent and AnnouncementBar.

ChatLauncher: title, context (what the assistant is looking at), tint, open / onOpenChange, unread, headerAction, children (the thread), composer, inline (for previews; fixed bottom-right by default).
CookieConsent: title, text, policy (link), categories ({id, label, text, required, default}), onSave(choices), open, inline. "Accept all" and "Only necessary" carry equal weight.
AnnouncementBar: children, tint, icon, action, onDismiss (false hides the close button).

PreviewCode

Free plan: 3 stagings left this month.See plans

Props

AnnouncementBar

Prop	Type	Notes
`children`	`ReactNode`	Required
`tint?`	`Tint`
`icon?`	`IconName \| false`
`action?`	`ReactNode`
`onDismiss?`	`(() => void) \| false`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ChatLauncher

Prop	Type	Notes
`title?`	`string`
`context?`	`ReactNode`
`tint?`	`Tint`
`open?`	`boolean`
`onOpenChange?`	`(open: boolean) => void`
`unread?`	`number`
`headerAction?`	`ReactNode`
`children?`	`ReactNode`
`composer?`	`ReactNode`
`inline?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ChatMessage

Prop	Type	Notes
`role`	`"user" \| "assistant" \| "system"`	Required
`name?`	`string`
`time?`	`string`
`model?`	`string`
`text?`	`string`
`streaming?`	`boolean`
`tint?`	`Tint`
`sources?`	`Source[]`
`attachments?`	`{ name: string; size?: string; kind?: string }[]`
`usage?`	`string`
`onRetry?`	`() => void`
`onFeedback?`	`(v: "up" \| "down") => void`
`actions?`	`boolean`
`before?`	`ReactNode`
`after?`	`ReactNode`
`children?`	`ReactNode`
`feedback?`	`"up" \| "down" \| null`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Composer

Prop	Type	Notes
`value?`	`string`
`onChange?`	`(v: string) => void`
`onSend?`	`(text: string, files: (File \| { name: string })[]) => void`
`busy?`	`boolean`
`onStop?`	`() => void`
`placeholder?`	`string`
`label?`	`string`
`models?`	`ModelOption[]`
`model?`	`string`
`onModel?`	`(id: string) => void`
`commands?`	`ComposerCommand[]`
`onCommand?`	`(c: ComposerCommand) => void`
`attachments?`	`(File \| { name: string })[]`
`onAttach?`	`(files: FileList) => void`
`onRemoveAttachment?`	`(i: number) => void`
`hint?`	`string`
`left?`	`ReactNode`
`disabled?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

CookieConsent

Prop	Type	Notes
`title?`	`string`
`text?`	`ReactNode`
`policy?`	`ReactNode`
`categories?`	`{ id: string; label: string; text?: string; required?: boolean; default?: boolean; }[]`
`onSave?`	`(choices: Record<string, boolean>) => void`
`open?`	`boolean`
`inline?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

PromptStarters

Prop	Type	Notes
`items`	`{ icon?: IconName; tint?: Tint; title: string; text?: string; prompt?: string }[]`	Required
`onPick?`	`(prompt: string) => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.