AI composer

Enter

Sends the message. With the command or mention list open, inserts the highlighted option instead.

Shift+Enter

Adds a new line. The field grows to about eight lines, then scrolls.

/

At the start of a line, opens the command list: /summarize, /translate, /explain and /fix.

@

After a space or at the start, opens the files and docs list. The choice is inserted as one atomic token.

Arrow uporArrow down

Moves through the command or mention list while it is open; the textarea keeps focus.

Tab

Inserts the highlighted command or mention while the list is open; otherwise moves through the toolbar controls.

Escape

Closes the command or mention list, cancels dictation, or stops a running reply, in that order.

BackspaceorDelete

Next to a token, removes the whole token at once. Arrow keys hop over a token instead of entering it.

Arrow leftorArrow right

In the model menu, moves along the effort row. Up and down move through the models.

• The textarea is labeled Message and described by a hidden hint for Enter, Shift Enter, / and @. While a list is open it points at it with aria-controls and aria-activedescendant, and the list is a listbox of options grouped into Files and Docs.
• Tokens are drawn by a mirror under a transparent textarea, so the field stays a real textarea for screen readers, spellcheck, undo and IME input.
• The send button changes its accessible name with its state: Send message, Send after uploads finish, Send with the message over the limit, and Stop generating. It stays focusable while it cannot send and reports aria-disabled.
• Web search, Extended thinking and the mic are toggle buttons with aria-pressed; on state also shows in the accent fill and a tooltip, never color alone.
• Attachment chips name their remove control after the file, and a running upload's control reads Cancel upload. A failed file shows an icon and a short reason.
• A polite status region reports what happened: uploads finished, a long paste added as an attachment, the model and effort chosen, sent with a simulated reply, reply finished or stopped, and that dictation and the Drive, GitHub and screenshot actions are simulated.
• Menus come from Radix with focus moved in and returned on close; after picking an attach action focus returns to the textarea.
• Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring.

• The send arrow lifts out and a stop square scales in on the morph spring; a thin accent arc around the button fills with the reply, then fades as the button turns back into an arrow the moment the stream ends.
• Replies stream in chunks of whole words every 34ms on an animation frame clock, about 80 words a second, with catch-up when a live stream runs ahead. Each new chunk only fades in over 160ms; settled text is static, and the reply grows line by line on a short ease-out.
• A short Thinking shimmer covers the moment before the first token; with Extended thinking or Web search on, those steps shimmer instead and settle into Thought for 1s or Searched 6 sites.
• The sent message lifts into its bubble on the snappy spring while the composer glides from the center to the bottom on the smooth spring.
• Attachment chips scale in, their ring fills with the upload, and a check pops in before handing over to the remove control. The model chip springs to the width of its new label.
• Reduced motion keeps every state and announcement but drops travel: chunks appear without a fade, the waveform holds still, the ring does not spin, and panels change at once.

• The block is a container: below 680px the tool chips fold into icon buttons with tooltips, below 560px the effort label leaves the model chip, and below 400px the model chip keeps only its mark and the counter keeps only its ring.
• At 320px every control stays in one toolbar row, attachment chips scroll sideways in their own row, and suggestions stack to full width.
• The command and mention list sits above the line being typed and stays inside the composer's width.

• The reveal clock runs on requestAnimationFrame only while a reply is writing and skips renders when nothing changed; older chunks merge into one text node so the DOM stays small for long replies.
• The field height follows the mirror through a ResizeObserver instead of measuring scrollHeight on every keystroke.
• The dictation waveform writes bar transforms directly on animation frames without re-rendering React.
• Object URLs for image thumbnails are revoked when a chip is removed or the block unmounts.

• Wire `onSend` to your model endpoint and return an async iterable of text deltas; the block handles the reveal clock, Stop (through the AbortSignal), Retry and the progress ring. Throwing inside the iterable shows an error line under the reply.
• The message carries `tokens` (the commands and mentions in the text) and `attachments` (with the real File for picked, dropped or pasted files, and the pasted text for pasted chips), so the server can resolve context without parsing the text.
• Uploads, Google Drive, GitHub, screenshots and dictation are simulated in the preview. Replace the actions in composer.tsx with your own upload and picker calls; the chip model (status uploading, done, ready or error with progress) stays the same.
• Use only current models in `models`. The sample lists Claude Opus 5.5, Sonnet 5.5, Haiku 5.5, GPT-6.1 Sol and Gemini 4 Argon with their real marks.
• Keep the stage minimal. For a full thread with history, branching and message actions, use ai-chat and reuse this composer inside it.

The full library index for assistants is at /llms.txt.