LLM 聊天回放

一个React应用程序，提供LLM聊天记录的可视化回放，带有打字动画和播放控制。专为AI助手对话（如Claude）设计，但可以使用指定格式的任何Markdown聊天导出文件。

功能

• 拖拽上传Markdown文件
• 播放控制（播放/暂停）
• 速度控制（0.5倍到4倍）
• 进度条拖动
• 自动滚动聊天窗口并具有智能滚动行为
• 区分人类和助手消息的气泡
• 助手响应的打字动画
• 自动提取并显示对话标题

示例

拖拽以下格式的Markdown记录：

# 对话标题

**Human**: 你的问题或提示

**Assistant**: 助手的回答

开始使用

先决条件

• 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文件以“Human：”和“Assistant：”标记开始每条消息。

预设提示以保持一致的记录格式

为了获得最佳效果，请在AI助手设置（如.clinerules等）中添加此预设提示，以确保正确格式化的记录：

### 聊天记录
当被要求保存聊天或记录时，这里有一些规则，允许你在LLM聊天回放工具中重播聊天。

请使用工具将我们完整的、正确格式化的对话记录保存到文件系统中。创建此记录时：

1. 为聊天起个标题，并将其作为"# 标题: [标题]"添加到文档开头。
2. 使用`**Human**：`和`**Assistant**：`前缀精确地格式化，就像这样：
    - 两个星号（**）
    - 标识符（Human或Assistant）
    - 两个星号（**）
    - 冒号（:）
    - 空格
    - 然后是消息内容
3. 保留所有原始文本格式，但避免可能导致Markdown失效的特殊字符。
4. 对于任何文件路径或代码：
   - 尽可能将它们放在单独的行上
   - 用反引号包裹，如`this`
   - 避免以下划线或其他Markdown敏感字符结尾
5. 对于函数调用和结果：
   - 格式化为<function_call>相关信息</function_call>
   - 格式化为<function_result>相关信息</function_result>
   - 确保它们位于单独的行上
   - 总结函数结果，不要打印全部内容。避免在函数结果中有任何Markdown，因为它会导致格式错误。
6. 在段落之间保持适当的间距
7. 使用标准Markdown进行任何列表或格式化
8. 以chat_YYYYMMDD_topic_name.md的格式保存文件，具有描述性名称

请确保记录包含我们的完整对话，所有内容都被保留下来，并准备好在聊天回放工具中播放。

构建工具

• React + Vite
• TypeScript
• Tailwind CSS
• Typed.js用于打字动画

贡献

欢迎贡献！请随时提交Pull Request。

许可证

本项目采用MIT许可证 - 查看LICENSE文件获取详细信息。