Merge remote-tracking branch 'origin/feat/plugin-front-end' into feat/back-to-front
This commit is contained in:
XiaoFeng
@ -1,12 +1,11 @@
|
||||
/**
|
||||
* 模式选择器组件
|
||||
* 提供 Plan/Ask/Agent/Auto 四种模式的选择功能
|
||||
* 提供 Plan/Ask/Agent 四种模式的选择功能
|
||||
*
|
||||
* 模式说明：
|
||||
* - Plan: 只读模式，只能查询分析，不能写文件
|
||||
* - Ask: 逐个确认，每个写操作需用户确认
|
||||
* - Agent: 智能体自主，自动执行大部分操作
|
||||
* - Auto: 完全自动，所有操作自动执行
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -35,10 +34,6 @@ export function getModeSelectorContent(): string {
|
||||
<span class="mode-option-label">Agent</span>
|
||||
<span class="mode-option-desc">智能体自主</span>
|
||||
</div>
|
||||
<div class="mode-option" data-value="auto" onclick="selectMode('auto', 'Auto')">
|
||||
<span class="mode-option-label">Auto</span>
|
||||
<span class="mode-option-desc">完全自动</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tooltiptext" id="modeTooltip">智能体自主模式</span>
|
||||
@ -164,8 +159,7 @@ export function getModeSelectorScript(): string {
|
||||
const tooltipMap = {
|
||||
'plan': '只读模式 - 只能查询分析',
|
||||
'ask': '逐个确认 - 每个写操作需确认',
|
||||
'agent': '智能体自主模式',
|
||||
'auto': '完全自动 - 所有操作自动执行'
|
||||
'agent': '智能体自主模式','
|
||||
};
|
||||
modeTooltip.textContent = tooltipMap[value] || '切换模式';
|
||||
}
|
||||
|
||||
@ -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 = \`
|
||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||
\${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)}
|
||||
<div class="tool-segment-header\${isCollapsed ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}" data-tool-index="\${currentToolIndex}">
|
||||
\${shouldCollapse ? \`<span class="tool-collapse-icon">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)}
|
||||
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||
</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>\` : ''}
|
||||
\${shouldCollapse ? \`<div class="tool-segment-content\${isCollapsed ? ' collapsed' : ''}" style="max-height:\${isCollapsed ? '0' : 'none'}"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}
|
||||
\`;
|
||||
|
||||
// 如果是仿真工具且成功完成，尝试添加波形预览
|
||||
@ -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 = \`
|
||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||
\${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)}
|
||||
\${shouldCollapse ? \`<span class="icon-collapsed" style="display:block;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span><span class="icon-expanded" style="display:none;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)}
|
||||
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||
</div>
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user