Chat
The three pieces of a messaging UI: the thread, the conversation list, and the composer.
AK
Can you take a look at the Q3 forecast before standup?
Looking now — the marketplace line seems off.
09:16
Amara added Daniel to this conversation
No formatting, no state
Timestamps are ReactNode, not Date: these components never format a time, so "09:14" vs "2 minutes ago" stays your decision, along with the locale and the relative-time refresh. Likewise the composer won't clear itself after onSend — you own the draft.
Attachments and files
Conversation list
AKAmara Chen09:14Can you take a look at the Q3 forecast?3
DODaniel Oseityping...
PRPriya RamanYesterdayThanks!
Composer
MessageBubble props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'received' | 'sent' | 'system' | 'received' | Sent aligns right; system is the centred, unattributed notice. |
| content | 'text' | 'image' | 'file' | 'text' | What the body holds. Image and file change the layout inside the bubble. |
| children | ReactNode | Text body, for content="text". | |
| image | ReactNode | The image node, for content="image". | |
| fileName / fileSize | string | File meta, for content="file". | |
| avatar | ReactNode | Author avatar. Received messages only. | |
| authorName | ReactNode | Author name. Received messages only. | |
| timestamp | ReactNode | Pre-formatted time — the component does no date formatting. | |
| reactions | ReactNode | Reaction row. Received messages only. | |
| read | boolean | false | Read receipt. Sent messages only. |
ConversationItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | 'default' | 'hover' | 'active' | 'unread' | 'typing' | 'muted' | 'default' | Typing replaces the preview with an indicator; unread shows the count. |
| avatar | ReactNode | Required. The conversation's avatar. | |
| name | ReactNode | Conversation or person name. | |
| preview | ReactNode | Last-message preview. Ignored while typing. | |
| timestamp | ReactNode | Pre-formatted time of the last message. | |
| unreadCount | number | Badge count, shown when state is unread. | |
| onClick | () => void | Opens the conversation. |
ChatComposer props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | 'default' | 'typing' | 'uploading' | 'disabled' | 'default' | Uploading reveals the progress row. |
| value | string | Controlled draft text. | |
| onChange | (value: string) => void | Fires with the text itself, not an event. | |
| onSend | () => void | Fires on submit. Clearing the draft afterwards is your job. | |
| onAttachmentsChange | (files: { name; type; dataUrl }[]) => void | Fires with attachments already read as data URLs. | |
| uploadName / uploadProgress | string / number | Upload meta shown while state is uploading. | |
| onCancelUpload | () => void | Cancels the in-flight upload. |