# Prompt bar

A React component in [Beamline](https://beamline.io/)'s [AI & agents](https://beamline.io/components/ai) category. Live demo: https://beamline.io/components/prompt-bar

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](https://beamline.io/components/chat-thread) has its own composer).
- @mentions of teammates in comments ([mention-input](https://beamline.io/components/mention-input)).
- Plain multi-line text in a form ([textarea](https://beamline.io/components/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](https://beamline.io/components/dropdown-menu)
- popover
- attachment

## Dependencies

`lucide-react`, `radix-ui`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in AI & agents

- [Approval card](https://beamline.io/components/approval-card): The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your…
- [Attachment](https://beamline.io/components/attachment): A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
- [Chat thread](https://beamline.io/components/chat-thread): People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing…
- [Citations](https://beamline.io/components/citations): Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the…
- [Context cards](https://beamline.io/components/context-cards): The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how…
- [Conversation](https://beamline.io/components/conversation): The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared…
- [Flowchart](https://beamline.io/components/flowchart): A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run…
- [Image generation](https://beamline.io/components/image-generation): The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —…
- [Message](https://beamline.io/components/message): One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and…
- [Plan](https://beamline.io/components/plan): An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal…
- [Reasoning](https://beamline.io/components/reasoning): The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off…
- [Recommendation card](https://beamline.io/components/recommendation-card): One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word…
- [Response](https://beamline.io/components/response): An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short…
- [Selection actions](https://beamline.io/components/selection-actions): Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so…
- [Task rows](https://beamline.io/components/task-rows): Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while…
- [Tool call](https://beamline.io/components/tool-call): One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission…