Selection Actions

A contextual AI action bar that appears beneath selected text — explain, improve, shorten, fix grammar, or a custom edit.

Default

Highlight a selection, then Explain / Improve / expand / custom prompt. Demo runs idle → thinking → result once per action.

Loading…

Installation

CLI

npx @sonojs/ui@latest add selection-actions

Also needsnpm i lucide-react motion

Usage

selection-actions.tsx

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

export function Example() {
  return (
    <SelectionActions
      leadingText="Pistachio holds the top slot all weekend. "
      selection="Churn it first thing Saturday…"
      result="Churn pistachio first thing Saturday…"
    />
  )
}

Props

Prop	Type	Default	Description
leadingText	string	sample lead-in	Text preceding the highlighted selection.
selection	string	sample selection	Highlighted text the actions operate on.
result	string	sample result	Replacement text after a successful action.
className	string	—	Merge classes on the root.