ActionBar プリミティブは自動非表示、状態コピー、インテリジェントな無効化機能を備えたメッセージアクションボタンを構築できます。
ActionBar プリミティブは、コピー、リロード、編集、フィードバック、音声読み上げ、エクスポート、等のメッセージアクションを提供します

assistant-ui 入門 : プリミティブ – ActionBar

作成 : Masashi Okumura (@classcat.com)
作成日時 : 04/03/2026
バージョン : assistant-ui@0.0.87

* 本記事は assistant-ui.com/docs の以下のページを参考にしています :

• Primitives – ActionBar

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

 

 

assistant-ui 入門 : プリミティブ – ActionBar

自動非表示、状態コピー、インテリジェントな無効化機能を備えたメッセージアクションボタンを構築します。

ActionBar プリミティブはメッセージアクションを提供します: コピー、リロード、編集、フィードバック、音声読み上げ、エクスポート、等。ホバー時の自動非表示、メッセージ状態に基づく自動無効化、フローティグ動作を備えたインテリジェントな表示制御を処理します。開発者はボタンを作成し、プリミティブがアクション状態と利用可能性を処理します。

Preview

Code

import {
  ActionBarPrimitive,
  MessagePrimitive,
} from "@assistant-ui/react";
import { CheckIcon, CopyIcon, RefreshCwIcon } from "lucide-react";

function AssistantMessage() {
  return (
    <MessagePrimitive.Root className="group flex flex-col items-start gap-1">
      <div className="max-w-[80%] rounded-2xl bg-muted px-4 py-2.5 text-sm">
        <MessagePrimitive.Parts />
      </div>
      <ActionBarPrimitive.Root
        hideWhenRunning
        autohide="not-last"
        autohideFloat="always"
        className="flex gap-0.5 data-[floating]:opacity-0 data-[floating]:group-hover:opacity-100 data-[floating]:transition-opacity"
      >
        <ActionBarPrimitive.Copy className="group/copy flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
          <CopyIcon className="size-4 group-data-[copied]/copy:hidden" />
          <CheckIcon className="hidden size-4 group-data-[copied]/copy:block" />
        </ActionBarPrimitive.Copy>
        <ActionBarPrimitive.Reload className="flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
          <RefreshCwIcon className="size-4" />
        </ActionBarPrimitive.Reload>
      </ActionBarPrimitive.Root>
    </MessagePrimitive.Root>
  );
}

 

クイックスタート

コピーとリロードを備えた最小限のアクションバー :

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

<ActionBarPrimitive.Root>
  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
  <ActionBarPrimitive.Reload>Reload</ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>

Root は <div> をレンダリングし、アクションボタンは <button> 要素をレンダリングします。各ボタンは、そのアクションが利用できない場合には自動的に無効化されます (e.g., Copy はコンテンツがない場合は無効にされ、Reload はモデルが実行中は無効にされます)。

ActionBar は MessagePrimitive.Root 内に配置される必要があります、最も近いメッセージコンテキストからメッセージの状態を読み取るためです。

ℹ️ ランタイム・セットアップ: プリミティブはランタイム・コンテキストを必要とします。UI をランタイム (例えば useLocalRuntime(…)) を持つ AssistantRuntimeProvider でラップします。See Pick a Runtime.

 

基本概念

自動非表示 & フローティング

autohide prop は、いつアクションバーが表示されるかを制御します :

• “never” (デフォルト): 常に表示
• “not-last”: 最後を除いてすべてのメッセージ上で非表示、マウスホバー時に表示されます
• “always”: すべてのメッセージ上で非表示、マウスホバー時に表示されます

autohideFloat が設定されている場合、非表示のアクションバーは DOM から削除される代わりに data-floating 属性が付与されます。これは CSS でそれらをアニメーション化できるようにします :

<ActionBarPrimitive.Root
  autohide="not-last"
  autohideFloat="always"
  className="data-[floating]:opacity-0 data-[floating]:group-hover:opacity-100 data-[floating]:transition-opacity"
>
  {/* buttons */}
</ActionBarPrimitive.Root>

 

自動無効化

