Llm Chat Replay

🚀 LLM チャットリプレイ

この React アプリケーションは、タイピングアニメーションと再生コントロールを備えた LLM チャット記録の可視化リプレイを提供します。AI アシスタント（Claude など）の会話に適していますが、指定された形式に合致する任意の Markdown ファイルにも使用できます。

✨ 主な機能

• Markdown ファイルのドラッグアンドドロップによるアップロード
• 再生コントロール（再生/一時停止）
• 速度コントロール（0.5 倍から 4 倍）
• プログレスバーのドラッグ操作
• スマートなスクロール動作を備えたチャットウィンドウの自動スクロール
• ユーザーとアシスタントのメッセージを区別するバブル表示
• アシスタントの返信にタイピングアニメーション
• 会話タイトルの自動生成と表示

💻 使用例

基本的な使用法

以下の形式の保存済み Markdown ファイルをドラッグアンドドロップします。

# 対話タイトル

**ユーザー**: あなたの質問やプロンプトの内容

**アシスタント**: アシスタントの応答内容

🚀 クイックスタート

前提条件

• Node.js（v16+）
• npm または yarn

📦 インストール

git clone https://github.com/yourusername/llm-chat-replay.git
cd llm-chat-replay
npm install
npm run dev

使用方法

1. npm run dev でアプリケーションを起動します。
2. 保存した Markdown ファイルを画面にドラッグアンドドロップするか、参照ボタンをクリックして選択します。
3. 再生コントロールを使用して会話をリプレイします。
4. 必要に応じて、チャットウィンドウの下にあるコントロールで速度を調整します。
5. プログレスバーを使用して会話の特定の部分にジャンプします。

互換性のある記録ファイルの作成

AI アシスタントとの会話中に、以下の手順で完全な転写ファイルを要求します。

アシスタントに会話全体の転写ファイルを保存するように依頼します。
"この会話の完全な転写を Markdown ファイルとして保存してください"

保存した Markdown ファイルが "ユーザー: " と "アシスタント: " で始まる正しい形式であることを確認してください。

一貫した転写形式を確保するための事前プロンプト

AI アシスタントの設定に以下の事前プロンプトを追加して、転写形式を一貫させます。

転写を書くか、チャット記録を保存するように要求された場合、以下の指示に従ってください。

1. "**ユーザー**: " と "**アシスタント**: " で始まるようにし、表示されている形式と完全に一致させます。
2. すべての元のテキスト形式を保持しますが、Markdown を破壊する可能性のある特殊文字は避けます。
3. ファイルパスやコードについては、
   - できるだけ別の行に配置します。
   - バッククォート `` で囲みます（例：`これ`）。
   - 行末にアンダースコアや他の Markdown に敏感な文字を使用しないでください。
4. 関数呼び出しとその結果については、
   - [関数呼び出し: 関連情報] という形式にします。
   - [関数結果: 関連情報] という形式にします。
   - それらを別の行に配置します。
   - 会話内容が多い場合は、関数結果を省略して "..." で置き換えます。
5. 段落間に適切な間隔を保持します。
6. 任意のリストやその他のフォーマットには標準的な Markdown を使用します。
7. 以下の形式でファイルを保存します：chat_YYYYMMDDトピック名.md

転写が完全な会話を含み、すべての内容を保持し、チャットリプレイツールで再生できるように準備してください。
例のファイル名パターン：
- chat_20240219_チャット内容.md
- chat_20240219_this_conversation.md
- chat_20240219_update_config.md

🔧 技術詳細

• React + Vite
• TypeScript
• Tailwind CSS
• タイピングアニメーションに Typed.js を使用

📄 ライセンス

このプロジェクトは MIT ライセンスの下で公開されています。詳細は LICENSE ファイルを参照してください。