Phase6.3プロンプト履歴機能設計書

 

Phase6.3プロンプト履歴機能設計書

0. 前提条件と制約事項

0.1 既存機能への影響

  • 既存の機能（inquiry_history等）は変更しない
  • 変更が必要な場合は、コードの影響を最小限に抑える
  • 既存のコンポーネントは独立性を保ったまま拡張する

0.2 実装方針の制約

  • 既存のCSSやユーティリティ関数は再利用する
  • 新規機能は既存機能と同じ設計パターンに従う
  • 既存のエラーハンドリングやセキュリティ対策を踏襲する

1. 機能概要

プロンプト履歴（prompt_history）テーブルのデータを参照するための画面機能を実装します。 ユーザーごとのプロンプト履歴を一覧表示し、詳細情報の確認やCSVダウンロードを可能にします。

2. 画面設計

2.0 トップページの変更 (index.html)

既存のindex.htmlに以下の変更を加えます：

<div>
  <a href="/inquiry_history.html" class="btn btn-secondary">Inquiry History</a>
  <a href="/prompt_history.html" class="btn btn-secondary">Prompt History</a>
</div>

2.1 プロンプト履歴一覧画面 (prompt_history.html)

  • 表示項目：
    • ユーザーID（リンク）
    • プロンプト数
    • 最終更新日時
  • 機能：
    • ページネーション（30件/ページ）
    • ユーザーIDクリックで詳細画面へ遷移
    • エラー表示
    • ローディング表示

2.2 プロンプト履歴詳細画面 (prompt_history_detail.html)

  • 表示項目：
    • タイムスタンプ
    • プロンプト内容
    • LLMプロバイダー
    • モデル名
    • トークン数
    • 処理時間
  • 機能：
    • ページネーション（30件/ページ）
    • CSVダウンロード
    • 一覧画面への戻るボタン
    • エラー表示
    • ローディング表示

3. APIエンドポイント設計

3.1 プロンプト履歴一覧取得 API

GET /api/prompt-history
Query Parameters:
- page: ページ番号（デフォルト: 1）
- limit: 1ページの表示件数（デフォルト: 30）

Response:
{
  "data": [
    {
      "user_id": string,
      "count": number,
      "last_updated": string
    }
  ],
  "page": number,
  "totalPages": number
}

3.2 プロンプト履歴詳細取得 API

GET /api/prompt-history/:userId
Query Parameters:
- page: ページ番号（デフォルト: 1）
- limit: 1ページの表示件数（デフォルト: 30）

Response:
{
  "data": [
    {
      "timestamp": string,
      "prompt": string,
      "llm_provider": string,
      "model": string,
      "tokens": number,
      "processing_time": number
    }
  ],
  "page": number,
  "totalPages": number
}

3.3 CSVダウンロード API

GET /api/prompt-history/:userId/csv

Response:
Content-Type: text/csv
ファイル名: prompt_history_{userId}.csv

4. データベース設計

既存のprompt_historyテーブルを使用：

CREATE TABLE prompt_history (
    id SERIAL PRIMARY KEY,
    user_id VARCHAR(255) NOT NULL,
    prompt TEXT NOT NULL,
    llm_provider VARCHAR(50) NOT NULL,
    model VARCHAR(50) NOT NULL,
    tokens INTEGER NOT NULL,
    processing_time INTEGER NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_prompt_history_user_id ON prompt_history(user_id);
CREATE INDEX idx_prompt_history_created_at ON prompt_history(created_at);

5. 実装方針

  1. フロントエンド

    • inquiry_history機能を基に、同様の構造で実装
    • 共通のCSSファイルを使用
    • JavaScriptでのデータ取得と表示処理
    • エラーハンドリングとローディング表示

  2. バックエンド

    • RESTful APIの実装
    • ページネーション処理
    • CSVエクスポート機能
    • エラーハンドリング

  3. データアクセス

    • プロンプト履歴サービスの実装
    • 効率的なクエリ実行
    • N+1問題の回避

6. ファイル構成

public/
  ├── prompt_history.html          # 一覧画面
  ├── prompt_history_detail.html   # 詳細画面
  └── css/
      └── inquiry_history.css      # 既存のCSSファイルを使用

src/
  ├── routes/
  │   └── promptHistoryRoutes.ts   # ルーティング定義
  │
  ├── controllers/
  │   └── promptHistoryController.ts # コントローラー
  │
  ├── services/
  │   └── promptHistoryService.ts    # ビジネスロジック
  │
  └── types/
      └── promptHistory.ts          # 型定義

7. セキュリティ考慮事項

  1. 入力値のバリデーション

    • ユーザーIDの検証
    • ページネーションパラメータの検証

  2. XSS対策

    • HTMLエスケープ処理
    • Content Security Policyの適用

  3. SQLインジェクション対策

    • パラメータ化クエリの使用
    • 入力値のサニタイズ

  4. エラーハンドリング

    • 適切なエラーメッセージ
    • スタックトレースの非表示

8. テスト方針

  1. ユニットテスト

    • サービス層のテスト
    • コントローラーのテスト
    • バリデーション処理のテスト

  2. 統合テスト

    • APIエンドポイントのテスト
    • データベース操作のテスト

  3. E2Eテスト

    • 画面表示のテスト
    • ページネーションのテスト
    • CSVダウンロードのテスト

0 件のコメント:

コメントを投稿

登録: 投稿 (Atom)