Agent Composer · paneui

Installation

pnpm dlx shadcn@latest add @paneui/agent-composer

Usage

import { AgentComposer, AgentComposerBanner } from "@/components/agent-composer"

<AgentComposer
  busy={busy}
  onSubmit={send}
  onStop={stop}
  onAttach={pickFiles}
  mentions={files.map((value) => ({ value }))}
  toolbarEnd={<ModelPicker models={models} value={model} onValueChange={setModel} />}
/>

Composition

AgentComposer
└── AgentComposerBanner (in header)

Examples

Minimal

Labels and Input Props

Keyboard

Enter sends, Shift+Enter adds a line and Escape stops a busy agent. With suggestions open, arrow keys move, Enter or Tab inserts and Escape closes them.

Labels

Unset labels keys come from LocaleProvider, English by default.

API Reference

AgentComposer

Also accepts every prop of form.

onSubmit: (text: string) => void; Called with the trimmed text; the composer clears itself.
busy= false: boolean; Send turns into Stop.
onStop: () => void; Stop button and Escape while busy.
onAttach: () => void; Shows the attach button.
onVoice: () => void; Shows the dictate button.
labels: { attach?, send?, stop?, input?, dictate?, mentions?, commands? }; Button names and tooltips, the input's accessible name and the suggestion headings.
inputProps: TextareaHTMLAttributes; Passed to the textarea; its handlers run before the composer's own.
mentions: { value, description?, icon? }[]; Offered after @.
commands: { name, description?, hint? }[]; Offered after a leading /.
toolbarStart / toolbarEnd: ReactNode; Controls such as mode, model and effort pickers.
header: ReactNode; Stacked above the input: banners, approvals, queued messages.
value / defaultValue / onValueChange: string / string / (value: string) => void; Controlled or uncontrolled text.

Prop	Type	Default	Description
onSubmit	(text: string) => void	—	Called with the trimmed text; the composer clears itself.
busy	boolean	false	Send turns into Stop.
onStop	() => void	—	Stop button and Escape while busy.
onAttach	() => void	—	Shows the attach button.
onVoice	() => void	—	Shows the dictate button.
labels	{ attach?, send?, stop?, input?, dictate?, mentions?, commands? }	—	Button names and tooltips, the input's accessible name and the suggestion headings.
inputProps	TextareaHTMLAttributes	—	Passed to the textarea; its handlers run before the composer's own.
mentions	{ value, description?, icon? }[]	—	Offered after `@`.
commands	{ name, description?, hint? }[]	—	Offered after a leading `/`.
toolbarStart / toolbarEnd	ReactNode	—	Controls such as mode, model and effort pickers.
header	ReactNode	—	Stacked above the input: banners, approvals, queued messages.
value / defaultValue / onValueChange	string / string / (value: string) => void	—	Controlled or uncontrolled text.

data-busy: Present while busy.

Data attribute	Description
data-busy	Present while busy.