AIチャットコンポーネント

AIキャラクターとの対話を実現するチャットUIコンポーネント群

AIチャットコンポーネント

AIチャット機能は、ユーザーとAIキャラクター間の対話を実現するための中核的な機能です。以下のコンポーネント群によって構成されています。

`SessionListView`

チャット履歴の一覧を表示・管理するコンポーネントです。

責務:
- 既存の全チャットセッションをリスト形式で表示する。
- セッション一覧の読み込み中は、コンテンツのスケルトンUIを表示する。
- 各セッションの最終更新日時、キャラクター名、最終メッセージのプレビューを表示する。
- セッションを選択した際に、対応するチャットビューに遷移させる。
- セッションの削除機能を提供する（確認ダイアログ付き）。
- 新規チャットを開始するボタンを提供する。
- セッションタイトルの編集: ドロップダウンメニューからタイトルを変更できる。
- セッションのエクスポート: チャット履歴をJSONファイルとしてエクスポートできる。
主要なProps:
- onNewChat: 新規チャットボタンが押されたときに呼び出されるコールバック関数。
関連Atoms:
- chatSessionsAtom: 表示するセッションのリストを取得。
- loadChatSessionsAtom: セッションリストをロードするアクションをトリガー。
- isChatSessionsLoadingAtom: セッションリストが読み込み中かどうかを判定。
- deleteSessionAtom: セッションを削除するアクションをトリガー。
- updateSessionTitleAtom: セッションタイトルを更新するアクションをトリガー。
- activeSessionIdAtom: 選択されたセッションIDを設定。
関連Hooks:
- useChatSessionIO: セッションのエクスポート機能を提供。

`ChatView`

チャットインターフェース全体のコンテナコンポーネントです。

責務:
- アクティブなチャットセッションのヘッダー（キャラクター情報など）を表示する。
- セッションタイトルの編集: ヘッダーのタイトルをクリックして編集できる。
- メッセージリスト (MessageList) とメッセージ入力フォーム (ChatInput) をレイアウトし、統括する。
- メッセージ読み込み中は、コンテンツのスケルトンUIを表示する。
- チャットメッセージの全件コピーやコンテキスト圧縮などの高レベルなアクションをハンドリングする。
- AIエージェントモード対応: エージェントモードのオン/オフ切り替え。
- エージェント状態表示: プランニング、リサーチ、アンサリングの各フェーズを視覚的に表示。
- Artifacts機能: セッションに紐づくノート（アーティファクト）の作成・表示・編集。
主要なProps: なし
関連Atoms:
- activeSessionWithCharacterAtom: 現在のチャットセッションとキャラクター情報を取得。
- activeSessionMessagesAtom: 現在のセッションのメッセージリストを取得。
- loadActiveSessionMessagesAtom: メッセージをロードするアクションをトリガー。
- isChatMessagesLoadingAtom: メッセージが読み込み中かどうかを判定。
- compressChatAtom: チャットのコンテキスト圧縮を実行。
- isAgentModeAtom: AIエージェントモードの状態を管理。
- agentPhaseAtom: エージェントの現在のフェーズ（planning/researching/answering）を取得。
- agentActiveToolAtom: エージェントが使用中のツールを取得。
- updateSessionTitleAtom: セッションタイトルを更新するアクション。

`MessageList`

チャットメッセージのリストを表示するためのコンポーネントです。

責務:
- ChatMessageCard を使用して、メッセージの配列をレンダリングする。
- 新しいメッセージが追加された際に、自動で最下部までスクロールする機能を提供する。
- ユーザーが手動でスクロールした場合は、自動スクロールを一時的に無効にする。
- コンテキスト圧縮の区切り（セパレーター）を表示し、その削除をハンドリングする。
主要なProps: なし
関連Atoms:
- activeSessionMessagesAtom: 表示するメッセージのリストを取得。
- removeContextCutAtom: コンテキストの区切りを削除するアクションをトリガー。

`ChatInput`

ユーザーがメッセージを入力し、送信するためのフォームコンポーネントです。

