Prompt bar

A React component in Beamline's AI & agents category.

The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress and becomes Stop while the answer arrives; a refused send keeps the draft and says why.

Use it for

The main composer of an agent or copilot: sources to read, a command, a model, files, dictation.
Any chat with an agent where sending can be refused (quota, permissions) and the draft must survive.

Not for

People chatting with people: receipts and reactions (chat-thread has its own composer).
@mentions of teammates in comments (mention-input).
Plain multi-line text in a form (textarea).

Anatomy

frame (one rounded surface; focus ring on the frame)
context row: command chip, source chips, attachments
text field (grows to 200px, lg 280px; long unbroken text such as a URL wraps inside it)
+ menu (Upload files, Sources as checks)
model picker (radio menu)
mic (dictation)
Send / Stop
suggestion list above the frame (Sources or Commands)
error or hint line

Variants

size: md (one row that grows; under 26rem of its own width the field takes the full first row and +, model and Send move to a row below), lg (hero: taller field, controls on their own row)

States

empty (Send disabled)
typing
suggesting (@ or /)
submitting (Send shows progress, field read-only)
streaming (Stop)
refused (error line, field invalid, draft kept)
listening (mic on)
uploading (Send waits for files)
disabled
Send disabled without onSubmit/onSend; synchronous refusal preserves draft

Keyboard

Enter sends; Shift+Enter starts a new line; IME composition never sends
@ (anywhere after a space) opens Sources, / at the start opens Commands
↑ ↓ move in the list, Enter or Tab picks, Escape closes it and keeps the text
Backspace at the very start removes the command chip, then the newest source chip
Tab reaches +, model, mic and Send; the suggestion list never takes focus (aria-activedescendant)

Motion

The frame's focus ring is instant; the list opens in --motion-in and leaves in --motion-out; Send fills as the look's solid once there is something to send; the mic pulses only while listening (stopped under reduced motion).

Props

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`string`	—	The draft.
`onSubmit`	`(message: PromptSubmission) => void \| Promise<unknown>`	—	{ text, sources, command, model, attachments }. A promise shows sending; a rejection keeps the draft and shows its message.
`onSend`	`(text: string) => void`	—	Deprecated alias, still called with the text.
`streaming / onStop`	`boolean / () => void`	—	Send becomes Stop while the answer arrives.
`loading`	`boolean`	—	Sending managed by the caller: Send shows progress.
`sources / selectedSources / defaultSelectedSources / onSelectedSourcesChange`	`PromptSource[] / string[]`	—	{ id, label, description?, icon?, keywords? }
`commands`	`PromptCommand[]`	—	{ id, label, description?, icon?, keywords? }; one per message.
`models / model / defaultModel / onModelChange`	`PromptModel[] / string`	—	{ id, label, description? }; defaults to the first.
`attachments / onAttach / onAttachmentRemove / onAttachmentRetry / accept`	`AttachmentFile[] / (files: File[]) => void`	—	You upload; the bar shows each file's state and waits for uploads before sending.
`listening / onListeningChange`	`boolean`	—	Dictation: the mic shows when onListeningChange is set; stream words into value.
`size`	`"md" \| "lg"`	—	tall is the deprecated alias of lg.
`placeholder / label / hint / error / disabled`	`string / ReactNode / boolean`	—
`classNames`	`PromptBarClassNames`	—
`style / ref`	`CSSProperties / native Ref (RichTextEditor retains imperative handle)`	—
`fieldRef`	`Ref<HTMLTextAreaElement>`	—

Built from

button
dropdown-menu
popover
attachment

Dependencies

lucide-react, radix-ui

Import

import { PromptBar } from "@/components/prompt-bar/prompt-bar";

Get it

Prompt bar is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent