Channel Chat
Messaging
Source and install need .
pnpm dlx shadcn@latest add @assembli/support-chat-widgetSupport Chat Widget
An Intercom-style support messenger. A round launcher with an unread badge opens a panel with three tabs. Home greets the visitor beside the team's faces and reply time, resumes the recent chat and searches help. Messages is a live chat with a human agent: typing, quick-reply chips, attachments and a five-face rating once the chat ends. Help lists and searches articles.
Props
Other props pass through to the root element.
brand*
{ name: string; logo?: React.ReactNode }
Your product's name and mark, shown in the header.
team
SupportAgent[]
Default
[]People shown on the home screen.
greeting
React.ReactNode
Default
"How can we help?"The home screen's big line.
replyTime
React.ReactNode
Default
"We typically reply in a few minutes"conversation*
SupportConversation
quickReplies
string[]
Default
[]Suggested answers offered under the agent's latest message.
articles
SupportArticle[]
Default
[]onSend
(message: SupportMessage, file?: File) => void
onRate
(rating: number, comment: string) => void
Called with 1–5 and an optional comment when the visitor rates an ended conversation.
open
boolean
defaultOpen
boolean
Default
falseonOpenChange
(open: boolean) => void
defaultView
"home" | "chat" | "help"
Default
"home"initialUnread
number
Default
0Agent messages the visitor hasn't seen yet when the widget mounts.
position
"fixed" | "absolute"
Default
"fixed""fixed" pins the launcher to the viewport's corner, as on a real site. "absolute" pins it to the nearest positioned ancestor, for previews and app frames.
| Description | |||
|---|---|---|---|
| brand* | { name: string; logo?: React.ReactNode } | – | Your product's name and mark, shown in the header. |
| team | SupportAgent[] | [] | People shown on the home screen. |
| greeting | React.ReactNode | "How can we help?" | The home screen's big line. |
| replyTime | React.ReactNode | "We typically reply in a few minutes" | |
| conversation* | SupportConversation | – | |
| quickReplies | string[] | [] | Suggested answers offered under the agent's latest message. |
| articles | SupportArticle[] | [] | |
| onSend | (message: SupportMessage, file?: File) => void | – | |
| onRate | (rating: number, comment: string) => void | – | Called with 1–5 and an optional comment when the visitor rates an ended conversation. |
| open | boolean | – | |
| defaultOpen | boolean | false | |
| onOpenChange | (open: boolean) => void | – | |
| defaultView | "home" | "chat" | "help" | "home" | |
| initialUnread | number | 0 | Agent messages the visitor hasn't seen yet when the widget mounts. |
| position | "fixed" | "absolute" | "fixed" | "fixed" pins the launcher to the viewport's corner, as on a real site. "absolute" pins it to the nearest positioned ancestor, for previews and app frames. |
Related
Messenger
Messaging