Redmineの設定

html.call2arm.com での試験ページ展開計画¶

現在の構成確認¶

html.call2arm.com は静的ホスティング用に設定されています：

• コンテナ: html-call2arm-nginx
• ポート: 10080:80, 10443:443
• プロキシ: html-call2arm-proxy

試験ページの展開方法¶

1. 静的ビルドのデプロイ¶

# Reactアプリをビルド
cd /var/docker/task2-service/app/web
npm run build

# html.call2arm.com のドキュメントルートにコピー
cp -r build/* /var/docker/html-call2arm/public/rag-demo/

2. アクセスURL¶

https://html.call2arm.com/rag-demo/

実装手順¶

1. ビルド設定の調整

   • PUBLIC_URL環境変数の設定
   • API_BASE_URLの設定

2. nginx設定

   • SPAルーティング対応
   • APIプロキシ設定

3. 展開スクリプト作成

   • 自動ビルド
   • 自動デプロイ

これにより、localhost不要で直接アクセス可能な試験環境を構築できます。

UIデザイン方針の更新 - LINEデザイン言語との互換性¶

既存task.call2arm.comのデザイン言語¶

task.call2arm.comがLINEのデザイン言語で構築されているため、RAG UIも同じデザインシステムに準拠して実装します。

LINEデザイン言語の特徴¶

1. カラーパレット

   • Primary Green: #00B900
   • Secondary Colors: 明るく親しみやすい色調
   • Background: 白基調（ライトテーマ）
   • Text: 高コントラストで読みやすい

2. タイポグラフィ

   • 日本語に最適化されたフォントサイズ
   • 明確な階層構造
   • 十分な行間と余白

3. コンポーネント

   • 角丸のボタンとカード
   • 親しみやすいアイコン
   • 明確なタップ/クリックエリア
   • スムーズなアニメーション

4. レイアウト

   • モバイルファースト
   • 直感的なナビゲーション
   • 情報の優先度が明確

UI実装の更新方針¶

1. カラースキームの変更¶

/* ダークテーマから LINEライトテーマへ */
:root {
  --primary-color: #00B900;        /* LINE Green */
  --primary-hover: #00A000;        /* Darker Green */
  --secondary-color: #3B5998;      /* Blue */
  --bg-primary: #FFFFFF;           /* White */
  --bg-secondary: #F7F7F7;         /* Light Gray */
  --bg-tertiary: #EEEEEE;          /* Lighter Gray */
  --text-primary: #1E1E1E;         /* Dark Text */
  --text-secondary: #707070;       /* Gray Text */
  --border-color: #E0E0E0;         /* Light Border */
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
}

2. コンポーネントスタイル¶

• ボタン: 角丸、シャドウ付き、押下感のあるアニメーション
• カード: 白背景、軽いシャドウ、十分なパディング
• 入力フィールド: 大きめのサイズ、明確なフォーカス状態
• メッセージバブル: LINE風の吹き出しデザイン

3. アイコン使用¶

• LINE SEED Font Icons または同等のアイコンセット
• 親しみやすい丸みのあるアイコン
• 適切なサイズと色使い

更新されたUI仕様¶

チャット画面のデザイン¶

┌─────────────────────────────────────────────┐
│  🟢 RAG AI Assistant                        │  <- LINEグリーンのヘッダー
├─────────────────────────────────────────────┤
│                                             │
│  ┌─────────────────────┐                   │
│  │ こんにちは！        │ <- ユーザー       │
│  └─────────────────────┘   （緑色バブル）   │
│                                             │
│  ┌─────────────────────┐                   │
│  │ お手伝いします      │ <- AI            │
│  └─────────────────────┘   （白色バブル）   │
│                                             │
├─────────────────────────────────────────────┤
│  [メッセージを入力...]  [送信]              │
└─────────────────────────────────────────────┘

実装上の注意点¶

