Steer inputPro

The composer for an agent that works in steps. While a run is live it stays open, and every message goes in one of two named ways: Steer, at the next step without stopping, or Queue, after the run.

Markdown

On this page

ProAn agent moves a billing page to the new design system. You steer it mid run and queue a follow up for after.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/steer-input

Usage

tsx

import { SteerInput } from "@/components/ui/chatcn/pro/steer-input"

<SteerInput
  running={run.live}
  activity={run.step}
  meta={elapsed}
  queue={queue}
  onQueueChange={setQueue}
  onSubmit={({ text, mode }) => (mode ? enqueue(text, mode) : send(text))}
  onStop={stop}
/>

Idle it is the free PromptInput, with the same Enter, Shift Enter, paste and IME behaviour. With running the run's current step shows above the text, Send becomes Stop, and two buttons name the choice with their keys: Enter does defaultMode, Option or Alt Enter the other. Waiting messages render above with the free QueuedMessages, where they can still be edited, reordered or switched between steer and queue. A step that ends in a file path truncates in the middle, so the file name always shows.

Examples

States

ProIdle, a live run, a draft to steer, queue first, messages waiting, long content, and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The draft, controlled or not
`onSubmit`	`({ text, mode? }) => void`	`mode` is `"steer"` or `"after-run"` while a run is live
`running`	`boolean`	A run is live. The composer stays open
`activity`, `meta`	`ReactNode`	The current step, and an elapsed time
`defaultMode`	`"steer" \| "after-run"`	What Enter does during a run. Default `steer`
`queue`, `onQueueChange`, `onRetry`	`QueuedMessage[]`	Messages waiting to go in
`submitting`, `onStop`		First token pending, and Stop
`tools`, `actions`, `attachments`	`ReactNode`	Toolbar start, before Send, above the text
`disabled`, `labels`		Every string is a label

Keyboard

Key	Action
Enter	Send, or the default mode while a run is live
Option Enter or Alt Enter	The other mode while a run is live
Shift Enter	New line
Escape	Stop the run

Accessibility

The two choices are a named group of buttons with aria-keyshortcuts, so the keys are announced with them.
Both choices wait for a draft and say so by being disabled, never by hiding.
The step line truncates visually but keeps the full path as its title.

Motion

The choice buttons change fill in 150 ms and press to 0.97. The run row and the choices appear with the run, without animation, so nothing slides under the caret.