アクションボタンは、状態に基づいて自動的に無効化されます、手動での配線は不要です :

• Copy: コピー可能なテキストコンテンツがない場合やアシスタントメッセージが実行中の場合には無効化されます

• Reload: スレッドが実行中の場合やメッセージロールがアシスタントでない場合には無効化されます

• Edit: メッセージが既に編集中の場合には無効化されます

• Speak: 読み上げ可能なテキストがない場合やアシスタントメッセージが実行中の場合には無効化されます

 

状態のコピー

Copy をクリックすると、ボタンに data-copied 属性が (設定可能な) 一定時間（デフォルトは3秒）付与されます。視覚的なフィードバックのためにこれを利用できます :

<ActionBarPrimitive.Copy copiedDuration={2000} className="group">
  <CopyIcon className="group-data-[copied]:hidden" />
  <CheckIcon className="hidden group-data-[copied]:block" />
</ActionBarPrimitive.Copy>

 

フィードバックボタン

フィードバックボタンは、送信されたデータによる送信状況を追跡します :

<ActionBarPrimitive.FeedbackPositive className="data-[submitted]:text-green-500">
  👍
</ActionBarPrimitive.FeedbackPositive>
<ActionBarPrimitive.FeedbackNegative className="data-[submitted]:text-red-500">
  👎
</ActionBarPrimitive.FeedbackNegative>

 

パーツ (部品)

Root

自動非表示とフローティング動作を備えたコンテナ。asChild が設定されていない限り、<div> 要素をレンダリングします。

<ActionBarPrimitive.Root
  hideWhenRunning
  autohide="not-last"
  autohideFloat="always"
  className="flex gap-1"
>
  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
  <ActionBarPrimitive.Reload>Reload</ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>

 

Copy

メッセージテキストをクリップボードにコピーします。asChild が設定されていない限り、<button> 要素をレンダリングします。

<ActionBarPrimitive.Copy copiedDuration={2000} className="group">
  <CopyIcon className="group-data-[copied]:hidden" />
  <CheckIcon className="hidden group-data-[copied]:block" />
</ActionBarPrimitive.Copy>

 

Reload

現在のアシスタントメッセージをリロードまたは再生成します。asChild が設定されていない限り、<button> 要素をレンダリングします。

<ActionBarPrimitive.Reload className="rounded-md px-2 py-1 text-sm hover:bg-muted">
  Regenerate
</ActionBarPrimitive.Reload>

 

Edit

現在のメッセージに対して編集モードに入ります。asChild が設定されていない限り、<button> 要素をレンダリングします。

<ActionBarPrimitive.Edit className="rounded-md px-2 py-1 text-sm hover:bg-muted">
  Edit
</ActionBarPrimitive.Edit>

 

Speak

現在のメッセージに対して音声再生を開始します。asChild が設定されていない限り、<button> 要素をレンダリングします。

<ActionBarPrimitive.Speak className="rounded-md px-2 py-1 text-sm hover:bg-muted">
  Play
</ActionBarPrimitive.Speak>

 

ExportMarkdown

メッセージをマークダウン形式としてダウンロードするか、カスタムハンドラを呼び出します。asChild が設定されていない限り、<button> 要素をレンダリングします。

<ActionBarPrimitive.ExportMarkdown
  onExport={async (content) => {
    await navigator.clipboard.writeText(content);
  }}
>
  Export
</ActionBarPrimitive.ExportMarkdown>

 

パターン

アシスタント・アクションバー

<ActionBarPrimitive.Root
  hideWhenRunning
  autohide="not-last"
  autohideFloat="single-branch"
>
  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
  <ActionBarPrimitive.Reload>Regenerate</ActionBarPrimitive.Reload>
  <ActionBarPrimitive.ExportMarkdown>Export</ActionBarPrimitive.ExportMarkdown>
</ActionBarPrimitive.Root>

 

ユーザ・アクションバー

<ActionBarPrimitive.Root hideWhenRunning autohide="not-last">
  <ActionBarPrimitive.Edit>Edit</ActionBarPrimitive.Edit>
</ActionBarPrimitive.Root>

以上