diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts index a70cbcf..342afab 100644 --- a/src/views/messageArea.ts +++ b/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 = \` + + \`; + segmentDiv.innerHTML = \` -