Selection Actions

Selection Actions is a small bar of edits for selected text: Improve, Shorten, or an instruction the person types. While the edit runs it shows progress. When the edit returns, it asks the person to keep or discard it.

The bar is the controls only. Tracking the selection, placing the bar near it, making the edit, and showing the rewritten text are your application's work. You tell the bar where things stand through status.

Installing selection-actions brings Button and Text Shimmer along as registry dependencies.

Status

• idle shows the actions and the prompt field.
• working shows a shimmering label and no controls.
• result shows Keep and Discard.
• error shows a message and Discard.

Pass onRetry to add Try again to a result or an error.

Prompt

Pass onPrompt to add the field. Send is disabled while it is empty, and the field clears after sending.

The bar is a toolbar with a name. Working and the error are announced through a status that stays mounted. The prompt field has a name, and Send is a submit button.

When the status changes, the buttons under focus are replaced. Move focus to the new controls from your handler if the person triggered the change from the keyboard.

With reduced motion, the working label does not shimmer.

import { SelectionActions } from "@/components/ai/selection-actions"

<SelectionActions
  status={edit.status}
  actions={[
    { id: "improve", label: "Improve" },
    { id: "shorten", label: "Shorten" },
  ]}
  onAction={(actionId) => edit.run(actionId, selection.text)}
  onPrompt={(instruction) => edit.runCustom(instruction, selection.text)}
  onKeep={edit.accept}
  onDiscard={edit.reject}
  onRetry={edit.retry}
/>

A failed edit

The error state, with Try again.

SelectionActions

Accepts native div props beyond those listed.