Nicholai
99613f9ad4
- Update `wrangler.jsonc` to correct the `CUSTOM_AGENT_WEBHOOK` URL. - Enhance `page.tsx` to load custom agents from localStorage and merge them with predefined agents. - Modify `route.ts` to validate `systemPrompt` for custom agents and include it in the webhook payload. - Adjust `chat-interface.tsx` to handle custom agents more effectively, including system prompt integration and event dispatching for pinned agents. - Remove obsolete `CUSTOM_AGENT_EXECUTION_PRD.md` and `DIFF_TOOL_USAGE.md` files as part of cleanup.
70 lines
2.3 KiB
Markdown
70 lines
2.3 KiB
Markdown
# Diff Tool Usage Guide
|
|
|
|
The diff tool allows the AI model to display code differences in a beautiful, interactive format within chat messages.
|
|
|
|
## How to Use
|
|
|
|
The model can include diff displays in its responses by using the following markdown syntax:
|
|
|
|
```markdown
|
|
```diff-tool
|
|
{
|
|
"oldCode": "function hello() {\n console.log('Hello, World!');\n}",
|
|
"newCode": "function hello(name = 'World') {\n console.log(\`Hello, \${name}!\`);\n}",
|
|
"title": "Updated hello function",
|
|
"language": "javascript"
|
|
}
|
|
```
|
|
```
|
|
|
|
## Parameters
|
|
|
|
- **oldCode** (required): The original code as a string with `\n` for line breaks
|
|
- **newCode** (required): The modified code as a string with `\n` for line breaks
|
|
- **title** (optional): A descriptive title for the diff (defaults to "Code Changes")
|
|
- **language** (optional): The programming language for syntax highlighting (defaults to "text")
|
|
|
|
## Features
|
|
|
|
- **Interactive**: Click to expand/collapse the diff
|
|
- **Copy to Clipboard**: Copy button to copy the full diff
|
|
- **Line Numbers**: Shows line numbers for both old and new code
|
|
- **Color Coding**:
|
|
- Green for additions (+)
|
|
- Red for deletions (-)
|
|
- Neutral for unchanged lines
|
|
- **Syntax Highlighting**: Supports various programming languages
|
|
- **Responsive**: Works well on different screen sizes
|
|
|
|
## Example Usage Scenarios
|
|
|
|
1. **Code Refactoring**: Show before/after code improvements
|
|
2. **Bug Fixes**: Highlight what was changed to fix an issue
|
|
3. **Feature Additions**: Display new functionality being added
|
|
4. **Configuration Changes**: Show config file modifications
|
|
5. **API Changes**: Demonstrate API signature changes
|
|
|
|
## Best Practices
|
|
|
|
1. **Keep it focused**: Show only relevant changes, not entire files
|
|
2. **Add context**: Use descriptive titles and surrounding text
|
|
3. **Escape properly**: Make sure to escape quotes and newlines in JSON
|
|
4. **Reasonable size**: Avoid extremely large diffs that are hard to read
|
|
|
|
## Example Response Format
|
|
|
|
```markdown
|
|
Here are the changes I made to fix the bug:
|
|
|
|
```diff-tool
|
|
{
|
|
"oldCode": "if (user) {\n return user.name;\n}",
|
|
"newCode": "if (user && user.name) {\n return user.name;\n} else {\n return 'Anonymous';\n}",
|
|
"title": "Fixed null reference bug",
|
|
"language": "javascript"
|
|
}
|
|
```
|
|
|
|
The fix adds proper null checking and provides a fallback value.
|
|
```
|