責務:
- テキストエリアを提供し、ユーザーの入力を管理する。
- メッセージの送信アクションをトリガーする。
- AIエージェントモード対応: エージェントモード時はエージェント用の送信処理を実行。
- メッセージの全件コピー、コンテキスト圧縮、コンテキストカットの追加、チャット履歴のクリアなど、各種アクションのUI（ドロップダウンメニュー）を提供する。
- 生成停止機能: 生成中のメッセージを停止するボタンを提供。
主要なProps:
- onCopyAllMessages: 全メッセージをコピーする関数。
- isCompressing: コンテキスト圧縮が進行中かどうかを示すboolean。
関連Atoms:
- chatInputAtom: 入力中のテキストを保持。
- isChatLoadingAtom: メッセージ送信中（AIが応答生成中）かどうかを取得。
- sendChatMessageAtom: メッセージを送信するアクションをトリガー。
- sendAgentMessageAtom: エージェントモードでメッセージを送信するアクションをトリガー。
- chatAbortControllerAtom: 生成中のリクエストを中止するためのコントローラー。
- isAgentModeAtom: エージェントモードの状態を取得。
- addContextCutAtom: コンテキストカットを追加するアクション。
- clearChatAtom: チャット履歴をクリアするアクション。
- isCompressionDialogOpenAtom: コンテキスト圧縮ダイアログの開閉状態。

`ChatMessageCard`

個々のチャットメッセージを表示するためのカードコンポーネントです。

責務:
- ユーザーまたはAIからの単一のメッセージ内容を表示する。
- メタデータ表示: AIメッセージのメタデータ（ツール使用など）を展開可能なアコーディオンで表示。
- メッセージに対するアクション（コピー、編集、削除、再生成）のUIを提供し、関連するロジックをハンドリングする。
- インライン編集: メッセージをその場で編集できる機能を提供。
- AIエージェントモード対応: エージェントモード時の再生成処理に対応。
主要なProps:
- message: 表示する ChatMessage オブジェクト。
関連Atoms:
- deleteChatMessageAtom: メッセージを削除するアクションをトリガー。
- regenerateMessageAtom: AIの応答を再生成するアクションをトリガー。
- regenerateAgentMessageAtom: エージェントモードでAIの応答を再生成するアクションをトリガー。
- updateChatMessageAtom: メッセージの内容を更新するアクションをトリガー。
- isAgentModeAtom: エージェントモードの状態を取得。

`AgentConfirmationCard`

エージェントが破壊的な操作（ファイル作成、データ削除等）を行う前に、ユーザーの承認を求めるHITL（Human-in-the-Loop）用カードコンポーネントです。

責務:
- エージェントが実行しようとしているツール名と引数を表示。
- ツール引数のプレビュー・編集機能を提供。
- 承認（Approve）または却下（Reject）の選択を提供。
配置: AICenterPanel 内で画面下部にオーバーレイ表示（absolute inset-x-0 bottom-0）
特徴:
- バックドロップブラー付きで視認性を向上
- ツール名をアイコン付きで明示
- 「Review & Edit Details」ボタンで引数の詳細確認が可能
関連Atoms:
- agentConfirmationAtom: 承認待ちのツール実行情報を管理

`AgentStatusIndicator`

エージェントの現在の実行状態（フェーズ、アクティブツール）をリアルタイムで表示するインジケーターコンポーネントです。

責務:
- エージェントの現在のフェーズ（planning → researching → answering）を表示。
- 現在実行中のツール名を表示。
- エージェントの稼働状態を視覚的にフィードバック。
配置: AICenterPanel 内で画面上部に配置
関連Atoms:
- agentPhaseAtom: エージェントの現在のフェーズを取得
- agentActiveToolAtom: エージェントが使用中のツールを取得

`AICenterPanel`

AI画面（チャットインターフェース）のルートコンテナコンポーネントです。

責務:
- チャットビュー（ChatView）とセッション一覧（SessionListView）の切り替え。
- HITL UIコンポーネント（AgentConfirmationCard、AgentStatusIndicator）の統合。
- キャラクター選択モーダルの管理。

構造:

<AICenterPanel>
  <CharacterSelectionModal />
  <SessionListView /> {/* セッション未選択時 */}
  <ChatView /> {/* セッション選択時 */}
  <AgentConfirmationCard /> {/* HITL承認カード */}
  <AgentStatusIndicator /> {/* ステータスインジケーター */}
</AICenterPanel>