Composer
The ChatComposer component provides a full-featured message input with auto-resize, attachment menu, reply preview, and keyboard shortcuts.
Live Demo
Try typing a message and pressing Enter to send. Right-click a message to reply to it.
Basic Usage
At minimum, provide an onSend callback. The composer handles the input state internally.
Attachment Menu
The composer includes a + button that opens a popout menu for attachments. Click it in the demo above to see it in action.
Drag & Drop
The composer has built-in drag-and-drop support. Drag any file over the input area and a drop overlay appears. Dropped files render as removable previews (with thumbnails for images) before the message is sent. This works alongside the + button menu and clipboard paste.
Reply Mode
When replying to a message, the composer shows a preview of the quoted message above the input. The user can dismiss the reply with the X button.
Auto-Resize
The textarea automatically grows as you type multi-line messages, up to a configurable max height. This behavior is built-in and requires no additional configuration.
Props
| Prop | Type | Description |
|---|---|---|
onSend | (text: string) => void | Called when user sends a message |
replyingTo | ChatMessageData | null | Message being replied to (shows preview) |
onCancelReply | () => void | Called when reply is dismissed |
onFileUpload | (files: File[]) => void | Called when files are selected or dropped |
onTyping | (isTyping: boolean) => void | Called when typing state changes |
placeholder | string | Input placeholder text (default: 'Type a message...') |
onVoiceRecord | () => void | Called when mic button is clicked (shows mic icon when composer is empty) |
disabled | boolean | Disable the composer |