LLM Chat Replay

LLM 聊天回放

一个 React 应用，可通过打字动画和播放控制，以可视化方式回放 LLM 聊天记录。该应用为 AI 助手对话（如 Claude）而创建，但也适用于任何采用指定格式导出的 Markdown 聊天记录。

功能

• 拖放上传 Markdown 文件
• 播放控制（播放/暂停）
• 速度控制（0.5x 至 4x）
• 拖动进度条定位
• 聊天窗口自动滚动，并具备智能滚动行为
• 为 Human 和 Assistant 消息显示不同的气泡
• Assistant 回复的打字动画
• 自动提取并显示对话标题

演示

拖入任意符合以下格式的 Markdown 聊天记录：

# Title of Conversation

**Human**: Your question or prompt here

**Assistant**: The assistant's response here

快速开始

先决条件

• 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 助手聊天时，通常可以请求导出聊天记录：

Ask the assistant: "please save the full transcript of this chat as a markdown file"

确保保存的 Markdown 文件在每条消息开头都使用“Human:”和“Assistant:”标记。

统一聊天记录格式的预提示词

为获得最佳效果，请将以下预提示词添加到 AI 助手的设置中（如 .clinerules 等），以确保聊天记录格式正确：

### Chat Transcripts
When asked to save a chat or a transcript, here are some rules that will allow you to replay chat in the LLM chat replay tool.

Please save a complete, properly formatted transcript of our conversation to the filesystem using tools. When creating this transcript:

1. Come up with a title for the chat, and add it to the document at the beginning as "# Title:  [title]"
2. Format with `**Human**:` and `**Assistant**:` prefixes exactly as shown.. that's:
	- Two asterisks (`**`)
	- The identifier (Human or Assistant)
	- Two asterisks (`**`)
	- A colon (`:`)
	- A space
	- Then the message content
3. Preserve all original text formatting, but avoid special characters that might break markdown
4. For any file paths or code:
   - Place them on their own lines when possible
   - Wrap them in backticks like `this`
   - Avoid ending lines with underscores or other markdown-sensitive characters
5. For function calls and results:
   - Format them as <function_call> relevant information</function_call>
   - Format them as <function_result>relevant information</function_result>
   - Ensure they're on their own lines
   - summarize the function results and don't print the entire thing. resist having any markdown inside the function results, as it causes formatting errors.
6. Maintain proper spacing between paragraphs
7. Use standard markdown for any lists or formatting
8. Save the file with a descriptive name in the format: chat_YYYYMMDD_topic_name.md

Please ensure the transcript contains our complete conversation with all content preserved, and ready to be played back in the chat replay tool.

构建工具

• React + Vite
• TypeScript
• Tailwind CSS
• 使用 Typed.js 实现打字动画

参与贡献

欢迎贡献！欢迎提交 Pull Request。

许可证

本项目采用 MIT License 许可，详情请参阅 LICENSE 文件。