MessageQueue

Stable

Messages sent while the assistant is busy, with Send now, reorder and delete.

Also known as queued messages, pending messages

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Queued

Queued messages send in order when the assistant finishes this step. To change what it is doing now, steer it instead.

1Also add a section on travel costs
2Then shorten the intro
3Send it to the team when it looks good

<MessageQueue
  items={items}
  sendNowShortcut="Ctrl Enter"
  onSendNow={(id) => setItems((l) => l.filter((m) => m.id !== id))}
  onMove={move}
  onDelete={(id) => setItems((l) => l.filter((m) => m.id !== id))}
/>

Move, send and delete change the list. Send now removes the message as if it had started.

Usage Code Design Accessibility

When to use it

Holds messages a person sent while the assistant was still busy. They look pending, with a dashed outline and muted text, so nobody mistakes them for messages already sent.

Made of: Header with count · Explanation · Waiting message · Send now · Move up and down · Delete · Empty message

Use it for

Messages typed while the assistant is working on an earlier one.
Letting people send a waiting message now, move it, or delete it before it runs.

Not for

Messages that have been sent: use MessageList.
The steps the assistant plans to take: use PlanCard.

Do and avoid

Queued

Queued messages send in order when the assistant finishes this step. To change what it is doing now, steer it instead.

1Also check trains to Porto
2Keep it under $900

Do. Waiting messages look pending and can be sent, moved or deleted.

Also check trains to Porto

Keep it under $900

Avoid. Waiting messages look sent, so people think the assistant saw them.

Do

Show it only while the assistant is working or when messages are waiting.
Change the header text to match how your product handles waiting and steering.
Reorder items in your own state when onMove is called. The list does not reorder itself.
Show the shortcut on Send now only if that shortcut really works in your product.

Avoid

Do not show waiting messages in the chat as if they were sent.
Do not expect it to reorder itself. Your app keeps the order.
Do not hide Delete. People should be able to remove a message before it runs.

On a phone

Each queued message shows its text on a line that gets cut off, and the buttons wrap below it when the row is too narrow.
Send now and the move and delete buttons keep their size and have a 44px tap area on touch screens.
Messages are reordered with the up and down buttons; there is no drag.

Seen in products

Claude Code: Enter queues a message, shown gray until Claude starts on it. Ctrl+Enter sends the queue now, and Esc interrupts and keeps the work done so far.
Cursor: Enter queues, Cmd+Enter sends immediately, and queued items can be reordered.
Windsurf: queued messages can be deleted before they run.
Copilot coding agent: follow-up prompts redirect without stopping the session, and each steering message costs credits.
ChatGPT: an Update button adds context to a long Deep Research or GPT-5 Pro run without restarting.
Vercel AI Elements ships a Queue component.

Properties

Prop	Type	Default	Description
itemsrequired	QueuedMessage[]	none	Queued messages in send order, each with id and text.
onSendNow	(id: string) => void	none	Called when Send now is pressed on an item.
onMove	(id: string, direction: "up" \| "down") => void	none	Called to move an item one place. The parent reorders items.
onDelete	(id: string) => void	none	Called when delete is pressed.
title	string	"Queued"	Heading and region name.
description	ReactNode	none	Header copy explaining queue and steering. Has a default sentence that you can replace.
emptyText	string	none	Text shown when items is empty.
sendNowShortcut	string	none	Shortcut hint shown on the first item's Send now. Omit to hide.
className	string	none	Extra classes for the region.

"Show code under the preview gives the code for the example on the stage."

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

empty: With no items, the list is replaced by the emptyText message.
first or last: The move up button is disabled on the first message and move down on the last.
shortcut hint: Pass sendNowShortcut to show a key hint on the first message's Send now button.
focus: Every button in a row shows a focus ring on keyboard focus.

Tokens

Change one of these and every part that uses it follows.

--surface
--surface-sunken
--border
--border-strong
--fg-muted
--fg-subtle
--radius-card

A line you can reorder