KQ-851 · COMPOSE/BAR

Compose Bar

A chat composer that makes room. Two hidden mirrors measure the draft at the single-line and full columns, and the moment the narrow one wraps the well glides on glide to the full-width height plus a footer while the attach control slides on glide from beside send to the far left, so the two controls slide apart around the text. A dot beside the first line glows when the field is blurred with unsent text; Enter sends and Shift+Enter breaks a line.

KQ-851 · COMPOSE/BAR

1 line · empty · 0 sent

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/compose-bar

Props

value / defaultValue: string; default ""; Controlled or initial draft.
onValueChange: (value: string) => void; default —; Fires from every keystroke and from the clear after a send.
onSend: (text: string) => void; default —; Fires from Enter or the Send control with the trimmed draft.
onAttach: () => void; default —; Fires from the Attach control.
onLinesChange: (lines: number) => void; default —; Fires from the observer whenever the measured line count changes.
onFocusChange: (focused: boolean) => void; default —; Fires as the textarea gains and loses focus.
maxRows: number; default 6; Lines the well grows to before the textarea scrolls.
placeholder: string; default "Message"; Keep it short: a placeholder that wraps reads as a second line.
disabled: boolean; default false; Holds the composer and both controls.
label: string; default —; Names the textarea for assistive technology.

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled or initial draft.
onValueChange	(value: string) => void	—	Fires from every keystroke and from the clear after a send.
onSend	(text: string) => void	—	Fires from Enter or the Send control with the trimmed draft.
onAttach	() => void	—	Fires from the Attach control.
onLinesChange	(lines: number) => void	—	Fires from the observer whenever the measured line count changes.
onFocusChange	(focused: boolean) => void	—	Fires as the textarea gains and loses focus.
maxRows	number	6	Lines the well grows to before the textarea scrolls.
placeholder	string	"Message"	Keep it short: a placeholder that wraps reads as a second line.
disabled	boolean	false	Holds the composer and both controls.
label	string	—	Names the textarea for assistive technology.