Redmineの設定

追加要望: AIチャット一覧の検索・絞り込み機能¶

1. 検索機能¶

全文検索バー追加:

<div className="ai-chat-search-section">
  <div className="search-bar">
    <input 
      type="text"
      placeholder="チャット内容を検索..."
      className="w-full px-4 py-2 border rounded-lg"
      onChange={handleSearchInput}
    />
    <button className="search-btn">🔍</button>
  </div>
</div>

検索対象:

• ✅ チャットタイトル/件名
• ✅ チャット内容（全メッセージ）
• ✅ ユーザーメッセージ
• ✅ AI回答内容
• ✅ 関連プロジェクト情報

2. 絞り込み機能¶

フィルタリングオプション:

<div className="filter-section">
  {/* 表示範囲選択 */}
  <select className="scope-filter">
    <option value="all">全体</option>
    <option value="my">自分のチャット</option>
    <option value="project">プロジェクト別</option>
  </select>
  
  {/* 利用者別フィルタ */}
  <select className="user-filter">
    <option value="">すべてのユーザー</option>
    <option value="1">Redmine Admin</option>
    <option value="2">ユーザーB</option>
  </select>
  
  {/* プロジェクト別フィルタ */}
  <select className="project-filter">
    <option value="">すべてのプロジェクト</option>
    <option value="ai-chat-general">AIチャット一覧</option>
    <option value="1">Redmineの設定</option>
    <option value="2">サービス監視基盤構築</option>
    <option value="3">コーディング自動化基盤</option>
  </select>
</div>

3. プロジェクト分類システム¶

デフォルトプロジェクト:

• プロジェクト未指定: 自動的に「AIチャット一覧」プロジェクトに格納
• プロジェクト指定: 対応するRedmineプロジェクトと紐付け

データ構造:

const chatSession = {
  id: 'chat_uuid_001',
  title: 'nginx設定について相談',
  projectId: 'ai-chat-general', // デフォルト
  projectName: 'AIチャット一覧',
  userId: 1,
  userName: 'Redmine Admin',
  createdAt: '2025-06-04T18:30:00Z',
  messages: [...],
  tags: ['nginx', '設定', 'プロキシ'] // 検索用タグ
};

// プロジェクト指定の場合
const projectChat = {
  id: 'chat_uuid_002', 
  title: 'VPSセキュリティ強化方針',
  projectId: 5, // VPSセキュリティプロジェクト
  projectName: 'VPSセキュリティ',
  userId: 1,
  // ...
};

4. 検索・フィルタ画面設計¶

<div className="ai-chat-list-page">
  {/* 検索・フィルタセクション */}
  <div className="search-filter-section bg-gray-50 p-4 rounded-lg mb-6">
    {/* 検索バー */}
    <div className="search-bar mb-4">
      <input 
        type="text"
        placeholder="チャット内容、タイトル、プロジェクト名で検索..."
        className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />
    </div>
    
    {/* フィルタ群 */}
    <div className="filters grid grid-cols-1 md:grid-cols-3 gap-4">
      <div>
        <label className="block text-sm font-medium mb-2">表示範囲</label>
        <select 
          className="w-full border rounded-lg px-3 py-2"
          value={scopeFilter}
          onChange={(e) => setScopeFilter(e.target.value)}
        >
          <option value="all">全体</option>
          <option value="my">自分のチャット</option>
          <option value="shared">共有チャット</option>
        </select>
      </div>
      
      <div>
        <label className="block text-sm font-medium mb-2">利用者</label>
        <select 
          className="w-full border rounded-lg px-3 py-2"
          value={userFilter}
          onChange={(e) => setUserFilter(e.target.value)}
        >
          <option value="">すべてのユーザー</option>
          {users.map(user => (
            <option key={user.id} value={user.id}>{user.name}</option>
          ))}
        </select>
      </div>
      
      <div>
        <label className="block text-sm font-medium mb-2">プロジェクト</label>
        <select 
          className="w-full border rounded-lg px-3 py-2"
          value={projectFilter}
          onChange={(e) => setProjectFilter(e.target.value)}
        >
          <option value="">すべてのプロジェクト</option>
          <option value="ai-chat-general">AIチャット一覧</option>
          {projects.map(project => (
            <option key={project.id} value={project.id}>{project.name}</option>
          ))}
        </select>
      </div>
    </div>
    
    {/* アクティブフィルタ表示 */}
    <div className="active-filters mt-4">
      {activeFilters.map(filter => (
        <span key={filter.id} className="inline-flex items-center px-3 py-1 rounded-full text-xs bg-green-100 text-green-800 mr-2">
          {filter.label}
          <button onClick={() => removeFilter(filter.id)} className="ml-1 text-green-600">×</button>
        </span>
      ))}
    </div>
  </div>
  
  {/* 検索結果・チャット一覧 */}
  <div className="chat-list">
    <div className="results-header mb-4">
      <span className="text-sm text-gray-600">
        {filteredChats.length}件のチャットが見つかりました
      </span>
    </div>
    
    {filteredChats.map(chat => (
      <div key={chat.id} className="chat-item border rounded-lg p-4 mb-3 hover:bg-gray-50">
        <div className="flex justify-between items-start">
          <div className="flex-1">
            <h3 className="chat-title text-lg font-semibold">
              <a href={`/ai-chat/${chat.id}`} className="text-blue-600 hover:underline">
                {highlightSearchTerms(chat.title, searchQuery)}
              </a>
            </h3>
            <div className="chat-meta text-sm text-gray-600 mt-1">
              <span className="project-tag bg-blue-100 text-blue-800 px-2 py-1 rounded mr-2">
                📁 {chat.projectName}
              </span>
              <span className="user-info">👤 {chat.userName}</span>
              <span className="date-info ml-4">📅 {formatDate(chat.lastUpdated)}</span>
              <span className="message-count ml-4">💬 {chat.messageCount}件</span>
            </div>
            {/* 検索結果のプレビュー */}
            {searchQuery && (
              <div className="search-preview mt-2 text-sm text-gray-700">
                {generateSearchPreview(chat, searchQuery)}
              </div>
            )}
          </div>
          <div className="chat-actions">
            <button className="text-gray-400 hover:text-gray-600">⋮</button>
          </div>
        </div>
      </div>
    ))}
  </div>
</div>

5. API拡張仕様¶

# 検索・フィルタ対応API
GET /api/ai-chat/sessions?search={query}&user={userId}&project={projectId}&scope={scope}

# 例: nginx設定に関するチャットを検索
GET /api/ai-chat/sessions?search=nginx&project=1

# 例: 自分のチャットのみ表示
GET /api/ai-chat/sessions?scope=my&user=1

# 例: AIチャット一覧プロジェクトのチャット
GET /api/ai-chat/sessions?project=ai-chat-general

6. 検索アルゴリズム¶

検索対象の重み付け:

• タイトル: 3.0
• 最新メッセージ: 2.0
• プロジェクト名: 1.5
• チャット内容: 1.0
• タグ: 2.5

検索機能:

• 部分一致検索
• AND/OR検索対応
• タグベース検索
• 日付範囲検索

7. 期待効果¶

• 効率的なチャット発見: 過去の相談内容の素早い検索
• プロジェクト管理: チャットのプロジェクト別整理
• チーム協働: 他メンバーのチャット参照（権限に応じて）
• 知識蓄積: AIとの対話履歴の有効活用