Llm Chat Replay

🚀 LLM 聊天重放

LLM 聊天重放是一個 React 應用，它能對 LLM 聊天記錄進行可視化重放，還帶有打字動畫和播放控制功能。該應用適用於 AI 助手對話（如 Claude），也能處理任何符合指定格式的 Markdown 文件，為用戶提供了便捷的聊天記錄回顧方式。

✨ 主要特性

• 支持拖放 Markdown 文件上傳，操作簡單便捷。
• 具備播放控制功能，可隨時播放或暫停重放。
• 速度控制靈活，範圍從 0.5x 到 4x，滿足不同需求。
• 進度條可拖動，能快速跳轉到對話的指定部分。
• 聊天窗口自動滾動，且具有智能滾動行為。
• 用戶和助手消息採用區分氣泡顯示，清晰明瞭。
• 助手回覆帶有打字動畫，增強交互體驗。
• 可自動生成並顯示對話標題。

💻 使用示例

基礎用法

拖放任何符合以下格式的保存的 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 文件。

貢獻

歡迎貢獻！請隨時提交 Pull Request。