Llm Chat Replay

🚀 LLM Chat Replay

A React application that provides a visual replay of LLM chat logs with typing animations and playback controls. It's suitable for AI assistant conversations (e.g., Claude) but can also be used for any Markdown files in the specified format.

🚀 Quick Start

Prerequisites

• Node.js (v16+)
• npm or yarn

Installation

git clone https://github.com/yourusername/llm-chat-replay.git
cd llm-chat-replay
npm install
npm run dev

✨ Features

• Drag-and-drop Markdown file upload
• Playback controls (play/pause)
• Speed control (0.5x to 4x)
• Progress bar dragging
• Automatic scrolling of the chat window with intelligent scrolling behavior
• Distinct bubbles for user and assistant messages
• Typing animation for assistant responses
• Automatically generate and display conversation titles

💻 Usage Examples

Basic Usage

Drag and drop any saved Markdown file in the following format:

# Conversation Title

**User**: Your question or prompt content

**Assistant**: Assistant's response content

📚 Documentation

How to Use

1. Start the application with npm run dev.
2. Drag and drop the saved Markdown file onto the interface or click to browse.
3. Use the playback controls to replay the conversation.
4. Adjust the speed as needed using the controls below the chat.
5. Use the progress bar to jump to a specific part of the conversation.

Creating Compatible Log Files

When conversing with an AI assistant, follow these steps to request a complete transcript file:

Ask the assistant to save a complete transcript of the conversation as a Markdown file:
"Please save a complete transcript of this conversation as a Markdown file."

Ensure that the saved Markdown file is in the correct format, starting with "User:" and "Assistant:" tags.

Pre-prompt to Ensure Consistent Transcription Format

Add the following pre-prompt to the AI assistant settings to ensure a consistent transcription format:

When asked to write a transcript or save a chat log, please follow these instructions:

1. Start with the tags "**User**:" and "**Assistant**:" exactly as shown.
2. Preserve all original text formatting but avoid special characters that may break Markdown.
3. For file paths or code:
   - Try to place them on separate lines.
   - Wrap them with backticks `` (e.g., `this`).
   - Avoid using underscores or other Markdown-sensitive characters at the end of a line.
4. For function calls and their results:
   - Format them as [Function Call: relevant information].
   - Format them as [Function Result: relevant information].
   - Ensure they are on separate lines.
   - If the conversation is long, you can omit the function results and use "..." instead.
5. Maintain proper spacing between paragraphs.
6. Use standard Markdown for any lists or other formatting.
7. Save the file in the following format: chat_YYYYMMDD_TopicName.md

Please ensure that the transcript includes our entire conversation, preserves all content, and is ready to play in the chat replay tool.
Example file name patterns:
- chat_20240219_ChatContent.md
- chat_20240219_this_conversation.md
- chat_20240219_update_config.md

🔧 Technical Details

• React + Vite
• TypeScript
• Tailwind CSS
• Typed.js for typing animations

🤝 Contribution

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is released under the MIT License. See the LICENSE file for details.