# 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.
```