# ActionBarPrimitive
URL: /docs/api-reference/primitives/action-bar

Buttons for message actions like copy, edit, reload, speak, and feedback.

Buttons to interact with the message.

Anatomy \[#anatomy]

```tsx
import { ActionBarPrimitive } from "@assistant-ui/react";

const UserMessageBar = () => (
  <ActionBarPrimitive.Root>
    <ActionBarPrimitive.Edit />
    <ActionBarPrimitive.Copy />
  </ActionBarPrimitive.Root>
);

const AssistantMessageBar = () => (
  <ActionBarPrimitive.Root>
    <ActionBarPrimitive.Reload />
    <ActionBarPrimitive.Copy />
  </ActionBarPrimitive.Root>
);
```

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the action bar.

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

<ParametersTable
  type="ActionBarPrimitiveRootProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;hideWhenRunning&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;false&#x22;,
description: (
<span>
Do not render the ActionBar when the thread is in running state.
</span>
),
},
{
name: &#x22;autohide&#x22;,
type: '&#x22;always&#x22; | &#x22;not-last&#x22; | &#x22;never&#x22;',
default: '&#x22;never&#x22;',
description: (
<span>
Do not render the ActionBar unless the mouse is hovering over the
message.
<br />
<br />
<Code>&#x22;always&#x22;</Code>: always autohide.
<br />
<Code>&#x22;not-last&#x22;</Code>: only autohide if the message is not the last
one in the thread.
</span>
),
},
{
name: &#x22;autohideFloat&#x22;,
type: '&#x22;always&#x22; | &#x22;single-branch&#x22; | &#x22;never&#x22;',
default: '&#x22;never&#x22;',
description: (
<span>
Float the ActionBar during autohide.
<br />
<br />
<Code>&#x22;always&#x22;</Code>: always float during autohide.
<br />
<Code>&#x22;single-branch&#x22;</Code>: only float if the message is the only
one in the thread.
<br />
<br />
Note: this only sets `data-floating` on the ActionBar. You need to set
the appropriate styles on the ActionBar to make it float.
</span>
),
},
]"
/>

| Data attribute    | Values                |
| ----------------- | --------------------- |
| `[data-floating]` | Present when floating |

Edit \[#edit]

Enables edit mode on user message.

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

<ParametersTable
  type="ActionBarPrimitiveEditProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Reload \[#reload]

Regenerates the assistant message.

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

<ParametersTable
  type="ActionBarPrimitiveReloadProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Copy \[#copy]

Copies the message to the clipboard.

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

<ParametersTable
  type="ActionBarPrimitiveCopyProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;copiedDuration&#x22;,
type: &#x22;number&#x22;,
description:
&#x22;The duration in milliseconds to change the message status to 'copied'.&#x22;,
default: &#x22;3000&#x22;,
},
]"
/>

| Data attribute  | Values                                        |
| --------------- | --------------------------------------------- |
| `[data-copied]` | Present when the message was recently copied. |

Copied state \[#copied-state]

Show a different icon for a few seconds after the message is copied.

```tsx
<ActionBarPrimitive.Copy>
  <AuiIf condition={(s) => !s.message.isCopied}>
    <CopyIcon />
  </AuiIf>
  <AuiIf condition={(s) => s.message.isCopied}>
    <CopySuccessIcon />
  </AuiIf>
</ActionBarPrimitive.Copy>
```

or using the `data-copied` attribute:

```tsx
<ActionBarPrimitive.Copy className="group">
  <CopyIcon className="group-data-[copied]:hidden" />
  <CheckIcon className="hidden group-data-[copied]:block" />
</ActionBarPrimitive.Copy>
```

Speak \[#speak]

Plays the message text as speech.

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

<ParametersTable
  type="ActionBarPrimitiveSpeakProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

StopSpeaking \[#stopspeaking]

Stops the message text from being played as speech.

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

<ParametersTable
  type="ActionBarPrimitiveStopSpeakingProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Feedback Positive \[#feedback-positive]

Shows a positive feedback submission button.

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

<ParametersTable
  type="ActionBarPrimitiveFeedbackPositiveProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

| Data attribute     | Values                                        |
| ------------------ | --------------------------------------------- |
| `[data-submitted]` | Present when positive feedback was submitted. |

Feedback Negative \[#feedback-negative]

Shows a negative feedback submission button.

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

<ParametersTable
  type="ActionBarPrimitiveFeedbackNegativeProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

| Data attribute     | Values                                        |
| ------------------ | --------------------------------------------- |
| `[data-submitted]` | Present when negative feedback was submitted. |

ExportMarkdown \[#exportmarkdown]

Exports the message content as a Markdown file download by default, or calls a custom export handler when `onExport` is provided.

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

<ParametersTable
  type="ActionBarPrimitiveExportMarkdownProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;filename&#x22;,
type: &#x22;string&#x22;,
description:
&#x22;The filename for the downloaded Markdown file. Defaults to 'message-{timestamp}.md'. Ignored when onExport is provided.&#x22;,
},
{
name: &#x22;onExport&#x22;,
type: &#x22;(content: string) => void | Promise<void>&#x22;,
description:
&#x22;Optional callback function that receives the message content. When provided, overrides the default Markdown download behavior. Use this to implement custom export logic (PDF, JSON, TXT, etc.).&#x22;,
},
]"
/>

Examples \[#examples]

Default Markdown export:

```tsx
<ActionBarPrimitive.ExportMarkdown>
  <DownloadIcon />
  Export as Markdown
</ActionBarPrimitive.ExportMarkdown>
```

With custom filename:

```tsx
<ActionBarPrimitive.ExportMarkdown filename="chat-response.md">
  <DownloadIcon />
  Download
</ActionBarPrimitive.ExportMarkdown>
```

Export as PDF (with custom logic):

```tsx
<ActionBarPrimitive.ExportMarkdown
  onExport={async (content) => {
    const pdf = await generatePdf(content);
    downloadFile(pdf, "message.pdf");
  }}
>
  <FileIcon />
  Export PDF
</ActionBarPrimitive.ExportMarkdown>
```

Export as JSON:

```tsx
<ActionBarPrimitive.ExportMarkdown
  onExport={(content) => {
    const json = JSON.stringify({ content, timestamp: Date.now() });
    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "message.json";
    a.click();
    URL.revokeObjectURL(url);
  }}
>
  <CodeIcon />
  Export JSON
</ActionBarPrimitive.ExportMarkdown>
```