Channel Chat
Messaging
Source and install need .
pnpm dlx shadcn@latest add @assembli/messengerMessenger
A two-pane direct messages app. The list has search, pinned and muted chats, unread counts, online dots, drafts and live typing previews. Threads group bubbles into tailed runs, split days, mark where unread starts, quote replies, take emoji reactions, show photos and files, and say Delivered or Read. Hover or tap a bubble to react or reply. Enter sends. Narrow containers show one pane at a time.
Props
Other props pass through to the root element.
me*
MessengerUser
You. Messages whose
fromis your id sit on the right.conversations
MessengerConversation[]
defaultConversations
MessengerConversation[]
Default
[]onConversationsChange
(conversations: MessengerConversation[]) => void
activeId
string
defaultActiveId
string
onActiveIdChange
(id: string) => void
onSend
(conversationId: string, message: MessengerMessage) => void | Promise<unknown>
Called with each message you send, after it's added with status "sending". Resolve to mark it sent, reject to mark it failed.
headerActions
(conversation: MessengerConversation) => React.ReactNode
Buttons for the thread header, such as call and video.
now
string | Date
The current time, for stable server rendering and demos. Day labels count from it, and messages you send are stamped from a clock that runs on from it. Leave out to use the real clock.
title
React.ReactNode
Default
"Messages"reactions
string[]
Default
QUICK_REACTIONSEmoji offered for quick reactions.
| Description | |||
|---|---|---|---|
| me* | MessengerUser | – | You. Messages whose |
| conversations | MessengerConversation[] | – | |
| defaultConversations | MessengerConversation[] | [] | |
| onConversationsChange | (conversations: MessengerConversation[]) => void | – | |
| activeId | string | – | |
| defaultActiveId | string | – | |
| onActiveIdChange | (id: string) => void | – | |
| onSend | (conversationId: string, message: MessengerMessage) => void | Promise<unknown> | – | Called with each message you send, after it's added with status "sending". Resolve to mark it sent, reject to mark it failed. |
| headerActions | (conversation: MessengerConversation) => React.ReactNode | – | Buttons for the thread header, such as call and video. |
| now | string | Date | – | The current time, for stable server rendering and demos. Day labels count from it, and messages you send are stamped from a clock that runs on from it. Leave out to use the real clock. |
| title | React.ReactNode | "Messages" | |
| reactions | string[] | QUICK_REACTIONS | Emoji offered for quick reactions. |
