チャットメッセージChatMessage
Experimental

アシスタント、ユーザー、システム、入力中の会話行を表示するメッセージコンポーネントです。

状態とバリエーション

回答側は本文の枠を持たず、コピー・分岐・Raw の操作を下に並べます。

アシスタント10:01

候補を3件見つけました。条件を変える場合は分岐できます。

送信者側は右寄せの背景付き吹き出しにし、コピーと編集を操作に出します。

あなた10:02

この内容で進めて。

通常の文章とカードを同じ回答内に置く場合も、外側のメッセージ枠は増やしません。

アシスタント10:03

確認結果をまとめました。必要であれば、この草案を保存してから編集できます。

成果物ドラフト

drafts/component-audit.md

会話の開始や区切りを中央の補助ラベルで示します。

会話を開始しました。

回答を生成中の一時状態です。本文が空の場合は入力中ラベルを表示し、複数文言を渡すとタイプ/削除で切り替わります。

アシスタント

内容を作成しています...

表は横にスクロールできます

プロパティ	型	初期値	説明
role	"assistant" \| "user" \| "system"	-	メッセージの種類を指定します。
content	ReactNode	-	本文です。アシスタント側ではカードや進捗表示も渡せます。
copyValue	string	-	本文が文字列ではない場合にコピーする値です。
userName	string	-	表示名です。
timestamp	string	-	時刻や補足メタ情報です。
isTyping	boolean	false	入力中表示に切り替えます。
actions	ChatMessageAction[]	-	既定の操作を差し替える場合に指定します。
showActions	boolean	true	操作フッターの表示を切り替えます。
onAction	(actionKey, event) => void	-	コピー、分岐、Raw、編集などの操作を受け取ります。
typingMessages	string[]	-	入力中かつ本文が空の場合に、タイプ/削除で切り替える文言です。
labels.typing	string	"内容を作成しています..."	入力中かつ本文が空の場合に表示する文言です。