Chat thread

A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.

$npx shadcn@latest add @silicon-ui/chat-thread

datanew

Installation

$npx shadcn@latest add @silicon-ui/chat-thread

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/chat-thread/chat-thread.tsx
- components/silicon-ui/chat-thread/chat-thread.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ChatThread } from "@/components/silicon-ui/chat-thread/chat-thread";

Prop	Type	Default
`participants*`	`ChatParticipant[]`	—
`currentUserId*`	`string`	—
`messages` Controlled messages, oldest first. Leave it out to let the thread keep its own list.	`ChatMessage[]`	—
`defaultMessages`	`ChatMessage[]`	—
`typing` Participant ids currently typing.	`string[]`	`[]`
`readBy` The last message each participant has read, by participant id. Their avatar sits under that message and glides as it moves.	`Record<string, string>`	—
`onSend` Called with the composer's text and files. Uncontrolled threads also append the message themselves.	`(draft: ChatDraft) => void \| Promise<void>`	—
`onReact`	`(messageId: string, emoji: string) => void`	—
`onRetry`	`(messageId: string) => void`	—
`reactions` Emoji offered by the reaction picker.	`string[]`	`DEFAULT_REACTIONS`
`placeholder`	`string`	`"Message"`
`composer` Show the composer. Defaults to true.	`boolean`	`true`
`allowAttachments`	`boolean`	`true`
`accept` File types the attach button offers, as for `<input accept>`.	`string`	—
`groupWindow` Messages from one person closer together than this, in ms, share a group. Defaults to five minutes.	`number`	`5 * 60_000`
`locale`	`string`	`"en-US"`
`label` Accessible name of the message log.	`string`	`"Conversation"`
`labels` Words for localization. Leave out any key to keep its English default.	`ChatThreadLabels`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.

Prop	Type	Default
`onSend*`	`(draft: ChatDraft) => void`	—
`placeholder`	`string`	`"Message"`
`allowAttachments`	`boolean`	`true`
`accept`	`string`	—
`disabled`	`boolean`	—
`labels` Words for localization. Leave out any key to keep its English default.	`ChatComposerLabels`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.