# Messenger

> 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.

- Slug: `messenger`
- Category: [Messaging](https://www.assembli.design/category/messaging.md)
- Type: component
- Tags: messages, chat, dm, inbox, conversation, reactions, read-receipts, typing-indicator
- npm dependencies: @base-ui/react, lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/messenger
- Page: https://www.assembli.design/components/messenger

![Messenger preview](https://www.assembli.design/thumbnails/messenger-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `me` (required) | `MessengerUser` |  | You. Messages whose `from` is your id sit on the right. |
| `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. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/messenger/messenger.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/messenger
```

Registry item JSON: https://www.assembli.design/r/messenger.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.