Bubble

import {
  Bubble,
  BubbleContent,

Bubble コンポーネントは、フレーム化された会話コンテンツを表示します。チャット テキスト、短い構造化された出力、引用された返信、提案、反応に使用します。

フル機能のチャット インターフェイスの場合は、Message コンポーネントを使用します。Bubble は意図的にバブルの表面にスコープされています。アバター、名前、タイムスタンプ、メタデータ、メッセージ レベルのアクションを Message に配置します。

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add bubble
コピー

使い方#

コピーimport { Bubble, BubbleContent, BubbleReactions } from "@/components/ui/bubble"

コピー<Bubble>
  <BubbleContent>
    I checked the registry output and removed the stale route.
  </BubbleContent>
  <BubbleReactions>
    <span>👍</span>
  </BubbleReactions>
</Bubble>

構成#

バブルを構築するには、次の構成を使用します。

コピーBubble
├── BubbleContent
└── BubbleReactions

BubbleGroup を使用して、同じ送信者からの連続するバブルをグループ化します。

コピーBubbleGroup
├── Bubble
│   └── BubbleContent
└── Bubble
    └── BubbleContent

機能#

• 強力なプライマリ バブルからフレームなしのゴースト コンテンツまで、7 つのビジュアル バリアント
• 送信者バブルと受信者バブルの開始位置と終了位置の調整
• 構成可能な側面と配置でバブル エッジに固定されるリアクション
• バブルのサイズは、コンテナの幅の最大 80% まで、内容に応じて変わります
• リンクとボタンのバブル用の render によるポリモーフィック コンテンツ
• 各パーツの className プロップによるカスタマイズ可能なスタイル

バリアント#

variant を使用して、バブルの視覚的な処理を変更します。

import { Markdown } from "@/components/markdown"
import {
  Bubble,

バブルのサイズは、コンテナの幅の最大 80% まで、内容に応じて変わります。ghost バリアントは最大幅を削除するため、アシスタント テキストとリッチ コンテンツが行全体に広がることができます。

位置合わせ#

Bubble で align を使用して、バブルを会話の開始または終了に位置合わせします。

import { Bubble, BubbleContent } from "@/components/ui/base/bubble"

export function BubbleAlignmentDemo() {

注意: チャット インターフェイスを構築するときは、おそらく Bubble コンポーネントではなく、Message コンポーネント自体で位置合わせを使用することをお勧めします。Message コンポーネントの role プロパティを使用すると、バブルを会話の開始または終了に自動的に配置できます。

バブルグループ#

同じ送信者からの連続したバブルをグループ化するには、BubbleGroup を使用します。align プロパティは、BubbleGroup コンポーネントではなく、Bubble コンポーネント自体に設定する必要があることに注意してください。

コピーBubbleGroup
├── Bubble
│   └── BubbleContent
└── Bubble
    └── BubbleContent

import {
  Bubble,
  BubbleContent,

リンクとボタン#

BubbleContent の render プロップを使用すると、バブルをリンクまたはボタンに変えることができます。

"use client"

import { toast } from "sonner"

コピーimport { Bubble, BubbleContent } from "@/components/ui/bubble"
 
export function BubbleLinkDemo() {
  return (
    <Bubble variant="muted">
      <BubbleContent render={<button />}>Click here</BubbleContent>
    </Bubble>
  )
}

リアクション#

バブルのリアクションには BubbleReactions を使用します。これを使用して、リアクションやクイック アクション ボタンを表示できます。 side および align を使用して行を配置します。side="top" は行を上端に固定します。リアクションはバブルの端に重なるため、行の間に垂直方向のスペースを残してください。この理由から、以下の例ではより大きな gap を使用しています。

"use client"

import { toast } from "sonner"

詳細を表示 / 折りたたみ可能#

長いバブル コンテンツは Collapsible で構成して、表示を増やしたり、表示を減らしたりすることができます。CollapsibleTrigger コンポーネントを使用して、折りたたみ可能なコンテンツをトリガーします。

"use client"

import * as React from "react"

ツールチップ#

Tooltip でバブルを囲み、メッセージが読まれたときなど、ホバー時にメタデータを表示します。

import { CheckIcon } from "lucide-react"

import {

ポップオーバー#

バブルを Popover と組み合わせて、失敗したアクションの完全なエラー メッセージなどの詳細情報をオンデマンドで表示します。

import { InfoIcon } from "lucide-react"

import {

アクセシビリティ#

Bubble は、プレゼンテーション用のメッセージ サーフェスをレンダリングします。周囲のコンテナーで会話レベルのセマンティクスを維持し、以下のガイドラインに従ってください。

リアクションのラベル付け#

リアクションは絵文字の行として表示されます。スクリーン リーダーはコンテキストなしで各グリフを読み取り、+8 のようなカウンターは「プラス 8」としてアナウンスされます。説明的な aria-label を含む単一の画像として行をグループ化し、一度にアナウンスされるようにします。role="img" は支援技術から個々の絵文字も非表示にするため、aria-hidden は必要ありません。

コピー<BubbleReactions role="img" aria-label="Reactions: thumbs up, fire, and 8 more">
  <span>👍</span>
  <span>🔥</span>
  <span>+8</span>
</BubbleReactions>

リアクションがインタラクティブである場合、代わりにボタンをレンダリングし、アイコンのみのボタンに aria-label を与えます。

コピー<BubbleReactions>
  <Button aria-label="Thumbs up" variant="secondary" size="icon-xs">
    <ThumbsUpIcon />
  </Button>
</BubbleReactions>

インタラクティブなバブル#

バブルをクリックできる場合、render プロップを使用して実際の <button> または <a> としてレンダリングして、フォーカス可能にして正しい役割を公開します。 BubbleContent にはインタラクティブ要素用の可視フォーカス リングが同梱されており、アクセス可能な名前はバブル テキストに由来しています。追加のラベルは必要ありません。

コピー<Bubble variant="muted" align="end">
  <BubbleContent render={<button type="button" onClick={onReply} />}>
    I forgot my password
  </BubbleContent>
</Bubble>

色を超えた意味#

バブルのバリアントは、色で役割とトーンを示します。色だけで意味が伝わらないように、テキスト、配置、アイコンと組み合わせてください。destructive バブルの場合は、色の処理に依存するのではなく、メッセージ テキストにエラー コンテキストを保持します。

API リファレンス#

バブル#

ルートバブルラッパー。

バブルコンテンツ#

バブルコンテンツラッパー。

バブルリアクション#

バブルの重複するリアクションを表示します。

BubbleGroup#

同じ送信者からの連続するバブルをグループ化します。