style:调整对话样式

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 {

src/constants/toolIcons.ts

@@ -170,3 +170,8 @@ export const stateTransitionIconSvg = `
     </svg>
   </span>
 `;
+
+/**
+ * 用户提问图标 SVG
+ */
+export const userQuestionIconSvg = `<svg t="1767869230062" class="icon" viewBox="0 0 1068 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4819" width="14" height="14"><path d="M563.645217 578.782609c2.537739-35.350261 6.322087-58.189913 11.397566-68.518957 7.568696-15.449043 24.175304-34.370783 49.775304-56.631652 35.172174-30.72 58.546087-53.960348 70.121739-69.810087 11.575652-15.805217 17.408-36.418783 17.408-61.885217 0-41.939478-15.805217-76.399304-47.37113-103.379479-31.610435-26.980174-73.638957-40.470261-126.130087-40.47026-56.765217 0-101.376 15.760696-133.921392 47.282086C372.424348 256.934957 356.173913 298.562783 356.173913 350.386087h71.145739c1.335652-31.165217 6.811826-55.02887 16.384-71.590957 17.051826-29.740522 47.86087-44.610783 92.338087-44.610782 35.973565 0 61.796174 8.637217 77.378783 25.911652 15.582609 17.274435 23.373913 37.665391 23.373913 61.128348 0 16.784696-5.342609 32.990609-16.027826 48.573217-5.787826 8.904348-13.534609 17.363478-23.151305 25.555478l-31.966608 28.40487c-30.675478 27.113739-50.487652 51.155478-59.570087 72.125217-6.054957 13.979826-10.551652 41.627826-13.579131 82.899479h71.145739z m15.137392 89.043478a44.521739 44.521739 0 1 0-89.043479 0 44.521739 44.521739 0 0 0 89.043479 0z" fill="#8a8a8a" p-id="4820"></path><path d="M934.912 0h-801.391304a133.565217 133.565217 0 0 0-133.565218 133.565217v623.304348l0.222609 7.835826A133.565217 133.565217 0 0 0 133.565217 890.434783h222.608696v89.043478a44.521739 44.521739 0 0 0 64.556522 39.713391L675.661913 890.434783h259.294609a133.565217 133.565217 0 0 0 133.565217-133.565218V133.565217a133.565217 133.565217 0 0 0-133.565217-133.565217z m-801.391304 89.043478h801.391304a44.521739 44.521739 0 0 1 44.521739 44.521739v623.304348a44.521739 44.521739 0 0 1-44.521739 44.521739h-269.801739a44.521739 44.521739 0 0 0-20.034783 4.763826l-199.902608 100.930783V845.913043a44.521739 44.521739 0 0 0-44.52174-44.521739h-267.130434a44.521739 44.521739 0 0 1-44.521739-44.521739V133.565217a44.521739 44.521739 0 0 1 44.521739-44.521739z" fill="#8a8a8a" p-id="4821"></path></svg>`;

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 {
+      .segment-text h3,
-        margin: 16px 0 8px 0;
+      .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 {
+      .segment-text li,
-        margin: 0;
+      .question-text li {
-        line-height: 0.4;
+        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 = \`
-              <div class="question-text">\${segment.question || ''}</div>
+              <div class="question-text">\${formatText(segment.question || '')}</div>
               \${hasOptions ? \`<div class="question-options" data-ask-id="\${segment.askId}">\${optionsHtml}</div>\` : ''}
               <div class="custom-input-container" style="display: \${isAnswered ? 'none' : 'flex'};">
                 <input type="text" class="custom-input" placeholder="\${hasOptions ? '输入其他答案...' : '请输入您的答案...'}" />
@@ -1301,7 +1328,7 @@ export function getMessageAreaScript(): string {
           } else if (segment.type === 'question') {
             segmentDiv.innerHTML = \`
               <div class="question-segment">
-                <div class="question-text">\${segment.question || ''}</div>
+                <div class="question-text">\${formatText(segment.question || '')}</div>
                 <div class="question-options">
                   \${(segment.options || []).map(opt => \`<span class="question-opt">\${opt}</span>\`).join('')}
                 </div>

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 {