Selection actions

A React component in Beamline's AI & agents category.

Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so, and its suggestion comes back to Replace, Copy or Discard, with the passage kept marked.

Use it for

Letting people select text in a document or an answer and ask the agent to rewrite, shorten, explain or translate it.

Not for

Formatting text (rich-text-editor's own toolbar).
Asking about the whole document (prompt-bar).
Comments on a selection (comment-thread).

Anatomy

region (your text; programmatically focusable to return focus)
bar (toolbar, portalled at the popover layer, above the selection or below when there is no room)
instruction field with send
quick actions (icon + label; icons only under 560px)
More (menu)
working line (spinner, action, the passage)
error line with Retry
suggestion with Discard, Copy, Replace
passage mark (CSS highlight while focus is in the bar)

States

closed
open (a passage of minLength or more is selected inside the region)
working
suggestion
refused (error, Retry)
read-only (no onReplace: Copy and Discard only)
disabled
stale completion ignored after selection changes
failed request retry

Keyboard

Alt+Enter, while a passage is selected, moves focus into the bar's field
← → (Home, End) move along the bar; mirrored in RTL
Enter in the field sends the instruction
Escape closes the bar and returns focus to where it was (or the region)
Pressing outside the region and the bar closes it

Motion

The bar arrives with enter-scale on --motion-in; it follows the selection on scroll and resize without animating; nothing runs while closed.

Props

Prop	Type	Default	Description
`children` (required)	`ReactNode`	—	The selectable text.
`actions / maxVisible`	`SelectionAction[] / number`	—	{ id, label, icon?, busyLabel? }; past maxVisible (3) they fold under More. DEFAULT_SELECTION_ACTIONS: Improve, Shorten, Explain, Fix grammar, Translate.
`onAction`	`(request: { action, instruction?, selection: { text, start, end } }) => void \| Promise<string \| void>`	—	Resolve with text to offer a suggestion; throw to show why it failed. action is "ask" for an own instruction.
`onReplace`	`(selection, replacement) => void`	—	Shows Replace; update your text (start/end are offsets in the region's text).
`placeholder / label / minLength / disabled`	`string / number / boolean`	—
`classNames`	`SelectionActionsClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—

Built from

button
dropdown-menu
copy-button
spinner

Dependencies

lucide-react, radix-ui

Import

import { SelectionActions, DEFAULT_SELECTION_ACTIONS } from "@/components/selection-actions/selection-actions";

Get it

Selection actions is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent