MessageActionBar

Config-driven action bar for messages — copy, reload, edit, speak.

Overview

MessageActionBar is a single component that replaces the typical 40-60 lines of action bar boilerplate. Pass an array of action names and it renders the correct buttons with proper icons, visibility logic, and behavior.

Demo

Send a message, then hover over either message to see the action bars. The assistant message has copy + reload, the user message has edit.

{/* Assistant message */}
<MessageActionBar actions={["copy", "reload", "edit", "speak"]} />

{/* User message */}
<MessageActionBar actions={["edit"]} />

<ActionBarPrimitive.Root
  hideWhenRunning
  autohide="not-last"
  autohideFloat="single-branch"
>
  <ActionBarPrimitive.Copy asChild>
    <button className="group ...">
      <CopyIcon className="group-data-[copied]:hidden" />
      <CheckIcon className="hidden group-data-[copied]:block" />
    </button>
  </ActionBarPrimitive.Copy>
  <ActionBarPrimitive.Reload asChild>
    <button>
      <ReloadIcon />
    </button>
  </ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>

Available Actions

Props

Underlying Primitives

• ActionBarPrimitive.Root — container with visibility config
• ActionBarPrimitive.Copy / Reload / Edit / Speak — individual actions
• Internally composes CopyButton for the copy action
• Must be rendered inside a message context (MessagePrimitive.Root)