1. 既存システムとの一貫性: task.call2arm.comの既存UIと違和感のないデザイン
2. アクセシビリティ: 高コントラスト、適切なフォントサイズ
3. レスポンシブ: モバイルでも使いやすいUI
4. パフォーマンス: 軽量で高速な表示

UI実装方針の最適化 - 既存コンポーネントの流用¶

実装方針の変更¶

task2.call2arm.comの既存Reactコンポーネントを最大限活用し、RAG機能に必要な部品のみを追加実装する方式に変更します。

既存コンポーネントの確認¶

task2.call2arm.comで利用可能なコンポーネント：

1. 基本UIコンポーネント

   • Button, Card, Modal, Input
   • Header, Sidebar, Layout
   • LoadingSpinner, ErrorBoundary

2. タスク管理コンポーネント

   • TaskList, TaskCard
   • FilterBar, SearchBox
   • StatusBadge, PriorityIcon

3. 共通機能

   • API通信フック (useApi)
   • 認証コンテキスト
   • テーマ設定

追加が必要なRAG専用コンポーネント¶

1. ChatMessage コンポーネント¶

// 既存のCardコンポーネントを拡張
import { Card } from '../shared/Card';

const ChatMessage = ({ message, isUser }) => {
  return (
    <Card 
      className={`chat-message ${isUser ? 'user' : 'assistant'}`}
      variant={isUser ? 'primary' : 'default'}
    >
      {/* メッセージ内容 */}
    </Card>
  );
};

2. SourceReference コンポーネント¶

// 既存のBadgeコンポーネントを活用
import { Badge } from '../shared/Badge';

const SourceReference = ({ sources }) => {
  return sources.map(source => (
    <Badge 
      key={source.id}
      variant={source.type}
      icon={getSourceIcon(source.type)}
    >
      {source.title}
    </Badge>
  ));
};

3. ChatInput コンポーネント¶

// 既存のInputとButtonを組み合わせ
import { Input, Button } from '../shared';

const ChatInput = ({ onSend }) => {
  return (
    <div className="chat-input-wrapper">
      <Input 
        placeholder="質問を入力..."
        onEnter={onSend}
      />
      <Button 
        icon="send"
        onClick={onSend}
        variant="primary"
      />
    </div>
  );
};

実装手順¶

1. 既存コンポーネントのインポートマップ作成

   • shared/components からの一括インポート
   • スタイルシートの継承

2. RAG専用コンポーネントの最小限実装

   • ChatMessage（メッセージ表示）
   • SourceReference（参照元表示）
   • ChatInput（入力エリア）

3. 既存ページレイアウトの活用

   • MainLayout コンポーネントの利用
   • 既存のルーティング設定への追加

メリット¶

• 開発工数の大幅削減
• UIの一貫性確保
• メンテナンス性の向上
• バンドルサイズの最適化

作業指示 - 既存コンポーネント活用版RAG UI実装¶

実装方針¶

task2.call2arm.comの既存Reactコンポーネントを最大限活用し、RAG機能に必要な最小限の追加実装を行う。

前提条件の確認¶

1. 既存コンポーネントの所在確認¶

# task2のソースコード構造確認
cd /var/docker/task2-service/app/web/src
ls -la components/

# 以下のディレクトリ構造を想定
components/
├── shared/          # 共通コンポーネント
│   ├── Button.jsx
│   ├── Card.jsx
│   ├── Input.jsx
│   ├── Badge.jsx
│   ├── Avatar.jsx
│   ├── CodeBlock.jsx
│   ├── LoadingSpinner.jsx
│   ├── StatusIndicator.jsx
│   ├── EmptyState.jsx
│   └── Tooltip.jsx
├── Layout/          # レイアウトコンポーネント
│   ├── MainLayout.jsx
│   ├── Sidebar.jsx
│   └── Header.jsx
└── ... 

2. 既存フックの確認¶

# カスタムフックの確認
ls -la hooks/
# useApi.js
# useInfraStatus.js
# useAuth.js

作業手順¶

