diff --git a/src/components/codeHighlight.ts b/src/components/codeHighlight.ts index 35dd723..3cb8fb6 100644 --- a/src/components/codeHighlight.ts +++ b/src/components/codeHighlight.ts @@ -70,7 +70,7 @@ export function getCodeHighlightStyles(): string { /* 代码块语言标签 */ .code-block-wrapper { position: relative; - margin: 12px 0; + margin: -20px 0; } .code-language-label { diff --git a/src/constants/toolIcons.ts b/src/constants/toolIcons.ts index 6c35aac..f8ad1a7 100644 --- a/src/constants/toolIcons.ts +++ b/src/constants/toolIcons.ts @@ -170,3 +170,8 @@ export const stateTransitionIconSvg = ` `; + +/** + * 用户提问图标 SVG + */ +export const userQuestionIconSvg = ``; diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts index 4d5ed9f..1345a22 100644 --- a/src/views/messageArea.ts +++ b/src/views/messageArea.ts @@ -23,6 +23,7 @@ import { waveformIconSvg, knowledgeLoadIconSvg, stateTransitionIconSvg, + userQuestionIconSvg, } from "../constants/toolIcons"; import { getWaveformPreviewContent, @@ -298,7 +299,7 @@ export function getMessageAreaStyles(): string { padding: 0; } .message-segment { - padding: 10px 20px; + padding: 10px 0; } .segment-text { line-height: 1.6; @@ -307,48 +308,69 @@ export function getMessageAreaStyles(): string { /* Markdown 样式 */ .segment-text h1, .segment-text h2, - .segment-text h3 { - margin: 16px 0 8px 0; + .segment-text h3, + .question-text h1, + .question-text h2, + .question-text h3 { + margin: 0px 0 -10px 0; font-weight: 600; line-height: 1.3; } - .segment-text h1 { + .segment-text h1, + .question-text h1 { font-size: 1.5em; border-bottom: 1px solid var(--vscode-panel-border); padding-bottom: 8px; } - .segment-text h2 { + .segment-text h2, + .question-text h2 { font-size: 1.3em; } - .segment-text h3 { + .segment-text h3, + .question-text h3 { font-size: 1.1em; } .segment-text ul, - .segment-text ol { + .segment-text ol, + .question-text ul, + .question-text ol { margin: 8px 0; padding-left: 24px; } - .segment-text li { - margin: 0; - line-height: 0.4; + .segment-text li, + .question-text li { + line-height: 1; } - .segment-text strong { + .segment-text strong, + .question-text strong { font-weight: 600; color: var(--vscode-foreground); } - .segment-text em { + .segment-text em, + .question-text em { font-style: italic; } - .segment-text a { + .segment-text a, + .question-text a { color: var(--vscode-textLink-foreground); text-decoration: none; } - .segment-text a:hover { + .segment-text a:hover, + .question-text a:hover { text-decoration: underline; } - .segment-text p { + .segment-text p, + .question-text p { margin: 8px 0; } + .segment-text code, + .question-text code { + background: var(--vscode-textCodeBlock-background); + padding: 2px 6px; + border-radius: 3px; + font-family: var(--vscode-editor-font-family); + font-size: 0.9em; + } .segment-tool { margin: 4px 0; @@ -356,7 +378,7 @@ export function getMessageAreaStyles(): string { } /* 低调显示的工具调用 - 移除边距和背景 */ .segment-tool.low-profile { - margin: 2px 20px; + margin: 2px 0px; padding: 0; background: none; } @@ -540,7 +562,7 @@ export function getMessageAreaStyles(): string { background: var(--vscode-textBlockQuote-background); border-radius: 6px; margin: 8px 0; - padding: 12px 14px; + padding: 12px 35px; border-left: 3px solid var(--vscode-charts-orange); } .segment-question .question-text { @@ -588,6 +610,7 @@ export function getMessageAreaStyles(): string { border: 1px solid var(--vscode-input-border); border-radius: 6px; font-size: 13px; + margin-left: -20px; } .segment-question .custom-submit { padding: 8px 16px; @@ -646,6 +669,7 @@ export function getMessageAreaScript(): string { const waveformIconSvg = \`${waveformIconSvg}\`; const knowledgeLoadIconSvg = \`${knowledgeLoadIconSvg}\`; const stateTransitionIconSvg = \`${stateTransitionIconSvg}\`; + const userQuestionIconSvg = \`${userQuestionIconSvg}\`; ${getAgentCardScript()} @@ -675,7 +699,8 @@ export function getMessageAreaScript(): string { 'showPlan': searchCodeIconSvg, 'addRule': fileWriteIconSvg, 'updateNode': fileWriteIconSvg, - 'addStateTransition': stateTransitionIconSvg + 'addStateTransition': stateTransitionIconSvg, + 'askUser': userQuestionIconSvg, }; return iconMap[toolName] || ''; } @@ -705,7 +730,9 @@ export function getMessageAreaScript(): string { 'addRule': '已添加规则', 'updateNode': '已更新节点', 'addStateTransition': '已添加状态转换', - 'spawnExplorer': '代码探索' + 'spawnExplorer': '代码探索', + 'spawnDebugger': '波形调试', + 'askUser': '用户提问', }; return toolNameMap[toolName] || toolName; } @@ -1073,7 +1100,7 @@ export function getMessageAreaScript(): string { : ''; segmentDiv.innerHTML = \` -
\${segment.question || ''}
+
\${formatText(segment.question || '')}
\${hasOptions ? \`
\${optionsHtml}
\` : ''}
@@ -1301,7 +1328,7 @@ export function getMessageAreaScript(): string { } else if (segment.type === 'question') { segmentDiv.innerHTML = \`
-
\${segment.question || ''}
+
\${formatText(segment.question || '')}
\${(segment.options || []).map(opt => \`\${opt}\`).join('')}
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts index b6285e3..90eda69 100644 --- a/src/views/webviewContent.ts +++ b/src/views/webviewContent.ts @@ -271,7 +271,7 @@ export function getWebviewContent( padding: 0; } .message-segment { - padding: 10px 20px; + padding: 10px 0; } .segment-text { line-height: 1.6; @@ -314,7 +314,7 @@ export function getWebviewContent( background: var(--vscode-textBlockQuote-background); border-radius: 6px; margin: 8px 0; - padding: 12px 14px; + padding: 12px 35px; border-left: 3px solid var(--vscode-charts-orange); } .question-segment .question-text {