style:调整对话样式

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 = \`
-              <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>