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

Write UI

Browse Source
This commit is contained in:
andrepimenta
2025-06-24 22:45:58 +01:00
parent 5168aa0333
commit c5486c6e26
1 changed files with 65 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/ui.ts
View File

@@ -640,11 +640,13 @@ 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
// Use diff format for Edit and MultiEdit tools, regular format for others // Use diff format for Edit, MultiEdit, and Write tools, regular format for others
if (data.toolName === 'Edit') { if (data.toolName === 'Edit') {
contentDiv.innerHTML = formatEditToolDiff(data.rawInput); contentDiv.innerHTML = formatEditToolDiff(data.rawInput);
} else if (data.toolName === 'MultiEdit') { } else if (data.toolName === 'MultiEdit') {
contentDiv.innerHTML = formatMultiEditToolDiff(data.rawInput); contentDiv.innerHTML = formatMultiEditToolDiff(data.rawInput);
} else if (data.toolName === 'Write') {
contentDiv.innerHTML = formatWriteToolDiff(data.rawInput);
} else { } else {
contentDiv.innerHTML = formatToolInputUI(data.rawInput); contentDiv.innerHTML = formatToolInputUI(data.rawInput);
} }
@@ -1014,6 +1016,68 @@ const html = `<!DOCTYPE html>
return result; return result;
} }
function formatWriteToolDiff(input) {
if (!input || typeof input !== 'object') {
return formatToolInputUI(input);
}
// Check if this is a Write tool (has file_path and content)
if (!input.file_path || !input.content) {
return formatToolInputUI(input);
}
// Format file path with better display
const formattedPath = formatFilePath(input.file_path);
let result = '<div class="diff-file-path" onclick="openFileInEditor(\\\'' + escapeHtml(input.file_path) + '\\\')">' + formattedPath + '</div>\\n';
// Create diff view showing all content as additions
const contentLines = input.content.split('\\n');
const maxLines = 6;
const shouldTruncate = contentLines.length > maxLines;
const visibleLines = shouldTruncate ? contentLines.slice(0, maxLines) : contentLines;
const hiddenLines = shouldTruncate ? contentLines.slice(maxLines) : [];
result += '<div class="diff-container">';
result += '<div class="diff-header">New file content:</div>';
// Create a unique ID for this diff
const diffId = 'write_' + Math.random().toString(36).substr(2, 9);
// Show visible lines (all as additions)
result += '<div id="' + diffId + '_visible">';
for (const line of visibleLines) {
result += '<div class="diff-line added">+ ' + escapeHtml(line) + '</div>';
}
result += '</div>';
// Show hidden lines (initially hidden)
if (shouldTruncate) {
result += '<div id="' + diffId + '_hidden" style="display: none;">';
for (const line of hiddenLines) {
result += '<div class="diff-line added">+ ' + escapeHtml(line) + '</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 !== 'content') {
const valueStr = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
result += '\\n<strong>' + key + ':</strong> ' + valueStr;
}
}
return result;
}
function escapeHtml(text) { function escapeHtml(text) {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = text; div.textContent = text;