From f2382a8eed1ac4cb5026083cdede7ccf348d0d2d Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Tue, 16 Dec 2025 16:58:35 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0=E6=B3=A2=E5=BD=A2?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/波形预览功能技术文档.md        | 444 ++++++++++++++++++++++++++++
 src/panels/ICHelperPanel.ts         | 182 ++++++++++++
 src/utils/messageHandler.ts         |  24 +-
 src/views/waveformPreviewContent.ts | 350 ++++++++++++++++++++++
 src/views/webviewContent.ts         |  28 ++
 5 files changed, 1020 insertions(+), 8 deletions(-)
 create mode 100644 docs/波形预览功能技术文档.md
 create mode 100644 src/views/waveformPreviewContent.ts

diff --git a/docs/波形预览功能技术文档.md b/docs/波形预览功能技术文档.md
new file mode 100644
index 0000000..3102c62
--- /dev/null
+++ b/docs/波形预览功能技术文档.md
@@ -0,0 +1,444 @@
+# 波形预览功能技术文档
+
+## 功能概述
+
+在对话界面中显示 VCD 波形文件的预览卡片，用户可以查看前几个信号的真实波形，并通过"展开查看"按钮打开完整的波形查看器。
+
+## 功能流程
+
+```
+用户输入"生成VCD"命令
+    ↓
+系统执行 iverilog 编译和仿真
+    ↓
+生成 VCD 文件
+    ↓
+在对话界面显示波形预览卡片
+    ├─ 显示真实的波形图（前3个信号）
+    ├─ 显示信号名称和波形
+    └─ "展开查看"按钮
+    ↓
+点击"展开查看"按钮
+    ↓
+打开完整的 VCDViewerPanel 波形查看器
+```
+
+## 文件结构
+
+### 1. `src/views/waveformPreviewContent.ts`
+**功能：** 波形预览组件的独立模块
+
+**导出函数：**
+- `getWaveformPreviewContent()` - 返回波形预览组件的 CSS 样式
+- `getWaveformPreviewScript()` - 返回波形预览组件的 JavaScript 代码
+
+**主要功能：**
+- 创建波形预览卡片的 HTML 结构
+- 从 VCD 文件中提取真实信号数据
+- 使用 SVG 绘制波形图
+  - 单比特信号：绘制数字波形（高/低电平）
+  - 多比特信号：绘制总线波形（梯形）
+- 处理"展开查看"按钮点击事件
+
+**关键函数：**
+```javascript
+createWaveformPreview(vcdFilePath, fileName)
+  - 创建波形预览卡片的 DOM 结构
+  - 包含头部（标题 + 展开按钮）和内容区域
+
+loadMiniWaveform(containerId, vcdFilePath, loadingDiv)
+  - 请求后端获取 VCD 文件信息
+
+renderWaveformInfo(containerId, vcdInfo)
+  - 接收 VCD 信息并渲染波形
+
+drawRealWaveform(signals)
+  - 根据真实信号数据绘制 SVG 波形图
+  - 支持单比特和多比特信号
+  - 使用不同颜色区分信号
+
+openFullWaveform(vcdFilePath)
+  - 发送消息打开完整波形查看器
+
+addWaveformPreviewToMessage(messageDiv, vcdFilePath, fileName)
+  - 将波形预览组件添加到消息中
+```
+
+---
+
+### 2. `src/views/webviewContent.ts`
+**功能：** 主 WebView 页面，集成波形预览组件
+
+**修改内容：**
+- 导入波形预览组件的样式和脚本
+- 在 `<style>` 标签中插入 `getWaveformPreviewContent()`
+- 在 `<script>` 标签中插入 `getWaveformPreviewScript()`
+- 添加 `vcdGenerated` 消息处理逻辑
+- 添加 `vcdInfo` 消息处理逻辑
+
+**消息处理：**
+```javascript
+case 'vcdGenerated':
+  // VCD 文件生成成功，显示带波形预览的消息
+  - 创建消息 div
+  - 添加成功消息文本
+  - 调用 addWaveformPreviewToMessage() 添加波形预览卡片
+
+case 'vcdInfo':
+  // 接收到 VCD 文件信息，渲染波形预览
+  - 调用 renderWaveformInfo() 渲染波形
+```
+
+---
+
+### 3. `src/utils/messageHandler.ts`
+**功能：** 处理用户消息和 VCD 生成请求
+
+**修改内容：**
+- 导入 `path` 模块
+- 修改 VCD 生成成功后的消息发送逻辑
+
+**关键代码：**
+```typescript
+if (result.success) {
+  if (result.vcdFilePath) {
+    const fileName = path.basename(result.vcdFilePath);
+    panel.webview.postMessage({
+      command: "vcdGenerated",  // 发送 vcdGenerated 消息
+      text: successMsg,
+      vcdFilePath: result.vcdFilePath,
+      fileName: fileName,
+    });
+  }
+}
+```
+
+---
+
+### 4. `src/panels/ICHelperPanel.ts`
+**功能：** IC 助手面板，处理 WebView 消息
+
+**修改内容：**
+- 导入 `VCDViewerPanel`
+- 添加 `openWaveformViewer` 命令处理
+- 添加 `getVCDInfo` 命令处理
+- 新增 `getVCDFileInfo()` 函数
+- 新增 `parseVCDSignals()` 函数
+
+**新增函数：**
+
+#### `getVCDFileInfo(panel, vcdFilePath, containerId)`
+**功能：** 获取 VCD 文件信息并解析信号数据
+
+**处理流程：**
+1. 检查文件是否存在
+2. 获取文件大小
+3. 读取 VCD 文件内容
+4. 解析信号数量
+5. 解析时间范围
+6. 调用 `parseVCDSignals()` 解析前 3 个信号的数据
+7. 发送 `vcdInfo` 消息回前端
+
+**返回数据结构：**
+```typescript
+{
+  command: "vcdInfo",
+  containerId: string,
+  vcdInfo: {
+    signalCount: string,
+    timeRange: string,
+    fileSize: string,
+    signals: Array<{
+      name: string,
+      identifier: string,
+      width: number,
+      values: Array<{ time: number, value: string }>
+    }>
+  }
+}
+```
+
+#### `parseVCDSignals(content, maxSignals)`
+**功能：** 解析 VCD 文件中的信号数据
+
+**处理流程：**
+1. 使用正则表达式解析信号定义部分（`$var ... $end`）
+2. 提取信号名称、标识符、位宽
+3. 找到数据变化部分（`$dumpvars` 之后）
+4. 解析每个信号的值变化
+   - 单比特信号：格式 `0!` 或 `1!`
+   - 多比特信号：格式 `b1010 !`
+5. 限制最多 50 个采样点（避免数据过多）
+6. 返回信号数据数组
+
+**VCD 文件格式示例：**
+```vcd
+$var wire 1 ! clk $end
+$var wire 8 " data $end
+$dumpvars
+0!
+b00000000 "
+#10
+1!
+#20
+0!
+b00000001 "
+```
+
+**消息处理：**
+```typescript
+case "openWaveformViewer":
+  // 打开完整波形查看器
+  VCDViewerPanel.createOrShow(context.extensionUri, message.vcdFilePath);
+
+case "getVCDInfo":
+  // 获取 VCD 文件信息
+  getVCDFileInfo(panel, message.vcdFilePath, message.containerId);
+```
+
+---
+
+### 5. `src/panels/VCDViewerPanel.ts`
+**功能：** 完整的 VCD 波形查看器面板（已存在）
+
+**作用：** 当用户点击"展开查看"按钮时，打开此面板显示完整的波形
+
+---
+
+## 数据流
+
+### 1. VCD 生成流程
+```
+用户输入 → messageHandler.handleUserMessage()
+    ↓
+检测到 VCD 生成命令
+    ↓
+messageHandler.handleVCDGeneration()
+    ↓
+iverilogRunner.generateVCD()
+    ↓
+生成 VCD 文件
+    ↓
+发送 vcdGenerated 消息到前端
+    ↓
+webviewContent 接收消息
+    ↓
+创建波形预览卡片
+```
+
+### 2. 波形预览加载流程
+```
+createWaveformPreview() 创建卡片
+    ↓
+loadMiniWaveform() 请求 VCD 信息
+    ↓
+发送 getVCDInfo 消息到后端
+    ↓
+ICHelperPanel 接收消息
+    ↓
+getVCDFileInfo() 读取并解析 VCD 文件
+    ↓
+parseVCDSignals() 解析信号数据
+    ↓
+发送 vcdInfo 消息到前端
+    ↓
+renderWaveformInfo() 渲染波形
+    ↓
+drawRealWaveform() 绘制 SVG 波形图
+```
+
+### 3. 展开查看流程
+```
+用户点击"展开查看"按钮
+    ↓
+openFullWaveform() 发送消息
+    ↓
+发送 openWaveformViewer 消息到后端
+    ↓
+ICHelperPanel 接收消息
+    ↓
+VCDViewerPanel.createOrShow()
+    ↓
+打开完整波形查看器窗口
+```
+
+---
+
+## 样式说明
+
+### CSS 类名
+- `.waveform-preview` - 波形预览卡片容器
+- `.waveform-preview-header` - 卡片头部
+- `.waveform-preview-title` - 标题区域
+- `.waveform-expand-btn` - 展开按钮
+- `.waveform-preview-content` - 内容区域
+- `.waveform-mini-viewer` - 波形显示容器
+- `.waveform-loading` - 加载提示
+
+### 波形绘制
+- **单比特信号**：使用 SVG `<path>` 绘制数字波形
+  - 高电平：y = 顶部
+  - 低电平：y = 底部
+  - 垂直跳变表示信号变化
+
+- **多比特信号**：使用 SVG `<path>` 绘制总线波形
+  - 梯形表示数据变化
+  - 中间线表示稳定状态
+
+- **颜色方案**：
+  - 第1个信号：蓝色 (`var(--vscode-charts-blue)`)
+  - 第2个信号：绿色 (`var(--vscode-charts-green)`)
+  - 第3个信号：橙色 (`var(--vscode-charts-orange)`)
+
+---
+
+## 配置参数
+
+### 可调整参数
+
+**在 `ICHelperPanel.ts` 中：**
+```typescript
+const signals = parseVCDSignals(content, 3); // 解析前3个信号
+```
+- 修改数字可以改变显示的信号数量
+
+**在 `parseVCDSignals()` 中：**
+```typescript
+if (values.length >= 50) {
+  break; // 限制最多50个采样点
+}
+```
+- 修改数字可以改变采样点数量
+
+**在 `drawRealWaveform()` 中：**
+```typescript
+const signalHeight = 20;      // 信号高度
+const signalSpacing = 30;     // 信号间距
+const leftMargin = 80;        // 左边距（信号名称区域）
+const rightMargin = 20;       // 右边距
+```
+- 修改这些参数可以调整波形显示样式
+
+---
+
+## 性能优化
+
+1. **限制信号数量**：只解析前 3 个信号
+2. **限制采样点**：每个信号最多 50 个采样点
+3. **轻量级渲染**：使用 SVG 而不是 Canvas
+4. **按需加载**：只在需要时读取和解析 VCD 文件
+
+---
+
+## 错误处理
+
+### 文件不存在
+```typescript
+if (!fs.existsSync(vcdFilePath)) {
+  // 返回错误信息
+  vcdInfo: {
+    signalCount: 'N/A',
+    timeRange: 'N/A',
+    fileSize: 'N/A',
+    error: '文件不存在'
+  }
+}
+```
+
+### 解析失败
+```typescript
+try {
+  // 解析逻辑
+} catch (error) {
+  console.error('解析 VCD 信号数据失败:', error);
+  return []; // 返回空数组
+}
+```
+
+### 无信号数据
+```typescript
+if (!signals || signals.length === 0) {
+  return `<svg>无波形数据</svg>`;
+}
+```
+
+---
+
+## 未来扩展
+
+### 可能的改进方向
+
+1. **交互功能**
+   - 鼠标悬停显示信号值
+   - 点击信号高亮显示
+   - 缩放和平移功能
+
+2. **显示优化**
+   - 自动选择最有代表性的信号
+   - 智能采样（保留关键变化点）
+   - 支持更多信号类型（模拟信号等）
+
+3. **性能优化**
+   - 使用 Web Worker 解析大文件
+   - 虚拟滚动显示大量信号
+   - 缓存解析结果
+
+4. **功能增强**
+   - 支持信号搜索和过滤
+   - 导出波形图片
+   - 比较多个 VCD 文件
+
+---
+
+## 调试技巧
+
+### 查看消息流
+在浏览器开发者工具中查看 `vscode.postMessage()` 的调用：
+```javascript
+console.log('发送消息:', message);
+vscode.postMessage(message);
+```
+
+### 查看解析结果
+在 `parseVCDSignals()` 中添加日志：
+```typescript
+console.log('解析到的信号:', signals);
+```
+
+### 查看 SVG 输出
+在 `drawRealWaveform()` 中添加日志：
+```javascript
+console.log('SVG 内容:', svgContent);
+```
+
+---
+
+## 相关文件
+
+- `src/utils/iverilogRunner.ts` - VCD 文件生成
+- `src/panels/VCDViewerPanel.ts` - 完整波形查看器
+- `media/vcdrom/` - VCDrom 波形查看库
+
+---
+
+## 版本历史
+
+### v1.0 (当前版本)
+- ✅ 创建独立的波形预览组件
+- ✅ 解析 VCD 文件中的真实信号数据
+- ✅ 绘制单比特和多比特信号波形
+- ✅ 支持展开查看完整波形
+- ✅ 轻量级预览，快速加载
+
+---
+
+## 总结
+
+波形预览功能通过以下文件协同工作：
+
+1. **`waveformPreviewContent.ts`** - 组件核心逻辑
+2. **`webviewContent.ts`** - 集成到主页面
+3. **`messageHandler.ts`** - 处理 VCD 生成
+4. **`ICHelperPanel.ts`** - 解析 VCD 数据和消息处理
+
+整个功能采用模块化设计，易于维护和扩展。
diff --git a/src/panels/ICHelperPanel.ts b/src/panels/ICHelperPanel.ts
index 7920e89..31a751c 100644
--- a/src/panels/ICHelperPanel.ts
+++ b/src/panels/ICHelperPanel.ts
@@ -8,6 +8,7 @@ import {
   handleRenameFile,
   handleReplaceInFile
 } from "../utils/messageHandler";
+import { VCDViewerPanel } from "./VCDViewerPanel";
 
 /**
  * 创建并显示 IC 助手面板
@@ -61,9 +62,190 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
         case "showInfo":
           vscode.window.showInformationMessage(message.text);
           break;
+        case "openWaveformViewer":
+          // 打开波形查看器
+          if (message.vcdFilePath) {
+            VCDViewerPanel.createOrShow(context.extensionUri, message.vcdFilePath);
+          }
+          break;
+        case "getVCDInfo":
+          // 获取 VCD 文件信息
+          if (message.vcdFilePath && message.containerId) {
+            getVCDFileInfo(panel, message.vcdFilePath, message.containerId);
+          }
+          break;
       }
     },
     undefined,
     context.subscriptions
   );
 }
+
+/**
+ * 获取 VCD 文件信息
+ */
+async function getVCDFileInfo(
+  panel: vscode.WebviewPanel,
+  vcdFilePath: string,
+  containerId: string
+) {
+  try {
+    const fs = require('fs');
+    const path = require('path');
+
+    // 检查文件是否存在
+    if (!fs.existsSync(vcdFilePath)) {
+      panel.webview.postMessage({
+        command: "vcdInfo",
+        containerId: containerId,
+        vcdInfo: {
+          signalCount: 'N/A',
+          timeRange: 'N/A',
+          fileSize: 'N/A',
+          error: '文件不存在'
+        }
+      });
+      return;
+    }
+
+    // 获取文件大小
+    const stats = fs.statSync(vcdFilePath);
+    const fileSizeKB = stats.size / 1024;
+    const fileSize = fileSizeKB < 1024
+      ? `${fileSizeKB.toFixed(2)} KB`
+      : `${(fileSizeKB / 1024).toFixed(2)} MB`;
+
+    // 读取 VCD 文件内容
+    const content = fs.readFileSync(vcdFilePath, 'utf-8');
+
+    // 解析信号数量
+    const varMatches = content.match(/\$var/g);
+    const signalCount = varMatches ? varMatches.length : 0;
+
+    // 解析时间范围
+    let timeRange = 'N/A';
+    const timeMatch = content.match(/#(\d+)/g);
+    if (timeMatch && timeMatch.length > 0) {
+      const times = timeMatch.map((t: string) => parseInt(t.substring(1)));
+      const minTime = Math.min(...times);
+      const maxTime = Math.max(...times);
+      timeRange = `${minTime} - ${maxTime}`;
+    }
+
+    // 解析前几个信号的真实数据
+    const signals = parseVCDSignals(content, 3); // 只解析前3个信号
+
+    // 发送信息回前端
+    panel.webview.postMessage({
+      command: "vcdInfo",
+      containerId: containerId,
+      vcdInfo: {
+        signalCount: signalCount.toString(),
+        timeRange: timeRange,
+        fileSize: fileSize,
+        signals: signals // 添加真实信号数据
+      }
+    });
+
+  } catch (error) {
+    console.error('获取 VCD 文件信息失败:', error);
+    panel.webview.postMessage({
+      command: "vcdInfo",
+      containerId: containerId,
+      vcdInfo: {
+        signalCount: 'N/A',
+        timeRange: 'N/A',
+        fileSize: 'N/A',
+        error: error instanceof Error ? error.message : '未知错误'
+      }
+    });
+  }
+}
+
+/**
+ * 解析 VCD 文件中的信号数据
+ */
+function parseVCDSignals(content: string, maxSignals: number = 3) {
+  const signals: Array<{
+    name: string;
+    identifier: string;
+    width: number;
+    values: Array<{ time: number; value: string }>;
+  }> = [];
+
+  try {
+    // 1. 解析信号定义部分
+    const varRegex = /\$var\s+(\w+)\s+(\d+)\s+(\S+)\s+([^\$]+?)\s+\$end/g;
+    let match;
+    const signalDefs: Array<{ name: string; identifier: string; width: number }> = [];
+
+    while ((match = varRegex.exec(content)) !== null && signalDefs.length < maxSignals) {
+      const width = parseInt(match[2]);
+      const identifier = match[3];
+      const name = match[4].trim();
+
+      signalDefs.push({ name, identifier, width });
+    }
+
+    // 2. 找到数据变化部分的起始位置
+    const dumpvarsIndex = content.indexOf('$dumpvars');
+    if (dumpvarsIndex === -1) {
+      return signals;
+    }
+
+    const dataSection = content.substring(dumpvarsIndex);
+
+    // 3. 解析每个信号的值变化
+    for (const signalDef of signalDefs) {
+      const values: Array<{ time: number; value: string }> = [];
+      let currentTime = 0;
+
+      // 分行处理数据
+      const lines = dataSection.split('\n');
+
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+
+        // 解析时间戳
+        if (trimmedLine.startsWith('#')) {
+          currentTime = parseInt(trimmedLine.substring(1));
+          continue;
+        }
+
+        // 解析信号值变化
+        // 格式1: 单比特信号 "0!" 或 "1!"
+        // 格式2: 多比特信号 "b1010 !"
+        if (signalDef.width === 1) {
+          // 单比特信号
+          const singleBitMatch = trimmedLine.match(new RegExp(`^([01xz])${signalDef.identifier}$`));
+          if (singleBitMatch) {
+            values.push({ time: currentTime, value: singleBitMatch[1] });
+          }
+        } else {
+          // 多比特信号
+          const multiBitMatch = trimmedLine.match(new RegExp(`^b([01xz]+)\\s+${signalDef.identifier}$`));
+          if (multiBitMatch) {
+            values.push({ time: currentTime, value: multiBitMatch[1] });
+          }
+        }
+
+        // 限制采样点数量，避免数据过多
+        if (values.length >= 50) {
+          break;
+        }
+      }
+
+      signals.push({
+        name: signalDef.name,
+        identifier: signalDef.identifier,
+        width: signalDef.width,
+        values: values
+      });
+    }
+
+  } catch (error) {
+    console.error('解析 VCD 信号数据失败:', error);
+  }
+
+  return signals;
+}
diff --git a/src/utils/messageHandler.ts b/src/utils/messageHandler.ts
index 6007499..2a07091 100644
--- a/src/utils/messageHandler.ts
+++ b/src/utils/messageHandler.ts
@@ -1,4 +1,5 @@
 import * as vscode from "vscode";
