d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-09 19:09:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Diff preview

Browse Source
This commit is contained in:
andrepimenta
2025-06-24 02:39:00 +01:00
parent bc7fa07e3a
commit 8b0bc2904b
2 changed files with 179 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/ui-styles.ts
View File

@@ -451,6 +451,90 @@ const styles = `
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 {
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);

96
src/ui.ts
View File

@@ -635,7 +635,12 @@ const html = `<!DOCTYPE html>
contentDiv.innerHTML = todoHtml;
} else {
// 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);
@@ -790,6 +795,95 @@ const html = `<!DOCTYPE html>
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() {
const text = messageInput.value.trim();
if (text) {