ActionBarMore

Overflow dropdown menu for the message action bar with export markdown and custom actions.

Overview

ActionBarMore renders a "..." trigger button that opens a dropdown with additional actions like exporting as markdown. It wraps ActionBarMorePrimitive from assistant-ui.

Demo

When to use

• Add overflow actions to message action bars
• Provide "Export as Markdown" functionality
• Add custom per-message actions (share, report, etc.)

Features

• Built-in export: Includes "Export as Markdown" action out of the box
• Custom actions: Add any number of custom actions with labels, icons, and handlers
• Dropdown positioning: Configurable side and alignment
• Interaction lock: Prevents the action bar from auto-hiding while the dropdown is open

Props

Basic Usage

import { ActionBarMore } from "@assistant-ui/chords";

// Inside an ActionBarPrimitive.Root
<ActionBarPrimitive.Root>
  <CopyButton />
  <ActionBarMore />
</ActionBarPrimitive.Root>

With Custom Actions

<ActionBarMore
  actions={[
    "export-markdown",
    {
      label: "Share",
      icon: <ShareIcon className="size-4" />,
      onClick: () => handleShare(),
    },
  ]}
/>

Underlying Primitives

ActionBarMore wraps:

• ActionBarMorePrimitive.Root — Radix DropdownMenu with action bar interaction locking
• ActionBarMorePrimitive.Trigger — The "..." button
• ActionBarMorePrimitive.Content — Dropdown container with portal
• ActionBarMorePrimitive.Item — Each menu item
• ActionBarPrimitive.ExportMarkdown — Built-in export action

Must be rendered inside a message context (MessagePrimitive.Root). Best used inside ActionBarPrimitive.Root for proper auto-hide interaction locking.