チャットパネルChatPanel
Experimental

チャットメッセージとチャット入力を組み合わせ、サポートやアシスタントの会話面を構成するパネルです。

状態とバリエーション

メッセージ履歴、処理中状態、入力欄を 1 つのパネルにまとめます。

メッセージ、入力欄、処理中状態をまとめて確認します。

会話を開始しました。

Assistant10:01

ドキュメントの改善点を確認できます。質問を入力してください。

会話開始前の簡素な空状態です。emptyState slot で差し替えられます。

会話開始前も入力欄は使えます。

まだメッセージはありません。

質問や確認したい内容を入力すると会話を開始できます。

welcome slot は、初回起動時の案内や開始候補を表示するための領域です。

文章作成、整理、分析などをこのチャットから始められます。

狭いパネルでは高さを下げ、同じ構成を保ちます。

サポート10:01

短い確認に使います。

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

プロパティ	型	初期値	説明
messages	ChatPanelMessage[]	-	表示する会話履歴です。
onSend	(message: string, files?: File[]) => void	-	入力欄の送信時に呼び出します。
isProcessing	boolean	false	応答生成中などの処理中状態です。
emptyState	ReactNode	-	メッセージが空で welcome がない場合に表示する空状態です。
welcome	ReactNode	-	メッセージが空の場合に優先表示する初期画面です。
onMessageAction	(message, actionKey, event) => void	-	パネル内メッセージのコピー、分岐、Raw、編集などの操作を受け取ります。
onClose	() => void	-	閉じるボタンを表示し、押下時に呼び出します。
inputLabels	ChatInputLabels	-	入力欄のラベルや無効化理由を指定します。