A team chat screen with channels and direct messages, grouped bubbles with day dividers, a composer with attachment chips and a live typing indicator.
npx shadcn@latest add https://hyperblur.dev/r/app-chat-inbox.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-chat-inbox.tsx.
import { AppChatInbox } from "@/components/hyperblur/app-chat-inbox"
<AppChatInbox me="Maya Okafor" onSend={(id, msg) => console.log(id, msg.text)} />| Prop | Type | Default | Description |
|---|---|---|---|
| conversations | AppChatConversation[] | sample workspace | Channels and direct messages with id, name, kind, members, online, unread, topic, typing and messages. Each message has id, author, text, time, day and optional attachments. |
| me | string | "Maya Okafor" | Author name used for your own messages. Those render on the right in the accent color. |
| defaultConversationId | string | Conversation open at mount. Defaults to the first one. | |
| defaultDraft | string | "" | Text already in the composer. |
| defaultAttachments | string[] | [] | File names already attached in the composer. |
| accent | string | "#2f7bff" | Color of your bubbles, badges and the send button. |
| onSend | (conversationId: string, message: AppChatMessage) => void | Called when a message is sent with Enter or the Send button. | |
| onConversationChange | (id: string) => void | Called when another conversation is opened. |