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。