SelectionToolbarPrimitive

Selection toolbar primitives for quote, copy, and contextual actions on selected chat text.

For examples and usage patterns, see SelectionToolbar.

Anatomy

import { SelectionToolbarPrimitive } from "@assistant-ui/react";

const FloatingSelectionToolbar = () => (
  <SelectionToolbarPrimitive.Root>
    <SelectionToolbarPrimitive.Quote>Quote</SelectionToolbarPrimitive.Quote>
  </SelectionToolbarPrimitive.Root>
);

Place this component inside ThreadPrimitive.Root:

<ThreadPrimitive.Root>
  <ThreadPrimitive.Viewport>...</ThreadPrimitive.Viewport>
  <FloatingSelectionToolbar />
</ThreadPrimitive.Root>

A floating toolbar that appears when text is selected within a message. Listens for mouse and keyboard selection events, validates that the selection is within a single message, and renders a positioned portal near the selection. Prevents mousedown from clearing the selection.

This primitive renders a <div> element unless asChild is set.

SelectionToolbarPrimitiveRootProps

asChild : boolean = false: Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.
render ?: ReactElement

Quote

A button that quotes the currently selected text. Must be placed inside `SelectionToolbarPrimitive.Root`. Reads the selection info from context (captured by the Root), sets it as a quote in the thread composer, and clears the selection.

This primitive renders a <button> element unless asChild is set.

SelectionToolbarPrimitiveQuoteProps

asChild : boolean = false: Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.
render ?: ReactElement

Anatomy

API Reference

Root

Quote