ActionBar

Buttons to interact with the message.

Anatomy

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

Container

Containts all parts of the action bar.

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

ActionBarPrimitiveRootProps

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.

hideWhenRunning:

boolean = false

Do not render the ActionBar when the thread is in running state.

autohide:

"always" | "not-last" | "never" = "never"

Do not render the ActionBar unless the mouse is hovering over the message.

"always": always autohide.
"not-last"; only autohide if the message is not the last one in the thread.

autohideFloat:

"always" | "single-branch" | "never" = "never"

Float the ActionBar during autohide.

"always": always float during autohide.
"single-branch": only float if the message is the only one in the thread.

Note: this only sets `data-floating` on the ActionBar. You need to set the appropriate styles on the ActionBar to make it float.

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

Edit

Enables edit mode on user message.

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

ActionBarPrimitiveEditProps

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.

`useActionBarEdit`

Provides the Edit functionality as a hook.

import { useActionBarEdit } from "@assistant-ui/react";
 
const Edit = () => {
  const edit = useActionBarEdit();
 
  // edit action is not available
  if (!edit) return null;
 
  return <button onClick={edit}>Edit</button>;
};

Reload

Regenerates the assistant message.

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

ActionBarPrimitiveReloadProps

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.

`useActionBarReload`

Provides the Reload functionality as a hook.

import { useActionBarReload } from "@assistant-ui/react";
 
const Reload = () => {
  const reload = useActionBarReload();
 
  // reload action is not available
  if (!reload) return null;
 
  return <button onClick={reload}>Reload</button>;
};

Copy

Copies the message to the clipboard.

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

ActionBarPrimitiveCopyProps

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.

copiedDuration:

number = 3000

The duration in milliseconds to change the message status to 'copied'.

Copied state

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

<ActionBarPrimitive.Copy>
  <MessagePrimitive.If copied={false}>
    <CopyIcon />
  </MessagePrimitive.If>
  <MessagePrimitive.If copied>
    <CopySuccessIcon />
  </MessagePrimitive.If>
</ActionBarPrimitive.Copy>

`useActionBarCopy`

Provides the Copy functionality as a hook.

import { useActionBarCopy } from "@assistant-ui/react";
 
const Copy = () => {
  const copy = useActionBarCopy({ copiedDuration: 3000 });
 
  // copy action is not available
  if (!copy) return null;
 
  return <button onClick={copy}>Copy</button>;
};

UseActionBarCopyProps

copiedDuration:

number = 3000

The duration in milliseconds in which the message status is set to 'copied'.

Speak

Plays the message text as speech.

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

ActionBarPrimitiveSpeakProps

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.

`useActionBarSpeak`

Provides the Speak functionality as a hook.

import { useActionBarSpeak } from "@assistant-ui/react";
 
const Speak = () => {
  const speak = useActionBarSpeak();
 
  // speak action is not available
  if (!speak) return null;
 
  return <button onClick={speak}>Speak</button>;
};

StopSpeaking

Stops the message text from being played as speech.

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

ActionBarPrimitiveStopSpeakingProps

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.

`useActionBarStopSpeaking`

Provides the StopSpeaking functionality as a hook.

import { useActionBarStopSpeaking } from "@assistant-ui/react";
 
const StopSpeaking = () => {
  const stopSpeaking = useActionBarStopSpeaking();
 
  // stopSpeaking action is not available
  if (!stopSpeaking) return null;
 
  return <button onClick={stopSpeaking}>Stop speaking</button>;
};

ActionBar

ActionBarPrimitiveRootProps

asChild:

hideWhenRunning:

autohide:

autohideFloat:

ActionBarPrimitiveEditProps

asChild:

ActionBarPrimitiveReloadProps

asChild:

ActionBarPrimitiveCopyProps

asChild:

copiedDuration:

UseActionBarCopyProps

copiedDuration:

ActionBarPrimitiveSpeakProps

asChild:

ActionBarPrimitiveStopSpeakingProps

asChild:

On this page