Redmineの設定

作業内容¶

AIアドバイザー UI コンポーネントを設計・実装し、既存の task2.call2arm.com フロントエンドと統合します。

詳細タスク¶

1. AI チャットインターフェースの実装

   • /ui/src/components/AIAdvisor/ChatInterface.jsx - メインコンポーネント
   • /ui/src/components/AIAdvisor/MessageList.jsx - メッセージリスト
   • /ui/src/components/AIAdvisor/InputArea.jsx - 入力エリア
   • ストリーミングレスポンス対応
   • マークダウン・コードハイライト対応

2. 検索インターフェースの実装

   • /ui/src/components/AIAdvisor/Search.jsx - 検索コンポーネント
   • /ui/src/components/AIAdvisor/SearchResults.jsx - 検索結果表示
   • フィルターUI
   • メタデータ表示
   • ソース表示

3. ドキュメント表示コンポーネントの実装

   • /ui/src/components/AIAdvisor/DocumentViewer.jsx - ドキュメントビューア
   • /ui/src/components/AIAdvisor/SourceHighlighter.jsx - ソースハイライト
   • PDF, Markdown, テキスト表示
   • 引用参照機能

4. 会話管理コンポーネントの実装

   • /ui/src/components/AIAdvisor/ConversationList.jsx - 会話リスト
   • /ui/src/components/AIAdvisor/ConversationSettings.jsx - 設定
   • 会話履歴
   • モデル選択

5. 状態管理・API連携の実装

   • /ui/src/store/aiAdvisor.js - 状態管理
   • /ui/src/api/aiAdvisor.js - API連携
   • WebSocket/SSE対応
   • エラーハンドリング

技術的指示¶

• React 18 の機能（Suspense, Concurrent Mode）を活用
• TailwindCSS と LINE デザイン言語に準拠したスタイリング
• React Query または SWR を使用した効率的なデータフェッチ
• 状態管理は Redux Toolkit または Zustand を使用
• マークダウン表示には react-markdown を使用
• コードハイライトには highlight.js または prism.js を使用
• レスポンシブデザイン対応（モバイルファースト）

成果物¶

• AI チャットインターフェース
• 検索インターフェース
• ドキュメント表示コンポーネント
• 会話管理コンポーネント
• 状態管理・API連携
• スタイリング・テーマ設定
• ユニットテスト

参考リソース¶

• LINE デザイン言語ガイドライン
• React ベストプラクティス
• ストリーミングレスポンス処理パターン
• アクセシビリティガイドライン (WCAG 2.1)