Chat Composer

A controlled, auto-growing textarea with Enter-to-send, a send/stop button, and attachment + toolbar slots.

A chat input composer: an auto-growing textarea, Enter-to-send (Shift+Enter for a newline), a send/stop button, and slots for attachment previews and a left toolbar. It's presentational and controlled — the host owns the value, the send/stop side effects, and any loading state. While loading, the send button becomes a stop button that calls onStop.

Import

tsx

1import { ChatComposer } from "@yuhuanowo/yunui/chat";

Example

Type and press Enter (or the send button). It logs each message, then simulates a 1.4s "generating" state where the button becomes Stop.

ChatComposer

Usage

tsx

1const [value, setValue] = useState("");
2const [loading, setLoading] = useState(false);
3 
4<ChatComposer
5  value={value}
6  onChange={setValue}
7  onSend={() => send(value)}
8  onStop={() => abort()}
9  loading={loading}
10  attachments={files.map((f) => <AttachmentChip key={f.id} file={f} />)}
11  toolbar={<AttachButton onPick={addFile} />}
12/>

Props

Prop	Type	Default	Description
allowSendEmpty	boolean	false	Allow sending with empty text — e.g. when attachments alone make a valid message.
attachments	ReactNode	—	Attachment chips / previews, rendered above the textarea.
className	string	—
disabled	boolean	false
labels	{ send?: string; stop?: string; } \| undefined	—	Accessible names for the composer's buttons.
loading	boolean	false
maxRows	number	8	Max rows before the textarea scrolls.
onChange*	(value: string) => void	—
onSend*	() => void	—	Called when the user sends (Enter or the send button).
onStop	(() => void)	—	Called when the stop button is pressed while `loading`.
placeholder	string	Send a message…
sendDisabled	boolean	false	Force-disable the send button even with text (e.g. invalid state).
toolbar	ReactNode	—	Left-aligned toolbar (attach, mode, feature toggles, …).
value*	string	—

Chat Composer

Import

Example

Usage

Props

On this page