Chat Composer

Pro

Message bar with attachments, a field that grows line by line, emoji and camera buttons, and a mic that turns into a send button. Sent text lifts out of the field as a new bubble.

Preview

Installation

npx @lumioui/cli add pro/chat-composer

Usage

import { ChatComposer } from "@/components/ui/chat-composer/chat-composer";
<ChatComposer />

Examples

Messenger

A one-to-one thread.

Minimal comment pill

The floating pill under a video's comments.

Marketplace offer

A second-hand marketplace item chat in neutral ink.

Support quick actions

A grocery delivery help chat.

API reference

Prop Type Default
value string —
defaultValue string ""
onChangeText (text: string) => void —
onSend
(text: string, replyTo?: ChatComposerRep … (text: string, replyTo?: ChatComposerReply) => void

Fires with the trimmed text (and the reply being answered).

 —
placeholder string "Message"
maxLines number

Lines the field grows to before it scrolls. Default 5.

 5
onAttachPress () => void —
attachIcon IconName

Leading button glyph. Default "plus".

 "plus"
onEmojiPress () => void —
onCameraPress () => void

In-field camera — slides away while typing.

 —
onMicPress () => void

Mic sits where send goes while the field is empty. Omit to always show send.

 —
replyTo ChatComposerReply | null

Quote strip docked above the bar.

 —
onCancelReply () => void —
attachments ChatComposerAttachment[]

Queued attachments shown in a tray above the bar.

 []
onRemoveAttachment (id: string) => void —
accessory React.ReactNode

Anything that rides above the bar (quick actions, an offer strip).

 —
variant "docked" | "floating"

docked — full-width bar with a hairline on top. floating — a single rounded pill with send inside, for sheets and minimal threads.

 "docked"
disabled boolean

Read-only thread: the bar is replaced by this message.

 false
disabledMessage string "Only admins can send messages"
sendLabel string

Screen-reader label for send. Default "Send message".

 "Send message"
liftOnSend boolean

On send, the text lifts out of the field as a bubble rising into the thread. Turn off when the thread above animates its own arrival. Default true.

 true
className string

Classes for the outer wrapper.

 —