Queued messages
Messages typed while the agent works, in a visible queue: send after this run or steer now, edit in place, reorder, remove with undo.
On this page
Messages typed mid-run wait for the run or steer the agent at its next step.
Installation
Usage
import { QueuedMessages } from "@/components/ui/chatcn/queued-messages"
<QueuedMessages items={queue} onItemsChange={setQueue} onRetry={retry} />Every edit, reorder, mode change, removal and undo comes through onItemsChange, so the queue stays yours. Your runtime decides delivery: deliver steer messages at the next tool boundary and the rest when the run ends, setting status: "sending" while it does. The queue hides itself when empty.
Examples
Delivery states
Labels shorten with the room the queue has: Send after this run, then After this run, then icons with tooltips.
Steering in flight, a failed delivery with retry, long text and a narrow queue.
Props
| Prop | Type | Notes |
|---|---|---|
items, defaultItems | QueuedMessage[] | { id, text, mode, status? } |
onItemsChange | (items) => void | The whole queue after every change |
onRetry | (id) => void | Shows Retry on failed deliveries |
undoMs | number | Undo window, default 5000, paused while hovered or focused |
Keyboard
| Key | Action |
|---|---|
Enter on a message | Edit it in place |
Enter while editing | Save. Shift + Enter adds a line |
Esc while editing | Cancel |
Delete, Backspace on a message | Remove it; focus moves to Undo |
| Arrow keys on the mode switch | Switch between Send after this run and Steer now |
ArrowUp, ArrowDown, Home, End on a handle | Reorder |
Accessibility
- The mode switch is a radio group with a roving tab stop; each message's group is named When to send message 2.
- Removals, restores and moves are announced politely: Message removed. Undo is available.
- Editing ignores Enter while an IME is composing. Actions stay visible on touch screens and grow to 44 px.
Motion
- The mode thumb slides between options with a 200 ms clip-path transition: a second copy of the labels is clipped to the selected option, so nothing animates width or position. Keyboard changes jump.
- New messages rise 4 px and fade in; the undo row fades in over 150 ms and the rows below slide up when it expires.
- Dragging follows the pointer 1:1 and the others slide aside; reduced motion keeps only fades.