ChatBubble
チャットメッセージの吹き出しコンポーネント。
インポート
import { ChatBubble } from '@caroainc/ui-components'個別サブパス（バンドルサイズを抑えたい場合）:
import { ChatBubble } from '@caroainc/ui-components/chat-bubble'基本的な使い方
Loading...
<ChatBubble role="user">こんにちは！</ChatBubble>
<ChatBubble role="assistant">
こんにちは！何かお手伝いできることはありますか？
</ChatBubble>ユーザーメッセージ
role="user"は右寄せで、丸みのあるスタイルで表示されます。
Loading...
<ChatBubble role="user">ユーザーからのメッセージです</ChatBubble>
<ChatBubble role="user">
複数行のメッセージも対応しています。<br />
改行を含む長いメッセージでも<br />
きれいに表示されます。
</ChatBubble>アシスタントメッセージ
role="assistant"は左寄せで、フラットなスタイルで表示されます（ChatGPT風）。
アシスタント: アシスタントからの返答です。複数行のメッセージも対応しています。
<ChatBubble role="assistant">
アシスタントからの返答です。複数行のメッセージも対応しています。
</ChatBubble>チャット画面の例
Loading...
<div className="space-y-4">
<ChatBubble role="user">今日の天気を教えて</ChatBubble>
<ChatBubble role="assistant">
今日の東京の天気は晴れで、最高気温は25度の予報です。
</ChatBubble>
<ChatBubble role="user">ありがとう！</ChatBubble>
<ChatBubble role="assistant">
どういたしまして！他に何かお手伝いできることはありますか？
</ChatBubble>
</div>TypingIndicatorとの組み合わせ
入力中の状態を表示する場合は、TypingIndicatorと組み合わせます。
Loading...
<ChatBubble role="assistant">
<TypingIndicator />
</ChatBubble>Markdownレンダリングとの組み合わせ
childrenに任意のコンテンツを渡せるため、react-markdownなどと組み合わせて使用できます。
import ReactMarkdown from 'react-markdown'
<ChatBubble role="assistant">
<ReactMarkdown>{markdownContent}</ReactMarkdown>
</ChatBubble>アクセシビリティ
各吹き出しの先頭に role に応じた発話者プレフィックス（role="user" は「あなた: 」、role="assistant" は「アシスタント: 」）が sr-only（スクリーンリーダー専用・画面には非表示）で挿入されます。連続したメッセージを読み上げる際に、どちらの発話か区別できるようにするためです。
Props
| Prop | Type | Default | Description |
|---|---|---|---|
role* | 'user' | 'assistant' | - | メッセージの送信者 |
children* | React.ReactNode | - | 表示するコンテンツ |
className | string | - | 追加のCSSクラス |