mirror of
https://github.com/andrepimenta/claude-code-chat.git
synced 2025-12-13 13:49:47 +00:00
Diff preview
This commit is contained in:
andrepimenta
@@ -451,6 +451,90 @@ const styles = `
|
|||||||
opacity: 0.95;
|
opacity: 0.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Diff display styles for Edit tool */
|
||||||
|
.diff-container {
|
||||||
|
margin-top: 8px;
|
||||||
|
border: 1px solid var(--vscode-panel-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-header {
|
||||||
|
background-color: var(--vscode-panel-background);
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
border-bottom: 1px solid var(--vscode-panel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-removed,
|
||||||
|
.diff-added {
|
||||||
|
font-family: var(--vscode-editor-font-family);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-line {
|
||||||
|
padding: 2px 12px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-line.removed {
|
||||||
|
background-color: rgba(244, 67, 54, 0.1);
|
||||||
|
border-left: 3px solid rgba(244, 67, 54, 0.6);
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-line.added {
|
||||||
|
background-color: rgba(76, 175, 80, 0.1);
|
||||||
|
border-left: 3px solid rgba(76, 175, 80, 0.6);
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-line.removed::before {
|
||||||
|
content: '';
|
||||||
|
color: rgba(244, 67, 54, 0.8);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-line.added::before {
|
||||||
|
content: '';
|
||||||
|
color: rgba(76, 175, 80, 0.8);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-expand-container {
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid var(--vscode-panel-border);
|
||||||
|
background-color: var(--vscode-editor-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-expand-btn {
|
||||||
|
background: linear-gradient(135deg, rgba(64, 165, 255, 0.15) 0%, rgba(64, 165, 255, 0.1) 100%);
|
||||||
|
border: 1px solid rgba(64, 165, 255, 0.3);
|
||||||
|
color: #40a5ff;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-expand-btn:hover {
|
||||||
|
background: linear-gradient(135deg, rgba(64, 165, 255, 0.25) 0%, rgba(64, 165, 255, 0.15) 100%);
|
||||||
|
border-color: rgba(64, 165, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-expand-btn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
.expand-btn {
|
.expand-btn {
|
||||||
background: linear-gradient(135deg, rgba(64, 165, 255, 0.15) 0%, rgba(64, 165, 255, 0.1) 100%);
|
background: linear-gradient(135deg, rgba(64, 165, 255, 0.15) 0%, rgba(64, 165, 255, 0.1) 100%);
|
||||||
border: 1px solid rgba(64, 165, 255, 0.3);
|
border: 1px solid rgba(64, 165, 255, 0.3);
|
||||||
|
|||||||
96
src/ui.ts
96
src/ui.ts
@@ -635,7 +635,12 @@ const html = `<!DOCTYPE html>
|
|||||||
contentDiv.innerHTML = todoHtml;
|
contentDiv.innerHTML = todoHtml;
|
||||||
} else {
|
} else {
|
||||||
// Format raw input with expandable content for long values
|
// Format raw input with expandable content for long values
|
||||||
contentDiv.innerHTML = formatToolInputUI(data.rawInput);
|
// Use diff format for Edit tool, regular format for others
|
||||||
|
if (data.toolName === 'Edit') {
|
||||||
|
contentDiv.innerHTML = formatEditToolDiff(data.rawInput);
|
||||||
|
} else {
|
||||||
|
contentDiv.innerHTML = formatToolInputUI(data.rawInput);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
inputElement.appendChild(contentDiv);
|
inputElement.appendChild(contentDiv);
|
||||||
@@ -790,6 +795,95 @@ const html = `<!DOCTYPE html>
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatEditToolDiff(input) {
|
||||||
|
if (!input || typeof input !== 'object') {
|
||||||
|
return formatToolInputUI(input);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if this is an Edit tool (has file_path, old_string, new_string)
|
||||||
|
if (!input.file_path || !input.old_string || !input.new_string) {
|
||||||
|
return formatToolInputUI(input);
|
||||||
|
}
|
||||||
|
|
||||||
|
let result = '<strong>file_path:</strong> ' + input.file_path + '\\n\\n';
|
||||||
|
|
||||||
|
// Create diff view
|
||||||
|
const oldLines = input.old_string.split('\\n');
|
||||||
|
const newLines = input.new_string.split('\\n');
|
||||||
|
const allLines = [...oldLines.map(line => ({type: 'removed', content: line})),
|
||||||
|
...newLines.map(line => ({type: 'added', content: line}))];
|
||||||
|
|
||||||
|
const maxLines = 6;
|
||||||
|
const shouldTruncate = allLines.length > maxLines;
|
||||||
|
const visibleLines = shouldTruncate ? allLines.slice(0, maxLines) : allLines;
|
||||||
|
const hiddenLines = shouldTruncate ? allLines.slice(maxLines) : [];
|
||||||
|
|
||||||
|
result += '<div class="diff-container">';
|
||||||
|
result += '<div class="diff-header">Changes:</div>';
|
||||||
|
|
||||||
|
// Create a unique ID for this diff
|
||||||
|
const diffId = 'diff_' + Math.random().toString(36).substr(2, 9);
|
||||||
|
|
||||||
|
// Show visible lines
|
||||||
|
result += '<div id="' + diffId + '_visible">';
|
||||||
|
for (const line of visibleLines) {
|
||||||
|
const prefix = line.type === 'removed' ? '- ' : '+ ';
|
||||||
|
const cssClass = line.type === 'removed' ? 'removed' : 'added';
|
||||||
|
result += '<div class="diff-line ' + cssClass + '">' + prefix + escapeHtml(line.content) + '</div>';
|
||||||
|
}
|
||||||
|
result += '</div>';
|
||||||
|
|
||||||
|
// Show hidden lines (initially hidden)
|
||||||
|
if (shouldTruncate) {
|
||||||
|
result += '<div id="' + diffId + '_hidden" style="display: none;">';
|
||||||
|
for (const line of hiddenLines) {
|
||||||
|
const prefix = line.type === 'removed' ? '- ' : '+ ';
|
||||||
|
const cssClass = line.type === 'removed' ? 'removed' : 'added';
|
||||||
|
result += '<div class="diff-line ' + cssClass + '">' + prefix + escapeHtml(line.content) + '</div>';
|
||||||
|
}
|
||||||
|
result += '</div>';
|
||||||
|
|
||||||
|
// Add expand button
|
||||||
|
result += '<div class="diff-expand-container">';
|
||||||
|
result += '<button class="diff-expand-btn" onclick="toggleDiffExpansion(\\\'' + diffId + '\\\')">Show ' + hiddenLines.length + ' more lines</button>';
|
||||||
|
result += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
result += '</div>';
|
||||||
|
|
||||||
|
// Add other properties if they exist
|
||||||
|
for (const [key, value] of Object.entries(input)) {
|
||||||
|
if (key !== 'file_path' && key !== 'old_string' && key !== 'new_string') {
|
||||||
|
const valueStr = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
|
||||||
|
result += '\\n<strong>' + key + ':</strong> ' + valueStr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleDiffExpansion(diffId) {
|
||||||
|
const hiddenDiv = document.getElementById(diffId + '_hidden');
|
||||||
|
const button = document.querySelector('[onclick*="' + diffId + '"]');
|
||||||
|
|
||||||
|
if (hiddenDiv && button) {
|
||||||
|
if (hiddenDiv.style.display === 'none') {
|
||||||
|
hiddenDiv.style.display = 'block';
|
||||||
|
button.textContent = 'Show less';
|
||||||
|
} else {
|
||||||
|
hiddenDiv.style.display = 'none';
|
||||||
|
const hiddenLines = hiddenDiv.querySelectorAll('.diff-line').length;
|
||||||
|
button.textContent = 'Show ' + hiddenLines + ' more lines';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function sendMessage() {
|
function sendMessage() {
|
||||||
const text = messageInput.value.trim();
|
const text = messageInput.value.trim();
|
||||||
if (text) {
|
if (text) {
|
||||||
|
|||||||
Reference in New Issue
Block a user