Prompt Bar

Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is something to send and morphs its arrow into a stop square while busy.

Default

Type @ for sources or / for commands, use the plus button, the model and effort pickers, or the mic. Push the effort slider to the top for sparks.

Customize

Placeholder

Background

Ink

Spark

Spark Boost1

Width400px

Radius16px

Max Rows5

Morph240ms

Squash0.12

Tilt8°

Press Scale0.96

BusyModel PickerEffort PickerDictation

API Reference

PromptBar

Prop	Type	Default	Description
`placeholder`	`string`	`'Ask anything'`	Shown while the field is empty.
`sources`	`PromptBarSource[]`	`DEFAULT_SOURCES`	Rows of the @ menu and the plus button: key, name, description, icon (an Iconify name), and attach: true for the row that adds files.
`commands`	`PromptBarCommand[]`	`DEFAULT_COMMANDS`	Rows of the / menu: key, name (with the slash), description.
`models`	`PromptBarModel[]`	`DEFAULT_MODELS`	Rows of the model picker: key, name, tag. An empty list hides the picker.
`efforts`	`string[]`	`DEFAULT_EFFORTS`	Steps of the effort slider, low to high. The last step turns the field to the spark colour with drifting sparks. An empty list hides the control.
`defaultEffort`	`string`	`''`	The step selected at first. Empty picks the middle.
`defaultModel`	`string`	`''`	Key of the model selected at first. Empty picks the first.
`busy`	`boolean`	`false`	A response is in flight. The send tile stays ink and its arrow morphs into a stop square.
`onAttach`	`() => string \| string[] \| Promise<string \| string[]>`	`undefined`	Picked the attach row. Return file names, or a promise of them, and they appear as chips.
`onDictate`	`() => string \| Promise<string>`	`undefined`	The mic. Return the transcript, or a promise of it, and it lands in the draft. Omit to hide the mic.
`background`	`string`	`'#27272a'`	The field surface, and the glyph on an armed tile.
`color`	`string`	`'#f5f5f5'`	The ink: text, icons, and the armed tile.
`menuBackground`	`string`	`'#323236'`	The surface of the menus and the effort popover.
`sparkColor`	`string`	`'#b39dff'`	The wash, the sparks and the slider at the top effort.
`sparkBoost`	`number`	`1`	How strongly typing drives the sparks at the top effort: they rise faster, grow and glow brighter with typing speed, and flash on each keystroke. No sparks are added. 0 keeps them calm.
`width`	`number`	`400`	Field width in px, capped at the parent.
`radius`	`number`	`16`	Field corner radius in px.
`maxRows`	`number`	`5`	Rows the field grows to before it scrolls.
`morphDuration`	`number`	`240`	Arrow to square and back, in ms.
`squash`	`number`	`0.12`	Mid-morph pinch. The glyph narrows by this and grows taller to keep its area.
`tilt`	`number`	`8`	Mid-morph lean in degrees, mirrored on the way back.
`pressScale`	`number`	`0.96`	Scale of the send tile while a pointer is down.

Event	Description
`send`	Enter or the tile, with a non-empty draft or an attachment. Carries (text, { attachments, model, effort }). The draft and attachments clear.
`stop`	The tile while busy.
`effort-change`	The effort slider moved, with the new step.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter`	Sends, or picks the highlighted menu row. Shift+Enter adds a line.
`ArrowUp` + `ArrowDown`	Moves through an open menu.
`Tab`	Picks the highlighted menu row.
`Escape`	Closes the menu.
`ArrowLeft` + `ArrowRight` + `Home` + `End`	On the effort slider, changes the step.

Menus are listboxes and the effort control is a slider with a text value. With prefers-reduced-motion the sparks and the glyph morph are dropped.

Peek Rating Pulse Heart