diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts index 498710b..3466583 100644 --- a/src/views/messageArea.ts +++ b/src/views/messageArea.ts @@ -410,7 +410,7 @@ export function getMessageAreaStyles(): string { display: block; } .tool-segment-header.collapsed .tool-collapse-icon { - transform: rotate(0deg); + transform: rotate(-90deg); } .tool-segment-header:not(.collapsed) .tool-collapse-icon { transform: rotate(0deg); @@ -890,6 +890,9 @@ export function getMessageAreaScript(): string { // 存储已回答问题的状态 const answeredQuestions = new Map(); // askId -> answer + // 存储工具展开/折叠状态 + const toolCollapseStates = new Map(); // index -> isCollapsed + // 实时更新分段消息(按后端返回顺序) function updateSegmentsRealtime(segments, isComplete) { console.log('[WebView] updateSegmentsRealtime 被调用, segments:', segments, 'isComplete:', isComplete); @@ -921,9 +924,19 @@ export function getMessageAreaScript(): string { messagesEl.appendChild(currentSegmentedMessage); } + // 保存当前所有工具的展开/折叠状态 + if (currentSegmentedMessage) { + const toolHeaders = currentSegmentedMessage.querySelectorAll('.tool-segment-header[data-collapsible="true"]'); + toolHeaders.forEach((header, idx) => { + const isCollapsed = header.classList.contains('collapsed'); + toolCollapseStates.set(idx, isCollapsed); + }); + } + // 清空容器并重新渲染所有段落 currentSegmentedMessage.innerHTML = ''; + let toolIndex = 0; // 用于跟踪工具段落的索引 segments.forEach((segment, index) => { const segmentDiv = document.createElement('div'); segmentDiv.className = 'message-segment segment-' + segment.type; @@ -942,13 +955,19 @@ export function getMessageAreaScript(): string { // 检查工具结果是否过长(超过一行显示不下) const shouldCollapse = toolResult && toolResult.length > 60; + // 恢复之前保存的展开/折叠状态 + const savedState = toolCollapseStates.get(toolIndex); + const isCollapsed = savedState !== undefined ? savedState : shouldCollapse; + const currentToolIndex = toolIndex; + toolIndex++; // 递增工具索引 + segmentDiv.innerHTML = \` -
- \${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)} +
+ \${shouldCollapse ? \`\${collapseIconSvg}\` : getToolIcon(segment.toolName)} \${getToolDisplayName(segment.toolName) || '工具'} \${toolResult && !shouldCollapse ? \`\${toolResult}\` : ''}
- \${shouldCollapse ? \`\` : ''} + \${shouldCollapse ? \`
\${toolResult}
\` : ''} \`; // 如果是仿真工具且成功完成,尝试添加波形预览 @@ -974,27 +993,24 @@ export function getMessageAreaScript(): string { 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'); + const toolIdx = parseInt(header.getAttribute('data-tool-index') || '0'); 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'; + toolCollapseStates.set(toolIdx, false); } 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'; + toolCollapseStates.set(toolIdx, true); } }); } @@ -1149,7 +1165,7 @@ export function getMessageAreaScript(): string { segmentDiv.innerHTML = \`
- \${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)} + \${shouldCollapse ? \`\${collapseIconSvg}\` : getToolIcon(segment.toolName)} \${getToolDisplayName(segment.toolName) || '工具'} \${toolResult && !shouldCollapse ? \`\${toolResult}\` : ''}
@@ -1179,27 +1195,24 @@ export function getMessageAreaScript(): string { 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'); + const toolIdx = parseInt(header.getAttribute('data-tool-index') || '0'); 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'; + toolCollapseStates.set(toolIdx, false); } 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'; + toolCollapseStates.set(toolIdx, true); } }); }