feat:修改了工具调用的样式 + 实现工具调用内容太长可以折叠的功能

src/views/messageArea.ts

@@ -349,38 +349,57 @@ export function getMessageAreaStyles(): string {
       }
 
       .segment-tool {
-        background: var(--vscode-textBlockQuote-background);
-        border-radius: 6px;
-        margin: 8px 0;
-        padding: 10px 14px;
+        margin: 4px 0;
+        padding: 4px 0;
       }
       .tool-segment-header {
         display: flex;
         align-items: center;
-        gap: 8px;
-        font-size: 13px;
-      }
-      .tool-segment-icon {
-        font-size: 14px;
-      }
-      .tool-segment-name {
-        font-weight: 500;
-        color: var(--vscode-foreground);
-      }
-      .tool-segment-result {
-        margin-top: 6px;
+        gap: 6px;
         font-size: 12px;
         color: var(--vscode-descriptionForeground);
-        padding-left: 22px;
+        cursor: pointer;
       }
-      .segment-tool.tool-success {
-        border-left: 3px solid var(--vscode-charts-green);
+      .tool-segment-icon {
+        font-size: 12px;
       }
-      .segment-tool.tool-error {
-        border-left: 3px solid var(--vscode-charts-red);
+      .tool-segment-name {
+        font-weight: normal;
       }
-      .segment-tool.tool-running {
-        border-left: 3px solid var(--vscode-charts-blue);
+      .tool-segment-result {
+        display: inline;
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+        margin-left: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 500px;
+      }
+      .tool-collapse-icon {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+        cursor: pointer;
+      }
+      .tool-collapse-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .tool-segment-header.collapsed .tool-collapse-icon {
+        transform: rotate(0deg);
+      }
+      .tool-segment-header:not(.collapsed) .tool-collapse-icon {
+        transform: rotate(0deg);
+      }
+      .tool-segment-content {
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+      }
+      .tool-segment-content.collapsed {
+        max-height: 0;
       }
       .segment-question {
         background: var(--vscode-textBlockQuote-background);
@@ -689,15 +708,64 @@ export function getMessageAreaScript(): string {
           } else if (segment.type === 'tool') {
             const statusIcon = segment.toolStatus === 'success' ? '✅' :
                               segment.toolStatus === 'error' ? '❌' : '🔧';
-            const statusClass = 'tool-' + (segment.toolStatus || 'running');
-            segmentDiv.className += ' ' + statusClass;
+            const toolResult = segment.toolResult || '';
+
+            // 检查工具结果是否过长(超过一行显示不下)
+            const shouldCollapse = toolResult && toolResult.length > 60;
+
+            // 折叠图标 SVG
+            const collapseIconSvg = \`
+              <span class="tool-collapse-icon">
+                <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
+                </svg>
+                <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
+                </svg>
+              </span>
+            \`;
+
             segmentDiv.innerHTML = \`
-              <div class="tool-segment-header">
+              <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
+                \${shouldCollapse ? collapseIconSvg : ''}
                 <span class="tool-segment-icon">\${statusIcon}</span>
                 <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+                \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
-              \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</div>\` : ''}
+              \${shouldCollapse ? \`<div class="tool-segment-content collapsed"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}
             \`;
+
+            // 添加折叠/展开事件监听
+            if (shouldCollapse) {
+              setTimeout(() => {
+                const header = segmentDiv.querySelector('.tool-segment-header');
+                const content = segmentDiv.querySelector('.tool-segment-content');
+                const iconCollapsed = segmentDiv.querySelector('.icon-collapsed');
+                const iconExpanded = segmentDiv.querySelector('.icon-expanded');
+
+                if (header && content) {
+                  header.addEventListener('click', function() {
+                    const isCollapsed = header.classList.contains('collapsed');
+
+                    if (isCollapsed) {
+                      // 展开
+                      header.classList.remove('collapsed');
+                      content.classList.remove('collapsed');
+                      content.style.maxHeight = content.scrollHeight + 'px';
+                      if (iconCollapsed) iconCollapsed.style.display = 'none';
+                      if (iconExpanded) iconExpanded.style.display = 'block';
+                    } else {
+                      // 折叠
+                      header.classList.add('collapsed');
+                      content.classList.add('collapsed');
+                      content.style.maxHeight = '0';
+                      if (iconCollapsed) iconCollapsed.style.display = 'block';
+                      if (iconExpanded) iconExpanded.style.display = 'none';
+                    }
+                  });
+                }
+              }, 0);
+            }
           } else if (segment.type === 'question') {
             segmentDiv.className += ' segment-question';
 
@@ -831,15 +899,64 @@ export function getMessageAreaScript(): string {
           } else if (segment.type === 'tool') {
             const statusIcon = segment.toolStatus === 'success' ? '✅' :
                               segment.toolStatus === 'error' ? '❌' : '🔧';
-            const statusClass = 'tool-' + (segment.toolStatus || 'running');
-            segmentDiv.className += ' ' + statusClass;
+            const toolResult = segment.toolResult || '';
+
+            // 检查工具结果是否过长(超过一行显示不下)
+            const shouldCollapse = toolResult && toolResult.length > 60;
+
+            // 折叠图标 SVG
+            const collapseIconSvg = \`
+              <span class="tool-collapse-icon">
+                <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
+                </svg>
+                <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
+                </svg>
+              </span>
+            \`;
+
             segmentDiv.innerHTML = \`
-              <div class="tool-segment-header">
+              <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
+                \${shouldCollapse ? collapseIconSvg : ''}
                 <span class="tool-segment-icon">\${statusIcon}</span>
                 <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+                \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
-              \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</div>\` : ''}
+              \${shouldCollapse ? \`<div class="tool-segment-content collapsed"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}
             \`;
+
+            // 添加折叠/展开事件监听
+            if (shouldCollapse) {
+              setTimeout(() => {
+                const header = segmentDiv.querySelector('.tool-segment-header');
+                const content = segmentDiv.querySelector('.tool-segment-content');
+                const iconCollapsed = segmentDiv.querySelector('.icon-collapsed');
+                const iconExpanded = segmentDiv.querySelector('.icon-expanded');
+
+                if (header && content) {
+                  header.addEventListener('click', function() {
+                    const isCollapsed = header.classList.contains('collapsed');
+
+                    if (isCollapsed) {
+                      // 展开
+                      header.classList.remove('collapsed');
+                      content.classList.remove('collapsed');
+                      content.style.maxHeight = content.scrollHeight + 'px';
+                      if (iconCollapsed) iconCollapsed.style.display = 'none';
+                      if (iconExpanded) iconExpanded.style.display = 'block';
+                    } else {
+                      // 折叠
+                      header.classList.add('collapsed');
+                      content.classList.add('collapsed');
+                      content.style.maxHeight = '0';
+                      if (iconCollapsed) iconCollapsed.style.display = 'block';
+                      if (iconExpanded) iconExpanded.style.display = 'none';
+                    }
+                  });
+                }
+              }, 0);
+            }
           } else if (segment.type === 'question') {
             segmentDiv.innerHTML = \`
               <div class="question-segment">