Composer

AI · AgentStatus, Composer, PromptStarters, UsageMeter

Message input for agents: grows with the text, attachments, slash commands, a model picker, and Send that turns into Stop while the agent works.

Composer props: value / onChange, onSend(text, attachments), busy, onStop, placeholder, models ({id, label, hint}) + model + onModel, commands ({name, hint, icon, insert}) + onCommand, attachments + onAttach(FileList) + onRemoveAttachment(i), hint, left (extra tools).
Also here: PromptStarters (items {icon, tint, title, text, prompt}, onPick), ModelPicker, AgentStatus (status, step), UsageMeter (used, limit, format, label, caption), AgentMark, TypingDots.

Enter sends, Shift+Enter adds a line; typing "/" opens commands (↑ ↓ Enter).
Drop files anywhere on the composer to attach them.
Stop must always work: cancel streaming and mark running tools as stopped.
Show starters only on an empty conversation, three or four, written as things people actually ask.

PreviewCode

Q1-report.pdf

Enter to send · Shift+Enter for a new line

IdleDrafts only

Context21k / 200k

Props

AgentStatus

Prop	Type	Notes
`status`	`"Running" \| "Thinking" \| "Waiting for approval" \| "Idle" \| "Paused" \| "Error" \| string`	Required
`step?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Composer

Prop	Type	Notes
`value?`	`string`
`onChange?`	`(v: string) => void`
`onSend?`	`(text: string, files: (File \| { name: string })[]) => void`
`busy?`	`boolean`
`onStop?`	`() => void`
`placeholder?`	`string`
`label?`	`string`
`models?`	`ModelOption[]`
`model?`	`string`
`onModel?`	`(id: string) => void`
`commands?`	`ComposerCommand[]`
`onCommand?`	`(c: ComposerCommand) => void`
`attachments?`	`(File \| { name: string })[]`
`onAttach?`	`(files: FileList) => void`
`onRemoveAttachment?`	`(i: number) => void`
`hint?`	`string`
`left?`	`ReactNode`
`disabled?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

PromptStarters

Prop	Type	Notes
`items`	`{ icon?: IconName; tint?: Tint; title: string; text?: string; prompt?: string }[]`	Required
`onPick?`	`(prompt: string) => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

UsageMeter

Prop	Type	Notes
`used`	`number`	Required
`limit`	`number`	Required
`label?`	`string`
`caption?`	`string`
`format?`	`(v: number) => string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.