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/aria/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={(props) => <button {...props} type="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>

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

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

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

色を超えた意味#

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

API リファレンス#

バブル#

ルートバブルラッパー。

バブルコンテンツ#

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

バブルリアクション#

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

BubbleGroup#

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