Phase 1: ディレクトリ構造の作成（10分）¶

# AIChat機能用ディレクトリ作成
mkdir -p src/pages/AIChat/components

Phase 2: RAG専用コンポーネントの実装（1時間）¶

2.1 メインページコンポーネント¶

# src/pages/AIChat/index.jsx
# artifact: task2-rag-optimized-components から
# 既存のMainLayout, Card, Button等をインポート

2.2 追加コンポーネント（新規作成は4つのみ）¶

src/pages/AIChat/components/
├── ChatMessage.jsx      # メッセージ表示（既存Card拡張）
├── ChatInput.jsx        # 入力エリア（既存Input/Button組合せ）
├── SourceReferences.jsx # 参照元表示（既存Badge活用）
└── MessageContent.jsx   # コンテンツパーサー

Phase 3: 既存システムへの統合（30分）¶

3.1 ルーティング追加¶

// src/routes/index.jsx または同等ファイル
import AIChat from '../pages/AIChat';

// routesに追加
{
  path: '/ai-chat',
  element: <AIChat />,
  title: 'AI チャット'
}

3.2 ナビゲーション追加¶

// src/navigation/menuItems.js または同等ファイル
{
  id: 'ai-chat',
  title: 'AI チャット',
  icon: 'robot',  // 既存のアイコンシステムを使用
  path: '/ai-chat',
  badge: 'NEW'
}

3.3 API設定¶

// 既存のAPI設定ファイルに追加
const API_ENDPOINTS = {
  // 既存のエンドポイント...
  RAG_CHAT: '/api/rag/chat',
  RAG_SESSIONS: '/api/rag/sessions',
  RAG_STATS: '/api/rag/stats'
};

Phase 4: スタイル調整（30分）¶

4.1 既存テーマの拡張¶

/* 既存のスタイルシートに追加 */
.message-bubble {
  /* 既存のCard スタイルを継承 */
}

.chat-message.user {
  /* LINEグリーンを使用 */
  background-color: var(--primary-color);
}

.chat-message.assistant {
  /* 既存の背景色を使用 */
  background-color: var(--card-bg);
}

Phase 5: 動作確認（30分）¶

5.1 ローカルテスト¶

# 開発サーバーで確認
npm run dev

# ブラウザで確認
http://localhost:3006/ai-chat

5.2 ビルドテスト¶

# プロダクションビルド
npm run build

# バンドルサイズ確認
# 既存 + 最小限の増加（目標: +50KB以下）

実装における重要な注意点¶

1. インポートパスの確認¶

// 相対パスに注意
import { Card } from '../../components/shared/Card';
// または エイリアスを使用
import { Card } from '@/components/shared/Card';

2. 既存のデザインシステム準拠¶

• カラー変数は既存のCSS変数を使用
• spacing、border-radius等も既存の値を使用
• アニメーションも既存のものを流用

3. 状態管理¶

• 可能な限り既存のContext/Reduxを活用
• RAG専用の状態は最小限に

4. エラーハンドリング¶

• 既存のエラー処理パターンに従う
• ErrorBoundaryコンポーネントの活用

確認チェックリスト¶

• 既存コンポーネントの import が正しく機能している
• UIデザインが既存のtask2と完全に一致している
• 新規コードは最小限（4コンポーネントのみ）
• バンドルサイズの増加が許容範囲内
• 既存機能への影響がない
• ルーティングが正しく動作
• API通信が既存のパターンに従っている

デプロイ手順¶

# 1. ビルド
cd /var/docker/task2-service/app/web
npm run build

# 2. コンテナ再起動
cd /var/docker/task2-service
docker-compose restart task2-ui

# 3. 動作確認
curl -I https://task2.call2arm.com/ai-chat

完了後の確認URL¶

• 開発環境: http://localhost:3006/ai-chat
• 本番環境: https://task2.call2arm.com/ai-chat

この実装により、最小限の労力で既存システムにRAG機能を統合できます。