diff --git a/src/ui.ts b/src/ui.ts
index 6dc22d9..1c3e562 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -700,35 +700,6 @@ const html = `
}
}
- function toggleExpand(element) {
- try {
- const value = element.getAttribute('data-value');
-
- if (element.classList.contains('expanded')) {
- // Collapse
- element.textContent = 'expand';
- element.classList.remove('expanded');
-
- const expandedContent = element.parentNode.querySelector('.expanded-content');
- if (expandedContent) {
- expandedContent.remove();
- }
- } else {
- // Expand
- element.textContent = 'collapse';
- element.classList.add('expanded');
-
- const expandedDiv = document.createElement('div');
- expandedDiv.className = 'expanded-content';
- const preElement = document.createElement('pre');
- preElement.textContent = value;
- expandedDiv.appendChild(preElement);
- element.parentNode.appendChild(expandedDiv);
- }
- } catch (error) {
- console.error('Error toggling expand:', error);
- }
- }
function addToolResultMessage(data) {
// For Read and Edit tools with hidden flag, just hide loading state and show completion message
@@ -779,11 +750,25 @@ const html = `
// Check if it's a tool result and truncate appropriately
let content = data.content;
if (content.length > 200 && !data.isError) {
- const truncated = content.substring(0, 197) + '...';
- const escapedValue = content.replace(/"/g, '"').replace(/'/g, ''');
+ const truncateAt = 197;
+ const truncated = content.substring(0, truncateAt);
+ const resultId = 'result_' + Math.random().toString(36).substr(2, 9);
+
const preElement = document.createElement('pre');
- preElement.innerHTML = truncated + ' expand';
+ preElement.innerHTML = '' + escapeHtml(truncated) + '' +
+ '...' +
+ '' + escapeHtml(content.substring(truncateAt)) + '';
contentDiv.appendChild(preElement);
+
+ // Add expand button container
+ const expandContainer = document.createElement('div');
+ expandContainer.className = 'diff-expand-container';
+ const expandButton = document.createElement('button');
+ expandButton.className = 'diff-expand-btn';
+ expandButton.textContent = 'Show more';
+ expandButton.setAttribute('onclick', 'toggleResultExpansion(\\'' + resultId + '\\\')');
+ expandContainer.appendChild(expandButton);
+ contentDiv.appendChild(expandContainer);
} else {
const preElement = document.createElement('pre');
preElement.textContent = content;
@@ -799,7 +784,16 @@ const html = `
if (!input || typeof input !== 'object') {
const str = String(input);
if (str.length > 100) {
- return str.substring(0, 97) + '... expand';
+ const truncateAt = 97;
+ const truncated = str.substring(0, truncateAt);
+ const inputId = 'input_' + Math.random().toString(36).substr(2, 9);
+
+ return '' + escapeHtml(truncated) + '' +
+ '...' +
+ '' + escapeHtml(str.substring(truncateAt)) + '' +
+ '' +
+ '' +
+ '
';
}
return str;
}
@@ -1118,6 +1112,24 @@ const html = `
}
}
+ function toggleResultExpansion(resultId) {
+ const hiddenDiv = document.getElementById(resultId + '_hidden');
+ const ellipsis = document.getElementById(resultId + '_ellipsis');
+ const button = document.querySelector('[onclick*="toggleResultExpansion(\\'' + resultId + '\\\')"]');
+
+ if (hiddenDiv && button) {
+ if (hiddenDiv.style.display === 'none') {
+ hiddenDiv.style.display = 'inline';
+ if (ellipsis) ellipsis.style.display = 'none';
+ button.textContent = 'Show less';
+ } else {
+ hiddenDiv.style.display = 'none';
+ if (ellipsis) ellipsis.style.display = 'inline';
+ button.textContent = 'Show more';
+ }
+ }
+ }
+
function sendMessage() {
const text = messageInput.value.trim();
if (text) {