# Channel Chat

> A Slack-style team channel. Messages read flat with avatar, name and time; follow-ups compact under them. Hover for quick reactions, an emoji picker, Reply in thread and a menu. Reactions name who reacted, @mentions highlight (yours stronger), a New line marks where you left off and day labels stick. Threads open in a side panel. The composer formats text and suggests @mentions.

- Slug: `channel-chat`
- Category: [Messaging](https://www.assembli.design/category/messaging.md)
- Type: component
- Tags: chat, channel, team-chat, messages, threads, reactions, mentions, composer
- npm dependencies: @base-ui/react, lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/channel-chat
- Page: https://www.assembli.design/components/channel-chat

![Channel Chat preview](https://www.assembli.design/thumbnails/channel-chat-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `channel` (required) | `{ name: string; topic?: React.ReactNode; private?: boolean }` |  |  |
| `members` (required) | `ChannelMember[]` |  |  |
| `me` (required) | `string` |  | Your member id. |
| `messages` | `ChannelMessage[]` |  |  |
| `defaultMessages` | `ChannelMessage[]` | `[]` |  |
| `onMessagesChange` | `(messages: ChannelMessage[]) => void` |  |  |
| `onSend` | `(message: ChannelMessage, threadOf?: string) => void` |  | Called after you post. `threadOf` is the parent's id for a thread reply. |
| `lastReadId` | `string` |  | The last message you'd read when the channel opened. A "New" line marks everything after it. |
| `typing` | `string[]` | `[]` | Member ids currently typing. Shown under the composer. |
| `quickReactions` | `string[]` | `QUICK` | Emoji offered on hover, one tap to react. |
| `now` | `string \| Date` |  | The current time, for stable server rendering and demos. Posts are stamped from a clock that runs on from it. |

## 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/channel-chat/channel-chat.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/channel-chat
```

Registry item JSON: https://www.assembli.design/r/channel-chat.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.