SelectionActions

A floating AI action bar attached beneath a highlighted passage, which rewrites the passage in place and offers Keep and Discard.

When to use

• Let people select text in a document and hand it to the agent (Explain, Improve, Shorten, Change tone, Fix grammar, or a typed instruction).
• Show the inline rewrite flow: the bar shows its working state, the new text streams into the selection, then Keep, Discard or retry.
• Not for a general text-formatting toolbar — use RichTextEditor. Not for a right-click menu — use ContextMenu.

Usage

import SelectionActions from "@/components/iris/selection-actions/selection-actions";

h(SelectionActions, {
  text: {
    lead: "Custom domains: a change shows at once. ",
    original:
      "Before this release, a change to a custom domain could take several minutes before it showed up on the public site.",
    rewrite: "Before, a custom domain change took minutes to reach the public site.",
  },
  onAction: (action) => track("selection_action", action),
});

Props

Prop	Type	Default	Description
text	Partial<{ lead: string; original: string; rewrite: string }>	an Anasa daily note	lead is plain text before the selection, original is the highlighted selection, and rewrite is the text streamed in after an action runs.
actions	{ primary: SelectionAction[]; more: SelectionAction[] } with SelectionAction = { id: string; icon: ReactNode; action?: string; busyLabel?: string }	Explain, Improve; then Shorten, Tone, Grammar	primary actions are always visible, and more expand behind the chevron. Omit action for a no-op button. busyLabel is the gerund shown while it runs.
labels	Partial<{ keep: string; discard: string; placeholder: string }>	Keep, Discard, Describe edits	Bar copy.
onAction	(action: string) => void	—	Called with the action name whenever an edit runs.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• The rewrite is canned. Every action streams the same text.rewrite, and there is no way to feed in a result after the fact. Use onAction for analytics or to drive a forked version.
• The bar positions itself under the last line of the selection, centred on the selection, and follows reflow while text streams in. Give it about 48px of room below the passage (it reserves pb-12).
• The default icons come from iconoir-react. Pass your own icon nodes in actions to match another set.
• Reads --surface, --accent, --accent-tint, --ink, --canvas and the overlay shadow. Width changes animate with the Web Animations API.