LLM Chat Replay

LLM聊天回放

一个React应用程序，通过键入动画和播放控件提供LLM聊天记录的可视化回放。专为AI助手对话（如Claude）创建，但可使用指定格式与任何markdown聊天导出配合使用。

特性

• 拖放标记文件上传
• 播放控制（播放/暂停）
• 速度控制（0.5倍至4倍）
• 进度条擦洗
• 具有智能滚动行为的自动滚动聊天窗口
• 人类和助手消息的不同气泡
• 为助手响应键入动画
• 自动提取并显示对话标题

演示

按以下格式删除任何降价记录：

# Title of Conversation

**Human**: Your question or prompt here

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

入门指南

先决条件

• Node.js（v16+）
• npm或纱线

安装

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文件格式为“人：“和”助手：“每条消息开头的标记。

一致转录格式的预提示

为了获得最佳效果，请将此预提示添加到您的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  relevant information
   - Format them as relevant information
   - 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
• 顺风 CSS
• 用于键入动画的Typed.js

贡献

欢迎投稿！请随时提交拉取请求。

许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。