+import * as path from "path";
 import { readFileContent } from "./readFiles";
 import {
   createFile,
@@ -614,17 +615,24 @@ async function handleVCDGeneration(
         successMsg += `\n\n仿真输出:\n${result.stdout}`;
       }
 
-      panel.webview.postMessage({
-        command: "receiveMessage",
-        text: successMsg,
-      });
-
-      // 自动打开 VCD 波形查看器
+      // 发送带波形预览的消息
       if (result.vcdFilePath) {
-        vscode.commands.executeCommand("ic-coder.openVCDViewer", result.vcdFilePath);
+        const fileName = path.basename(result.vcdFilePath);
+        panel.webview.postMessage({
+          command: "vcdGenerated",
+          text: successMsg,
+          vcdFilePath: result.vcdFilePath,
+          fileName: fileName,
+        });
+
         vscode.window.showInformationMessage(
-          `VCD 文件生成成功，已自动打开波形查看器`
+          `VCD 文件生成成功: ${fileName}`
         );
+      } else {
+        panel.webview.postMessage({
+          command: "receiveMessage",
+          text: successMsg,
+        });
       }
     } else {
       let errorMsg = `❌ ${result.message}`;
diff --git a/src/views/waveformPreviewContent.ts b/src/views/waveformPreviewContent.ts
new file mode 100644
index 0000000..6c98a77
--- /dev/null
+++ b/src/views/waveformPreviewContent.ts
@@ -0,0 +1,350 @@
+/**
+ * 获取波形预览组件的样式内容（纯 CSS，不包含 style 标签）
+ */
+export function getWaveformPreviewContent(): string {
+  return `
+      /* 波形预览组件样式 */
+      .waveform-preview {
+        margin-top: 12px;
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 8px;
+        overflow: hidden;
+        background: var(--vscode-editor-background);
+      }
+      .waveform-preview-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        background: var(--vscode-input-background);
+        border-bottom: 1px solid var(--vscode-panel-border);
+      }
+      .waveform-preview-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--vscode-foreground);
+      }
+      .waveform-preview-title svg {
+        width: 16px;
+        height: 16px;
+        color: var(--vscode-button-background);
+      }
+      .waveform-expand-btn {
+        padding: 4px 12px;
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        transition: opacity 0.2s ease;
+      }
+      .waveform-expand-btn:hover {
+        opacity: 0.9;
+      }
+      .waveform-expand-btn svg {
+        width: 14px;
+        height: 14px;
+      }
+      .waveform-preview-content {
+        padding: 0;
+        min-height: 200px;
+        max-height: 300px;
+        overflow: hidden;
+        position: relative;
+        background: var(--vscode-editor-background);
+      }
+      .waveform-preview-canvas {
+        width: 100%;
+        height: 100%;
+        min-height: 200px;
+      }
+      .waveform-preview-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: var(--vscode-descriptionForeground);
+        font-size: 13px;
+        text-align: center;
+        padding: 20px;
+      }
+      .waveform-preview-placeholder svg {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+      .waveform-info {
+        margin-top: 8px;
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+      }
+      .waveform-mini-viewer {
+        width: 100%;
+        height: 200px;
+        background: var(--vscode-editor-background);
+        position: relative;
+        overflow: hidden;
+      }
+      .waveform-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: var(--vscode-descriptionForeground);
+        font-size: 12px;
+      }
+  `;
+}
+
+/**
+ * 获取波形预览组件的 JavaScript 代码
+ */
+export function getWaveformPreviewScript(): string {
+  return `
+    /**
+     * 创建波形预览组件
+     */
+    function createWaveformPreview(vcdFilePath, fileName) {
+      const previewDiv = document.createElement('div');
+      previewDiv.className = 'waveform-preview';
+
+      // 头部
+      const header = document.createElement('div');
+      header.className = 'waveform-preview-header';
+
+      const title = document.createElement('div');
+      title.className = 'waveform-preview-title';
+      title.innerHTML = \`
+        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+          <path d="M128 512h128l64-128 64 128 64-256 64 384 64-128h320"
+                stroke="currentColor"
+                stroke-width="64"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"/>
+        </svg>
+        <span>波形预览 - \${fileName}</span>
+      \`;
+
+      const expandBtn = document.createElement('button');
+      expandBtn.className = 'waveform-expand-btn';
+      expandBtn.innerHTML = \`
+        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+          <path d="M342 88.3h340c56.6 0 102.6 46 102.6 102.6v340c0 56.6-46 102.6-102.6 102.6H342c-56.6 0-102.6-46-102.6-102.6v-340c0-56.6 46-102.6 102.6-102.6z"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="48"/>
+          <path d="M239.4 390.5v340c0 56.6 46 102.6 102.6 102.6h340"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="48"
+                stroke-linecap="round"/>
+        </svg>
+        展开查看
+      \`;
+      expandBtn.onclick = () => openFullWaveform(vcdFilePath);
+
+      header.appendChild(title);
+      header.appendChild(expandBtn);
+
+      // 内容区域 - 创建一个唯一ID的容器用于显示波形
+      const content = document.createElement('div');
+      content.className = 'waveform-preview-content';
+
+      const miniViewerId = 'waveform-mini-' + Date.now();
+      const miniViewer = document.createElement('div');
+      miniViewer.id = miniViewerId;
+      miniViewer.className = 'waveform-mini-viewer';
+
+      // 添加加载提示
+      const loadingDiv = document.createElement('div');
+      loadingDiv.className = 'waveform-loading';
+      loadingDiv.textContent = '正在加载波形预览...';
+      miniViewer.appendChild(loadingDiv);
+
+      content.appendChild(miniViewer);
+
+      previewDiv.appendChild(header);
+      previewDiv.appendChild(content);
+
+      // 异步加载波形数据
+      loadMiniWaveform(miniViewerId, vcdFilePath, loadingDiv);
+
+      return previewDiv;
+    }
+
+    /**
+     * 加载迷你波形预览
+     */
+    async function loadMiniWaveform(containerId, vcdFilePath, loadingDiv) {
+      try {
+        // 请求 VCD 文件信息
+        vscode.postMessage({
+          command: 'getVCDInfo',
+          vcdFilePath: vcdFilePath,
+          containerId: containerId
+        });
+      } catch (error) {
+        console.error('加载波形预览失败:', error);
+        loadingDiv.textContent = '波形预览加载失败';
+        loadingDiv.style.color = 'var(--vscode-errorForeground)';
+      }
+    }
+
+    /**
+     * 渲染波形预览信息
+     */
+    function renderWaveformInfo(containerId, vcdInfo) {
+      const container = document.getElementById(containerId);
+      if (!container) return;
+
+      // 清空容器
+      container.innerHTML = '';
+
+      // 绘制真实波形
+      const waveformSvg = document.createElement('div');
+      waveformSvg.innerHTML = drawRealWaveform(vcdInfo.signals || []);
+
+      container.appendChild(waveformSvg);
+    }
+
+    /**
+     * 绘制真实波形
+     */
+    function drawRealWaveform(signals) {
+      if (!signals || signals.length === 0) {
+        return \`
+          <svg width="100%" height="80" viewBox="0 0 800 80" style="background: var(--vscode-editor-background);">
+            <text x="400" y="40" fill="var(--vscode-descriptionForeground)" font-size="12" text-anchor="middle">
+              无波形数据
+            </text>
+          </svg>
+        \`;
+      }
+
+      const svgWidth = 800;
+      const svgHeight = Math.max(80, signals.length * 30 + 20);
+      const signalHeight = 20;
+      const signalSpacing = 30;
+      const leftMargin = 80;
+      const rightMargin = 20;
+      const waveformWidth = svgWidth - leftMargin - rightMargin;
+
+      const colors = ['var(--vscode-charts-blue)', 'var(--vscode-charts-green)', 'var(--vscode-charts-orange)'];
+
+      let svgContent = \`<svg width="100%" height="\${svgHeight}" viewBox="0 0 \${svgWidth} \${svgHeight}" style="background: var(--vscode-editor-background);">\`;
+
+      // 绘制每个信号
+      signals.forEach((signal, index) => {
+        const y = 10 + index * signalSpacing;
+        const color = colors[index % colors.length];
+
+        // 绘制信号名称
+        svgContent += \`<text x="5" y="\${y + signalHeight / 2 + 4}" fill="var(--vscode-foreground)" font-size="10" opacity="0.8">\${signal.name}</text>\`;
+
+        // 如果没有值变化数据，显示提示
+        if (!signal.values || signal.values.length === 0) {
+          svgContent += \`<text x="\${leftMargin + waveformWidth / 2}" y="\${y + signalHeight / 2 + 4}" fill="var(--vscode-descriptionForeground)" font-size="9" text-anchor="middle" opacity="0.5">无数据</text>\`;
+          return;
+        }
+
+        // 计算时间范围
+        const times = signal.values.map(v => v.time);
+        const minTime = Math.min(...times);
+        const maxTime = Math.max(...times);
+        const timeRange = maxTime - minTime || 1;
+
+        // 绘制波形
+        let pathData = '';
+        let lastX = leftMargin;
+        let lastValue = signal.values[0].value;
+
+        signal.values.forEach((point, i) => {
+          const x = leftMargin + ((point.time - minTime) / timeRange) * waveformWidth;
+          const value = point.value;
+
+          if (signal.width === 1) {
+            // 单比特信号 - 绘制数字波形
+            const yHigh = y;
+            const yLow = y + signalHeight;
+            const currentY = (value === '1') ? yHigh : yLow;
+
+            if (i === 0) {
+              pathData = \`M \${x} \${currentY}\`;
+            } else {
+              // 绘制垂直跳变
+              const prevY = (lastValue === '1') ? yHigh : yLow;
+              if (prevY !== currentY) {
+                pathData += \` L \${x} \${prevY} L \${x} \${currentY}\`;
+              } else {
+                pathData += \` L \${x} \${currentY}\`;
+              }
+            }
+
+            lastValue = value;
+            lastX = x;
+          } else {
+            // 多比特信号 - 绘制总线波形（梯形）
+            const yTop = y + 5;
+            const yBottom = y + signalHeight - 5;
+            const transitionWidth = 5;
+
+            if (i === 0) {
+              pathData = \`M \${x} \${yTop + (yBottom - yTop) / 2}\`;
+            } else {
+              // 绘制梯形过渡
+              pathData += \` L \${x - transitionWidth} \${yTop} L \${x} \${yTop + (yBottom - yTop) / 2}\`;
+            }
+
+            lastX = x;
+          }
+        });
+
+        // 延伸到右边界
+        if (signal.width === 1) {
+          const lastY = (lastValue === '1') ? y : (y + signalHeight);
+          pathData += \` L \${leftMargin + waveformWidth} \${lastY}\`;
+        } else {
+          const yMid = y + signalHeight / 2;
+          pathData += \` L \${leftMargin + waveformWidth} \${yMid}\`;
+        }
+
+        svgContent += \`<path d="\${pathData}" stroke="\${color}" stroke-width="1.5" fill="none"/>\`;
+      });
+
+      // 绘制时间轴
+      const timeAxisY = svgHeight - 5;
+      svgContent += \`<line x1="\${leftMargin}" y1="\${timeAxisY}" x2="\${leftMargin + waveformWidth}" y2="\${timeAxisY}" stroke="var(--vscode-foreground)" stroke-width="1" opacity="0.2"/>\`;
+
+      svgContent += \`</svg>\`;
+
+      return svgContent;
+    }
+
+    /**
+     * 打开完整波形查看器
+     */
+    function openFullWaveform(vcdFilePath) {
+      vscode.postMessage({
+        command: 'openWaveformViewer',
+        vcdFilePath: vcdFilePath
+      });
+    }
+
+    /**
+     * 在消息中添加波形预览
+     */
+    function addWaveformPreviewToMessage(messageDiv, vcdFilePath, fileName) {
+      const preview = createWaveformPreview(vcdFilePath, fileName);
+      messageDiv.appendChild(preview);
+    }
+  `;
+}
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index 6551c7c..a6b7327 100644
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@@ -1,3 +1,5 @@
+import { getWaveformPreviewContent, getWaveformPreviewScript } from './waveformPreviewContent';
+
 /**
  * 获取 WebView 面板的 HTML 内容
  */
@@ -381,6 +383,7 @@ export function getWebviewContent(iconUri?: string): string {
       border-radius: 4px;
       margin-top: 10px;
     }
+    ${getWaveformPreviewContent()}
     .file-editor-section {
       margin-bottom: 15px;
       padding: 15px;
@@ -954,6 +957,23 @@ export function getWebviewContent(iconUri?: string): string {
         case 'receiveMessage':
           addMessage(message.text, 'bot');
           break;
+        case 'vcdGenerated':
+          // VCD 文件生成成功，显示带波形预览的消息
+          const messageDiv = document.createElement('div');
+          messageDiv.className = 'message bot-message';
+
+          const messageContent = document.createElement('div');
+          messageContent.textContent = message.text;
+          messageDiv.appendChild(messageContent);
+
+          // 添加波形预览组件
+          if (message.vcdFilePath && message.fileName) {
+            addWaveformPreviewToMessage(messageDiv, message.vcdFilePath, message.fileName);
+          }
+
+          messagesEl.appendChild(messageDiv);
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+          break;
         case 'fileContent':
           displayFileContent(message.content, message.filePath);
           break;
@@ -969,6 +989,12 @@ export function getWebviewContent(iconUri?: string): string {
         case 'fileUpdateError':
           addMessage(\`❌ \${message.error}\`, 'bot');
           break;
+        case 'vcdInfo':
+          // 接收到 VCD 文件信息，渲染波形预览
+          if (message.containerId && message.vcdInfo) {
+            renderWaveformInfo(message.containerId, message.vcdInfo);
+          }
+          break;
       }
     });
 
@@ -992,6 +1018,8 @@ export function getWebviewContent(iconUri?: string): string {
     autoResizeTextarea();
 
     messageInput.focus();
+
+    ${getWaveformPreviewScript()}
   </script>
 </body>
 </html>`;

From f18ca4fb9ce50e39cdad7117332190c77dd73a62 Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 17 Dec 2025 09:48:45 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E4=BC=9A=E8=AF=9D?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=20+=20?=
 =?UTF-8?q?=E6=96=B0=E5=BC=80=E4=BC=9A=E8=AF=9D=E5=8A=9F=E8=83=BD=20-=20?=
 =?UTF-8?q?=E8=BF=98=E4=BC=98=E5=8C=96=E4=BA=86=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=88=A0=E9=99=A4=E4=BA=86=E8=AF=BB?=
 =?UTF-8?q?=E5=8F=96=E6=96=87=E4=BB=B6=E7=9A=84=E4=BB=A5=E5=8F=8A=E6=B2=A1?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/panels/ICHelperPanel.ts         |  18 +-
 src/views/conversationHistoryBar.ts | 308 ++++++++++++++++++++++++++++
 src/views/webviewContent.ts         | 109 +++++++---
 3 files changed, 399 insertions(+), 36 deletions(-)
 create mode 100644 src/views/conversationHistoryBar.ts

diff --git a/src/panels/ICHelperPanel.ts b/src/panels/ICHelperPanel.ts
index 31a751c..69e18f3 100644
--- a/src/panels/ICHelperPanel.ts
+++ b/src/panels/ICHelperPanel.ts
@@ -13,12 +13,12 @@ import { VCDViewerPanel } from "./VCDViewerPanel";
 /**
  * 创建并显示 IC 助手面板
  */
-export function showICHelperPanel(context: vscode.ExtensionContext) {
+export function showICHelperPanel(context: vscode.ExtensionContext, viewColumn?: vscode.ViewColumn) {
   // 创建WebView面板
   const panel = vscode.window.createWebviewPanel(
     "icCoder", // 面板ID
     "IC Coder", // 面板标题
-    vscode.ViewColumn.Beside, // 显示在旁边
+    viewColumn || vscode.ViewColumn.Beside, // 默认显示在旁边，但可以指定
     {
       enableScripts: true,
       retainContextWhenHidden: true,
@@ -74,6 +74,20 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
             getVCDFileInfo(panel, message.vcdFilePath, message.containerId);
           }
           break;
+        case "createNewConversation":
+          // 创建新会话 - 在当前编辑器组中打开新标签页
+          showICHelperPanel(context, panel.viewColumn);
+          break;
+        case "loadConversationHistory":
+          // 加载会话历史（暂未实现）
+          panel.webview.postMessage({
+            command: 'conversationHistory',
+            history: []
+          });
+          break;
+        case "selectConversation":
+          // 选择会话（暂未实现）
+          break;
       }
     },
     undefined,
diff --git a/src/views/conversationHistoryBar.ts b/src/views/conversationHistoryBar.ts
new file mode 100644
index 0000000..c4d82b3
--- /dev/null
+++ b/src/views/conversationHistoryBar.ts
@@ -0,0 +1,308 @@
+/**
+ * 获取会话历史栏的 HTML 内容
+ */
+export function getConversationHistoryBarContent(): string {
+  return `
+    <div class="conversation-history-bar">
+      <div class="history-dropdown-container">
+        <button class="history-dropdown-button" onclick="toggleHistoryDropdown()">
+          <span class="dropdown-label">Past Conversations</span>
+          <svg class="dropdown-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" fill="currentColor"/>
+          </svg>
+        </button>
+
+        <div class="history-dropdown-menu" id="historyDropdownMenu">
+          <div class="history-list" id="historyList">
+            <!-- 会话历史列表将在这里动态生成 -->
+          </div>
+        </div>
+      </div>
+
+      <button class="new-conversation-button" onclick="createNewConversation()" title="新建对话">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
+  `;
+}
+
+/**
+ * 获取会话历史栏的 CSS 样式
+ */
+export function getConversationHistoryBarStyles(): string {
+  return `
+    .conversation-history-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 16px;
+      background: var(--vscode-tab-activeBackground);
+      border-bottom: 1px solid var(--vscode-panel-border);
+      flex-shrink: 0;
+      min-height: 35px;
+    }
+
+    .history-dropdown-container {
+      position: relative;
+      flex: 1;
+    }
+
+    .history-dropdown-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 12px;
+      background: transparent;
+      color: var(--vscode-input-foreground);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.2s ease;
+    }
+
+    .history-dropdown-button:hover {
+      opacity: 0.8;
+    }
+
+    .dropdown-label {
+      white-space: nowrap;
+    }
+
+    .dropdown-icon {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .history-dropdown-button.active .dropdown-icon {
+      transform: rotate(180deg);
+    }
+
+    .history-dropdown-menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      min-width: 300px;
+      max-height: 400px;
+      background: var(--vscode-dropdown-background);
+      border: 1px solid var(--vscode-dropdown-border);
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      max-height: 400px;
+      overflow-y: auto;
+      z-index: 1000;
+      display: none;
+    }
+
+    .history-dropdown-menu.active {
+      display: block;
+    }
+
+    .history-list {
+      padding: 4px 0;
+    }
+
+    .history-item {
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+      border-bottom: 1px solid var(--vscode-panel-border);
+    }
+
+    .history-item:last-child {
+      border-bottom: none;
+    }
+
+    .history-item:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .history-item-title {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 4px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .history-item-time {
+      font-size: 12px;
+      opacity: 0.7;
+    }
+
+    .history-empty {
+      padding: 20px;
+      text-align: center;
+      color: var(--vscode-descriptionForeground);
+      font-size: 14px;
+    }
+
+    .new-conversation-button {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      background: transparent;
+      color: var(--vscode-foreground);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .new-conversation-button:hover {
+      opacity: 0.7;
+    }
+
+    .new-conversation-button:active {
+      opacity: 0.5;
+    }
+
+    .new-conversation-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* 滚动条样式 */
+    .history-dropdown-menu::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .history-dropdown-menu::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .history-dropdown-menu::-webkit-scrollbar-thumb {
+      background: rgba(128, 128, 128, 0.5);
+      border-radius: 4px;
+    }
+
+    .history-dropdown-menu::-webkit-scrollbar-thumb:hover {
+      background: rgba(128, 128, 128, 0.7);
+    }
+  `;
+}
+
+/**
+ * 获取会话历史栏的 JavaScript 脚本
+ */
+export function getConversationHistoryBarScript(): string {
+  return `
+    // 会话历史相关变量
+    let conversationHistory = [];
+    let currentConversationId = null;
+
+    // 切换历史记录下拉菜单
+    function toggleHistoryDropdown() {
+      const menu = document.getElementById('historyDropdownMenu');
+      const button = document.querySelector('.history-dropdown-button');
+
+      if (menu.classList.contains('active')) {
+        menu.classList.remove('active');
+        button.classList.remove('active');
+      } else {
+        menu.classList.add('active');
+        button.classList.add('active');
+        // 加载会话历史
+        loadConversationHistory();
+      }
+    }
+
+    // 加载会话历史
+    function loadConversationHistory() {
+      vscode.postMessage({ command: 'loadConversationHistory' });
+    }
+
+    // 渲染会话历史列表
+    function renderConversationHistory(history) {
+      conversationHistory = history;
+      const historyList = document.getElementById('historyList');
+
+      if (!history || history.length === 0) {
+        historyList.innerHTML = '<div class="history-empty">暂无会话历史</div>';
+        return;
+      }
+
+      historyList.innerHTML = history.map(item => \`
+        <div class="history-item"
+             onclick="selectConversation('\${item.id}')">
+          <div class="history-item-title">\${item.title || '未命名会话'}</div>
+          <div class="history-item-time">\${formatTime(item.timestamp)}</div>
+        </div>
+      \`).join('');
+    }
+
+    // 选择会话
+    function selectConversation(conversationId) {
+      currentConversationId = conversationId;
+      vscode.postMessage({
+        command: 'selectConversation',
+        conversationId: conversationId
+      });
+
+      // 关闭下拉菜单
+      const menu = document.getElementById('historyDropdownMenu');
+      const button = document.querySelector('.history-dropdown-button');
+      menu.classList.remove('active');
+      button.classList.remove('active');
+    }
+
+    // 创建新会话
+    function createNewConversation() {
+      vscode.postMessage({ command: 'createNewConversation' });
+    }
+
+    // 格式化时间
+    function formatTime(timestamp) {
+      const date = new Date(timestamp);
+      const now = new Date();
+      const diff = now - date;
+
+      // 小于1分钟
+      if (diff < 60000) {
+        return '刚刚';
+      }
+      // 小于1小时
+      if (diff < 3600000) {
+        return Math.floor(diff / 60000) + '分钟前';
+      }
+      // 小于1天
+      if (diff < 86400000) {
+        return Math.floor(diff / 3600000) + '小时前';
+      }
+      // 小于7天
+      if (diff < 604800000) {
+        return Math.floor(diff / 86400000) + '天前';
+      }
+
+      // 超过7天显示具体日期
+      return date.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      });
+    }
+
+    // 点击外部关闭下拉菜单
+    document.addEventListener('click', (event) => {
+      const container = document.querySelector('.history-dropdown-container');
+      const menu = document.getElementById('historyDropdownMenu');
+      const button = document.querySelector('.history-dropdown-button');
+
+      if (menu && menu.classList.contains('active')) {
+        if (!container.contains(event.target)) {
+          menu.classList.remove('active');
+          button.classList.remove('active');
+        }
+      }
+    });
+  `;
+}
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index a6b7327..271f4d0 100644
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@@ -1,4 +1,12 @@
-import { getWaveformPreviewContent, getWaveformPreviewScript } from './waveformPreviewContent';
+import {
+  getWaveformPreviewContent,
+  getWaveformPreviewScript,
+} from "./waveformPreviewContent";
+import {
+  getConversationHistoryBarContent,
+  getConversationHistoryBarStyles,
+  getConversationHistoryBarScript,
+} from "./conversationHistoryBar";
 
 /**
  * 获取 WebView 面板的 HTML 内容
@@ -16,7 +24,7 @@ export function getWebviewContent(iconUri?: string): string {
       background: var(--vscode-editor-background);
       color: var(--vscode-foreground);
       margin: 0;
-      padding: 20px;
+      padding: 0;
       height: 100vh;
       box-sizing: border-box;
       display: flex;
@@ -24,9 +32,16 @@ export function getWebviewContent(iconUri?: string): string {
     }
     .header {
       text-align: center;
-      margin-bottom: 20px;
-      padding-bottom: 15px;
-      border-bottom: 1px solid var(--vscode-panel-border);
+      padding: 20px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+    }
+    .header.hidden {
+      display: none;
     }
     .header h1 {
       color: var(--vscode-button-background);
@@ -38,6 +53,7 @@ export function getWebviewContent(iconUri?: string): string {
       flex-direction: column;
       min-height: 0;
       overflow: hidden;
+      padding: 0 20px 20px 20px;
     }
     .messages {
       flex: 1;
@@ -384,6 +400,7 @@ export function getWebviewContent(iconUri?: string): string {
       margin-top: 10px;
     }
     ${getWaveformPreviewContent()}
+    ${getConversationHistoryBarStyles()}
     .file-editor-section {
       margin-bottom: 15px;
       padding: 15px;
@@ -544,6 +561,7 @@ export function getWebviewContent(iconUri?: string): string {
   </style>
 </head>
 <body>
+  ${getConversationHistoryBarContent()}
   <div class="header">
     <div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
       <img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
@@ -553,35 +571,7 @@ export function getWebviewContent(iconUri?: string): string {
   </div>
 
   <div class="chat-container">
-    <div class="file-reader-section">
-      <h3>📁 文件读取</h3>
-      <div class="file-input-group">
-        <input
-          type="text"
-          id="filePathInput"
-          placeholder="输入文件路径（相对或绝对路径）..."
-        />
-        <button onclick="readFile()">读取文件</button>
-      </div>
-      <div id="fileContent" class="file-content empty">
-        文件内容将在这里显示...
-      </div>
-      <div id="errorMessage" style="display: none;"></div>
-    </div>
-
-    <div id="fileEditorSection" class="file-editor-section">
-      <h3>✏️ 编辑文件: <span id="editingFileName"></span></h3>
-      <textarea id="fileEditorTextarea" class="file-editor-textarea"></textarea>
-      <div class="editor-actions">
-        <button onclick="saveFile()">保存修改</button>
-        <button onclick="cancelEdit()" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">取消</button>
-      </div>
-    </div>
-    <div id="messages" class="messages">
-      <div class="message bot-message">
-        👋 你好！我是 IC Coder 助手，可以帮你生成代码、回答问题。
-      </div>
-    </div>
+    <div id="messages" class="messages"></div>
 
     <div class="quick-actions">
       <button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
@@ -823,10 +813,20 @@ export function getWebviewContent(iconUri?: string): string {
         div.appendChild(actionsDiv);
       } else {
         div.textContent = text;
+        // 当添加用户消息时，隐藏 header
+        hideHeaderIfNeeded();
       }
 
       messagesEl.appendChild(div);
       messagesEl.scrollTop = messagesEl.scrollHeight;
+
+      // 添加消息后检查 header 显示状态
+      checkHeaderVisibility();
+    }
+
+    // 检查是否需要隐藏 header
+    function hideHeaderIfNeeded() {
+      checkHeaderVisibility();
     }
 
     function copyMessage(text, button) {
@@ -995,6 +995,32 @@ export function getWebviewContent(iconUri?: string): string {
             renderWaveformInfo(message.containerId, message.vcdInfo);
           }
           break;
+        case 'conversationHistory':
+          // 接收到会话历史数据
+          if (message.history) {
+            renderConversationHistory(message.history);
+          }
+          break;
+        case 'conversationLoaded':
+          // 会话加载成功，清空当前消息并显示历史消息
+          messagesEl.innerHTML = '';
+          if (message.messages && message.messages.length > 0) {
+            message.messages.forEach(msg => {
+              addMessage(msg.text, msg.sender);
+            });
+          }
+          currentConversationId = message.conversationId;
+          break;
+        case 'newConversationCreated':
+          // 新会话创建成功，清空消息区域
+          messagesEl.innerHTML = '';
+          currentConversationId = message.conversationId;
+          // 显示 header
+          const header = document.querySelector('.header');
+          if (header) {
+            header.classList.remove('hidden');
+          }
+          break;
       }
     });
 
@@ -1017,9 +1043,24 @@ export function getWebviewContent(iconUri?: string): string {
     // 初始化时调整一次高度
     autoResizeTextarea();
 
+    // 初始化时检查是否需要显示 header
+    checkHeaderVisibility();
+
     messageInput.focus();
 
+    // 检查 header 显示状态
+    function checkHeaderVisibility() {
+      const allMessages = messagesEl.querySelectorAll('.message');
+      const header = document.querySelector('.header');
+      if (allMessages.length > 0 && header) {
+        header.classList.add('hidden');
+      } else if (header) {
+        header.classList.remove('hidden');
+      }
+    }
+
     ${getWaveformPreviewScript()}
+    ${getConversationHistoryBarScript()}
   </script>
 </body>
 </html>`;

From b0e199589705b8a89a9732b155909dcf1b6c2d70 Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 17 Dec 2025 10:03:43 +0800
Subject: [PATCH 3/9] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96=E5=B0=8F=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/webviewContent.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index 271f4d0..3674dbe 100644
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@@ -195,6 +195,7 @@ export function getWebviewContent(iconUri?: string): string {
       align-items: center;
       justify-content: space-between;
       gap: 10px;
+      margin-bottom: -17px;
     }
     .mode-selector {
       display: flex;
@@ -208,12 +209,13 @@ export function getWebviewContent(iconUri?: string): string {
     }
     .mode-selector select {
       padding: 2px 4px;
-      background: transparent;
+      background: var(--vscode-input-background);
       color: var(--vscode-foreground);
       border: none;
       cursor: pointer;
       font-size: 12px;
       outline: none;
+      border-radius: 4px;
     }
     .mode-selector select:hover {
       background: var(--vscode-list-hoverBackground);

From 10f0877a5e32f81be27e2c4917635c8bb7ce3155 Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 24 Dec 2025 10:01:53 +0800
Subject: [PATCH 4/9] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DAI=E8=AF=A2?=
 =?UTF-8?q?=E9=97=AE=E6=97=B6=E9=80=89=E9=A1=B9=E7=82=B9=E5=87=BB=E5=90=8E?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=8A=B6=E6=80=81=E4=B8=A2=E5=A4=B1=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 answeredQuestions Map 存储已回答问题的状态
- 在重新渲染时恢复选中状态和 answered 类
- 已回答的问题自动隐藏输入框并禁用点击事件
- 确保用户选择在页面更新时保持显示
---
 .vscode/settings.json           |    4 +-
 package.json                    |    2 +-
 src/config/settings.ts          |   20 +-
 src/services/dialogService.ts   |   19 +
 src/services/userInteraction.ts |   11 +-
 src/utils/messageHandler.ts     |   47 +-
 src/views/inputArea.ts          |  547 +++++++++++++
 src/views/messageArea.ts        | 1068 +++++++++++++++++++++++++
 src/views/webviewContent.ts     | 1303 +++----------------------------
 9 files changed, 1763 insertions(+), 1258 deletions(-)
 create mode 100644 src/views/inputArea.ts
 create mode 100644 src/views/messageArea.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 16a5c02..20d666f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,7 @@
 		"dist": true // set this to false to include "dist" folder in search results
 	},
 	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-	"typescript.tsc.autoDetect": "off"
+	"typescript.tsc.autoDetect": "off",
+	// IC Coder 后端服务地址
+	"icCoder.backendUrl": "http://192.168.1.108:2233"
 }
diff --git a/package.json b/package.json
index aad18aa..5a8eb53 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
       "properties": {
         "icCoder.backendUrl": {
           "type": "string",
-          "default": "http://localhost:2233",
+          "default": "http://192.168.1.108:2233",
           "description": "后端服务地址"
         },
         "icCoder.timeout": {
diff --git a/src/config/settings.ts b/src/config/settings.ts
index f5348f3..e6c041f 100644
--- a/src/config/settings.ts
+++ b/src/config/settings.ts
@@ -2,7 +2,7 @@
  * 配置管理
  * 从 VSCode 设置读取配置项
  */
-import * as vscode from 'vscode';
+import * as vscode from "vscode";
 
 /** 配置项接口 */
 export interface IccoderConfig {
@@ -16,21 +16,21 @@ export interface IccoderConfig {
 
 /** 默认配置 */
 const DEFAULT_CONFIG: IccoderConfig = {
-  backendUrl: 'http://localhost:8080',
+  backendUrl: "http://localhost:8080",
   timeout: 60000,
-  userId: 'default-user'
+  userId: "default-user",
 };
 
 /**
  * 获取配置项
  */
 export function getConfig(): IccoderConfig {
-  const config = vscode.workspace.getConfiguration('icCoder');
+  const config = vscode.workspace.getConfiguration("icCoder");
 
   return {
-    backendUrl: config.get<string>('backendUrl', DEFAULT_CONFIG.backendUrl),
-    timeout: config.get<number>('timeout', DEFAULT_CONFIG.timeout),
-    userId: config.get<string>('userId', DEFAULT_CONFIG.userId)
+    backendUrl: config.get<string>("backendUrl", DEFAULT_CONFIG.backendUrl),
+    timeout: config.get<number>("timeout", DEFAULT_CONFIG.timeout),
+    userId: config.get<string>("userId", DEFAULT_CONFIG.userId),
   };
 }
 
@@ -40,7 +40,9 @@ export function getConfig(): IccoderConfig {
 export function getApiUrl(path: string): string {
   const { backendUrl } = getConfig();
   // 确保 URL 格式正确
-  const baseUrl = backendUrl.endsWith('/') ? backendUrl.slice(0, -1) : backendUrl;
-  const apiPath = path.startsWith('/') ? path : `/${path}`;
+  const baseUrl = backendUrl.endsWith("/")
+    ? backendUrl.slice(0, -1)
+    : backendUrl;
+  const apiPath = path.startsWith("/") ? path : `/${path}`;
   return `${baseUrl}${apiPath}`;
 }
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index a106a01..4ef9bd8 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -37,6 +37,8 @@ export interface DialogCallbacks {
   onToolError?: (toolName: string, error: string) => void;
   /** 显示问题（ask_user） */
   onQuestion?: (askId: string, question: string, options: string[]) => void;
+  /** 实时更新段落（流式过程中） */
+  onSegmentUpdate?: (segments: MessageSegment[]) => void;
   /** 对话完成，返回所有段落 */
   onComplete?: (segments: MessageSegment[]) => void;
   /** 错误 */
@@ -155,6 +157,8 @@ export class DialogSession {
         this.appendText(data.text);
         console.log('[DialogSession] onTextDelta, 累积文本长度:', this.accumulatedText.length);
         callbacks.onText?.(this.accumulatedText, true);
+        // 实时发送段落更新
+        callbacks.onSegmentUpdate?.(this.segments);
       },
 
       onToolCall: async (data: ToolCallRequest) => {
@@ -166,16 +170,22 @@ export class DialogSession {
           console.log('[DialogSession] onToolCall: 跳过重复的工具段落:', toolName);
         } else {
           this.addToolSegment(toolName, 'running');
+          // 实时发送段落更新
+          callbacks.onSegmentUpdate?.(this.segments);
         }
         // 注意：不在这里调用 callbacks.onToolStart，避免与 onToolStart 事件重复
         try {
           await executeToolCall(data, this.toolContext);
           this.updateToolSegment(toolName, 'success', '执行完成');
+          // 实时发送段落更新
+          callbacks.onSegmentUpdate?.(this.segments);
           // 也不调用 callbacks.onToolComplete，避免重复
         } catch (error) {
           const errorMsg = error instanceof Error ? error.message : '未知错误';
           this.updateToolSegment(toolName, 'error', errorMsg);
           callbacks.onToolError?.(toolName, errorMsg);
+          // 实时发送段落更新
+          callbacks.onSegmentUpdate?.(this.segments);
         }
       },
 
@@ -187,6 +197,8 @@ export class DialogSession {
           console.log('[DialogSession] 跳过重复的工具段落:', data.tool_name);
         } else {
           this.addToolSegment(data.tool_name, 'running');
+          // 实时发送段落更新
+          callbacks.onSegmentUpdate?.(this.segments);
         }
         console.log('[DialogSession] segments 数量:', this.segments.length);
         callbacks.onToolStart?.(data.tool_name);
@@ -195,11 +207,15 @@ export class DialogSession {
       onToolComplete: (data) => {
         this.updateToolSegment(data.tool_name, 'success', data.result);
         callbacks.onToolComplete?.(data.tool_name, data.result);
+        // 实时发送段落更新
+        callbacks.onSegmentUpdate?.(this.segments);
       },
 
       onToolError: (data) => {
         this.updateToolSegment(data.tool_name, 'error', data.error);
         callbacks.onToolError?.(data.tool_name, data.error);
+        // 实时发送段落更新
+        callbacks.onSegmentUpdate?.(this.segments);
       },
 
       onAskUser: async (data: AskUserEvent) => {
@@ -210,6 +226,9 @@ export class DialogSession {
           question: data.question,
           options: data.options
         });
+        // 实时发送段落更新（包含问题）
+        callbacks.onSegmentUpdate?.(this.segments);
+        // 同时调用 onQuestion 用于更新状态栏等
         callbacks.onQuestion?.(data.askId, data.question, data.options);
         try {
           await userInteractionManager.handleAskUser(data, this.taskId);
diff --git a/src/services/userInteraction.ts b/src/services/userInteraction.ts
index f22455d..f5e9a21 100644
--- a/src/services/userInteraction.ts
+++ b/src/services/userInteraction.ts
@@ -42,15 +42,8 @@ export class UserInteractionManager {
 
     console.log(`[UserInteraction] 收到问题: askId=${askId}, question=${question}`);
 
-    // 通过 WebView 显示问题
-    if (this.webviewPanel) {
-      this.webviewPanel.webview.postMessage({
-        command: 'showQuestion',
-        askId,
-        question,
-        options
-      });
-    }
+    // 注意：问题显示已经通过 dialogService 的 onSegmentUpdate 统一处理
+    // 这里不再单独发送 showQuestion 命令，避免重复显示
 
     // 创建 Promise 等待用户回答
     return new Promise((resolve, reject) => {
diff --git a/src/utils/messageHandler.ts b/src/utils/messageHandler.ts
index 500ab75..b6cdb3f 100644
--- a/src/utils/messageHandler.ts
+++ b/src/utils/messageHandler.ts
@@ -116,23 +116,19 @@ async function handleUserMessageWithBackend(
   return new Promise((resolve, reject) => {
     currentSession!.sendMessage(text, {
       onText: (fullText, isStreaming) => {
-        if (isStreaming) {
-          // 流式更新消息
-          panel.webview.postMessage({
-            command: "updateStreamingMessage",
-            text: fullText,
-          });
-        }
-        // 注意：完成时通过 onComplete 发送分段消息
+        // 不再单独处理文本，统一通过 onSegmentUpdate 处理
+      },
+
+      onSegmentUpdate: (segments) => {
+        // 实时发送段落更新，按后端返回顺序展示
+        panel.webview.postMessage({
+          command: "updateSegments",
+          segments: segments,
+        });
       },
 
       onToolStart: (toolName) => {
-        // 实时显示工具状态
-        panel.webview.postMessage({
-          command: "toolStart",
-          toolName,
-        });
-        // 同时更新状态栏
+        // 更新状态栏
         panel.webview.postMessage({
           command: "updateStatus",
           text: `正在执行 ${toolName}...`,
@@ -141,25 +137,15 @@ async function handleUserMessageWithBackend(
       },
 
       onToolComplete: (toolName, result) => {
-        // 实时更新工具状态
-        panel.webview.postMessage({
-          command: "toolComplete",
-          toolName,
-          result,
-        });
+        // 工具完成，不需要单独处理，通过 onSegmentUpdate 统一更新
       },
 
       onToolError: (toolName, error) => {
-        // 实时显示工具错误
-        panel.webview.postMessage({
-          command: "toolError",
-          toolName,
-          error,
-        });
+        // 工具错误，不需要单独处理，通过 onSegmentUpdate 统一更新
       },
 
       onQuestion: (askId, question, options) => {
-        // 问题会在分段消息中显示，这里只更新状态栏
+        // 只更新状态栏，问题显示由 onSegmentUpdate 统一处理
         panel.webview.postMessage({
           command: "updateStatus",
           text: "等待用户回答...",
@@ -173,13 +159,14 @@ async function handleUserMessageWithBackend(
           command: "hideStatus",
         });
 
-        // 发送分段消息
-        console.log('[MessageHandler] 发送分段消息, 段落数:', segments.length);
+        // 最后一次发送完整的段落
+        console.log('[MessageHandler] 对话完成, 段落数:', segments.length);
         console.log('[MessageHandler] segments 内容:', JSON.stringify(segments));
 
         const result = await panel.webview.postMessage({
-          command: "receiveSegments",
+          command: "updateSegments",
           segments: segments,
+          isComplete: true,
         });
         console.log('[MessageHandler] postMessage 返回值:', result);
 
diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts
new file mode 100644
index 0000000..ad52f4c
--- /dev/null
+++ b/src/views/inputArea.ts
@@ -0,0 +1,547 @@
+import { getWaveformPreviewContent } from "./waveformPreviewContent";
+
+/**
+ * 获取输入区域的 HTML 内容
+ */
+export function getInputAreaContent(): string {
+  return `
+    <div class="input-area">
+      <div class="input-group">
+        <div class="input-wrapper">
+          <textarea
+            id="messageInput"
+            placeholder="输入您的问题..."
+            onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
+          ></textarea>
+          <div class="input-bottom-row">
+            <div class="mode-selector">
+              <div class="tooltip">
+                <select id="modeSelect">
+                  <option value="agent" selected>Agent</option>
+                  <option value="ask">Ask</option>
+                  <option value="plan">Plan</option>
+                </select>
+                <span class="tooltiptext">切换模型</span>
+              </div>
+            </div>
+            <div class="input-actions">
+              <!-- 上下文显示 -->
+              <div class="context-display">
+                <div class="context-info" onclick="toggleContextPanel()">
+                  <div class="database-icon">
+                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="db-svg">
+                      <!-- 数据库容器主体 - 底层灰色 -->
+                      <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#94a3b8" class="db-body"/>
+
+                      <!-- 填充进度效果 - 从下往上填充蓝色 -->
+                      <defs>
+                        <mask id="fill-mask">
+                          <rect x="0" y="0" width="1024" height="1024" id="fillRect" fill="white"/>
+                        </mask>
+                      </defs>
+
+                      <g mask="url(#fill-mask)">
+                        <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#409eff" class="db-fill"/>
+                      </g>
+                    </svg>
+                  </div>
+                  <span class="context-percentage" id="contextPercentage">0%</span>
+                </div>
+
+                <!-- 上下文信息弹窗 -->
+                <div id="contextPanel" class="context-panel">
+                  <div class="context-panel-content">
+                    <div class="context-info-text" id="contextInfoText">
+                      0k / 200k 已用上下文
+                    </div>
+                    <button class="compress-button" onclick="compressConversation()">
+                      压缩会话
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 一键优化按钮 -->
+              <div class="tooltip">
+                <button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
+                  <svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
+                </button>
+                <span class="tooltiptext" id="optimizeTooltip">一键优化</span>
+              </div>
+
+              <button onclick="sendMessage()">发送</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 获取输入区域的样式
+ */
+export function getInputAreaStyles(): string {
+  return `
+    .input-area {
+      border-top: 1px solid var(--vscode-panel-border);
+      padding-top: 15px;
+      flex-shrink: 0;
+    }
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+    }
+    .input-group:hover {
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
+    }
+    .input-group:focus-within {
+      border-color: var(--vscode-focusBorder);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2);
+    }
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+    }
+    .input-bottom-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      margin-bottom: -17px;
+    }
+    .mode-selector {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+    .input-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .mode-selector select {
+      padding: 2px 4px;
+      background: var(--vscode-input-background);
+      color: var(--vscode-foreground);
+      border: none;
+      cursor: pointer;
+      font-size: 12px;
+      outline: none;
+      border-radius: 4px;
+    }
+    .mode-selector select:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+    /* Tooltip 样式 */
+    .tooltip {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip .tooltiptext {
+      visibility: hidden;
+      width: auto;
+      background: #1e1e1e;
+      color: #ffffff;
+      text-align: center;
+      border-radius: 6px;
+      padding: 6px 12px;
+      position: absolute;
+      z-index: 1000;
+      bottom: 150%;
+      left: 50%;
+      transform: translateX(-50%) translateY(10px);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      font-size: 12px;
+      font-weight: 500;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
+      white-space: nowrap;
+      letter-spacing: 0.3px;
+    }
+    .tooltip .tooltiptext::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -6px;
+      border-width: 6px;
+      border-style: solid;
+      border-color: #1e1e1e transparent transparent transparent;
+    }
+    .tooltip .tooltiptext::before {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -7px;
+      border-width: 7px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
+      z-index: -1;
+    }
+    .tooltip:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    textarea {
+      width: 100%;
+      padding: 10px;
+      background: transparent;
+      color: var(--vscode-input-foreground);
+      border: none;
+      border-radius: 4px;
+      font-family: inherit;
+      resize: none;
+      min-height: 40px;
+      max-height: 200px;
+      outline: none;
+      box-sizing: border-box;
+      overflow-y: auto;
+      line-height: 1.5;
+    }
+    /* 简洁的滚动条样式 */
+    textarea::-webkit-scrollbar {
+      width: 8px;
+    }
+    textarea::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    textarea::-webkit-scrollbar-thumb {
+      background: rgba(128, 128, 128, 0.5);
+      border-radius: 4px;
+    }
+    textarea::-webkit-scrollbar-button {
+      display: none;
+    }
+    button {
+      padding: 0 20px;
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .optimize-button {
+      padding: 8px;
+      background: transparent;
+      color: var(--vscode-foreground);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s ease;
+      width: 32px;
+      height: 32px;
+    }
+    .optimize-button:hover {
+      opacity: 0.7;
+    }
+    .optimize-button svg {
+      width: 16px;
+      height: 16px;
+    }
+    .optimize-button-wrapper {
+      display: flex;
+      align-items: flex-end;
+    }
+    /* 上下文显示样式 */
+    .context-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+    .context-info {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      height: 40px;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+      transition: opacity 0.3s ease;
+      box-shadow: none;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .context-info:hover {
+      opacity: 0.8;
+    }
+    .database-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      position: relative;
+    }
+    .db-svg {
+      width: 100%;
+      height: 100%;
+    }
+    .db-body {
+      fill: #ffffff;
+    }
+    .db-fill {
+      fill: #409eff;
+      transition: all 0.3s ease;
+    }
+    .context-percentage {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+      text-align: right;
+    }
+    /* 上下文信息弹窗样式 */
+    .context-panel {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 8px;
+      z-index: 1000;
+      animation: fadeInUp 0.2s ease-out;
+      display: none;
+    }
+    .context-panel.active {
+      display: block;
+    }
+    .context-panel::after {
+      content: "";
+      position: absolute;
+      bottom: -6px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 6px solid #ffffff;
+    }
+    .context-panel-content {
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      backdrop-filter: blur(10px);
+      min-width: 160px;
+    }
+    .context-info-text {
+      font-size: 12px;
+      color: #374151;
+      text-align: center;
+      margin-bottom: 8px;
+      white-space: nowrap;
+    }
+    .compress-button {
+      width: 100%;
+      background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      border-radius: 6px;
+      color: white;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 6px 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .compress-button:hover {
+      background: linear-gradient(145deg, #2563eb 0%, #1e40af 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+    }
+    .compress-button:active {
+      transform: translateY(0);
+    }
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+    }
+  `;
+}
+
+/**
+ * 获取输入区域的脚本
+ */
+export function getInputAreaScript(): string {
+  return `
+    // 自动调整 textarea 高度
+    function autoResizeTextarea() {
+      if (messageInput) {
+        messageInput.style.height = 'auto';
+        messageInput.style.height = messageInput.scrollHeight + 'px';
+      }
+    }
+
+    // 监听输入事件，自动调整高度
+    if (messageInput) {
+      messageInput.addEventListener('input', autoResizeTextarea);
+
+      // 初始化时调整一次高度
+      autoResizeTextarea();
+
+      // 聚焦到输入框
+      messageInput.focus();
+    }
+
+    function sendMessage() {
+      const text = messageInput.value.trim();
+      if (!text) return;
+
+      const modeSelect = document.getElementById('modeSelect');
+      const mode = modeSelect ? modeSelect.value : 'agent';
+      
+      addMessage(text, 'user');
+      vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
+      messageInput.value = '';
+      autoResizeTextarea(); // 重置输入框高度
+      messageInput.focus();
+
+      // 重置优化状态
+      resetOptimizeButton();
+    }
+
+    let isOptimized = false; // 标记是否已优化
+    let originalText = ''; // 保存原始文本用于撤回
+
+    function handleOptimize() {
+      if (isOptimized) {
+        // 撤回操作
+        messageInput.value = originalText;
+        resetOptimizeButton();
+      } else {
+        // 优化操作
+        originalText = messageInput.value; // 保存原始文本
+
+        // 使用死数据替换输入框内容
+        const optimizedTexts = [
+          '请帮我优化这段代码，提高性能和可读性',
+          '请分析这个问题并给出最佳解决方案',
+          '请帮我重构这段代码，使其更加简洁高效',
+          '请检查代码中的潜在问题并提供改进建议'
+        ];
+        const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)];
+        messageInput.value = randomText;
+
+        // 切换到撤回状态
+        isOptimized = true;
+        updateOptimizeButton();
+      }
+
+      messageInput.focus();
+      autoResizeTextarea();
+    }
+
+    function updateOptimizeButton() {
+      const optimizeIcon = document.getElementById('optimizeIcon');
+      const optimizeTooltip = document.getElementById('optimizeTooltip');
+
+      if (optimizeIcon && optimizeTooltip) {
+        // 切换为撤回图标
+        optimizeIcon.innerHTML = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
+        optimizeTooltip.textContent = '撤回';
+      }
+    }
+
+    function resetOptimizeButton() {
+      const optimizeIcon = document.getElementById('optimizeIcon');
+      const optimizeTooltip = document.getElementById('optimizeTooltip');
+
+      if (optimizeIcon && optimizeTooltip) {
+        // 切换回优化图标（星星图标）
+        optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
+        optimizeTooltip.textContent = '一键优化';
+      }
+      
+      isOptimized = false;
+      originalText = '';
+    }
+
+    // 上下文面板相关函数
+    function toggleContextPanel() {
+      const contextPanel = document.getElementById('contextPanel');
+      if (contextPanel) {
+        if (contextPanel.classList.contains('active')) {
+          contextPanel.classList.remove('active');
+        } else {
+          contextPanel.classList.add('active');
+        }
+      }
+    }
+
+    function compressConversation() {
+      // 发送压缩会话请求
+      vscode.postMessage({ command: 'compressConversation' });
+      addMessage('正在压缩会话...', 'bot');
+
+      // 关闭面板
+      const contextPanel = document.getElementById('contextPanel');
+      if (contextPanel) {
+        contextPanel.classList.remove('active');
+      }
+    }
+
+    function updateContextDisplay(currentTokens, maxTokens) {
+      const percentage = Math.min(Math.round((currentTokens / maxTokens) * 100), 100);
+
+      // 更新百分比显示
+      const contextPercentage = document.getElementById('contextPercentage');
+      if (contextPercentage) {
+        contextPercentage.textContent = percentage + '%';
+      }
+
+      // 更新详细信息
+      const contextInfoText = document.getElementById('contextInfoText');
+      if (contextInfoText) {
+        const currentK = Math.round((currentTokens / 1000) * 10) / 10;
+        const maxK = Math.round(maxTokens / 1000);
+        contextInfoText.textContent = \`\${currentK}k / \${maxK}k 已用上下文\`;
+      }
+
+      // 更新SVG填充效果（从下往上填充）
+      const fillRect = document.getElementById('fillRect');
+      if (fillRect) {
+        const fillHeight = (1024 * percentage) / 100;
+        const fillY = 1024 - fillHeight;
+        fillRect.setAttribute('y', fillY.toString());
+        fillRect.setAttribute('height', fillHeight.toString());
+      }
+    }
+
+    // 点击外部关闭上下文面板
+    document.addEventListener('click', (event) => {
+      const contextDisplay = document.querySelector('.context-display');
+      const contextPanel = document.getElementById('contextPanel');
+
+      if (contextPanel && contextPanel.classList.contains('active') && contextDisplay) {
+        if (!contextDisplay.contains(event.target)) {
+          contextPanel.classList.remove('active');
+        }
+      }
+    });
+  `;
+}
diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts
new file mode 100644
index 0000000..a70cbcf
--- /dev/null
+++ b/src/views/messageArea.ts
@@ -0,0 +1,1068 @@
+/**
+ * 消息区域模块
+ *
+ * 功能说明:
+ * - 负责聊天消息的显示和渲染
+ * - 支持用户消息和 AI 消息的不同样式
+ * - 提供消息操作功能(复制、点赞、点踩)
+ * - 支持流式消息实时更新
+ * - 支持分段消息渲染(文本、工具调用、用户问题)
+ * - 显示工具执行状态和加载指示器
+ */
+
+/**
+ * 获取消息区域的 HTML 内容
+ */
+export function getMessageAreaContent(): string {
+  return `<div id="messages" class="messages"></div>`;
+}
+
+/**
+ * 获取消息区域的样式
+ */
+export function getMessageAreaStyles(): string {
+  return `
+      .messages {
+        flex: 1;
+        overflow-y: auto;
+        margin-bottom: 15px;
+        min-height: 0;
+      }
+      .message {
+        margin-bottom: 12px;
+      }
+      .user-message {
+        padding: 10px 15px;
+        border-radius: 8px;
+        background: var(--vscode-button-secondaryBackground);
+        border: 1px solid var(--vscode-input-border);
+        margin-left: auto;
+        width: fit-content;
+        max-width: 80%;
+      }
+      .bot-message {
+        padding: 0;
+        text-align: left;
+        color: var(--vscode-foreground);
+        max-width: 100%;
+        position: relative;
+      }
+      .message-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        margin-left: 10px;
+        opacity: 0.85;
+        transition: opacity 0.2s ease;
+      }
+      .message-actions:hover {
+        opacity: 1;
+      }
+      .action-btn {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--vscode-foreground);
+        opacity: 0.9;
+        transition: opacity 0.2s ease;
+        position: relative;
+      }
+      .action-btn:hover {
+        opacity: 1;
+      }
+      .action-btn svg {
+        width: 14px;
+        height: 14px;
+      }
+      .action-btn.active {
+        color: var(--vscode-button-background);
+        opacity: 1;
+      }
+      .action-btn .action-tooltip {
+        visibility: hidden;
+        width: auto;
+        background: #1e1e1e;
+        color: #ffffff;
+        text-align: center;
+        border-radius: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 4px 8px;
+        position: absolute;
+        z-index: 1000;
+        bottom: 125%;
+        left: 50%;
+        transform: translateX(-50%) translateY(5px);
+        opacity: 0;
+        transition: all 0.2s ease;
+        font-size: 12px;white-space: nowrap;pointer-events: none;
+      }
+      .action-btn .action-tooltip::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #1e1e1e transparent transparent transparent;
+      }
+      .action-btn .action-tooltip::before {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -6px;
+        border-width: 6px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
+        z-index: -1;
+      }
+      .action-btn:hover .action-tooltip {
+        visibility: visible;
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+
+      /* 流式消息样式 */
+      .streaming .message-content {
+        border-right: 2px solid var(--vscode-focusBorder);
+        animation: blink 1s infinite;
+      }
+      @keyframes blink {
+        0%, 50% { border-color: var(--vscode-focusBorder); }
+        51%, 100% { border-color: transparent; }
+      }
+
+      /* 加载指示器样式 */
+      .loading-message {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 16px;
+        color: var(--vscode-descriptionForeground);
+      }
+      .loading-dots {
+        display: flex;
+        gap: 4px;}
+      .loading-dots span {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--vscode-focusBorder);
+        animation: loadingDot 1.4s infinite ease-in-out;
+      }
+      .loading-dots span:nth-child(1) { animation-delay: 0s; }
+      .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+      .loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+      @keyframes loadingDot {
+        0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+        40% { transform: scale(1); opacity: 1; }
+      }
+      .loading-text {
+        font-size: 13px;
+      }
+
+      /* 工具状态样式 */
+      .tool-status {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        margin: 4px 0;
+        font-size: 12px;
+        border-radius: 6px;
+        background: var(--vscode-textBlockQuote-background);
+      }
+      .tool-status.tool-start {
+        border-left: 3px solid var(--vscode-charts-blue);
+      }
+      .tool-status.tool-complete {
+        border-left: 3px solid var(--vscode-charts-green);
+      }
+      .tool-status.tool-error {
+        border-left: 3px solid var(--vscode-charts-red);
+      }
+      .tool-icon {
+        font-size: 14px;
+      }
+      .tool-name {
+        font-weight: 500;
+        color: var(--vscode-foreground);
+      }
+      .tool-status-text {
+        color: var(--vscode-descriptionForeground);
+      }
+      .tool-detail {
+        margin-top: 4px;
+        font-size: 11px;
+        color: var(--vscode-descriptionForeground);
+        white-space: pre-wrap;
+        max-height: 100px;
+        overflow-y: auto;
+      }
+
+      /* 用户问题样式 */
+      .question-message {
+        padding: 16px;
+      }
+      .question-text {
+        margin-bottom: 12px;
+        font-weight: 500;
+      }
+      .question-options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .question-option {
+        padding: 8px 16px;
+        background: var(--vscode-button-secondaryBackground);
+        color: var(--vscode-button-secondaryForeground);
+        border: 1px solid var(--vscode-button-border);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .question-option:hover {
+        background: var(--vscode-button-secondaryHoverBackground);
+      }
+      .question-option.selected {
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+      }
+      .question-message.answered .question-option:not(.selected) {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      .custom-input-container {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        margin-top: 8px;
+      }
+      .custom-input {
+        flex: 1;
+        padding: 8px 12px;
+        background: var(--vscode-input-background);
+        color: var(--vscode-input-foreground);
+        border: 1px solid var(--vscode-input-border);
+        border-radius: 6px;
+        font-size: 13px;
+      }
+      .custom-submit {
+        padding: 8px 16px;
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      .custom-submit:hover {
+        background: var(--vscode-button-hoverBackground);
+      }
+      .question-message.answered .custom-input-container {
+        display: none;
+      }
+
+      /* 分段消息样式 */
+      .segmented-message {
+        padding: 0;
+      }
+      .message-segment {
+        padding: 10px 22px;
+      }
+      .segment-text {
+        line-height: 1.6;
+      }
+
+      /* Markdown 样式 */
+      .segment-text h1,
+      .segment-text h2,
+      .segment-text h3 {
+        margin: 16px 0 8px 0;
+        font-weight: 600;
+        line-height: 1.3;
+      }
+      .segment-text h1 {
+        font-size: 1.5em;
+        border-bottom: 1px solid var(--vscode-panel-border);
+        padding-bottom: 8px;
+      }
+      .segment-text h2 {
+        font-size: 1.3em;
+      }
+      .segment-text h3 {
+        font-size: 1.1em;
+      }
+      .segment-text pre {
+        background: var(--vscode-textCodeBlock-background);
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 6px;
+        padding: 12px;
+        overflow-x: auto;
+        margin: 12px 0;
+      }
+      .segment-text code {
+        font-family: 'Courier New', Consolas, monospace;
+        font-size: 0.9em;
+      }
+      .segment-text pre code {
+        background: transparent;
+        padding: 0;
+        border: none;
+      }
+      .segment-text code:not(pre code) {
+        background: var(--vscode-textCodeBlock-background);
+        padding: 2px 6px;
+        border-radius: 3px;
+        color: var(--vscode-textPreformat-foreground);
+      }
+      .segment-text ul,
+      .segment-text ol {
+        margin: 8px 0;
+        padding-left: 24px;
+      }
+      .segment-text li {
+        margin: 4px 0;
+        line-height: 1.6;
+      }
+      .segment-text strong {
+        font-weight: 600;
+        color: var(--vscode-foreground);
+      }
+      .segment-text em {
+        font-style: italic;
+      }
+      .segment-text a {
+        color: var(--vscode-textLink-foreground);
+        text-decoration: none;
+      }
+      .segment-text a:hover {
+        text-decoration: underline;
+      }
+      .segment-text p {
+        margin: 8px 0;
+      }
+
+      .segment-tool {
+        background: var(--vscode-textBlockQuote-background);
+        border-radius: 6px;
+        margin: 8px 0;
+        padding: 10px 14px;
+      }
+      .tool-segment-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+      }
+      .tool-segment-icon {
+        font-size: 14px;
+      }
+      .tool-segment-name {
+        font-weight: 500;
+        color: var(--vscode-foreground);
+      }
+      .tool-segment-result {
+        margin-top: 6px;
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+        padding-left: 22px;
+      }
+      .segment-tool.tool-success {
+        border-left: 3px solid var(--vscode-charts-green);
+      }
+      .segment-tool.tool-error {
+        border-left: 3px solid var(--vscode-charts-red);
+      }
+      .segment-tool.tool-running {
+        border-left: 3px solid var(--vscode-charts-blue);
+      }
+      .segment-question {
+        background: var(--vscode-textBlockQuote-background);
+        border-radius: 6px;
+        margin: 8px 0;
+        padding: 12px 14px;
+        border-left: 3px solid var(--vscode-charts-orange);
+      }
+      .segment-question .question-text {
+        margin-bottom: 12px;
+        font-weight: 500;
+      }
+      .segment-question .question-options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+      .segment-question .question-option {
+        padding: 8px 16px;
+        background: var(--vscode-button-secondaryBackground);
+        color: var(--vscode-button-secondaryForeground);
+        border: 1px solid var(--vscode-button-border);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-size: 13px;
+      }
+      .segment-question .question-option:hover {
+        background: var(--vscode-button-secondaryHoverBackground);
+      }
+      .segment-question .question-option.selected {
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+      }
+      .segment-question.answered .question-option:not(.selected) {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      .segment-question .custom-input-container {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        margin-top: 8px;
+      }
+      .segment-question .custom-input {
+        flex: 1;
+        padding: 8px 12px;
+        background: var(--vscode-input-background);
+        color: var(--vscode-input-foreground);
+        border: 1px solid var(--vscode-input-border);
+        border-radius: 6px;
+        font-size: 13px;
+      }
+      .segment-question .custom-submit {
+        padding: 8px 16px;
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      .segment-question .custom-submit:hover {
+        background: var(--vscode-button-hoverBackground);
+      }
+      .segment-question.answered .custom-input-container {
+        display: none;
+      }
+      .question-segment .question-text {
+        margin-bottom: 8px;
+        font-weight: 500;
+      }
+      .question-segment .question-options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+      .question-opt {
+        padding: 4px 10px;
+        background: var(--vscode-button-secondaryBackground);
+        color: var(--vscode-button-secondaryForeground);
+        border-radius: 4px;
+        font-size: 12px;}
+    `;
+}
+
+/**
+ * 获取消息区域的脚本
+ */
+export function getMessageAreaScript(): string {
+  return `
+      // 添加消息
+      function addMessage(text, sender) {
+        const div = document.createElement('div');
+        div.className = \`message \${sender}-message\`;
+
+        if (sender === 'bot') {
+          // 创建消息内容
+          const messageContent = document.createElement('div');
+          messageContent.textContent = text;
+          div.appendChild(messageContent);
+
+          // 创建操作按钮容器
+          const actionsDiv = document.createElement('div');
+          actionsDiv.className = 'message-actions';
+
+          // 复制按钮
+          const copyBtn = document.createElement('button');
+          copyBtn.className = 'action-btn';
+          copyBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M761.088 715.3152a38.7072 38.7072 0 0 1 0-77.4144 37.4272 37.4272 0 0 0 37.4272-37.4272V265.0112a37.4272 37.4272 0 0 0-37.4272-37.4272H425.6256a37.4272 37.4272 0 0 0-37.4272 37.4272 38.7072 38.7072 0 1 1-77.4144 0 115.0976 115.0976 0 0 1 114.8416-114.8416h335.4624a115.0976 115.0976 0 0 1 114.8416 114.8416v335.4624a115.0976 115.0976 0 0 1-114.8416 114.8416z" fill="currentColor"/><path d="M589.4656 883.0976H268.1856a121.1392 121.1392 0 0 1-121.2928-121.2928v-322.56a121.1392 121.1392 0 0 1 121.2928-121.344h321.28a121.1392 121.1392 0 0 1 121.2928 121.2928v322.56c1.28 67.1232-54.1696 121.344-121.2928 121.344zM268.1856 395.3152a43.52 43.52 0 0 0-43.8784 43.8784v322.56a43.52 43.52 0 0 0 43.8784 43.8784h321.28a43.52 43.52 0 0 0 43.8784-43.8784v-322.56a43.52 43.52 0 0 0-43.8784-43.8784z" fill="currentColor"/></svg><span class="action-tooltip">复制</span>\`;
+          copyBtn.onclick = () => copyMessage(text, copyBtn);
+
+          // 点赞按钮
+          const likeBtn = document.createElement('button');
+          likeBtn.className = 'action-btn';
+          likeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M923.5 411.2c-28.6-33.9-72.1-53-116.4-51.1h-68c6.4-31.6 10.1-63.9 11.2-96v-0.8c-0.5-60.9-18.7-112-51.2-144-22.6-22.2-50.8-33.7-81.5-33.3-38.3 0-69.1 11.5-91.7 34.2-26.5 26.5-39.9 66.8-39.8 119.6 0.1 40.1-19.4 83.4-52.1 115.9-32 31.8-71.7 49.3-111.8 49.3H295.6c-3 0-6 0.3-8.9 0.8v-1.2H140.8c-39.7 0-72.2 32.5-72.2 72.2v392.9c0 39.7 32.5 72.2 72.2 72.2h146.8v-0.6c2.9 0.4 5.9 0.7 8.9 0.7h464.7c33.3-0.8 65.6-13 91.1-34.4s43.1-51.1 49.6-83.8l52.3-289.1c9.4-43.4-2.1-89.6-30.7-123.5zM147.7 843.7v-344c0-9 7.3-16.3 16.3-16.3h70.4V860H164c-9 0-16.3-7.3-16.3-16.3z m726.4-324.9l-0.2 0.6-51.7 290.3c-6.7 29.1-32.3 50.2-62.2 51.3l-4.9 0.2-0.4 0.3h-440V486h7.3c61.4 0 121-25.7 168.1-72.4 48.6-48.2 76.5-111.7 76.5-174.2-0.1-31.5 4.9-51.8 15.3-62.2 7.4-7.4 18.7-10.8 35.8-10.8h0.2c9-0.1 17.4 3.6 24.9 11 16.3 16.2 25.7 47.3 25.8 85.4-1.2 41.8-7.9 83.3-19.9 123.4l-21.6 54.3h181.5c24.5-0.6 48.2 8.9 65.1 26.1
+  16.9 17.2 25.3 40.8 23 64.9z" fill="currentColor"/></svg><span class="action-tooltip">点赞</span>\`;
+          likeBtn.onclick = () => toggleLike(likeBtn);
+
+          // 点踩按钮
+          const dislikeBtn = document.createElement('button');
+          dislikeBtn.className = 'action-btn';
+          dislikeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M360 640c60.992 40.107 88 87.381 88 149.333 0 5.611 0.427 12.864 1.579 21.462a174.933 174.933 0 0 0 11.2 42.666c19.584 48.192 60.864 83.008 119.018 85.12 28.843 2.56 60.886-3.584 91.414-25.045 58.709-41.237 81.706-117.248 69.973-230.87h48.15V640v42.667c17.173 0 38.4-2.475 61.823-10.667 66.304-23.125 107.627-84.117 84.928-162.816l-53.674-254.55a213.333 213.333 0 0 0-208.747-169.3H207.019a85.333 85.333 0 0 0-85.078 78.783l-29.546 384A85.333 85.333 0 0 0 177.493 640H360z m-61.333-109.333v24H177.493l29.526-384h91.648v360z m85.333-360h289.664a128 128 0 0 1 125.227 101.589l54.442 258.07c21.334 67.007-64 67.007-64 67.007H640c64 277.334-54.613 256-54.613 256-52.054 0-52.054-64-52.054-64 0-92.8-43.264-167.082-129.77-222.805A42.667 42.667 0 0 1 384 530.667v-360z" fill="currentColor"/></svg><span class="action-tooltip">点踩</span>\`;
+          dislikeBtn.onclick = () => toggleDislike(dislikeBtn);
+
+          actionsDiv.appendChild(copyBtn);
+          actionsDiv.appendChild(likeBtn);
+          actionsDiv.appendChild(dislikeBtn);
+
+          div.appendChild(actionsDiv);
+        } else {
+          div.textContent = text;
+          // 当添加用户消息时，隐藏 header
+          hideHeaderIfNeeded();
+        }
+
+        messagesEl.appendChild(div);
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+
+        // 添加消息后检查 header 显示状态
+        checkHeaderVisibility();
+      }
+
+      // 检查是否需要隐藏 header
+      function hideHeaderIfNeeded() {
+        checkHeaderVisibility();
+      }
+
+      // 复制消息
+      function copyMessage(text, button) {
+        navigator.clipboard.writeText(text).then(() => {
+          const originalHTML = button.innerHTML;
+          button.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474c-6.1-7.7-15.3-12.2-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1 0.4-12.8-6.3-12.8z" fill="currentColor"/></svg>\`;
+          setTimeout(() => {
+            button.innerHTML = originalHTML;
+          }, 2000);
+        });
+      }
+
+      // 点赞
+      function toggleLike(button) {
+        const isActive = button.classList.contains('active');
+        // 移除所有同级按钮的 active 状态
+        const parent = button.parentElement;
+        parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
+
+        if (!isActive) {
+          button.classList.add('active');
+        }
+      }
+
+      // 点踩
+      function toggleDislike(button) {
+        const isActive = button.classList.contains('active');
+        // 移除所有同级按钮的 active 状态
+        const parent = button.parentElement;
+        parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
+
+        if (!isActive) {
+          button.classList.add('active');
+        }
+      }
+
+      // 更新或创建流式消息
+      function updateOrCreateStreamingMessage(text) {
+        hideLoadingIndicator();
+
+        if (!currentStreamingMessage) {
+          // 创建新的流式消息元素
+          const div = document.createElement('div');
+          div.className = 'message bot-message streaming';
+
+          const messageContent = document.createElement('div');
+          messageContent.className = 'message-content';
+          messageContent.textContent = text;
+          div.appendChild(messageContent);
+
+          messagesEl.appendChild(div);
+          currentStreamingMessage = div;
+        } else {
+          // 更新现有消息内容
+          const messageContent = currentStreamingMessage.querySelector('.message-content');
+          if (messageContent) {
+            messageContent.textContent = text;
+          }
+        }
+
+        // 滚动到底部
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      // 完成流式消息
+      function finalizeStreamingMessage(finalText) {
+        if (currentStreamingMessage) {
+          const messageContent = currentStreamingMessage.querySelector('.message-content');
+          if (messageContent) {
+            messageContent.textContent = finalText;
+          }
+          currentStreamingMessage.classList.remove('streaming');
+
+          // 添加操作按钮
+          const actionsDiv = document.createElement('div');
+          actionsDiv.className = 'message-actions';
+
+          const copyBtn = document.createElement('button');
+          copyBtn.className = 'action-btn';
+          copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+          copyBtn.onclick = () => copyMessage(finalText, copyBtn);
+          actionsDiv.appendChild(copyBtn);
+
+          currentStreamingMessage.appendChild(actionsDiv);
+          currentStreamingMessage = null;
+        }
+
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      // 显示加载指示器
+      function showLoadingIndicator(text) {
+        hideLoadingIndicator();
+
+        loadingIndicator = document.createElement('div');
+        loadingIndicator.className = 'message bot-message loading-message';
+        loadingIndicator.innerHTML = \`
+          <div class="loading-dots">
+            <span></span><span></span><span></span>
+          </div>
+          <span class="loading-text">\${text}</span>
+        \`;
+        messagesEl.appendChild(loadingIndicator);
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      // 隐藏加载指示器
+      function hideLoadingIndicator() {
+        if (loadingIndicator) {
+          loadingIndicator.remove();
+          loadingIndicator = null;
+        }
+      }
+
+      // 存储已回答问题的状态
+      const answeredQuestions = new Map(); // askId -> answer
+
+      // 实时更新分段消息（按后端返回顺序）
+      function updateSegmentsRealtime(segments, isComplete) {
+        console.log('[WebView] updateSegmentsRealtime 被调用, segments:', segments, 'isComplete:', isComplete);
+        if (!segments || segments.length === 0) {
+          console.log('[WebView] segments 为空，跳过渲染');
+          return;
+        }
+
+        // 如果没有当前分段消息容器，创建一个
+        if (!currentSegmentedMessage) {
+          console.log('[WebView] 创建新的分段消息容器');
+          // 移除流式消息（如果有）
+          if (currentStreamingMessage) {
+            console.log('[WebView] 移除流式消息');
+            currentStreamingMessage.remove();
+            currentStreamingMessage = null;
+          }
+
+          // 移除所有工具状态消息（因为会在分段中显示）
+          const toolStatuses = messagesEl.querySelectorAll('.tool-status');
+          console.log('[WebView] 找到工具状态消息数量:', toolStatuses.length);
+          toolStatuses.forEach(el => {
+            console.log('[WebView] 移除工具状态消息:', el.className);
+            el.remove();
+          });
+
+          currentSegmentedMessage = document.createElement('div');
+          currentSegmentedMessage.className = 'message bot-message segmented-message';
+          messagesEl.appendChild(currentSegmentedMessage);
+        }
+
+        // 清空容器并重新渲染所有段落
+        currentSegmentedMessage.innerHTML = '';
+
+        segments.forEach((segment, index) => {
+          const segmentDiv = document.createElement('div');
+          segmentDiv.className = 'message-segment segment-' + segment.type;
+
+          if (segment.type === 'text' && segment.content) {
+            segmentDiv.className += ' segment-text';
+            segmentDiv.innerHTML = formatText(segment.content);
+          } else if (segment.type === 'tool') {
+            const statusIcon = segment.toolStatus === 'success' ? '✅' :
+                              segment.toolStatus === 'error' ? '❌' : '🔧';
+            const statusClass = 'tool-' + (segment.toolStatus || 'running');
+            segmentDiv.className += ' ' + statusClass;
+            segmentDiv.innerHTML = \`
+              <div class="tool-segment-header">
+                <span class="tool-segment-icon">\${statusIcon}</span>
+                <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+              </div>
+              \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</div>\` : ''}
+            \`;
+          } else if (segment.type === 'question') {
+            segmentDiv.className += ' segment-question';
+
+            // 检查是否已回答
+            const isAnswered = answeredQuestions.has(segment.askId);
+            const selectedAnswer = answeredQuestions.get(segment.askId);
+
+            if (isAnswered) {
+              segmentDiv.classList.add('answered');
+            }
+
+            // 检查是否有选项
+            const hasOptions = segment.options && segment.options.length > 0;
+
+            const optionsHtml = hasOptions
+              ? (segment.options || []).map(opt => {
+                  const isSelected = isAnswered && opt === selectedAnswer;
+                  return \`<button class="question-option\${isSelected ? ' selected' : ''}" data-option="\${opt}">\${opt}</button>\`;
+                }).join('')
+              : '';
+
+            segmentDiv.innerHTML = \`
+              <div class="question-text">\${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 ? '输入其他答案...' : '请输入您的答案...'}" />
+                <button class="custom-submit">提交</button>
+              </div>
+            \`;
+
+            // 只在未回答时添加事件监听
+            if (!isAnswered) {
+              setTimeout(() => {
+                if (hasOptions) {
+                  const optionButtons = segmentDiv.querySelectorAll('.question-option');
+                  optionButtons.forEach(btn => {
+                    btn.addEventListener('click', function() {
+                      const option = this.getAttribute('data-option');
+                      handleQuestionAnswerInSegment(segment.askId, option, segmentDiv);
+                    });
+                  });
+                }
+
+                const submitBtn = segmentDiv.querySelector('.custom-submit');
+                const customInput = segmentDiv.querySelector('.custom-input');
+                if (submitBtn && customInput) {
+                  submitBtn.addEventListener('click', function() {
+                    const customValue = customInput.value.trim();
+                    if (customValue) {
+                      handleQuestionAnswerInSegment(segment.askId, customValue, segmentDiv);
+                    }
+                  });
+
+                  // 支持回车提交
+                  customInput.addEventListener('keypress', function(e) {
+                    if (e.key === 'Enter') {
+                      const customValue = customInput.value.trim();
+                      if (customValue) {
+                        handleQuestionAnswerInSegment(segment.askId, customValue, segmentDiv);
+                      }
+                    }
+                  });
+                }
+              }, 0);
+            }
+          }
+
+          currentSegmentedMessage.appendChild(segmentDiv);
+        });
+
+        // 如果对话完成，添加操作按钮
+        if (isComplete) {
+          console.log('[WebView] 对话完成，添加操作按钮');
+          const actionsDiv = document.createElement('div');
+          actionsDiv.className = 'message-actions';
+          const copyBtn = document.createElement('button');
+          copyBtn.className = 'action-btn';
+          copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+          copyBtn.onclick = () => {
+            const textContent = segments
+              .filter(s => s.type === 'text' && s.content)
+              .map(s => s.content)
+              .join('\\n');
+            copyMessage(textContent, copyBtn);
+          };
+          actionsDiv.appendChild(copyBtn);
+          currentSegmentedMessage.appendChild(actionsDiv);
+
+          // 重置当前分段消息容器
+          currentSegmentedMessage = null;
+        }
+
+        // 滚动到底部
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      // 渲染分段消息（兼容旧代码）
+      function renderSegments(segments) {
+        console.log('[WebView] renderSegments 被调用, segments:', segments);
+        if (!segments || segments.length === 0) {
+          console.log('[WebView] segments 为空，跳过渲染');
+          return;
+        }
+
+        // 移除流式消息（如果有）
+        if (currentStreamingMessage) {
+          console.log('[WebView] 移除流式消息');
+          currentStreamingMessage.remove();
+          currentStreamingMessage = null;
+        }
+
+        // 移除所有工具状态消息（因为会在分段中显示）
+        const toolStatuses = messagesEl.querySelectorAll('.tool-status');
+        console.log('[WebView] 找到工具状态消息数量:', toolStatuses.length);
+        toolStatuses.forEach(el => {
+          console.log('[WebView] 移除工具状态消息:', el.className);
+          el.remove();
+        });
+
+        // 创建消息容器
+        const container = document.createElement('div');
+        container.className = 'message bot-message segmented-message';
+
+        segments.forEach((segment, index) => {
+          const segmentDiv = document.createElement('div');
+          segmentDiv.className = 'message-segment segment-' + segment.type;
+
+          if (segment.type === 'text' && segment.content) {
+            segmentDiv.className += ' segment-text';
+            segmentDiv.innerHTML = formatText(segment.content);
+          } else if (segment.type === 'tool') {
+            const statusIcon = segment.toolStatus === 'success' ? '✅' :
+                              segment.toolStatus === 'error' ? '❌' : '🔧';
+            const statusClass = 'tool-' + (segment.toolStatus || 'running');
+            segmentDiv.className += ' ' + statusClass;
+            segmentDiv.innerHTML = \`
+              <div class="tool-segment-header">
+                <span class="tool-segment-icon">\${statusIcon}</span>
+                <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+              </div>
+              \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</div>\` : ''}
+            \`;
+          } else if (segment.type === 'question') {
+            segmentDiv.innerHTML = \`
+              <div class="question-segment">
+                <div class="question-text">\${segment.question || ''}</div>
+                <div class="question-options">
+                  \${(segment.options || []).map(opt => \`<span class="question-opt">\${opt}</span>\`).join('')}
+                </div>
+              </div>
+            \`;
+          }
+
+          container.appendChild(segmentDiv);
+        });
+
+        // 添加操作按钮
+        const actionsDiv = document.createElement('div');
+        actionsDiv.className = 'message-actions';
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'action-btn';
+        copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        copyBtn.onclick = () => {
+          const textContent = segments
+            .filter(s => s.type === 'text' && s.content)
+            .map(s => s.content)
+            .join('\\n');
+          copyMessage(textContent, copyBtn);
+        };
+        actionsDiv.appendChild(copyBtn);
+        container.appendChild(actionsDiv);
+
+        messagesEl.appendChild(container);
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      // 格式化文本（支持 Markdown）
+      function formatText(text) {
+        if (!text) return '';
+
+        // 先转义 HTML 特殊字符
+        let html = text
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+
+        // 处理代码块（三个反引号包裹的代码）
+        html = html.replace(/\`\`\`(\\w+)?\\n([\\s\\S]*?)\`\`\`/g, function(match, lang, code) {
+          const language = lang || 'plaintext';
+          return '<pre><code class="language-' + language + '">' + code.trim() + '</code></pre>';
+        });
+
+        // 处理行内代码（单个反引号包裹）
+        html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+
+        // 处理标题 ### Title
+        html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+        html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+        // 处理粗体 **text**
+        html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+
+        // 处理斜体 *text*
+        html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');
+
+        // 处理无序列表 - item 或 * item
+        html = html.replace(/^[\\-\\*] (.+)$/gm, '<li>$1</li>');
+        html = html.replace(/(<li>.*<\\/li>\\n?)+/g, '<ul>$&</ul>');
+
+        // 处理有序列表 1. item
+        html = html.replace(/^\\d+\\. (.+)$/gm, '<li>$1</li>');
+
+        // 处理链接 [text](url)
+        html = html.replace(/\\[([^\\]]+)\\]\\(([^\\)]+)\\)/g, '<a href="$2" target="_blank">$1</a>');
+
+        // 处理换行
+        html = html.replace(/\\n/g, '<br>');
+
+        return html;
+      }
+
+      // 添加工具状态消息
+      function addToolStatus(toolName, status, detail) {
+        const statusIcons = {
+          start: '🔧',
+          complete: '✅',
+          error: '❌'
+        };
+        const statusTexts = {
+          start: '正在执行',
+          complete: '执行完成',
+          error: '执行失败'
+        };
+
+        const div = document.createElement('div');
+        div.className = \`message tool-status tool-\${status}\`;
+        div.innerHTML = \`
+          <span class="tool-icon">\${statusIcons[status]}</span>
+          <span class="tool-name">\${toolName}</span>
+          <span class="tool-status-text">\${statusTexts[status]}</span>
+          \${detail ? \`<div class="tool-detail">\${detail}</div>\` : ''}
+        \`;
+        messagesEl.appendChild(div);
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+
+      // 添加消息后检查 header 显示状态
+      checkHeaderVisibility();
+    }
+
+    // 显示用户问题
+    function showQuestion(askId, question, options) {
+      console.log('[WebView] showQuestion 被调用:', askId, question, options);
+
+      // 创建问题消息容器
+      const div = document.createElement('div');
+      div.className = 'message bot-message question-message';
+      div.setAttribute('data-ask-id', askId);
+
+      // 问题文本
+      const questionText = document.createElement('div');
+      questionText.className = 'question-text';
+      questionText.textContent = question;
+      div.appendChild(questionText);
+
+      // 选项容器
+      const optionsContainer = document.createElement('div');
+      optionsContainer.className = 'question-options';
+
+      // 添加选项按钮
+      options.forEach((option, index) => {
+        const optionBtn = document.createElement('button');
+        optionBtn.className = 'question-option';
+        optionBtn.textContent = option;
+        optionBtn.onclick = () => handleQuestionAnswer(askId, option, div);
+        optionsContainer.appendChild(optionBtn);
+      });
+
+      div.appendChild(optionsContainer);
+
+      // 添加自定义输入（"其他"选项）
+      const customContainer = document.createElement('div');
+      customContainer.className = 'custom-input-container';
+
+      const customInput = document.createElement('input');
+      customInput.type = 'text';
+      customInput.className = 'custom-input';
+      customInput.placeholder = '输入其他答案...';
+
+      const customSubmit = document.createElement('button');
+      customSubmit.className = 'custom-submit';
+      customSubmit.textContent = '提交';
+      customSubmit.onclick = () => {
+        const customValue = customInput.value.trim();
+        if (customValue) {
+          handleQuestionAnswer(askId, customValue, div);
+        }
+      };
+
+      customContainer.appendChild(customInput);
+      customContainer.appendChild(customSubmit);
+      div.appendChild(customContainer);
+
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+
+      // 添加消息后检查 header 显示状态
+      checkHeaderVisibility();
+    }
+
+    // 处理问题回答
+    function handleQuestionAnswer(askId, answer, questionDiv) {
+      console.log('[WebView] 用户选择答案:', askId, answer);
+
+      // 标记问题已回答
+      questionDiv.classList.add('answered');
+
+      // 高亮选中的选项
+      const options = questionDiv.querySelectorAll('.question-option');
+      options.forEach(opt => {
+        if (opt.textContent === answer) {
+          opt.classList.add('selected');
+        }
+      });
+
+      // 发送答案到后端
+      vscode.postMessage({
+        command: 'submitAnswer',
+        askId: askId,
+        selected: [answer],
+        customInput: answer
+      });
+    }
+
+    // 处理段落中的问题回答
+    function handleQuestionAnswerInSegment(askId, answer, segmentDiv) {
+      console.log('[WebView] 段落中用户选择答案:', askId, answer);
+
+      // 保存答案到 Map 中
+      answeredQuestions.set(askId, answer);
+
+      // 标记问题已回答
+      segmentDiv.classList.add('answered');
+
+      // 高亮选中的选项
+      const options = segmentDiv.querySelectorAll('.question-option');
+      options.forEach(opt => {
+        if (opt.getAttribute('data-option') === answer) {
+          opt.classList.add('selected');
+        }
+      });
+
+      // 隐藏自定义输入
+      const customContainer = segmentDiv.querySelector('.custom-input-container');
+      if (customContainer) {
+        customContainer.style.display = 'none';
+      }
+
+      // 发送答案到后端
+      vscode.postMessage({
+        command: 'submitAnswer',
+        askId: askId,
+        selected: [answer],
+        customInput: answer
+      });
+    }
+  `;
+}
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index 02cc8ea..8918208 100644
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@@ -7,7 +7,16 @@ import {
   getConversationHistoryBarStyles,
   getConversationHistoryBarScript,
 } from "./conversationHistoryBar";
-
+import {
+  getInputAreaContent,
+  getInputAreaStyles,
+  getInputAreaScript,
+} from "./inputArea";
+import {
+  getMessageAreaContent,
+  getMessageAreaStyles,
+  getMessageAreaScript,
+} from "./messageArea";
 /**
  * 获取 WebView 面板的 HTML 内容
  */
@@ -55,354 +64,11 @@ export function getWebviewContent(iconUri?: string): string {
       overflow: hidden;
       padding: 0 20px 20px 20px;
     }
-    .messages {
-      flex: 1;
-      overflow-y: auto;
-      margin-bottom: 15px;
-      min-height: 0;
-    }
-    .message {
-      margin-bottom: 12px;
-    }
-    .user-message {
-      padding: 10px 15px;
-      border-radius: 8px;
-      background: var(--vscode-button-secondaryBackground);
-      border: 1px solid var(--vscode-input-border);
-      margin-left: auto;
-      width: fit-content;
-      max-width: 80%;
-    }
-    .bot-message {
-      padding: 0;
-      text-align: left;
-      color: var(--vscode-foreground);
-      max-width: 100%;
-      position: relative;
-    }
-    .message-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 12px;
-      margin-left: 10px;
-      opacity: 0.85;
-      transition: opacity 0.2s ease;
-    }
-    .message-actions:hover {
-      opacity: 1;
-    }
-    .action-btn {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--vscode-foreground);
-      opacity: 0.9;
-      transition: opacity 0.2s ease;
-      position: relative;
-    }
-    .action-btn:hover {
-      opacity: 1;
-    }
-    .action-btn svg {
-      width: 14px;
-      height: 14px;
-    }
-    .action-btn.active {
-      color: var(--vscode-button-background);
-      opacity: 1;
-    }
-    .action-btn .action-tooltip {
-      visibility: hidden;
-      width: auto;
-      background: #1e1e1e;
-      color: #ffffff;
-      text-align: center;
-      border-radius: 4px;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      padding: 4px 8px;
-      position: absolute;
-      z-index: 1000;
-      bottom: 125%;
-      left: 50%;
-      transform: translateX(-50%) translateY(5px);
-      opacity: 0;
-      transition: all 0.2s ease;
-      font-size: 12px;
-      white-space: nowrap;
-      pointer-events: none;
-    }
-    .action-btn .action-tooltip::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-width: 5px;
-      border-style: solid;
-      border-color: #1e1e1e transparent transparent transparent;
-    }
-    .action-btn .action-tooltip::before {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -6px;
-      border-width: 6px;
-      border-style: solid;
-      border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
-      z-index: -1;
-    }
-    .action-btn:hover .action-tooltip {
-      visibility: visible;
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-    .input-area {
-      border-top: 1px solid var(--vscode-panel-border);
-      padding-top: 15px;
-      flex-shrink: 0;
-    }
-    .input-group {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      background: var(--vscode-input-background);
-      border: 1px solid var(--vscode-input-border);
-      border-radius: 8px;
-      padding: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
-      transition: all 0.3s ease;
-    }
-    .input-group:hover {
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
-    }
-    .input-group:focus-within {
-      border-color: var(--vscode-focusBorder);
-      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2);
-    }
-    .input-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      width: 100%;
-    }
-    .input-bottom-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      margin-bottom: -17px;
-    }
-    .mode-selector {
-      display: flex;
-      align-items: center;
-      position: relative;
-    }
-    .input-actions {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .mode-selector select {
-      padding: 2px 4px;
-      background: var(--vscode-input-background);
-      color: var(--vscode-foreground);
-      border: none;
-      cursor: pointer;
-      font-size: 12px;
-      outline: none;
-      border-radius: 4px;
-    }
-    .mode-selector select:hover {
-      background: var(--vscode-list-hoverBackground);
-    }
-    /* Tooltip 样式 */
-    .tooltip {
-      position: relative;
-      display: inline-block;
-    }
-    .tooltip .tooltiptext {
-      visibility: hidden;
-      width: auto;
-      background: #1e1e1e;
-      color: #ffffff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 6px 12px;
-      position: absolute;
-      z-index: 1000;
-      bottom: 150%;
-      left: 50%;
-      transform: translateX(-50%) translateY(10px);
-      opacity: 0;
-      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-      font-size: 12px;
-      font-weight: 500;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
-      white-space: nowrap;
-      letter-spacing: 0.3px;
-    }
-    .tooltip .tooltiptext::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -6px;
-      border-width: 6px;
-      border-style: solid;
-      border-color: #1e1e1e transparent transparent transparent;
-    }
-    .tooltip .tooltiptext::before {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -7px;
-      border-width: 7px;
-      border-style: solid;
-      border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
-      z-index: -1;
-    }
-    .tooltip:hover .tooltiptext {
-      visibility: visible;
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-    textarea {
-      width: 100%;
-      padding: 10px;
-      background: transparent;
-      color: var(--vscode-input-foreground);
-      border: none;
-      border-radius: 4px;
-      font-family: inherit;
-      resize: none;
-      min-height: 40px;
-      max-height: 200px;
-      outline: none;
-      box-sizing: border-box;
-      overflow-y: auto;
-      line-height: 1.5;
-    }
-    /* 简洁的滚动条样式 */
-    textarea::-webkit-scrollbar {
-      width: 8px;
-    }
-    textarea::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    textarea::-webkit-scrollbar-thumb {
-      background: rgba(128, 128, 128, 0.5);
-      border-radius: 4px;
-    }
-    textarea::-webkit-scrollbar-button {
-      display: none;
-    }
-    button {
-      padding: 0 20px;
-      background: var(--vscode-button-background);
-      color: var(--vscode-button-foreground);
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    .optimize-button {
-      padding: 8px;
-      background: transparent;
-      color: var(--vscode-foreground);
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity 0.2s ease;
-      width: 32px;
-      height: 32px;
-    }
-    .optimize-button:hover {
-      opacity: 0.7;
-    }
-    .optimize-button svg {
-      width: 16px;
-      height: 16px;
-    }
-    .optimize-button-wrapper {
-      display: flex;
-      align-items: flex-end;
-    }
-    .quick-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 10px;
-      flex-wrap: wrap;
-      flex-shrink: 0;
-    }
-    .quick-btn {
-      padding: 6px 12px;
-      background: var(--vscode-button-secondaryBackground);
-      color: var(--vscode-button-secondaryForeground);
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-    .file-reader-section {
-      margin-bottom: 15px;
-      padding: 15px;
-      background: var(--vscode-input-background);
-      border: 1px solid var(--vscode-input-border);
-      border-radius: 8px;
-      flex-shrink: 0;
-    }
-    .file-reader-section h3 {
-      margin: 0 0 10px 0;
-      color: var(--vscode-button-background);
-    }
-    .file-input-group {
-      display: flex;
-      gap: 10px;
-      margin-bottom: 10px;
-    }
-    .file-input-group input {
-      flex: 1;
-      padding: 8px;
-      background: var(--vscode-input-background);
-      color: var(--vscode-input-foreground);
-      border: 1px solid var(--vscode-input-border);
-      border-radius: 4px;
-    }
-    .file-content {
-      margin-top: 15px;
-      padding: 10px;
-      background: var(--vscode-editor-background);
-      border: 1px solid var(--vscode-panel-border);
-      border-radius: 4px;
-      max-height: 120px;
-      overflow-y: auto;
-      font-family: 'Courier New', monospace;
-      font-size: 12px;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-    .file-content.empty {
-      color: var(--vscode-descriptionForeground);
-      font-style: italic;
-    }
-    .error-message {
-      color: var(--vscode-errorForeground);
-      padding: 8px;
-      background: var(--vscode-inputValidation-errorBackground);
-      border: 1px solid var(--vscode-inputValidation-errorBorder);
-      border-radius: 4px;
-      margin-top: 10px;
-    }
+    ${getMessageAreaStyles()}
     ${getWaveformPreviewContent()}
     ${getConversationHistoryBarStyles()}
+    ${getInputAreaStyles()}
+
     .file-editor-section {
       margin-bottom: 15px;
       padding: 15px;
@@ -436,130 +102,6 @@ export function getWebviewContent(iconUri?: string): string {
       gap: 10px;
       margin-top: 10px;
     }
-    /* 上下文显示样式 */
-    .context-display {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-    }
-    .context-info {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      height: 40px;
-      background: transparent;
-      border: none;
-      border-radius: 4px;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--vscode-foreground);
-      transition: opacity 0.3s ease;
-      box-shadow: none;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-    }
-    .context-info:hover {
-      opacity: 0.8;
-    }
-    .database-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 12px;
-      height: 12px;
-      position: relative;
-    }
-    .db-svg {
-      width: 100%;
-      height: 100%;
-    }
-    .db-body {
-      fill: #ffffff;
-    }
-    .db-fill {
-      fill: #409eff;
-      transition: all 0.3s ease;
-    }
-    .context-percentage {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--vscode-foreground);
-      text-align: right;
-    }
-    /* 上下文信息弹窗样式 */
-    .context-panel {
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-bottom: 8px;
-      z-index: 1000;
-      animation: fadeInUp 0.2s ease-out;
-      display: none;
-    }
-    .context-panel.active {
-      display: block;
-    }
-    .context-panel::after {
-      content: "";
-      position: absolute;
-      bottom: -6px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 6px solid #ffffff;
-    }
-    .context-panel-content {
-      background: #ffffff;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      border-radius: 8px;
-      padding: 12px;
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-      backdrop-filter: blur(10px);
-      min-width: 160px;
-    }
-    .context-info-text {
-      font-size: 12px;
-      color: #374151;
-      text-align: center;
-      margin-bottom: 8px;
-      white-space: nowrap;
-    }
-    .compress-button {
-      width: 100%;
-      background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
-      border: 1px solid rgba(59, 130, 246, 0.3);
-      border-radius: 6px;
-      color: white;
-      font-size: 12px;
-      font-weight: 500;
-      padding: 6px 12px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-    .compress-button:hover {
-      background: linear-gradient(145deg, #2563eb 0%, #1e40af 100%);
-      transform: translateY(-1px);
-      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
-    }
-    .compress-button:active {
-      transform: translateY(0);
-    }
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateX(-50%) translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-      }
-    }
 
     /* 流式消息样式 */
     .streaming .message-content {
@@ -708,7 +250,7 @@ export function getWebviewContent(iconUri?: string): string {
       padding: 0;
     }
     .message-segment {
-      padding: 10px 14px;
+      padding: 10px 22  px;
     }
     .segment-text {
       line-height: 1.6;
@@ -818,7 +360,7 @@ export function getWebviewContent(iconUri?: string): string {
   </div>
 
   <div class="chat-container">
-    <div id="messages" class="messages"></div>
+    ${getMessageAreaContent()}
 
     <!-- 状态栏 -->
     <div id="statusBar" class="status-bar" style="display: none;">
@@ -832,191 +374,21 @@ export function getWebviewContent(iconUri?: string): string {
       <button class="quick-btn" onclick="quickAction('testbench')">生成测试平台</button>
     </div>
 
-    <div class="input-area">
-      <div class="input-group">
-        <div class="input-wrapper">
-          <textarea
-            id="messageInput"
-            placeholder="输入您的问题..."
-            onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
-          ></textarea>
-          <div class="input-bottom-row">
-            <div class="mode-selector">
-              <div class="tooltip">
-                <select id="modeSelect">
-                  <option value="agent" selected>Agent</option>
-                  <option value="ask">Ask</option>
-                  <option value="plan">Plan</option>
-                </select>
-                <span class="tooltiptext">切换模型</span>
-              </div>
-            </div>
-            <div class="input-actions">
-              <!-- 上下文显示 -->
-              <div class="context-display">
-                <div class="context-info" onclick="toggleContextPanel()">
-                  <div class="database-icon">
-                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="db-svg">
-                      <!-- 数据库容器主体 - 底层灰色 -->
-                      <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#94a3b8" class="db-body"/>
-
-                      <!-- 填充进度效果 - 从下往上填充蓝色 -->
-                      <defs>
-                        <mask id="fill-mask">
-                          <rect x="0" y="0" width="1024" height="1024" id="fillRect" fill="white"/>
-                        </mask>
-                      </defs>
-
-                      <g mask="url(#fill-mask)">
-                        <path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#409eff" class="db-fill"/>
-                      </g>
-                    </svg>
-                  </div>
-                  <span class="context-percentage" id="contextPercentage">0%</span>
-                </div>
-
-                <!-- 上下文信息弹窗 -->
-                <div id="contextPanel" class="context-panel">
-                  <div class="context-panel-content">
-                    <div class="context-info-text" id="contextInfoText">
-                      0k / 200k 已用上下文
-                    </div>
-                    <button class="compress-button" onclick="compressConversation()">
-                      压缩会话
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 一键优化按钮 -->
-              <div class="tooltip">
-                <button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
-                  <svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
-                </button>
-                <span class="tooltiptext" id="optimizeTooltip">一键优化</span>
-              </div>
-
-              <button onclick="sendMessage()">发送</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    ${getInputAreaContent()}
   </div>
 
   <script>
     console.log('[WebView] 脚本开始执行');
     const vscode = acquireVsCodeApi();
     console.log('[WebView] vscode API 已获取');
-    const messagesEl = document.getElementById('messages');
     const messageInput = document.getElementById('messageInput');
     const modeSelect = document.getElementById('modeSelect');
-    const filePathInput = document.getElementById('filePathInput');
-    const fileContentEl = document.getElementById('fileContent');
-    console.log('[WebView] DOM 元素已获取, messagesEl:', !!messagesEl);
-    const errorMessageEl = document.getElementById('errorMessage');
-    const fileEditorSection = document.getElementById('fileEditorSection');
-    const fileEditorTextarea = document.getElementById('fileEditorTextarea');
-    const editingFileName = document.getElementById('editingFileName');
+    const messagesEl = document.getElementById('messages');
 
-    let currentEditingFile = null;
-    let originalText = ''; // 保存原始文本用于撤回
-    let isOptimized = false; // 标记是否已优化
-
-    function sendMessage() {
-      const text = messageInput.value.trim();
-      if (!text) return;
-
-      const mode = modeSelect.value;
-      addMessage(text, 'user');
-      vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
-      messageInput.value = '';
-      autoResizeTextarea(); // 重置输入框高度
-      messageInput.focus();
-
-      // 重置优化状态
-      resetOptimizeButton();
-    }
-
-    function handleOptimize() {
-      if (isOptimized) {
-        // 撤回操作
-        messageInput.value = originalText;
-        resetOptimizeButton();
-      } else {
-        // 优化操作
-        originalText = messageInput.value; // 保存原始文本
-
-        // 使用死数据替换输入框内容
-        const optimizedTexts = [
-          '请帮我优化这段代码，提高性能和可读性',
-          '请分析这个问题并给出最佳解决方案',
-          '请帮我重构这段代码，使其更加简洁高效',
-          '请检查代码中的潜在问题并提供改进建议'
-        ];
-        const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)];
-        messageInput.value = randomText;
-
-        // 切换到撤回状态
-        isOptimized = true;
-        updateOptimizeButton();
-      }
-
-      messageInput.focus();
-    }
-
-    function updateOptimizeButton() {
-      const optimizeIcon = document.getElementById('optimizeIcon');
-      const optimizeTooltip = document.getElementById('optimizeTooltip');
-
-      // 切换为撤回图标
-      optimizeIcon.innerHTML = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
-      optimizeTooltip.textContent = '撤回';
-    }
-
-    function resetOptimizeButton() {
-      const optimizeIcon = document.getElementById('optimizeIcon');
-      const optimizeTooltip = document.getElementById('optimizeTooltip');
-
-      // 切换回优化图标（星星图标）
-      optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
-      optimizeTooltip.textContent = '一键优化';
-      isOptimized = false;
-      originalText = '';
-    }
-
-    function readFile() {
-      const filePath = filePathInput.value.trim();
-      if (!filePath) {
-        showError('请输入文件路径');
-        return;
-      }
-
-      // 清空之前的内容和错误
-      fileContentEl.textContent = '正在读取文件...';
-      fileContentEl.className = 'file-content';
-      errorMessageEl.style.display = 'none';
-
-      // 发送读取文件请求
-      vscode.postMessage({ command: 'readFile', filePath: filePath });
-    }
-
-    function showError(message) {
-      errorMessageEl.textContent = message;
-      errorMessageEl.className = 'error-message';
-      errorMessageEl.style.display = 'block';
-      fileContentEl.textContent = '文件内容将在这里显示...';
-      fileContentEl.className = 'file-content empty';
-    }
-
-    function displayFileContent(content, filePath) {
-      fileContentEl.textContent = content;
-      fileContentEl.className = 'file-content';
-      errorMessageEl.style.display = 'none';
-
-      // 在消息区域也显示一条提示
-      addMessage(\`已读取文件: \${filePath}\`, 'bot');
-    }
+    // 全局变量
+    let currentStreamingMessage = null;
+    let loadingIndicator = null;
+    let currentSegmentedMessage = null; // 当前分段消息容器
 
     function quickAction(type) {
       const questions = {
@@ -1030,602 +402,117 @@ export function getWebviewContent(iconUri?: string): string {
       }
     }
 
-    function addMessage(text, sender) {
-      const div = document.createElement('div');
-      div.className = \`message \${sender}-message\`;
-
-      if (sender === 'bot') {
-        // 创建消息内容
-        const messageContent = document.createElement('div');
-        messageContent.textContent = text;
-        div.appendChild(messageContent);
-
-        // 创建操作按钮容器
-        const actionsDiv = document.createElement('div');
-        actionsDiv.className = 'message-actions';
-
-        // 复制按钮
-        const copyBtn = document.createElement('button');
-        copyBtn.className = 'action-btn';
-        copyBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M761.088 715.3152a38.7072 38.7072 0 0 1 0-77.4144 37.4272 37.4272 0 0 0 37.4272-37.4272V265.0112a37.4272 37.4272 0 0 0-37.4272-37.4272H425.6256a37.4272 37.4272 0 0 0-37.4272 37.4272 38.7072 38.7072 0 1 1-77.4144 0 115.0976 115.0976 0 0 1 114.8416-114.8416h335.4624a115.0976 115.0976 0 0 1 114.8416 114.8416v335.4624a115.0976 115.0976 0 0 1-114.8416 114.8416z" fill="currentColor"/><path d="M589.4656 883.0976H268.1856a121.1392 121.1392 0 0 1-121.2928-121.2928v-322.56a121.1392 121.1392 0 0 1 121.2928-121.344h321.28a121.1392 121.1392 0 0 1 121.2928 121.2928v322.56c1.28 67.1232-54.1696 121.344-121.2928 121.344zM268.1856 395.3152a43.52 43.52 0 0 0-43.8784 43.8784v322.56a43.52 43.52 0 0 0 43.8784 43.8784h321.28a43.52 43.52 0 0 0 43.8784-43.8784v-322.56a43.52 43.52 0 0 0-43.8784-43.8784z" fill="currentColor"/></svg><span class="action-tooltip">复制</span>\`;
-        copyBtn.onclick = () => copyMessage(text, copyBtn);
-
-        // 点赞按钮
-        const likeBtn = document.createElement('button');
-        likeBtn.className = 'action-btn';
-        likeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M923.5 411.2c-28.6-33.9-72.1-53-116.4-51.1h-68c6.4-31.6 10.1-63.9 11.2-96v-0.8c-0.5-60.9-18.7-112-51.2-144-22.6-22.2-50.8-33.7-81.5-33.3-38.3 0-69.1 11.5-91.7 34.2-26.5 26.5-39.9 66.8-39.8 119.6 0.1 40.1-19.4 83.4-52.1 115.9-32 31.8-71.7 49.3-111.8 49.3H295.6c-3 0-6 0.3-8.9 0.8v-1.2H140.8c-39.7 0-72.2 32.5-72.2 72.2v392.9c0 39.7 32.5 72.2 72.2 72.2h146.8v-0.6c2.9 0.4 5.9 0.7 8.9 0.7h464.7c33.3-0.8 65.6-13 91.1-34.4s43.1-51.1 49.6-83.8l52.3-289.1c9.4-43.4-2.1-89.6-30.7-123.5zM147.7 843.7v-344c0-9 7.3-16.3 16.3-16.3h70.4V860H164c-9 0-16.3-7.3-16.3-16.3z m726.4-324.9l-0.2 0.6-51.7 290.3c-6.7 29.1-32.3 50.2-62.2 51.3l-4.9 0.2-0.4 0.3h-440V486h7.3c61.4 0 121-25.7 168.1-72.4 48.6-48.2 76.5-111.7 76.5-174.2-0.1-31.5 4.9-51.8 15.3-62.2 7.4-7.4 18.7-10.8 35.8-10.8h0.2c9-0.1 17.4 3.6 24.9 11 16.3 16.2 25.7 47.3 25.8 85.4-1.2 41.8-7.9 83.3-19.9 123.4l-21.6 54.3h181.5c24.5-0.6 48.2 8.9 65.1 26.1 16.9 17.2 25.3 40.8 23 64.9z" fill="currentColor"/></svg><span class="action-tooltip">点赞</span>\`;
-        likeBtn.onclick = () => toggleLike(likeBtn);
-
-        // 点踩按钮
-        const dislikeBtn = document.createElement('button');
-        dislikeBtn.className = 'action-btn';
-        dislikeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M360 640c60.992 40.107 88 87.381 88 149.333 0 5.611 0.427 12.864 1.579 21.462a174.933 174.933 0 0 0 11.2 42.666c19.584 48.192 60.864 83.008 119.018 85.12 28.843 2.56 60.886-3.584 91.414-25.045 58.709-41.237 81.706-117.248 69.973-230.87h48.15V640v42.667c17.173 0 38.4-2.475 61.823-10.667 66.304-23.125 107.627-84.117 84.928-162.816l-53.674-254.55a213.333 213.333 0 0 0-208.747-169.3H207.019a85.333 85.333 0 0 0-85.078 78.783l-29.546 384A85.333 85.333 0 0 0 177.493 640H360z m-61.333-109.333v24H177.493l29.526-384h91.648v360z m85.333-360h289.664a128 128 0 0 1 125.227 101.589l54.442 258.07c21.334 67.007-64 67.007-64 67.007H640c64 277.334-54.613 256-54.613 256-52.054 0-52.054-64-52.054-64 0-92.8-43.264-167.082-129.77-222.805A42.667 42.667 0 0 1 384 530.667v-360z" fill="currentColor"/></svg><span class="action-tooltip">点踩</span>\`;
-        dislikeBtn.onclick = () => toggleDislike(dislikeBtn);
-
-        actionsDiv.appendChild(copyBtn);
-        actionsDiv.appendChild(likeBtn);
-        actionsDiv.appendChild(dislikeBtn);
-
-        div.appendChild(actionsDiv);
-      } else {
-        div.textContent = text;
-        // 当添加用户消息时，隐藏 header
-        hideHeaderIfNeeded();
-      }
-
-      messagesEl.appendChild(div);
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-
-      // 添加消息后检查 header 显示状态
-      checkHeaderVisibility();
-    }
-
-    // 检查是否需要隐藏 header
-    function hideHeaderIfNeeded() {
-      checkHeaderVisibility();
-    }
-
-    function copyMessage(text, button) {
-      navigator.clipboard.writeText(text).then(() => {
-        const originalHTML = button.innerHTML;
-        button.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474c-6.1-7.7-15.3-12.2-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1 0.4-12.8-6.3-12.8z" fill="currentColor"/></svg>\`;
-        setTimeout(() => {
-          button.innerHTML = originalHTML;
-        }, 2000);
-      });
-    }
-
-    function toggleLike(button) {
-      const isActive = button.classList.contains('active');
-      // 移除所有同级按钮的 active 状态
-      const parent = button.parentElement;
-      parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
-
-      if (!isActive) {
-        button.classList.add('active');
-      }
-    }
-
-    function toggleDislike(button) {
-      const isActive = button.classList.contains('active');
-      // 移除所有同级按钮的 active 状态
-      const parent = button.parentElement;
-      parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
-
-      if (!isActive) {
-        button.classList.add('active');
-      }
-    }
-
-    function openFileEditor(filePath, content) {
-      currentEditingFile = filePath;
-      editingFileName.textContent = filePath;
-      fileEditorTextarea.value = content;
-      fileEditorSection.classList.add('active');
-
-      // 滚动到编辑器位置
-      fileEditorSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-      // 在消息区域显示提示
-      addMessage(\`正在编辑文件: \${filePath}\`, 'bot');
-    }
-
-    function saveFile() {
-      if (!currentEditingFile) {
-        return;
-      }
-
-      const content = fileEditorTextarea.value;
-      vscode.postMessage({
-        command: 'updateFile',
-        filePath: currentEditingFile,
-        content: content
-      });
-
-      addMessage(\`正在保存文件: \${currentEditingFile}\`, 'user');
-      cancelEdit();
-    }
-
-    function cancelEdit() {
-      currentEditingFile = null;
-      fileEditorSection.classList.remove('active');
-      fileEditorTextarea.value = '';
-      editingFileName.textContent = '';
-    }
-
-    // 上下文面板相关函数
-    function toggleContextPanel() {
-      const contextPanel = document.getElementById('contextPanel');
-      if (contextPanel.classList.contains('active')) {
-        contextPanel.classList.remove('active');
-      } else {
-        contextPanel.classList.add('active');
-      }
-    }
-
-    function compressConversation() {
-      // 发送压缩会话请求
-      vscode.postMessage({ command: 'compressConversation' });
-      addMessage('正在压缩会话...', 'bot');
-
-      // 关闭面板
-      const contextPanel = document.getElementById('contextPanel');
-      contextPanel.classList.remove('active');
-    }
-
-    function updateContextDisplay(currentTokens, maxTokens) {
-      const percentage = Math.min(Math.round((currentTokens / maxTokens) * 100), 100);
-
-      // 更新百分比显示
-      document.getElementById('contextPercentage').textContent = percentage + '%';
-
-      // 更新详细信息
-      const currentK = Math.round((currentTokens / 1000) * 10) / 10;
-      const maxK = Math.round(maxTokens / 1000);
-      document.getElementById('contextInfoText').textContent = \`\${currentK}k / \${maxK}k 已用上下文\`;
-
-      // 更新SVG填充效果（从下往上填充）
-      const fillRect = document.getElementById('fillRect');
-      if (fillRect) {
-        const fillHeight = (1024 * percentage) / 100;
-        const fillY = 1024 - fillHeight;
-        fillRect.setAttribute('y', fillY.toString());
-        fillRect.setAttribute('height', fillHeight.toString());
-      }
-    }
-
-    // 点击外部关闭上下文面板
-    document.addEventListener('click', (event) => {
-      const contextDisplay = document.querySelector('.context-display');
-      const contextPanel = document.getElementById('contextPanel');
-
-      if (contextPanel && contextPanel.classList.contains('active')) {
-        if (!contextDisplay.contains(event.target)) {
-          contextPanel.classList.remove('active');
+    // 检查 header 显示状态
+    function checkHeaderVisibility() {
+      const header = document.querySelector('.header');
+      const messages = document.getElementById('messages');
+      if (header && messages) {
+        if (messages.children.length > 0) {
+          header.classList.add('hidden');
+        } else {
+          header.classList.remove('hidden');
         }
       }
-    });
+    }
 
-    // 流式消息相关状态
-    let currentStreamingMessage = null;
-    let loadingIndicator = null;
+    messageInput.focus();
 
+    // 监听来自插件的消息
     window.addEventListener('message', event => {
       const message = event.data;
       console.log('[WebView] 收到消息:', message.command, message);
 
       switch (message.command) {
         case 'receiveMessage':
-          // 完成流式消息或普通消息
-          if (currentStreamingMessage) {
-            finalizeStreamingMessage(message.text);
-          } else {
-            addMessage(message.text, 'bot');
-          }
-          break;
-        case 'receiveSegments':
-          // 渲染分段消息
-          renderSegments(message.segments);
+          // 接收完整消息
+          addMessage(message.text, 'bot');
           break;
+
         case 'updateStreamingMessage':
-          // 流式更新消息
+          // 更新流式消息
           updateOrCreateStreamingMessage(message.text);
           break;
-        case 'showLoading':
-          showLoadingIndicator(message.text || '正在思考...');
+
+        case 'updateSegments':
+          // 实时更新分段消息（按后端返回顺序）
+          console.log('[WebView] 实时更新段落, segments:', message.segments);
+          updateSegmentsRealtime(message.segments, message.isComplete);
           break;
-        case 'hideLoading':
-          hideLoadingIndicator();
-          break;
-        case 'updateStatus':
-          updateStatusBar(message.text, message.type || 'thinking');
-          break;
-        case 'hideStatus':
-          hideStatusBar();
+
+        case 'receiveSegments':
+          // 接收分段消息（兼容旧代码）
+          console.log('[WebView] 调用 renderSegments, segments:', message.segments);
+          renderSegments(message.segments);
           break;
+
         case 'toolStart':
+          // 工具开始执行
           addToolStatus(message.toolName, 'start');
-          updateStatusBar('正在执行 ' + message.toolName + '...', 'working');
           break;
+
         case 'toolComplete':
+          // 工具执行完成
           addToolStatus(message.toolName, 'complete', message.result);
-          hideStatusBar();
           break;
+
         case 'toolError':
+          // 工具执行错误
           addToolStatus(message.toolName, 'error', message.error);
           break;
-        case 'showQuestion':
-          showUserQuestion(message.askId, message.question, message.options);
+
+        case 'updateStatus':
+          // 更新状态栏
+          const statusBar = document.getElementById('statusBar');
+          const statusText = document.getElementById('statusText');
+          if (statusBar && statusText) {
+            statusBar.style.display = 'flex';
+            statusText.textContent = message.text;
+            statusBar.className = 'status-bar ' + (message.type || '');
+          }
           break;
+
+        case 'hideStatus':
+          // 隐藏状态栏
+          const statusBarHide = document.getElementById('statusBar');
+          if (statusBarHide) {
+            statusBarHide.style.display = 'none';
+          }
+          break;
+
+        case 'hideLoading':
+          // 隐藏加载指示器
+          hideLoadingIndicator();
+          break;
+
         case 'vcdGenerated':
-          // VCD 文件生成成功，显示带波形预览的消息
-          const messageDiv = document.createElement('div');
-          messageDiv.className = 'message bot-message';
-
-          const messageContent = document.createElement('div');
-          messageContent.textContent = message.text;
-          messageDiv.appendChild(messageContent);
-
-          // 添加波形预览组件
-          if (message.vcdFilePath && message.fileName) {
-            addWaveformPreviewToMessage(messageDiv, message.vcdFilePath, message.fileName);
-          }
-
-          messagesEl.appendChild(messageDiv);
-          messagesEl.scrollTop = messagesEl.scrollHeight;
+          // VCD 文件生成成功
+          addMessage(message.text, 'bot');
           break;
+
         case 'fileContent':
-          displayFileContent(message.content, message.filePath);
+          // 文件内容
+          addMessage('文件内容:\\n' + message.content, 'bot');
           break;
+
         case 'fileError':
-          showError(message.error);
+          // 文件错误
+          addMessage('❌ ' + message.error, 'bot');
           break;
-        case 'editFile':
-          openFileEditor(message.filePath, message.content);
-          break;
-        case 'fileUpdated':
-          addMessage(\`✅ \${message.message}: \${message.filePath}\`, 'bot');
-          break;
-        case 'fileUpdateError':
-          addMessage(\`❌ \${message.error}\`, 'bot');
-          break;
-        case 'vcdInfo':
-          // 接收到 VCD 文件信息，渲染波形预览
-          if (message.containerId && message.vcdInfo) {
-            renderWaveformInfo(message.containerId, message.vcdInfo);
-          }
-          break;
-        case 'conversationHistory':
-          // 接收到会话历史数据
-          if (message.history) {
-            renderConversationHistory(message.history);
-          }
-          break;
-        case 'conversationLoaded':
-          // 会话加载成功，清空当前消息并显示历史消息
-          messagesEl.innerHTML = '';
-          if (message.messages && message.messages.length > 0) {
-            message.messages.forEach(msg => {
-              addMessage(msg.text, msg.sender);
-            });
-          }
-          currentConversationId = message.conversationId;
-          break;
-        case 'newConversationCreated':
-          // 新会话创建成功，清空消息区域
-          messagesEl.innerHTML = '';
-          currentConversationId = message.conversationId;
-          // 显示 header
-          const header = document.querySelector('.header');
-          if (header) {
-            header.classList.remove('hidden');
-          }
+
+        case 'showQuestion':
+          // 显示用户问题
+          showQuestion(message.askId, message.question, message.options);
           break;
+
+        default:
+          console.log('[WebView] 未处理的消息类型:', message.command);
       }
     });
 
-    // 更新或创建流式消息
-    function updateOrCreateStreamingMessage(text) {
-      hideLoadingIndicator();
-
-      if (!currentStreamingMessage) {
-        // 创建新的流式消息元素
-        const div = document.createElement('div');
-        div.className = 'message bot-message streaming';
-
-        const messageContent = document.createElement('div');
-        messageContent.className = 'message-content';
-        messageContent.textContent = text;
-        div.appendChild(messageContent);
-
-        messagesEl.appendChild(div);
-        currentStreamingMessage = div;
-      } else {
-        // 更新现有消息内容
-        const messageContent = currentStreamingMessage.querySelector('.message-content');
-        if (messageContent) {
-          messageContent.textContent = text;
-        }
-      }
-
-      // 滚动到底部
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    // 完成流式消息
-    function finalizeStreamingMessage(finalText) {
-      if (currentStreamingMessage) {
-        const messageContent = currentStreamingMessage.querySelector('.message-content');
-        if (messageContent) {
-          messageContent.textContent = finalText;
-        }
-        currentStreamingMessage.classList.remove('streaming');
-
-        // 添加操作按钮
-        const actionsDiv = document.createElement('div');
-        actionsDiv.className = 'message-actions';
-
-        const copyBtn = document.createElement('button');
-        copyBtn.className = 'action-btn';
-        copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
-        copyBtn.onclick = () => copyMessage(finalText, copyBtn);
-        actionsDiv.appendChild(copyBtn);
-
-        currentStreamingMessage.appendChild(actionsDiv);
-        currentStreamingMessage = null;
-      }
-
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    // 显示加载指示器
-    function showLoadingIndicator(text) {
-      hideLoadingIndicator();
-
-      loadingIndicator = document.createElement('div');
-      loadingIndicator.className = 'message bot-message loading-message';
-      loadingIndicator.innerHTML = \`
-        <div class="loading-dots">
-          <span></span><span></span><span></span>
-        </div>
-        <span class="loading-text">\${text}</span>
-      \`;
-      messagesEl.appendChild(loadingIndicator);
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    // 隐藏加载指示器
-    function hideLoadingIndicator() {
-      if (loadingIndicator) {
-        loadingIndicator.remove();
-        loadingIndicator = null;
-      }
-    }
-
-    // 更新状态栏
-    function updateStatusBar(text, type) {
-      const statusBar = document.getElementById('statusBar');
-      const statusText = document.getElementById('statusText');
-      if (statusBar && statusText) {
-        statusText.textContent = text;
-        statusBar.className = 'status-bar ' + (type || 'thinking');
-        statusBar.style.display = 'flex';
-      }
-    }
-
-    // 隐藏状态栏
-    function hideStatusBar() {
-      const statusBar = document.getElementById('statusBar');
-      if (statusBar) {
-        statusBar.style.display = 'none';
-      }
-    }
-
-    // 渲染分段消息
-    function renderSegments(segments) {
-      console.log('[WebView] renderSegments 被调用, segments:', segments);
-      if (!segments || segments.length === 0) {
-        console.log('[WebView] segments 为空，跳过渲染');
-        return;
-      }
-
-      // 移除流式消息（如果有）
-      if (currentStreamingMessage) {
-        console.log('[WebView] 移除流式消息');
-        currentStreamingMessage.remove();
-        currentStreamingMessage = null;
-      }
-
-      // 移除所有工具状态消息（因为会在分段中显示）
-      const toolStatuses = messagesEl.querySelectorAll('.tool-status');
-      console.log('[WebView] 找到工具状态消息数量:', toolStatuses.length);
-      toolStatuses.forEach(el => {
-        console.log('[WebView] 移除工具状态消息:', el.className);
-        el.remove();
-      });
-
-      // 创建消息容器
-      const container = document.createElement('div');
-      container.className = 'message bot-message segmented-message';
-
-      segments.forEach((segment, index) => {
-        const segmentDiv = document.createElement('div');
-        segmentDiv.className = 'message-segment segment-' + segment.type;
-
-        if (segment.type === 'text' && segment.content) {
-          segmentDiv.innerHTML = formatText(segment.content);
-        } else if (segment.type === 'tool') {
-          const statusIcon = segment.toolStatus === 'success' ? '✅' :
-                            segment.toolStatus === 'error' ? '❌' : '🔧';
-          const statusClass = 'tool-' + (segment.toolStatus || 'running');
-          segmentDiv.className += ' ' + statusClass;
-          segmentDiv.innerHTML = \`
-            <div class="tool-segment-header">
-              <span class="tool-segment-icon">\${statusIcon}</span>
-              <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
-            </div>
-            \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</div>\` : ''}
-          \`;
-        } else if (segment.type === 'question') {
-          segmentDiv.innerHTML = \`
-            <div class="question-segment">
-              <div class="question-text">\${segment.question || ''}</div>
-              <div class="question-options">
-                \${(segment.options || []).map(opt => \`<span class="question-opt">\${opt}</span>\`).join('')}
-              </div>
-            </div>
-          \`;
-        }
-
-        container.appendChild(segmentDiv);
-      });
-
-      // 添加操作按钮
-      const actionsDiv = document.createElement('div');
-      actionsDiv.className = 'message-actions';
-      const copyBtn = document.createElement('button');
-      copyBtn.className = 'action-btn';
-      copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
-      copyBtn.onclick = () => {
-        const textContent = segments
-          .filter(s => s.type === 'text' && s.content)
-          .map(s => s.content)
-          .join('\\n');
-        copyMessage(textContent, copyBtn);
-      };
-      actionsDiv.appendChild(copyBtn);
-      container.appendChild(actionsDiv);
-
-      messagesEl.appendChild(container);
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    // 格式化文本（简单的换行处理）
-    function formatText(text) {
-      return text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/\\n/g, '<br>');
-    }
-
-    // 添加工具状态消息
-    function addToolStatus(toolName, status, detail) {
-      const statusIcons = {
-        start: '🔧',
-        complete: '✅',
-        error: '❌'
-      };
-      const statusTexts = {
-        start: '正在执行',
-        complete: '执行完成',
-        error: '执行失败'
-      };
-
-      const div = document.createElement('div');
-      div.className = \`message tool-status tool-\${status}\`;
-      div.innerHTML = \`
-        <span class="tool-icon">\${statusIcons[status]}</span>
-        <span class="tool-name">\${toolName}</span>
-        <span class="tool-status-text">\${statusTexts[status]}</span>
-        \${detail ? \`<div class="tool-detail">\${detail}</div>\` : ''}
-      \`;
-      messagesEl.appendChild(div);
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    // 显示用户问题
-    function showUserQuestion(askId, question, options) {
-      const div = document.createElement('div');
-      div.className = 'message bot-message question-message';
-      div.innerHTML = \`
-        <div class="question-text">\${question}</div>
-        <div class="question-options">
-          \${options.map((opt, i) => \`
-            <button class="question-option" data-ask-id="\${askId}" data-option="\${opt}">
-              \${opt}
-            </button>
-          \`).join('')}
-          <div class="custom-input-container">
-            <input type="text" class="custom-input" placeholder="或输入自定义回答..." />
-            <button class="custom-submit" data-ask-id="\${askId}">发送</button>
-          </div>
-        </div>
-      \`;
-
-      // 绑定选项点击事件
-      div.querySelectorAll('.question-option').forEach(btn => {
-        btn.onclick = () => {
-          const selected = btn.dataset.option;
-          submitAnswer(askId, [selected]);
-          div.classList.add('answered');
-          btn.classList.add('selected');
-        };
-      });
-
-      // 绑定自定义输入提交
-      const customInput = div.querySelector('.custom-input');
-      const customSubmit = div.querySelector('.custom-submit');
-      customSubmit.onclick = () => {
-        const value = customInput.value.trim();
-        if (value) {
-          submitAnswer(askId, null, value);
-          div.classList.add('answered');
-        }
-      };
-
-      messagesEl.appendChild(div);
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    // 提交用户回答
-    function submitAnswer(askId, selected, customInput) {
-      vscode.postMessage({
-        command: 'submitAnswer',
-        askId: askId,
-        selected: selected,
-        customInput: customInput
-      });
-    }
-
-    // 支持回车键读取文件
-    filePathInput.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') {
-        readFile();
-      }
-    });
-
-    // 自动调整 textarea 高度
-    function autoResizeTextarea() {
-      messageInput.style.height = 'auto';
-      messageInput.style.height = messageInput.scrollHeight + 'px';
-    }
-
-    // 监听输入事件，自动调整高度
-    messageInput.addEventListener('input', autoResizeTextarea);
-
-    // 初始化时调整一次高度
-    autoResizeTextarea();
-
-    // 初始化时检查是否需要显示 header
-    checkHeaderVisibility();
-
-    messageInput.focus();
-
-    // 检查 header 显示状态
-    function checkHeaderVisibility() {
-      const allMessages = messagesEl.querySelectorAll('.message');
-      const header = document.querySelector('.header');
-      if (allMessages.length > 0 && header) {
-        header.classList.add('hidden');
-      } else if (header) {
-        header.classList.remove('hidden');
-      }
-    }
-
+    ${getMessageAreaScript()}
     ${getWaveformPreviewScript()}
     ${getConversationHistoryBarScript()}
-  </script>
-</body>
+    ${getInputAreaScript()}
+  </script></body>
 </html>`;
 }

From 0b4ec2ca6eb8b48517ef4af21bff7c4172675d2b Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 24 Dec 2025 10:25:12 +0800
Subject: [PATCH 5/9] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E4=BA=86=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E8=B0=83=E7=94=A8=E7=9A=84=E6=A0=B7=E5=BC=8F=20+=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=B7=A5=E5=85=B7=E8=B0=83=E7=94=A8=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E5=A4=AA=E9=95=BF=E5=8F=AF=E4=BB=A5=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/messageArea.ts | 179 ++++++++++++++++++++++++++++++++-------
 1 file changed, 148 insertions(+), 31 deletions(-)

diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts
index a70cbcf..342afab 100644
--- a/src/views/messageArea.ts
+++ b/src/views/messageArea.ts
@@ -349,38 +349,57 @@ export function getMessageAreaStyles(): string {
       }
 
       .segment-tool {
-        background: var(--vscode-textBlockQuote-background);
-        border-radius: 6px;
-        margin: 8px 0;
-        padding: 10px 14px;
+        margin: 4px 0;
+        padding: 4px 0;
       }
       .tool-segment-header {
         display: flex;
         align-items: center;
-        gap: 8px;
-        font-size: 13px;
-      }
-      .tool-segment-icon {
-        font-size: 14px;
-      }
-      .tool-segment-name {
-        font-weight: 500;
-        color: var(--vscode-foreground);
-      }
-      .tool-segment-result {
-        margin-top: 6px;
+        gap: 6px;
         font-size: 12px;
         color: var(--vscode-descriptionForeground);
-        padding-left: 22px;
+        cursor: pointer;
       }
-      .segment-tool.tool-success {
-        border-left: 3px solid var(--vscode-charts-green);
+      .tool-segment-icon {
+        font-size: 12px;
       }
-      .segment-tool.tool-error {
-        border-left: 3px solid var(--vscode-charts-red);
+      .tool-segment-name {
+        font-weight: normal;
       }
-      .segment-tool.tool-running {
-        border-left: 3px solid var(--vscode-charts-blue);
+      .tool-segment-result {
+        display: inline;
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+        margin-left: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 500px;
+      }
+      .tool-collapse-icon {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+        cursor: pointer;
+      }
+      .tool-collapse-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .tool-segment-header.collapsed .tool-collapse-icon {
+        transform: rotate(0deg);
+      }
+      .tool-segment-header:not(.collapsed) .tool-collapse-icon {
+        transform: rotate(0deg);
+      }
+      .tool-segment-content {
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+      }
+      .tool-segment-content.collapsed {
+        max-height: 0;
       }
       .segment-question {
         background: var(--vscode-textBlockQuote-background);
@@ -689,15 +708,64 @@ export function getMessageAreaScript(): string {
           } else if (segment.type === 'tool') {
             const statusIcon = segment.toolStatus === 'success' ? '✅' :
                               segment.toolStatus === 'error' ? '❌' : '🔧';
-            const statusClass = 'tool-' + (segment.toolStatus || 'running');
-            segmentDiv.className += ' ' + statusClass;
+            const toolResult = segment.toolResult || '';
+
+            // 检查工具结果是否过长(超过一行显示不下)
+            const shouldCollapse = toolResult && toolResult.length > 60;
+
+            // 折叠图标 SVG
+            const collapseIconSvg = \`
+              <span class="tool-collapse-icon">
+                <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
+                </svg>
+                <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
+                </svg>
+              </span>
+            \`;
+
             segmentDiv.innerHTML = \`
-              <div class="tool-segment-header">
+              <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
+                \${shouldCollapse ? collapseIconSvg : ''}
                 <span class="tool-segment-icon">\${statusIcon}</span>
                 <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+                \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
-              \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</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>\` : ''}
             \`;
+
+            // 添加折叠/展开事件监听
+            if (shouldCollapse) {
+              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');
+
+                    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';
+                    } 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';
+                    }
+                  });
+                }
+              }, 0);
+            }
           } else if (segment.type === 'question') {
             segmentDiv.className += ' segment-question';
 
@@ -831,15 +899,64 @@ export function getMessageAreaScript(): string {
           } else if (segment.type === 'tool') {
             const statusIcon = segment.toolStatus === 'success' ? '✅' :
                               segment.toolStatus === 'error' ? '❌' : '🔧';
-            const statusClass = 'tool-' + (segment.toolStatus || 'running');
-            segmentDiv.className += ' ' + statusClass;
+            const toolResult = segment.toolResult || '';
+
+            // 检查工具结果是否过长(超过一行显示不下)
+            const shouldCollapse = toolResult && toolResult.length > 60;
+
+            // 折叠图标 SVG
+            const collapseIconSvg = \`
+              <span class="tool-collapse-icon">
+                <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
+                </svg>
+                <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
+                </svg>
+              </span>
+            \`;
+
             segmentDiv.innerHTML = \`
-              <div class="tool-segment-header">
+              <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
+                \${shouldCollapse ? collapseIconSvg : ''}
                 <span class="tool-segment-icon">\${statusIcon}</span>
                 <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+                \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
-              \${segment.toolResult ? \`<div class="tool-segment-result">\${segment.toolResult}</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>\` : ''}
             \`;
+
+            // 添加折叠/展开事件监听
+            if (shouldCollapse) {
+              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');
+
+                    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';
+                    } 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';
+                    }
+                  });
+                }
+              }, 0);
+            }
           } else if (segment.type === 'question') {
             segmentDiv.innerHTML = \`
               <div class="question-segment">

From fb1156d24fc2d0bc86b6feba407250200c3ca5fc Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 24 Dec 2025 10:43:55 +0800
Subject: [PATCH 6/9] =?UTF-8?q?feat:=E5=B0=86=E8=8B=B1=E6=96=87=E7=9A=84?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E5=90=8D=E7=A7=B0=E6=98=A0=E5=B0=84=E4=B8=BA?=
 =?UTF-8?q?=E4=B8=AD=E6=96=87=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/messageArea.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts
index 342afab..fc6fb46 100644
--- a/src/views/messageArea.ts
+++ b/src/views/messageArea.ts
@@ -491,6 +491,19 @@ export function getMessageAreaStyles(): string {
  */
 export function getMessageAreaScript(): string {
   return `
+      // 工具名称映射
+      function getToolDisplayName(toolName) {
+        const toolNameMap = {
+          'file_read': '已完成文件读取',
+          'file_write': '已完成文件写入',
+          'file_list': '已读取目录',
+          'syntax_check': '语法检查',
+          'simulation': '仿真',
+          'waveform_summary': '波形分析'
+        };
+        return toolNameMap[toolName] || toolName;
+      }
+
       // 添加消息
       function addMessage(text, sender) {
         const div = document.createElement('div');
@@ -729,7 +742,7 @@ export function getMessageAreaScript(): string {
               <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
                 \${shouldCollapse ? collapseIconSvg : ''}
                 <span class="tool-segment-icon">\${statusIcon}</span>
-                <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+                <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>\` : ''}
@@ -920,7 +933,7 @@ export function getMessageAreaScript(): string {
               <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
                 \${shouldCollapse ? collapseIconSvg : ''}
                 <span class="tool-segment-icon">\${statusIcon}</span>
-                <span class="tool-segment-name">\${segment.toolName || '工具'}</span>
+                <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>\` : ''}
@@ -1054,7 +1067,7 @@ export function getMessageAreaScript(): string {
         div.className = \`message tool-status tool-\${status}\`;
         div.innerHTML = \`
           <span class="tool-icon">\${statusIcons[status]}</span>
-          <span class="tool-name">\${toolName}</span>
+          <span class="tool-name">\${getToolDisplayName(toolName)}</span>
           <span class="tool-status-text">\${statusTexts[status]}</span>
           \${detail ? \`<div class="tool-detail">\${detail}</div>\` : ''}
         \`;

From 463eedf1dd1b9427da753d36f0317706a9e779ee Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 24 Dec 2025 11:26:25 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0=E4=BA=86=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E8=B0=83=E7=94=A8=E7=9A=84icon=E6=9B=BF=E6=8D=A2=20-?=
 =?UTF-8?q?=20=E8=BF=98=E5=B0=86icon=E6=8A=BD=E5=8F=96=E5=87=BA=E6=9D=A5?=
 =?UTF-8?q?=E6=88=90=E4=B8=BA=E7=8B=AC=E7=AB=8B=E7=9A=84=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B9=E4=BE=BF=E7=BB=9F=E4=B8=80=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/toolIcons.ts | 52 +++++++++++++++++++++
 src/views/messageArea.ts   | 92 ++++++++++++++++++++++++--------------
 2 files changed, 110 insertions(+), 34 deletions(-)
 create mode 100644 src/constants/toolIcons.ts

diff --git a/src/constants/toolIcons.ts b/src/constants/toolIcons.ts
new file mode 100644
index 0000000..ca881be
--- /dev/null
+++ b/src/constants/toolIcons.ts
@@ -0,0 +1,52 @@
+/**
+ * 工具图标定义
+ * 包含各种工具的 SVG 图标
+ */
+
+/**
+ * 折叠图标 SVG（用于可折叠的工具结果）
+ */
+export const collapseIconSvg = `
+  <span class="tool-collapse-icon">
+    <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
+    </svg>
+    <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
+    </svg>
+  </span>
+`;
+
+/**
+ * 文件写入完成图标 SVG
+ */
+export const fileWriteIconSvg = `
+  <span class="tool-file-write-icon">
+    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path d="M866.304 852.096H161.728a31.36 31.36 0 0 1-30.528-30.592 31.36 31.36 0 0 1 30.528-30.528h704.64a31.36 31.36 0 0 1 30.528 30.528c0 16.32-12.224 30.592-30.592 30.592z m-65.152-134.4h-392.96a31.36 31.36 0 0 1-30.592-30.592 31.36 31.36 0 0 1 30.528-30.528h391.04a31.36 31.36 0 0 1 30.528 30.528c0 16.32-12.224 30.592-28.544 30.592z m-596.672-179.2l91.648 93.632-40.704 40.768-91.648-91.648 40.704-42.752zM552.704 188.16l91.648 93.696-42.752 40.704-91.648-91.648 42.752-42.752z" fill="#8a8a8a"/>
+      <path d="M176 733.952a72.96 72.96 0 0 1-50.88-22.4c-14.272-14.272-22.4-36.672-22.4-56.96l8.128-99.84 423.552-425.6a104.576 104.576 0 0 1 75.328-30.528c32.64 0 63.168 14.272 85.568 36.672 24.384 24.384 36.608 56.96 36.608 89.6 0 28.48-12.16 54.976-32.576 73.28l-419.456 427.648-99.84 8.128H176z m-4.096-152.704l-6.08 77.376c0 4.096 2.048 8.128 4.096 8.128h2.048l77.376-6.08 417.344-425.6c8.128-8.128 12.224-18.304 12.224-28.48 0-14.272-6.08-28.48-16.32-38.72-10.24-10.24-22.4-16.32-36.672-16.32-12.16 0-22.4 4.096-30.528 12.224L171.904 581.248z" fill="#8a8a8a"/>
+    </svg>
+  </span>
+`;
+
+/**
+ * 语法检查图标 SVG
+ */
+export const syntaxCheckIconSvg = `
+  <span class="tool-syntax-check-icon">
+    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path d="M143.36 241.8688h638.976a33.28 33.28 0 0 0 0-66.56H143.36a33.28 33.28 0 0 0 0 66.56zM143.36 421.2736h423.5264a33.28 33.28 0 0 0 0-66.56H143.36a33.28 33.28 0 0 0 0 66.56zM419.0208 532.8384H143.36a33.28 33.28 0 0 0 0 66.56h275.6608a33.28 33.28 0 0 0 0-66.56zM365.5168 709.5296H129.0752a33.28 33.28 0 0 0 0 66.56h236.4416a33.28 33.28 0 1 0 0-66.56zM918.4256 791.8592l-82.5856-82.432a178.8928 178.8928 0 1 0-47.0528 47.0528l82.5856 82.4832a33.28 33.28 0 1 0 47.0528-47.104z m-342.3232-182.9376a112.128 112.128 0 1 1 112.128 112.0768 112.2816 112.2816 0 0 1-112.128-112.0768z" fill="#8a8a8a"/>
+    </svg>
+  </span>
+`;
+
+/**
+ * 已检索代码图标 SVG
+ */
+export const SearchCode = `
+  <span class="tool-search-code-icon">
+    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path d="M916.33 859.76L678.51 621.94A318.92 318.92 0 0 0 768 400c0-176.73-143.27-320-320-320S128 223.27 128 400s143.27 320 320 320a318.48 318.48 0 0 0 167.88-47.55l243.88 243.88a40 40 0 1 0 56.57-56.57zM192 400c0-141.38 114.62-256 256-256s256 114.62 256 256-114.62 256-256 256-256-114.62-256-256z" fill="#8a8a8a"/>
+    </svg>
+  </span>
+`;
diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts
index fc6fb46..3c5f4f2 100644
--- a/src/views/messageArea.ts
+++ b/src/views/messageArea.ts
@@ -10,6 +10,13 @@
  * - 显示工具执行状态和加载指示器
  */
 
+import {
+  collapseIconSvg,
+  fileWriteIconSvg,
+  syntaxCheckIconSvg,
+  SearchCode,
+} from "../constants/toolIcons";
+
 /**
  * 获取消息区域的 HTML 内容
  */
@@ -394,6 +401,39 @@ export function getMessageAreaStyles(): string {
       .tool-segment-header:not(.collapsed) .tool-collapse-icon {
         transform: rotate(0deg);
       }
+      .tool-file-write-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        margin-right: 6px;
+      }
+      .tool-file-write-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .tool-syntax-check-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        margin-right: 6px;
+      }
+      .tool-syntax-check-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .tool-search-code-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        margin-right: 6px;
+      }
+      .tool-search-code-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
       .tool-segment-content {
         overflow: hidden;
         transition: max-height 0.3s ease;
@@ -491,15 +531,21 @@ export function getMessageAreaStyles(): string {
  */
 export function getMessageAreaScript(): string {
   return `
+      // 工具图标定义
+      const collapseIconSvg = \`${collapseIconSvg}\`;
+      const fileWriteIconSvg = \`${fileWriteIconSvg}\`;
+      const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`;
+      const searchCodeIconSvg = \`${SearchCode}\`;
+
       // 工具名称映射
       function getToolDisplayName(toolName) {
         const toolNameMap = {
           'file_read': '已完成文件读取',
           'file_write': '已完成文件写入',
-          'file_list': '已读取目录',
-          'syntax_check': '语法检查',
-          'simulation': '仿真',
-          'waveform_summary': '波形分析'
+          'file_list': '已检索代码文件',
+          'syntax_check': '已完成语法检查',
+          'simulation': '已完成仿真',
+          'waveform_summary': '已完成波形分析'
         };
         return toolNameMap[toolName] || toolName;
       }
@@ -719,29 +765,18 @@ export function getMessageAreaScript(): string {
             segmentDiv.className += ' segment-text';
             segmentDiv.innerHTML = formatText(segment.content);
           } else if (segment.type === 'tool') {
-            const statusIcon = segment.toolStatus === 'success' ? '✅' :
-                              segment.toolStatus === 'error' ? '❌' : '🔧';
+            const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
             const toolResult = segment.toolResult || '';
 
             // 检查工具结果是否过长(超过一行显示不下)
             const shouldCollapse = toolResult && toolResult.length > 60;
 
-            // 折叠图标 SVG
-            const collapseIconSvg = \`
-              <span class="tool-collapse-icon">
-                <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
-                </svg>
-                <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
-                </svg>
-              </span>
-            \`;
-
             segmentDiv.innerHTML = \`
               <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
                 \${shouldCollapse ? collapseIconSvg : ''}
-                <span class="tool-segment-icon">\${statusIcon}</span>
+                \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_write' ? fileWriteIconSvg : ''}
+                \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'syntax_check' ? syntaxCheckIconSvg : ''}
+                \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_list' ? searchCodeIconSvg : ''}
                 <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
                 \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>
@@ -910,29 +945,18 @@ export function getMessageAreaScript(): string {
             segmentDiv.className += ' segment-text';
             segmentDiv.innerHTML = formatText(segment.content);
           } else if (segment.type === 'tool') {
-            const statusIcon = segment.toolStatus === 'success' ? '✅' :
-                              segment.toolStatus === 'error' ? '❌' : '🔧';
+            const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
             const toolResult = segment.toolResult || '';
 
             // 检查工具结果是否过长(超过一行显示不下)
             const shouldCollapse = toolResult && toolResult.length > 60;
 
-            // 折叠图标 SVG
-            const collapseIconSvg = \`
-              <span class="tool-collapse-icon">
-                <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
-                </svg>
-                <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
-                </svg>
-              </span>
-            \`;
-
             segmentDiv.innerHTML = \`
               <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
                 \${shouldCollapse ? collapseIconSvg : ''}
-                <span class="tool-segment-icon">\${statusIcon}</span>
+                \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_write' ? fileWriteIconSvg : ''}
+                \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'syntax_check' ? syntaxCheckIconSvg : ''}
+                \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_list' ? searchCodeIconSvg : ''}
                 <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
                 \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
               </div>

From 9c787627a97c0eeaae78d63ec99638d43d0700c7 Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Wed, 24 Dec 2025 12:00:03 +0800
Subject: [PATCH 8/9] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0=E5=B7=B2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E4=BB=BF=E7=9C=9F=E4=B9=8B=E5=90=8E=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=B3=A2=E5=BD=A2=E9=A2=84=E8=A7=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B1=95=E7=A4=BA=E6=B3=A2=E5=BD=A2=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/messageArea.ts    | 44 +++++++++++++++++++++++++++++++++++++
 src/views/webviewContent.ts | 23 ++++++++++++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts
index 3c5f4f2..f88f87f 100644
--- a/src/views/messageArea.ts
+++ b/src/views/messageArea.ts
@@ -16,6 +16,10 @@ import {
   syntaxCheckIconSvg,
   SearchCode,
 } from "../constants/toolIcons";
+import {
+  getWaveformPreviewContent,
+  getWaveformPreviewScript,
+} from "./waveformPreviewContent";
 
 /**
  * 获取消息区域的 HTML 内容
@@ -523,6 +527,8 @@ export function getMessageAreaStyles(): string {
         color: var(--vscode-button-secondaryForeground);
         border-radius: 4px;
         font-size: 12px;}
+
+      ${getWaveformPreviewContent()}
     `;
 }
 
@@ -783,6 +789,24 @@ export function getMessageAreaScript(): string {
               \${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>\` : ''}
             \`;
 
+            // 如果是仿真工具且成功完成，尝试添加波形预览
+            if (segment.toolName === 'simulation' && segment.toolStatus === 'success') {
+              // 优先使用显式提供的路径，否则从结果文本中解析
+              let vcdPath = segment.vcdFilePath;
+              if (!vcdPath && segment.toolResult) {
+                const match = String(segment.toolResult).match(/路径\s*:\s*(.+)/);
+                if (match && match[1]) {
+                  vcdPath = match[1].trim();
+                }
+              }
+
+              if (vcdPath) {
+                const fileName = segment.fileName || vcdPath.split(/[\\\\\/]/).pop() || 'waveform.vcd';
+                const waveformPreview = createWaveformPreview(vcdPath, fileName);
+                segmentDiv.appendChild(waveformPreview);
+              }
+            }
+
             // 添加折叠/展开事件监听
             if (shouldCollapse) {
               setTimeout(() => {
@@ -963,6 +987,24 @@ export function getMessageAreaScript(): string {
               \${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>\` : ''}
             \`;
 
+            // 如果是仿真工具且成功完成，尝试添加波形预览
+            if (segment.toolName === 'simulation' && segment.toolStatus === 'success') {
+              // 优先使用显式提供的路径，否则从结果文本中解析
+              let vcdPath = segment.vcdFilePath;
+              if (!vcdPath && segment.toolResult) {
+                const match = String(segment.toolResult).match(/路径\s*:\s*(.+)/);
+                if (match && match[1]) {
+                  vcdPath = match[1].trim();
+                }
+              }
+
+              if (vcdPath) {
+                const fileName = segment.fileName || vcdPath.split(/[\\\\\/]/).pop() || 'waveform.vcd';
+                const waveformPreview = createWaveformPreview(vcdPath, fileName);
+                segmentDiv.appendChild(waveformPreview);
+              }
+            }
+
             // 添加折叠/展开事件监听
             if (shouldCollapse) {
               setTimeout(() => {
@@ -1218,5 +1260,7 @@ export function getMessageAreaScript(): string {
         customInput: answer
       });
     }
+
+    ${getWaveformPreviewScript()}
   `;
 }
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index 8918208..c3e321a 100644
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@@ -484,9 +484,30 @@ export function getWebviewContent(iconUri?: string): string {
           hideLoadingIndicator();
           break;
 
+        case 'vcdInfo':
+          // 渲染迷你波形预览信息
+          try {
+            if (message.containerId && typeof renderWaveformInfo === 'function') {
+              renderWaveformInfo(message.containerId, message.vcdInfo || {});
+            }
+          } catch (e) {
+            console.warn('[WebView] 渲染波形信息失败:', e);
+          }
+          break;
+
         case 'vcdGenerated':
-          // VCD 文件生成成功
+          // VCD 文件生成成功，添加消息并附带波形预览
           addMessage(message.text, 'bot');
+          try {
+            if (message.vcdFilePath) {
+              const lastMsg = messagesEl ? messagesEl.lastElementChild : null;
+              if (lastMsg && typeof addWaveformPreviewToMessage === 'function') {
+                addWaveformPreviewToMessage(lastMsg, message.vcdFilePath, message.fileName || 'waveform.vcd');
+              }
+            }
+          } catch (e) {
+            console.warn('[WebView] 添加波形预览失败:', e);
+          }
           break;
 
         case 'fileContent':

From b676846b2f4ab61e9914df08504d4263a7e4430f Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Thu, 25 Dec 2025 09:23:53 +0800
Subject: [PATCH 9/9] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0plan=E7=9A=84?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=E7=9A=84=E5=89=8D=E7=AB=AF=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inputArea.ts | 80 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts
index ad52f4c..5bf2ee1 100644
--- a/src/views/inputArea.ts
+++ b/src/views/inputArea.ts
@@ -8,6 +8,17 @@ export function getInputAreaContent(): string {
     <div class="input-area">
       <div class="input-group">
         <div class="input-wrapper">
+          <!-- Plan 开关 -->
+          <div class="plan-toggle-container">
+            <div class="tooltip">
+              <label class="plan-toggle">
+                <input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
+                <span class="plan-toggle-slider"></span>
+                <span class="plan-toggle-label">Plan</span>
+              </label>
+              <span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
+            </div>
+          </div>
           <textarea
             id="messageInput"
             placeholder="输入您的问题..."
@@ -19,7 +30,7 @@ export function getInputAreaContent(): string {
                 <select id="modeSelect">
                   <option value="agent" selected>Agent</option>
                   <option value="ask">Ask</option>
-                  <option value="plan">Plan</option>
+                  <option value="auto">Auto</option>
                 </select>
                 <span class="tooltiptext">切换模型</span>
               </div>
@@ -112,6 +123,55 @@ export function getInputAreaStyles(): string {
       gap: 8px;
       width: 100%;
     }
+    /* Plan 开关样式 */
+    .plan-toggle-container {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: -4px;
+    }
+    .plan-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .plan-toggle input[type="checkbox"] {
+      display: none;
+    }
+    .plan-toggle-slider {
+      position: relative;
+      width: 36px;
+      height: 20px;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 10px;
+      transition: all 0.3s ease;
+    }
+    .plan-toggle-slider::before {
+      content: "";
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      left: 2px;
+      top: 2px;
+      background: var(--vscode-foreground);
+      border-radius: 50%;
+      transition: all 0.3s ease;
+    }
+    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
+      background: #409eff;
+      border-color: #409eff;
+    }
+    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
+      transform: translateX(16px);
+      background: white;
+    }
+    .plan-toggle-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+    }
     .input-bottom-row {
       display: flex;
       align-items: center;
@@ -414,7 +474,7 @@ export function getInputAreaScript(): string {
 
       const modeSelect = document.getElementById('modeSelect');
       const mode = modeSelect ? modeSelect.value : 'agent';
-      
+
       addMessage(text, 'user');
       vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
       messageInput.value = '';
@@ -425,6 +485,22 @@ export function getInputAreaScript(): string {
       resetOptimizeButton();
     }
 
+    // Plan 开关处理函数
+    function handlePlanToggle() {
+      const planToggle = document.getElementById('planToggle');
+      const planTooltip = document.getElementById('planTooltip');
+
+      if (planToggle && planTooltip) {
+        if (planToggle.checked) {
+          // 开启 Plan 模式
+          planTooltip.textContent = '关闭 Plan 模式';
+        } else {
+          // 关闭 Plan 模式
+          planTooltip.textContent = '启用 Plan 模式';
+        }
+      }
+    }
+
     let isOptimized = false; // 标记是否已优化
     let originalText = ''; // 保存原始文本用于撤回