操作
バグ #565
未完了【RAG UI開発】開発支援AIチャット画面実装
ステータス:
新規
優先度:
高め
担当者:
-
開始日:
2025-06-15
期日:
進捗率:
0%
予定工数:
説明
概要¶
RAGシステムのユーザーインターフェース開発。開発者が日常的に使いやすい、実用的なUIを構築する。
目的¶
- 開発支援に特化したチャットインターフェース
- インフラ状況の可視化
- Redmine連携機能の直感的な操作
UI要件¶
1. メイン画面構成¶
┌─────────────────────────────────────────────────────┐
│ task2 RAG - 開発支援AIアシスタント │
├─────────────┬─────────────────────┬─────────────────┤
│ サイドバー │ チャットエリア │ 情報パネル │
│ │ │ │
│ ・履歴 │ [会話表示] │ ・コンテキスト │
│ ・お気に入り │ │ ・ソース │
│ ・設定 │ [入力欄] │ ・アクション │
└─────────────┴─────────────────────┴─────────────────┘
2. 主要コンポーネント¶
2.1 チャットエリア¶
- 会話表示: ユーザーとAIの対話を時系列表示
- コード表示: シンタックスハイライト対応
- コピー機能: ワンクリックでコマンドやコードをコピー
- ソース表示: 回答の根拠となった情報源を表示
2.2 クイックアクション¶
// よく使うアクション
- 「最新のエラーログを確認」
- 「Dockerコンテナの状態確認」
- 「関連するRedmineチケット検索」
- 「デプロイ手順の確認」
2.3 コンテキストパネル¶
- 現在のインフラ状態（リアルタイム更新）
- 最近の障害情報
- 作業中のチケット情報
3. 技術スタック¶
- フレームワーク: React 18
- スタイリング: TailwindCSS 3
- 状態管理: Zustand or Context API
- アイコン: Lucide React
- コード表示: react-syntax-highlighter
- 通信: Axios + WebSocket（リアルタイム更新用）
4. デザイン要件¶
4.1 カラーテーマ¶
/* ダークモード対応 */
--primary: #3B82F6; /* Blue 500 */
--secondary: #10B981; /* Emerald 500 */
--warning: #F59E0B; /* Amber 500 */
--error: #EF4444; /* Red 500 */
--background: #111827; /* Gray 900 */
--surface: #1F2937; /* Gray 800 */
4.2 レスポンシブ対応¶
- デスクトップ: 3カラムレイアウト
- タブレット: 2カラム（サイドバー折りたたみ）
- モバイル: 1カラム（タブ切り替え）
5. 機能要件¶
5.1 基本機能（MVP）¶
- テキストベースのチャット
- 基本的な質問応答
- コード表示とコピー
- ソース情報の表示
- セッション保持
5.2 拡張機能（Phase 2）¶
- チャット履歴の永続化
- お気に入り質問の登録
- Redmineチケット作成UI
- インフラ状態のリアルタイム表示
- ファイルアップロード対応
6. 画面遷移¶
/ai-chat (メイン)
├── /ai-chat/history (履歴一覧)
├── /ai-chat/session/:id (特定セッション)
├── /ai-chat/settings (設定)
└── /ai-chat/help (使い方)
7. コンポーネント構造¶
src/
├── pages/
│ └── AIChat/
│ ├── index.jsx
│ ├── History.jsx
│ └── Settings.jsx
├── components/
│ └── RAG/
│ ├── ChatArea/
│ │ ├── index.jsx
│ │ ├── MessageBubble.jsx
│ │ ├── CodeBlock.jsx
│ │ └── SourceInfo.jsx
│ ├── Sidebar/
│ │ ├── index.jsx
│ │ ├── SessionList.jsx
│ │ └── QuickActions.jsx
│ └── InfoPanel/
│ ├── index.jsx
│ ├── ContextDisplay.jsx
│ └── ActionButtons.jsx
├── hooks/
│ ├── useChat.js
│ ├── useWebSocket.js
│ └── useInfraStatus.js
└── services/
├── ragService.js
└── redmineService.js
8. ユーザビリティ要件¶
8.1 パフォーマンス¶
- 初回表示: 3秒以内
- チャット応答表示: 即座に「入力中...」表示
- コード補完: 100ms以内
8.2 アクセシビリティ¶
- キーボードナビゲーション対応
- スクリーンリーダー対応
- ハイコントラストモード
8.3 エラーハンドリング¶
- 接続エラー時の再試行
- オフライン時のローカルキャッシュ
- エラーメッセージの分かりやすい表示
9. 実装スケジュール¶
Week 1: 基本UI実装¶
- Day 1-2: プロジェクトセットアップとコンポーネント構造
- Day 3-4: チャットエリアの実装
- Day 5-7: APIとの連携とテスト
Week 2: 機能拡張¶
- Day 1-2: サイドバーと履歴機能
- Day 3-4: コンテキストパネルと情報表示
- Day 5-7: Redmine連携UI
Week 3: 最適化と品質向上¶
- Day 1-2: レスポンシブ対応
- Day 3-4: パフォーマンス最適化
- Day 5: アクセシビリティ対応
10. 成果物¶
-
ソースコード
- Reactコンポーネント一式
- カスタムフック
- APIサービス層
-
ドキュメント
- コンポーネントカタログ
- 使用方法ガイド
- デザインシステム
-
テスト
- ユニットテスト
- 統合テスト
- E2Eテスト
関連チケット¶
受入条件¶
- 開発者が直感的に使えるUI
- 5秒以内にインフラ関連の質問に回答表示
- コードのコピー&ペーストが容易
- モバイルでも基本機能が使用可能
操作