ChatBubble

インポート

import { ChatBubble } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { ChatBubble } from '@caroainc/ui-components/chat-bubble'

基本的な使い方

こんにちは！

こんにちは！何かお手伝いできることはありますか？

<ChatBubble role="user">こんにちは！</ChatBubble>
<ChatBubble role="assistant">
  こんにちは！何かお手伝いできることはありますか？
</ChatBubble>

ユーザーメッセージ

role="user"は右寄せで、丸みのあるスタイルで表示されます。

ユーザーからのメッセージです

複数行のメッセージも対応しています。
改行を含む長いメッセージでも
きれいに表示されます。

<ChatBubble role="user">ユーザーからのメッセージです</ChatBubble>
<ChatBubble role="user">
  複数行のメッセージも対応しています。<br />
  改行を含む長いメッセージでも<br />
  きれいに表示されます。
</ChatBubble>

アシスタントメッセージ

role="assistant"は左寄せで、フラットなスタイルで表示されます（ChatGPT風）。

アシスタントからの返答です。複数行のメッセージも対応しています。

<ChatBubble role="assistant">
  アシスタントからの返答です。複数行のメッセージも対応しています。
</ChatBubble>

チャット画面の例

今日の天気を教えて

今日の東京の天気は晴れで、最高気温は25度の予報です。過ごしやすい一日になりそうですね。

ありがとう！

どういたしまして！他に何かお手伝いできることはありますか？

<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と組み合わせます。

質問があります

<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クラス

ChatBubble

On this page