チャット入力ChatInput
Experimental

メッセージ入力、添付、送信、停止、無効化理由をまとめて扱うチャット用の入力欄です。

状態とバリエーション

1つの入力エリア内に、添付プレビュー、枠なしの複数行入力、下段ツールバーをまとめます。

送信中は停止ボタンに切り替え、入力を一時停止します。

送信できない理由はボタンのツールチップで伝えます。

AI から提示された選択肢は ChatInput ではなく、ChatComposer の prompt として扱います。

どの整理方針で進めますか？

現在のブランチ、作業フォルダ、ワークツリー状態などは ChatComposer の context としてまとめます。

#24feature/insights-panel作業状態を選択できます。

使用量は ChatComposer の footer で独立して表示し、モデル選択は ChatInput 側に残します。

補助キャラクターは装飾・状態通知なので、ChatInput の外側に重ねて配置します。

補助キャラクターは装飾・状態通知なので、ChatComposer の accessory として配置します。

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

プロパティ	型	初期値	説明
onSend	(message: string, files?: File[]) => void	-	送信時に呼び出されるコールバックです。
onStop	() => void	-	処理中の停止操作で呼び出します。
isProcessing	boolean	false	送信中・生成中の状態を表します。
enableAttachments	boolean	true	添付ボタンを表示するかを指定します。
modelLabel	React.ReactNode	"自動"	下段右側のモデル表示です。
optionsContent	React.ReactNode	-	入力オプションボタンから開くポップオーバー内容です。
modelOptions	ChatInputModelOption[]	-	モデルボタンから選択できる候補です。
toolbarAccessory	React.ReactNode	-	モデル選択の右横に置く補助操作です。使用量など、モデルとは別の状態をアイコンで表示できます。
voiceActive	boolean	false	音声認識の録音中状態を外部から制御する場合に指定します。
showOptionsButton / showModelSelector / showVoiceButton	boolean	true	下段ツールバーの補助操作を表示するかを指定します。入力オプションは optionsContent または onOptionsClick がある場合だけ表示されます。
labels	ChatInputLabels	-	ツールチップと無効化理由の文言を指定します。