Compare commits
8 Commits
feat/plugi
...
6c5d470bad
| Author | SHA1 | Date | |
|---|---|---|---|
| 6c5d470bad | |||
| c21ad95963 | |||
| 7c1f1fae07 | |||
| c61e29a41f | |||
| 703912bb5f | |||
| 8ad6a48e8f | |||
| ba75541dd6 | |||
| f87adab7be |
@ -1,444 +0,0 @@
|
|||||||
# 波形预览功能技术文档
|
|
||||||
|
|
||||||
## 功能概述
|
|
||||||
|
|
||||||
在对话界面中显示 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 数据和消息处理
|
|
||||||
|
|
||||||
整个功能采用模块化设计，易于维护和扩展。
|
|
||||||
21
package.json
21
package.json
@ -91,6 +91,26 @@
|
|||||||
"type": "webview"
|
"type": "webview"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"configuration": {
|
||||||
|
"title": "IC Coder",
|
||||||
|
"properties": {
|
||||||
|
"icCoder.backendUrl": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "http://localhost:2233",
|
||||||
|
"description": "后端服务地址"
|
||||||
|
},
|
||||||
|
"icCoder.timeout": {
|
||||||
|
"type": "number",
|
||||||
|
"default": 60000,
|
||||||
|
"description": "请求超时时间（毫秒）"
|
||||||
|
},
|
||||||
|
"icCoder.userId": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "default-user",
|
||||||
|
"description": "用户ID（临时配置）"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -125,6 +145,7 @@
|
|||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wavedrom/doppler": "^1.14.0",
|
"@wavedrom/doppler": "^1.14.0",
|
||||||
|
"eventsource-parser": "^3.0.6",
|
||||||
"iconv-lite": "^0.7.1",
|
"iconv-lite": "^0.7.1",
|
||||||
"onml": "^2.1.0",
|
"onml": "^2.1.0",
|
||||||
"style-mod": "^4.1.3",
|
"style-mod": "^4.1.3",
|
||||||
|
|||||||
9
pnpm-lock.yaml
generated
9
pnpm-lock.yaml
generated
@ -11,6 +11,9 @@ importers:
|
|||||||
'@wavedrom/doppler':
|
'@wavedrom/doppler':
|
||||||
specifier: ^1.14.0
|
specifier: ^1.14.0
|
||||||
version: 1.14.0
|
version: 1.14.0
|
||||||
|
eventsource-parser:
|
||||||
|
specifier: ^3.0.6
|
||||||
|
version: 3.0.6
|
||||||
iconv-lite:
|
iconv-lite:
|
||||||
specifier: ^0.7.1
|
specifier: ^0.7.1
|
||||||
version: 0.7.1
|
version: 0.7.1
|
||||||
@ -662,6 +665,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
|
resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
|
||||||
engines: {node: '>=0.8.x'}
|
engines: {node: '>=0.8.x'}
|
||||||
|
|
||||||
|
eventsource-parser@3.0.6:
|
||||||
|
resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
|
||||||
|
engines: {node: '>=18.0.0'}
|
||||||
|
|
||||||
fast-deep-equal@3.1.3:
|
fast-deep-equal@3.1.3:
|
||||||
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
|
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
|
||||||
|
|
||||||
@ -2119,6 +2126,8 @@ snapshots:
|
|||||||
|
|
||||||
events@3.3.0: {}
|
events@3.3.0: {}
|
||||||
|
|
||||||
|
eventsource-parser@3.0.6: {}
|
||||||
|
|
||||||
fast-deep-equal@3.1.3: {}
|
fast-deep-equal@3.1.3: {}
|
||||||
|
|
||||||
fast-json-stable-stringify@2.1.0: {}
|
fast-json-stable-stringify@2.1.0: {}
|
||||||
|
|||||||
46
src/config/settings.ts
Normal file
46
src/config/settings.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* 配置管理
|
||||||
|
* 从 VSCode 设置读取配置项
|
||||||
|
*/
|
||||||
|
import * as vscode from 'vscode';
|
||||||
|
|
||||||
|
/** 配置项接口 */
|
||||||
|
export interface IccoderConfig {
|
||||||
|
/** 后端服务地址 */
|
||||||
|
backendUrl: string;
|
||||||
|
/** 请求超时时间（毫秒） */
|
||||||
|
timeout: number;
|
||||||
|
/** 用户ID（临时使用，后续对接认证） */
|
||||||
|
userId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 默认配置 */
|
||||||
|
const DEFAULT_CONFIG: IccoderConfig = {
|
||||||
|
backendUrl: 'http://localhost:8080',
|
||||||
|
timeout: 60000,
|
||||||
|
userId: 'default-user'
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取配置项
|
||||||
|
*/
|
||||||
|
export function getConfig(): IccoderConfig {
|
||||||
|
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)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取后端 API 地址
|
||||||
|
*/
|
||||||
|
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}`;
|
||||||
|
return `${baseUrl}${apiPath}`;
|
||||||
|
}
|
||||||
@ -6,19 +6,20 @@ import {
|
|||||||
handleReadFile,
|
handleReadFile,
|
||||||
handleUpdateFile,
|
handleUpdateFile,
|
||||||
handleRenameFile,
|
handleRenameFile,
|
||||||
handleReplaceInFile
|
handleReplaceInFile,
|
||||||
|
handleUserAnswer,
|
||||||
|
abortCurrentDialog
|
||||||
} from "../utils/messageHandler";
|
} from "../utils/messageHandler";
|
||||||
import { VCDViewerPanel } from "./VCDViewerPanel";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建并显示 IC 助手面板
|
* 创建并显示 IC 助手面板
|
||||||
*/
|
*/
|
||||||
export function showICHelperPanel(context: vscode.ExtensionContext, viewColumn?: vscode.ViewColumn) {
|
export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||||
// 创建WebView面板
|
// 创建WebView面板
|
||||||
const panel = vscode.window.createWebviewPanel(
|
const panel = vscode.window.createWebviewPanel(
|
||||||
"icCoder", // 面板ID
|
"icCoder", // 面板ID
|
||||||
"IC Coder", // 面板标题
|
"IC Coder", // 面板标题
|
||||||
viewColumn || vscode.ViewColumn.Beside, // 默认显示在旁边，但可以指定
|
vscode.ViewColumn.Beside, // 显示在旁边
|
||||||
{
|
{
|
||||||
enableScripts: true,
|
enableScripts: true,
|
||||||
retainContextWhenHidden: true,
|
retainContextWhenHidden: true,
|
||||||
@ -62,31 +63,13 @@ export function showICHelperPanel(context: vscode.ExtensionContext, viewColumn?:
|
|||||||
case "showInfo":
|
case "showInfo":
|
||||||
vscode.window.showInformationMessage(message.text);
|
vscode.window.showInformationMessage(message.text);
|
||||||
break;
|
break;
|
||||||
case "openWaveformViewer":
|
// 新增：处理用户回答
|
||||||
// 打开波形查看器
|
case "submitAnswer":
|
||||||
if (message.vcdFilePath) {
|
handleUserAnswer(message.askId, message.selected, message.customInput);
|
||||||
VCDViewerPanel.createOrShow(context.extensionUri, message.vcdFilePath);
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case "getVCDInfo":
|
// 新增：中止对话
|
||||||
// 获取 VCD 文件信息
|
case "abortDialog":
|
||||||
if (message.vcdFilePath && message.containerId) {
|
abortCurrentDialog();
|
||||||
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;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -94,172 +77,3 @@ export function showICHelperPanel(context: vscode.ExtensionContext, viewColumn?:
|
|||||||
context.subscriptions
|
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;
|
|
||||||
}
|
|
||||||
|
|||||||
154
src/services/apiClient.ts
Normal file
154
src/services/apiClient.ts
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
/**
|
||||||
|
* API 客户端
|
||||||
|
* 封装与后端的 HTTP 通信
|
||||||
|
*/
|
||||||
|
import * as https from 'https';
|
||||||
|
import * as http from 'http';
|
||||||
|
import { URL } from 'url';
|
||||||
|
import { getApiUrl, getConfig } from '../config/settings';
|
||||||
|
import type { ToolCallResult, AnswerRequest, ToolResultResponse, AnswerResponse } from '../types/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HTTP 请求选项
|
||||||
|
*/
|
||||||
|
interface RequestOptions {
|
||||||
|
method: 'GET' | 'POST' | 'PUT' | 'DELETE';
|
||||||
|
headers?: Record<string, string>;
|
||||||
|
body?: unknown;
|
||||||
|
timeout?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送 HTTP 请求
|
||||||
|
*/
|
||||||
|
async function request<T>(path: string, options: RequestOptions): Promise<T> {
|
||||||
|
const url = new URL(getApiUrl(path));
|
||||||
|
const { timeout } = getConfig();
|
||||||
|
|
||||||
|
const isHttps = url.protocol === 'https:';
|
||||||
|
const httpModule = isHttps ? https : http;
|
||||||
|
|
||||||
|
const requestOptions: http.RequestOptions = {
|
||||||
|
hostname: url.hostname,
|
||||||
|
port: url.port || (isHttps ? 443 : 80),
|
||||||
|
path: url.pathname + url.search,
|
||||||
|
method: options.method,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options.headers
|
||||||
|
},
|
||||||
|
timeout: options.timeout || timeout
|
||||||
|
};
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const req = httpModule.request(requestOptions, (res) => {
|
||||||
|
let data = '';
|
||||||
|
|
||||||
|
res.on('data', (chunk) => {
|
||||||
|
data += chunk;
|
||||||
|
});
|
||||||
|
|
||||||
|
res.on('end', () => {
|
||||||
|
try {
|
||||||
|
const json = JSON.parse(data);
|
||||||
|
if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
|
||||||
|
resolve(json as T);
|
||||||
|
} else {
|
||||||
|
reject(new Error(json.error || json.message || `HTTP ${res.statusCode}`));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
reject(new Error(`解析响应失败: ${data}`));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
req.on('error', (error) => {
|
||||||
|
reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
req.on('timeout', () => {
|
||||||
|
req.destroy();
|
||||||
|
reject(new Error('请求超时'));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.body) {
|
||||||
|
req.write(JSON.stringify(options.body));
|
||||||
|
}
|
||||||
|
|
||||||
|
req.end();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交工具执行结果
|
||||||
|
* POST /api/tool/result
|
||||||
|
*/
|
||||||
|
export async function submitToolResult(result: ToolCallResult): Promise<ToolResultResponse> {
|
||||||
|
console.log(`[API] 提交工具结果: callId=${result.id}`);
|
||||||
|
return request<ToolResultResponse>('/api/tool/result', {
|
||||||
|
method: 'POST',
|
||||||
|
body: result
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交用户回答
|
||||||
|
* POST /api/task/answer
|
||||||
|
*/
|
||||||
|
export async function submitAnswer(answer: AnswerRequest): Promise<AnswerResponse> {
|
||||||
|
console.log(`[API] 提交用户回答: askId=${answer.askId}`);
|
||||||
|
return request<AnswerResponse>('/api/task/answer', {
|
||||||
|
method: 'POST',
|
||||||
|
body: answer
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 健康检查
|
||||||
|
* GET /api/dialog/health
|
||||||
|
*/
|
||||||
|
export async function healthCheck(): Promise<{ status: string }> {
|
||||||
|
return request<{ status: string }>('/api/dialog/health', {
|
||||||
|
method: 'GET',
|
||||||
|
timeout: 5000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建成功的工具结果
|
||||||
|
*/
|
||||||
|
export function createSuccessResult(id: number, text: string): ToolCallResult {
|
||||||
|
return {
|
||||||
|
jsonrpc: '2.0',
|
||||||
|
id,
|
||||||
|
result: {
|
||||||
|
content: [{ type: 'text', text }],
|
||||||
|
isError: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建业务错误的工具结果（如编译失败）
|
||||||
|
*/
|
||||||
|
export function createBusinessErrorResult(id: number, errorMessage: string): ToolCallResult {
|
||||||
|
return {
|
||||||
|
jsonrpc: '2.0',
|
||||||
|
id,
|
||||||
|
result: {
|
||||||
|
content: [{ type: 'text', text: errorMessage }],
|
||||||
|
isError: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建系统错误的工具结果
|
||||||
|
*/
|
||||||
|
export function createSystemErrorResult(id: number, code: number, message: string): ToolCallResult {
|
||||||
|
return {
|
||||||
|
jsonrpc: '2.0',
|
||||||
|
id,
|
||||||
|
error: { code, message }
|
||||||
|
};
|
||||||
|
}
|
||||||
318
src/services/dialogService.ts
Normal file
318
src/services/dialogService.ts
Normal file
@ -0,0 +1,318 @@
|
|||||||
|
/**
|
||||||
|
* 对话服务
|
||||||
|
* 整合 SSE 通信、工具执行、用户交互
|
||||||
|
*/
|
||||||
|
import * as vscode from 'vscode';
|
||||||
|
import { startStreamDialog, generateTaskId, SSEController, SSECallbacks } from './sseHandler';
|
||||||
|
import { executeToolCall, createToolExecutorContext, ToolExecutorContext } from './toolExecutor';
|
||||||
|
import { userInteractionManager } from './userInteraction';
|
||||||
|
import { getConfig } from '../config/settings';
|
||||||
|
import type { DialogRequest, ToolCallRequest, AskUserEvent } from '../types/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 消息段落类型
|
||||||
|
*/
|
||||||
|
export interface MessageSegment {
|
||||||
|
type: 'text' | 'tool' | 'question';
|
||||||
|
content?: string;
|
||||||
|
toolName?: string;
|
||||||
|
toolStatus?: 'running' | 'success' | 'error';
|
||||||
|
toolResult?: string;
|
||||||
|
askId?: string;
|
||||||
|
question?: string;
|
||||||
|
options?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 对话回调接口
|
||||||
|
*/
|
||||||
|
export interface DialogCallbacks {
|
||||||
|
/** 收到文本（可能多次调用，流式） */
|
||||||
|
onText?: (text: string, isStreaming: boolean) => void;
|
||||||
|
/** 工具开始执行 */
|
||||||
|
onToolStart?: (toolName: string) => void;
|
||||||
|
/** 工具执行完成 */
|
||||||
|
onToolComplete?: (toolName: string, result: string) => void;
|
||||||
|
/** 工具执行错误 */
|
||||||
|
onToolError?: (toolName: string, error: string) => void;
|
||||||
|
/** 显示问题（ask_user） */
|
||||||
|
onQuestion?: (askId: string, question: string, options: string[]) => void;
|
||||||
|
/** 对话完成，返回所有段落 */
|
||||||
|
onComplete?: (segments: MessageSegment[]) => void;
|
||||||
|
/** 错误 */
|
||||||
|
onError?: (message: string) => void;
|
||||||
|
/** 通知消息 */
|
||||||
|
onNotification?: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 对话会话
|
||||||
|
*/
|
||||||
|
export class DialogSession {
|
||||||
|
private taskId: string;
|
||||||
|
private sseController: SSEController | null = null;
|
||||||
|
private toolContext: ToolExecutorContext;
|
||||||
|
private accumulatedText = '';
|
||||||
|
private isActive = false;
|
||||||
|
private segments: MessageSegment[] = [];
|
||||||
|
private currentTextSegment: MessageSegment | null = null;
|
||||||
|
|
||||||
|
constructor(extensionPath: string) {
|
||||||
|
this.taskId = generateTaskId();
|
||||||
|
this.toolContext = createToolExecutorContext(extensionPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加文本到当前文本段落
|
||||||
|
*/
|
||||||
|
private appendText(text: string): void {
|
||||||
|
if (!this.currentTextSegment) {
|
||||||
|
this.currentTextSegment = { type: 'text', content: '' };
|
||||||
|
this.segments.push(this.currentTextSegment);
|
||||||
|
}
|
||||||
|
this.currentTextSegment.content = (this.currentTextSegment.content || '') + text;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 结束当前文本段落
|
||||||
|
*/
|
||||||
|
private finalizeTextSegment(): void {
|
||||||
|
this.currentTextSegment = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加工具段落
|
||||||
|
*/
|
||||||
|
private addToolSegment(toolName: string, status: 'running' | 'success' | 'error', result?: string): MessageSegment {
|
||||||
|
this.finalizeTextSegment();
|
||||||
|
const segment: MessageSegment = {
|
||||||
|
type: 'tool',
|
||||||
|
toolName,
|
||||||
|
toolStatus: status,
|
||||||
|
toolResult: result
|
||||||
|
};
|
||||||
|
this.segments.push(segment);
|
||||||
|
return segment;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新工具段落状态
|
||||||
|
*/
|
||||||
|
private updateToolSegment(toolName: string, status: 'success' | 'error', result?: string): void {
|
||||||
|
// 找到最后一个匹配的工具段落
|
||||||
|
for (let i = this.segments.length - 1; i >= 0; i--) {
|
||||||
|
const seg = this.segments[i];
|
||||||
|
if (seg.type === 'tool' && seg.toolName === toolName && seg.toolStatus === 'running') {
|
||||||
|
seg.toolStatus = status;
|
||||||
|
seg.toolResult = result;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取任务ID
|
||||||
|
*/
|
||||||
|
getTaskId(): string {
|
||||||
|
return this.taskId;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否活跃
|
||||||
|
*/
|
||||||
|
get active(): boolean {
|
||||||
|
return this.isActive;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送消息并开始流式对话
|
||||||
|
*/
|
||||||
|
async sendMessage(
|
||||||
|
message: string,
|
||||||
|
callbacks: DialogCallbacks
|
||||||
|
): Promise<void> {
|
||||||
|
if (this.isActive) {
|
||||||
|
callbacks.onError?.('当前有对话正在进行中');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isActive = true;
|
||||||
|
this.accumulatedText = '';
|
||||||
|
this.segments = [];
|
||||||
|
this.currentTextSegment = null;
|
||||||
|
|
||||||
|
const config = getConfig();
|
||||||
|
const request: DialogRequest = {
|
||||||
|
taskId: this.taskId,
|
||||||
|
message,
|
||||||
|
userId: config.userId,
|
||||||
|
toolMode: 'AGENT'
|
||||||
|
};
|
||||||
|
|
||||||
|
const sseCallbacks: SSECallbacks = {
|
||||||
|
onTextDelta: (data) => {
|
||||||
|
this.accumulatedText += data.text;
|
||||||
|
this.appendText(data.text);
|
||||||
|
console.log('[DialogSession] onTextDelta, 累积文本长度:', this.accumulatedText.length);
|
||||||
|
callbacks.onText?.(this.accumulatedText, true);
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolCall: async (data: ToolCallRequest) => {
|
||||||
|
const toolName = data.params.name;
|
||||||
|
console.log('[DialogSession] onToolCall:', toolName);
|
||||||
|
// 检查是否已经有相同的工具段落（可能由 onToolStart 添加）
|
||||||
|
const lastToolSegment = this.segments.filter(s => s.type === 'tool').pop();
|
||||||
|
if (lastToolSegment && lastToolSegment.toolName === toolName && lastToolSegment.toolStatus === 'running') {
|
||||||
|
console.log('[DialogSession] onToolCall: 跳过重复的工具段落:', toolName);
|
||||||
|
} else {
|
||||||
|
this.addToolSegment(toolName, 'running');
|
||||||
|
}
|
||||||
|
// 注意：不在这里调用 callbacks.onToolStart，避免与 onToolStart 事件重复
|
||||||
|
try {
|
||||||
|
await executeToolCall(data, this.toolContext);
|
||||||
|
this.updateToolSegment(toolName, 'success', '执行完成');
|
||||||
|
// 也不调用 callbacks.onToolComplete，避免重复
|
||||||
|
} catch (error) {
|
||||||
|
const errorMsg = error instanceof Error ? error.message : '未知错误';
|
||||||
|
this.updateToolSegment(toolName, 'error', errorMsg);
|
||||||
|
callbacks.onToolError?.(toolName, errorMsg);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolStart: (data) => {
|
||||||
|
console.log('[DialogSession] onToolStart:', data.tool_name);
|
||||||
|
// 检查是否已经有相同的工具段落（可能由 onToolCall 添加）
|
||||||
|
const lastToolSegment = this.segments.filter(s => s.type === 'tool').pop();
|
||||||
|
if (lastToolSegment && lastToolSegment.toolName === data.tool_name && lastToolSegment.toolStatus === 'running') {
|
||||||
|
console.log('[DialogSession] 跳过重复的工具段落:', data.tool_name);
|
||||||
|
} else {
|
||||||
|
this.addToolSegment(data.tool_name, 'running');
|
||||||
|
}
|
||||||
|
console.log('[DialogSession] segments 数量:', this.segments.length);
|
||||||
|
callbacks.onToolStart?.(data.tool_name);
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolComplete: (data) => {
|
||||||
|
this.updateToolSegment(data.tool_name, 'success', data.result);
|
||||||
|
callbacks.onToolComplete?.(data.tool_name, data.result);
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolError: (data) => {
|
||||||
|
this.updateToolSegment(data.tool_name, 'error', data.error);
|
||||||
|
callbacks.onToolError?.(data.tool_name, data.error);
|
||||||
|
},
|
||||||
|
|
||||||
|
onAskUser: async (data: AskUserEvent) => {
|
||||||
|
this.finalizeTextSegment();
|
||||||
|
this.segments.push({
|
||||||
|
type: 'question',
|
||||||
|
askId: data.askId,
|
||||||
|
question: data.question,
|
||||||
|
options: data.options
|
||||||
|
});
|
||||||
|
callbacks.onQuestion?.(data.askId, data.question, data.options);
|
||||||
|
try {
|
||||||
|
await userInteractionManager.handleAskUser(data, this.taskId);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[DialogSession] 处理用户问题失败:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onComplete: (data) => {
|
||||||
|
this.isActive = false;
|
||||||
|
this.finalizeTextSegment();
|
||||||
|
// 发送所有段落
|
||||||
|
callbacks.onComplete?.(this.segments);
|
||||||
|
},
|
||||||
|
|
||||||
|
onError: (data) => {
|
||||||
|
this.isActive = false;
|
||||||
|
callbacks.onError?.(data.message);
|
||||||
|
},
|
||||||
|
|
||||||
|
onWarning: (data) => {
|
||||||
|
callbacks.onNotification?.(`⚠️ ${data.message}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
onNotification: (data) => {
|
||||||
|
callbacks.onNotification?.(data.message);
|
||||||
|
},
|
||||||
|
|
||||||
|
onOpen: () => {
|
||||||
|
console.log('[DialogSession] SSE 连接已建立');
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose: () => {
|
||||||
|
console.log('[DialogSession] SSE 连接已关闭');
|
||||||
|
this.isActive = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.sseController = await startStreamDialog(request, sseCallbacks);
|
||||||
|
} catch (error) {
|
||||||
|
this.isActive = false;
|
||||||
|
const errorMsg = error instanceof Error ? error.message : '连接失败';
|
||||||
|
callbacks.onError?.(errorMsg);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中止当前对话
|
||||||
|
*/
|
||||||
|
abort(): void {
|
||||||
|
if (this.sseController) {
|
||||||
|
this.sseController.abort();
|
||||||
|
this.sseController = null;
|
||||||
|
}
|
||||||
|
this.isActive = false;
|
||||||
|
userInteractionManager.cancelAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交用户回答
|
||||||
|
*/
|
||||||
|
async submitAnswer(
|
||||||
|
askId: string,
|
||||||
|
selected?: string[],
|
||||||
|
customInput?: string
|
||||||
|
): Promise<void> {
|
||||||
|
await userInteractionManager.receiveAnswer(askId, selected, customInput);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 全局对话会话管理
|
||||||
|
*/
|
||||||
|
class DialogManager {
|
||||||
|
private currentSession: DialogSession | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建新会话
|
||||||
|
*/
|
||||||
|
createSession(extensionPath: string): DialogSession {
|
||||||
|
// 如果有活跃会话，先中止
|
||||||
|
if (this.currentSession?.active) {
|
||||||
|
this.currentSession.abort();
|
||||||
|
}
|
||||||
|
this.currentSession = new DialogSession(extensionPath);
|
||||||
|
return this.currentSession;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前会话
|
||||||
|
*/
|
||||||
|
getCurrentSession(): DialogSession | null {
|
||||||
|
return this.currentSession;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中止当前会话
|
||||||
|
*/
|
||||||
|
abortCurrentSession(): void {
|
||||||
|
this.currentSession?.abort();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const dialogManager = new DialogManager();
|
||||||
296
src/services/sseHandler.ts
Normal file
296
src/services/sseHandler.ts
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
/**
|
||||||
|
* SSE 事件处理器
|
||||||
|
* 处理与后端的流式通信
|
||||||
|
* 使用 eventsource-parser + Node.js 原生 http 模块
|
||||||
|
*/
|
||||||
|
import * as http from 'http';
|
||||||
|
import * as https from 'https';
|
||||||
|
import { URL } from 'url';
|
||||||
|
import { createParser, type EventSourceParser } from 'eventsource-parser';
|
||||||
|
import { getApiUrl, getConfig } from '../config/settings';
|
||||||
|
import type {
|
||||||
|
DialogRequest,
|
||||||
|
SSEEventType,
|
||||||
|
TextDeltaEvent,
|
||||||
|
ToolCallRequest,
|
||||||
|
AskUserEvent,
|
||||||
|
CompleteEvent,
|
||||||
|
ErrorEvent,
|
||||||
|
ToolStartEvent,
|
||||||
|
ToolCompleteEvent,
|
||||||
|
ToolErrorEvent,
|
||||||
|
WarningEvent,
|
||||||
|
NotificationEvent,
|
||||||
|
DepthUpdateEvent
|
||||||
|
} from '../types/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SSE 事件回调接口
|
||||||
|
*/
|
||||||
|
export interface SSECallbacks {
|
||||||
|
/** 收到文本增量 */
|
||||||
|
onTextDelta?: (data: TextDeltaEvent) => void;
|
||||||
|
/** 收到工具调用请求 */
|
||||||
|
onToolCall?: (data: ToolCallRequest) => void;
|
||||||
|
/** 工具开始执行 */
|
||||||
|
onToolStart?: (data: ToolStartEvent) => void;
|
||||||
|
/** 工具执行完成 */
|
||||||
|
onToolComplete?: (data: ToolCompleteEvent) => void;
|
||||||
|
/** 工具执行错误 */
|
||||||
|
onToolError?: (data: ToolErrorEvent) => void;
|
||||||
|
/** 收到用户提问 */
|
||||||
|
onAskUser?: (data: AskUserEvent) => void;
|
||||||
|
/** 对话完成 */
|
||||||
|
onComplete?: (data: CompleteEvent) => void;
|
||||||
|
/** 错误 */
|
||||||
|
onError?: (data: ErrorEvent) => void;
|
||||||
|
/** 警告 */
|
||||||
|
onWarning?: (data: WarningEvent) => void;
|
||||||
|
/** 通知 */
|
||||||
|
onNotification?: (data: NotificationEvent) => void;
|
||||||
|
/** 深度更新 */
|
||||||
|
onDepthUpdate?: (data: DepthUpdateEvent) => void;
|
||||||
|
/** 连接打开 */
|
||||||
|
onOpen?: () => void;
|
||||||
|
/** 连接关闭 */
|
||||||
|
onClose?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SSE 会话控制器
|
||||||
|
*/
|
||||||
|
export class SSEController {
|
||||||
|
private request: http.ClientRequest | null = null;
|
||||||
|
private isConnected = false;
|
||||||
|
private isAborted = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否已连接
|
||||||
|
*/
|
||||||
|
get connected(): boolean {
|
||||||
|
return this.isConnected;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置请求对象
|
||||||
|
*/
|
||||||
|
setRequest(req: http.ClientRequest): void {
|
||||||
|
this.request = req;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置连接状态
|
||||||
|
*/
|
||||||
|
setConnected(connected: boolean): void {
|
||||||
|
this.isConnected = connected;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否已中止
|
||||||
|
*/
|
||||||
|
get aborted(): boolean {
|
||||||
|
return this.isAborted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中止当前连接
|
||||||
|
*/
|
||||||
|
abort(): void {
|
||||||
|
if (this.request && !this.isAborted) {
|
||||||
|
this.isAborted = true;
|
||||||
|
this.request.destroy();
|
||||||
|
this.request = null;
|
||||||
|
this.isConnected = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发起流式对话
|
||||||
|
* @param request 对话请求
|
||||||
|
* @param callbacks 事件回调
|
||||||
|
* @returns SSE 控制器（用于中止连接）
|
||||||
|
*/
|
||||||
|
export async function startStreamDialog(
|
||||||
|
request: DialogRequest,
|
||||||
|
callbacks: SSECallbacks
|
||||||
|
): Promise<SSEController> {
|
||||||
|
const controller = new SSEController();
|
||||||
|
|
||||||
|
const urlString = getApiUrl('/api/dialog/stream');
|
||||||
|
const url = new URL(urlString);
|
||||||
|
const isHttps = url.protocol === 'https:';
|
||||||
|
const httpModule = isHttps ? https : http;
|
||||||
|
|
||||||
|
const body = JSON.stringify(request);
|
||||||
|
|
||||||
|
console.log(`[SSE] 开始流式对话: taskId=${request.taskId}, url=${urlString}`);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const options: http.RequestOptions = {
|
||||||
|
hostname: url.hostname,
|
||||||
|
port: url.port || (isHttps ? 443 : 80),
|
||||||
|
path: url.pathname + url.search,
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'text/event-stream',
|
||||||
|
'Cache-Control': 'no-cache',
|
||||||
|
'Content-Length': Buffer.byteLength(body)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const req = httpModule.request(options, (res) => {
|
||||||
|
// 检查响应状态
|
||||||
|
if (res.statusCode !== 200) {
|
||||||
|
let errorBody = '';
|
||||||
|
res.on('data', chunk => errorBody += chunk);
|
||||||
|
res.on('end', () => {
|
||||||
|
const error = new Error(`SSE 连接失败: ${res.statusCode} ${errorBody}`);
|
||||||
|
callbacks.onError?.({ message: error.message });
|
||||||
|
reject(error);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 连接成功
|
||||||
|
console.log('[SSE] 连接已建立');
|
||||||
|
controller.setConnected(true);
|
||||||
|
callbacks.onOpen?.();
|
||||||
|
resolve(controller);
|
||||||
|
|
||||||
|
// 创建 SSE 解析器
|
||||||
|
const parser = createParser({
|
||||||
|
onEvent: (event) => {
|
||||||
|
const eventType = event.event as SSEEventType;
|
||||||
|
const eventData = event.data;
|
||||||
|
|
||||||
|
if (!eventData) {
|
||||||
|
console.log(`[SSE] 收到空事件: ${eventType}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(eventData);
|
||||||
|
console.log(`[SSE] 收到事件: ${eventType}`, data);
|
||||||
|
|
||||||
|
// 分发事件到对应回调
|
||||||
|
dispatchEvent(eventType, data, callbacks);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`[SSE] 解析事件数据失败: ${eventData}`, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置编码
|
||||||
|
res.setEncoding('utf8');
|
||||||
|
|
||||||
|
// 处理数据流
|
||||||
|
res.on('data', (chunk: string) => {
|
||||||
|
if (!controller.aborted) {
|
||||||
|
console.log('[SSE] 收到原始数据块:', chunk.substring(0, 200));
|
||||||
|
parser.feed(chunk);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理连接关闭
|
||||||
|
res.on('end', () => {
|
||||||
|
console.log('[SSE] 连接已关闭');
|
||||||
|
controller.setConnected(false);
|
||||||
|
callbacks.onClose?.();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理错误
|
||||||
|
res.on('error', (err) => {
|
||||||
|
if (!controller.aborted) {
|
||||||
|
console.error('[SSE] 响应错误:', err);
|
||||||
|
controller.setConnected(false);
|
||||||
|
callbacks.onError?.({ message: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 保存请求引用用于中止
|
||||||
|
controller.setRequest(req);
|
||||||
|
|
||||||
|
// 处理请求错误
|
||||||
|
req.on('error', (err) => {
|
||||||
|
if (!controller.aborted) {
|
||||||
|
console.error('[SSE] 请求错误:', err);
|
||||||
|
controller.setConnected(false);
|
||||||
|
callbacks.onError?.({ message: err.message });
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理超时
|
||||||
|
const { timeout } = getConfig();
|
||||||
|
req.setTimeout(timeout, () => {
|
||||||
|
if (!controller.aborted) {
|
||||||
|
console.error('[SSE] 请求超时');
|
||||||
|
controller.abort();
|
||||||
|
const error = new Error('请求超时');
|
||||||
|
callbacks.onError?.({ message: error.message });
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 发送请求体
|
||||||
|
req.write(body);
|
||||||
|
req.end();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分发 SSE 事件到对应回调
|
||||||
|
*/
|
||||||
|
function dispatchEvent(
|
||||||
|
eventType: SSEEventType,
|
||||||
|
data: unknown,
|
||||||
|
callbacks: SSECallbacks
|
||||||
|
): void {
|
||||||
|
switch (eventType) {
|
||||||
|
case 'text_delta':
|
||||||
|
callbacks.onTextDelta?.(data as TextDeltaEvent);
|
||||||
|
break;
|
||||||
|
case 'tool_call':
|
||||||
|
callbacks.onToolCall?.(data as ToolCallRequest);
|
||||||
|
break;
|
||||||
|
case 'tool_start':
|
||||||
|
callbacks.onToolStart?.(data as ToolStartEvent);
|
||||||
|
break;
|
||||||
|
case 'tool_complete':
|
||||||
|
callbacks.onToolComplete?.(data as ToolCompleteEvent);
|
||||||
|
break;
|
||||||
|
case 'tool_error':
|
||||||
|
callbacks.onToolError?.(data as ToolErrorEvent);
|
||||||
|
break;
|
||||||
|
case 'ask_user':
|
||||||
|
callbacks.onAskUser?.(data as AskUserEvent);
|
||||||
|
break;
|
||||||
|
case 'complete':
|
||||||
|
callbacks.onComplete?.(data as CompleteEvent);
|
||||||
|
break;
|
||||||
|
case 'error':
|
||||||
|
callbacks.onError?.(data as ErrorEvent);
|
||||||
|
break;
|
||||||
|
case 'warning':
|
||||||
|
callbacks.onWarning?.(data as WarningEvent);
|
||||||
|
break;
|
||||||
|
case 'notification':
|
||||||
|
callbacks.onNotification?.(data as NotificationEvent);
|
||||||
|
break;
|
||||||
|
case 'depth_update':
|
||||||
|
callbacks.onDepthUpdate?.(data as DepthUpdateEvent);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(`[SSE] 未知事件类型: ${eventType}`, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成任务ID
|
||||||
|
*/
|
||||||
|
export function generateTaskId(): string {
|
||||||
|
return `task-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
|
||||||
|
}
|
||||||
272
src/services/toolExecutor.ts
Normal file
272
src/services/toolExecutor.ts
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
/**
|
||||||
|
* 工具执行器
|
||||||
|
* 接收后端的 tool_call 事件，执行本地工具，返回结果
|
||||||
|
*/
|
||||||
|
import * as vscode from 'vscode';
|
||||||
|
import * as path from 'path';
|
||||||
|
import * as os from 'os';
|
||||||
|
import * as fs from 'fs';
|
||||||
|
import { readFileContent, readDirectory } from '../utils/readFiles';
|
||||||
|
import { createOrOverwriteFile } from '../utils/createFiles';
|
||||||
|
import { generateVCD, checkIverilogAvailable } from '../utils/iverilogRunner';
|
||||||
|
import {
|
||||||
|
submitToolResult,
|
||||||
|
createSuccessResult,
|
||||||
|
createBusinessErrorResult,
|
||||||
|
createSystemErrorResult
|
||||||
|
} from './apiClient';
|
||||||
|
import type {
|
||||||
|
ToolCallRequest,
|
||||||
|
ToolName,
|
||||||
|
FileReadArgs,
|
||||||
|
FileWriteArgs,
|
||||||
|
FileListArgs,
|
||||||
|
SyntaxCheckArgs,
|
||||||
|
SimulationArgs,
|
||||||
|
WaveformSummaryArgs
|
||||||
|
} from '../types/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 工具执行器上下文
|
||||||
|
*/
|
||||||
|
export interface ToolExecutorContext {
|
||||||
|
/** 扩展路径（用于 iverilog） */
|
||||||
|
extensionPath: string;
|
||||||
|
/** 工作区路径 */
|
||||||
|
workspacePath: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行工具调用
|
||||||
|
* @param request 工具调用请求
|
||||||
|
* @param context 执行上下文
|
||||||
|
*/
|
||||||
|
export async function executeToolCall(
|
||||||
|
request: ToolCallRequest,
|
||||||
|
context: ToolExecutorContext
|
||||||
|
): Promise<void> {
|
||||||
|
const toolName = request.params.name as ToolName;
|
||||||
|
const args = request.params.arguments;
|
||||||
|
const callId = request.id;
|
||||||
|
|
||||||
|
console.log(`[ToolExecutor] 执行工具: ${toolName}, callId=${callId}`, args);
|
||||||
|
|
||||||
|
try {
|
||||||
|
let resultText: string;
|
||||||
|
|
||||||
|
switch (toolName) {
|
||||||
|
case 'file_read':
|
||||||
|
resultText = await executeFileRead(args as unknown as FileReadArgs);
|
||||||
|
break;
|
||||||
|
case 'file_write':
|
||||||
|
resultText = await executeFileWrite(args as unknown as FileWriteArgs);
|
||||||
|
break;
|
||||||
|
case 'file_list':
|
||||||
|
resultText = await executeFileList(args as unknown as FileListArgs);
|
||||||
|
break;
|
||||||
|
case 'syntax_check':
|
||||||
|
resultText = await executeSyntaxCheck(args as unknown as SyntaxCheckArgs, context);
|
||||||
|
break;
|
||||||
|
case 'simulation':
|
||||||
|
resultText = await executeSimulation(args as unknown as SimulationArgs, context);
|
||||||
|
break;
|
||||||
|
case 'waveform_summary':
|
||||||
|
resultText = await executeWaveformSummary(args as unknown as WaveformSummaryArgs);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error(`未知工具: ${toolName}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交成功结果
|
||||||
|
const result = createSuccessResult(callId, resultText);
|
||||||
|
await submitToolResult(result);
|
||||||
|
console.log(`[ToolExecutor] 工具执行成功: ${toolName}, callId=${callId}`);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage = error instanceof Error ? error.message : '未知错误';
|
||||||
|
console.error(`[ToolExecutor] 工具执行失败: ${toolName}, callId=${callId}`, error);
|
||||||
|
|
||||||
|
// 提交错误结果
|
||||||
|
const result = createBusinessErrorResult(callId, errorMessage);
|
||||||
|
await submitToolResult(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行 file_read 工具
|
||||||
|
*/
|
||||||
|
async function executeFileRead(args: FileReadArgs): Promise<string> {
|
||||||
|
const content = await readFileContent(args.path);
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行 file_write 工具
|
||||||
|
*/
|
||||||
|
async function executeFileWrite(args: FileWriteArgs): Promise<string> {
|
||||||
|
await createOrOverwriteFile(args.path, args.content);
|
||||||
|
return `文件已写入: ${args.path}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行 file_list 工具
|
||||||
|
*/
|
||||||
|
async function executeFileList(args: FileListArgs): Promise<string> {
|
||||||
|
const dirPath = args.path || '.';
|
||||||
|
const extensions = args.extension ? [args.extension] : undefined;
|
||||||
|
|
||||||
|
const files = await readDirectory(dirPath, extensions);
|
||||||
|
const fileList = files.map(f => f.path).join('\n');
|
||||||
|
|
||||||
|
return fileList || '（目录为空）';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行 syntax_check 工具
|
||||||
|
* 将代码写入临时文件，调用 iverilog 检查语法
|
||||||
|
*/
|
||||||
|
async function executeSyntaxCheck(
|
||||||
|
args: SyntaxCheckArgs,
|
||||||
|
context: ToolExecutorContext
|
||||||
|
): Promise<string> {
|
||||||
|
// 检查 iverilog 是否可用
|
||||||
|
const iverilogCheck = await checkIverilogAvailable(context.extensionPath);
|
||||||
|
if (!iverilogCheck.available) {
|
||||||
|
throw new Error(`iverilog 不可用: ${iverilogCheck.message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建临时文件
|
||||||
|
const tempDir = os.tmpdir();
|
||||||
|
const tempFile = path.join(tempDir, `iccoder_syntax_${Date.now()}.v`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 写入代码到临时文件
|
||||||
|
fs.writeFileSync(tempFile, args.code, 'utf-8');
|
||||||
|
|
||||||
|
// 调用 iverilog 进行语法检查
|
||||||
|
const { spawn } = require('child_process');
|
||||||
|
const iverilogPath = getIverilogPath(context.extensionPath);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const child = spawn(iverilogPath, ['-t', 'null', tempFile], {
|
||||||
|
cwd: tempDir,
|
||||||
|
env: {
|
||||||
|
...process.env,
|
||||||
|
IVERILOG_ROOT: path.join(context.extensionPath, 'tools', 'iverilog')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let stdout = '';
|
||||||
|
let stderr = '';
|
||||||
|
|
||||||
|
child.stdout.on('data', (data: Buffer) => {
|
||||||
|
stdout += data.toString();
|
||||||
|
});
|
||||||
|
|
||||||
|
child.stderr.on('data', (data: Buffer) => {
|
||||||
|
stderr += data.toString();
|
||||||
|
});
|
||||||
|
|
||||||
|
child.on('close', (code: number) => {
|
||||||
|
// 清理临时文件
|
||||||
|
try {
|
||||||
|
fs.unlinkSync(tempFile);
|
||||||
|
} catch (e) {
|
||||||
|
// 忽略清理错误
|
||||||
|
}
|
||||||
|
|
||||||
|
if (code === 0) {
|
||||||
|
resolve('语法检查通过，无错误。');
|
||||||
|
} else {
|
||||||
|
resolve(`语法检查发现错误:\n${stderr || stdout}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
child.on('error', (error: Error) => {
|
||||||
|
try {
|
||||||
|
fs.unlinkSync(tempFile);
|
||||||
|
} catch (e) {
|
||||||
|
// 忽略清理错误
|
||||||
|
}
|
||||||
|
reject(error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
// 确保清理临时文件
|
||||||
|
try {
|
||||||
|
fs.unlinkSync(tempFile);
|
||||||
|
} catch (e) {
|
||||||
|
// 忽略
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行 simulation 工具
|
||||||
|
*/
|
||||||
|
async function executeSimulation(
|
||||||
|
args: SimulationArgs,
|
||||||
|
context: ToolExecutorContext
|
||||||
|
): Promise<string> {
|
||||||
|
// 获取工作区路径
|
||||||
|
const workspaceFolders = vscode.workspace.workspaceFolders;
|
||||||
|
if (!workspaceFolders || workspaceFolders.length === 0) {
|
||||||
|
throw new Error('请先打开一个工作区');
|
||||||
|
}
|
||||||
|
|
||||||
|
const projectPath = workspaceFolders[0].uri.fsPath;
|
||||||
|
|
||||||
|
// 调用现有的 generateVCD 函数
|
||||||
|
const result = await generateVCD(projectPath, context.extensionPath);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
let message = result.message;
|
||||||
|
if (result.stdout) {
|
||||||
|
message += `\n\n仿真输出:\n${result.stdout}`;
|
||||||
|
}
|
||||||
|
return message;
|
||||||
|
} else {
|
||||||
|
let errorMessage = result.message;
|
||||||
|
if (result.stderr) {
|
||||||
|
errorMessage += `\n\n错误输出:\n${result.stderr}`;
|
||||||
|
}
|
||||||
|
throw new Error(errorMessage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行 waveform_summary 工具
|
||||||
|
* TODO: 实现 VCD 波形分析
|
||||||
|
*/
|
||||||
|
async function executeWaveformSummary(args: WaveformSummaryArgs): Promise<string> {
|
||||||
|
// TODO: 使用 vcdrom/vcd-stream 解析 VCD 文件
|
||||||
|
// 目前返回一个占位响应
|
||||||
|
return `波形分析功能暂未实现。\n请求参数:\n- VCD文件: ${args.vcdPath}\n- 信号: ${args.signals}\n- 检查点: ${args.checkpoints || '无'}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取 iverilog 路径
|
||||||
|
*/
|
||||||
|
function getIverilogPath(extensionPath: string): string {
|
||||||
|
const platform = process.platform;
|
||||||
|
if (platform === 'win32') {
|
||||||
|
return path.join(extensionPath, 'tools', 'iverilog', 'bin', 'iverilog.exe');
|
||||||
|
} else {
|
||||||
|
return path.join(extensionPath, 'tools', 'iverilog', 'bin', 'iverilog');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建工具执行器上下文
|
||||||
|
*/
|
||||||
|
export function createToolExecutorContext(extensionPath: string): ToolExecutorContext {
|
||||||
|
const workspaceFolders = vscode.workspace.workspaceFolders;
|
||||||
|
const workspacePath = workspaceFolders?.[0]?.uri.fsPath || '';
|
||||||
|
|
||||||
|
return {
|
||||||
|
extensionPath,
|
||||||
|
workspacePath
|
||||||
|
};
|
||||||
|
}
|
||||||
154
src/services/userInteraction.ts
Normal file
154
src/services/userInteraction.ts
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
/**
|
||||||
|
* 用户交互处理器
|
||||||
|
* 处理 ask_user 事件，通过 WebView 显示问题并收集用户回答
|
||||||
|
*/
|
||||||
|
import * as vscode from 'vscode';
|
||||||
|
import { submitAnswer } from './apiClient';
|
||||||
|
import type { AskUserEvent, AnswerRequest } from '../types/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 待处理的用户问题
|
||||||
|
*/
|
||||||
|
interface PendingQuestion {
|
||||||
|
askId: string;
|
||||||
|
taskId: string;
|
||||||
|
question: string;
|
||||||
|
options: string[];
|
||||||
|
resolve: (answer: string) => void;
|
||||||
|
reject: (error: Error) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户交互管理器
|
||||||
|
*/
|
||||||
|
export class UserInteractionManager {
|
||||||
|
private pendingQuestions = new Map<string, PendingQuestion>();
|
||||||
|
private webviewPanel: vscode.WebviewPanel | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置 WebView 面板（用于发送消息）
|
||||||
|
*/
|
||||||
|
setWebviewPanel(panel: vscode.WebviewPanel): void {
|
||||||
|
this.webviewPanel = panel;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理 ask_user 事件
|
||||||
|
* @param event ask_user 事件数据
|
||||||
|
* @param taskId 当前任务ID
|
||||||
|
*/
|
||||||
|
async handleAskUser(event: AskUserEvent, taskId: string): Promise<void> {
|
||||||
|
const { askId, question, options } = event;
|
||||||
|
|
||||||
|
console.log(`[UserInteraction] 收到问题: askId=${askId}, question=${question}`);
|
||||||
|
|
||||||
|
// 通过 WebView 显示问题
|
||||||
|
if (this.webviewPanel) {
|
||||||
|
this.webviewPanel.webview.postMessage({
|
||||||
|
command: 'showQuestion',
|
||||||
|
askId,
|
||||||
|
question,
|
||||||
|
options
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 Promise 等待用户回答
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.pendingQuestions.set(askId, {
|
||||||
|
askId,
|
||||||
|
taskId,
|
||||||
|
question,
|
||||||
|
options,
|
||||||
|
resolve: (answer: string) => {
|
||||||
|
this.submitUserAnswer(askId, taskId, answer)
|
||||||
|
.then(() => resolve())
|
||||||
|
.catch(reject);
|
||||||
|
},
|
||||||
|
reject
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置超时（5分钟）
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.pendingQuestions.has(askId)) {
|
||||||
|
this.pendingQuestions.delete(askId);
|
||||||
|
reject(new Error('用户回答超时'));
|
||||||
|
}
|
||||||
|
}, 300000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理用户提交的回答（从 WebView 调用）
|
||||||
|
* @param askId 问题ID
|
||||||
|
* @param selected 选中的选项
|
||||||
|
* @param customInput 自定义输入
|
||||||
|
*/
|
||||||
|
async receiveAnswer(
|
||||||
|
askId: string,
|
||||||
|
selected?: string[],
|
||||||
|
customInput?: string
|
||||||
|
): Promise<void> {
|
||||||
|
const pending = this.pendingQuestions.get(askId);
|
||||||
|
if (!pending) {
|
||||||
|
console.warn(`[UserInteraction] 问题不存在或已超时: askId=${askId}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 构建答案
|
||||||
|
const answer = customInput || selected?.join(', ') || '';
|
||||||
|
|
||||||
|
console.log(`[UserInteraction] 收到用户回答: askId=${askId}, answer=${answer}`);
|
||||||
|
|
||||||
|
// 移除待处理问题
|
||||||
|
this.pendingQuestions.delete(askId);
|
||||||
|
|
||||||
|
// 触发 resolve
|
||||||
|
pending.resolve(answer);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交用户回答到后端
|
||||||
|
*/
|
||||||
|
private async submitUserAnswer(
|
||||||
|
askId: string,
|
||||||
|
taskId: string,
|
||||||
|
answer: string
|
||||||
|
): Promise<void> {
|
||||||
|
const request: AnswerRequest = {
|
||||||
|
askId,
|
||||||
|
taskId,
|
||||||
|
customInput: answer
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await submitAnswer(request);
|
||||||
|
if (!response.success) {
|
||||||
|
throw new Error(response.error || '提交回答失败');
|
||||||
|
}
|
||||||
|
console.log(`[UserInteraction] 回答已提交: askId=${askId}`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[UserInteraction] 提交回答失败: askId=${askId}`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消所有待处理的问题
|
||||||
|
*/
|
||||||
|
cancelAll(): void {
|
||||||
|
for (const [askId, pending] of this.pendingQuestions) {
|
||||||
|
pending.reject(new Error('用户交互已取消'));
|
||||||
|
}
|
||||||
|
this.pendingQuestions.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否有待处理的问题
|
||||||
|
*/
|
||||||
|
hasPendingQuestions(): boolean {
|
||||||
|
return this.pendingQuestions.size > 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全局实例
|
||||||
|
export const userInteractionManager = new UserInteractionManager();
|
||||||
243
src/types/api.ts
Normal file
243
src/types/api.ts
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
/**
|
||||||
|
* 后端 API 类型定义
|
||||||
|
* 对应后端 IC Coder Backend 的接口格式
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ============== 对话请求/响应 ==============
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 对话请求
|
||||||
|
* POST /api/dialog/stream
|
||||||
|
*/
|
||||||
|
export interface DialogRequest {
|
||||||
|
/** 任务ID（用于记忆隔离） */
|
||||||
|
taskId: string;
|
||||||
|
/** 用户消息 */
|
||||||
|
message: string;
|
||||||
|
/** 用户ID */
|
||||||
|
userId: string;
|
||||||
|
/** 工具模式 */
|
||||||
|
toolMode: 'ASK' | 'AGENT';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== SSE 事件类型 ==============
|
||||||
|
|
||||||
|
/** SSE 事件类型枚举 */
|
||||||
|
export type SSEEventType =
|
||||||
|
| 'text_delta' // 文本增量
|
||||||
|
| 'tool_call' // 客户端工具调用请求
|
||||||
|
| 'tool_start' // 工具开始执行
|
||||||
|
| 'tool_complete' // 工具执行完成
|
||||||
|
| 'tool_error' // 工具执行错误
|
||||||
|
| 'ask_user' // 向用户提问
|
||||||
|
| 'complete' // 对话完成
|
||||||
|
| 'error' // 错误
|
||||||
|
| 'warning' // 警告
|
||||||
|
| 'notification' // 通知
|
||||||
|
| 'depth_update'; // 深度更新
|
||||||
|
|
||||||
|
/** text_delta 事件数据 */
|
||||||
|
export interface TextDeltaEvent {
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** tool_start 事件数据 */
|
||||||
|
export interface ToolStartEvent {
|
||||||
|
tool_name: string;
|
||||||
|
tool_input: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** tool_complete 事件数据 */
|
||||||
|
export interface ToolCompleteEvent {
|
||||||
|
tool_name: string;
|
||||||
|
result: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** tool_error 事件数据 */
|
||||||
|
export interface ToolErrorEvent {
|
||||||
|
tool_name: string;
|
||||||
|
error: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ask_user 事件数据 */
|
||||||
|
export interface AskUserEvent {
|
||||||
|
askId: string;
|
||||||
|
question: string;
|
||||||
|
options: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** complete 事件数据 */
|
||||||
|
export interface CompleteEvent {
|
||||||
|
status: string;
|
||||||
|
finish_reason: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** error 事件数据 */
|
||||||
|
export interface ErrorEvent {
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** warning 事件数据 */
|
||||||
|
export interface WarningEvent {
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** notification 事件数据 */
|
||||||
|
export interface NotificationEvent {
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** depth_update 事件数据 */
|
||||||
|
export interface DepthUpdateEvent {
|
||||||
|
depth: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== 工具调用协议 (MCP 格式) ==============
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 工具调用请求（MCP格式）
|
||||||
|
* 后端通过 SSE tool_call 事件推送
|
||||||
|
*/
|
||||||
|
export interface ToolCallRequest {
|
||||||
|
/** JSON-RPC版本，固定为"2.0" */
|
||||||
|
jsonrpc: '2.0';
|
||||||
|
/** 请求ID，用于匹配响应 */
|
||||||
|
id: number;
|
||||||
|
/** 方法名，固定为"tools/call" */
|
||||||
|
method: 'tools/call';
|
||||||
|
/** 调用参数 */
|
||||||
|
params: {
|
||||||
|
/** 工具名称 */
|
||||||
|
name: string;
|
||||||
|
/** 工具参数 */
|
||||||
|
arguments: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 工具执行结果（MCP格式）
|
||||||
|
* POST /api/tool/result
|
||||||
|
*/
|
||||||
|
export interface ToolCallResult {
|
||||||
|
/** JSON-RPC版本 */
|
||||||
|
jsonrpc: '2.0';
|
||||||
|
/** 请求ID，与ToolCallRequest.id对应 */
|
||||||
|
id: number;
|
||||||
|
/** 执行结果（与error互斥） */
|
||||||
|
result?: ToolResultContent;
|
||||||
|
/** 错误信息（与result互斥） */
|
||||||
|
error?: ToolResultError;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 工具执行结果内容 */
|
||||||
|
export interface ToolResultContent {
|
||||||
|
/** 内容列表 */
|
||||||
|
content: ContentItem[];
|
||||||
|
/** 是否为错误结果（业务错误，如编译失败） */
|
||||||
|
isError: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 内容项 */
|
||||||
|
export interface ContentItem {
|
||||||
|
/** 内容类型：text, image, resource */
|
||||||
|
type: string;
|
||||||
|
/** 文本内容 */
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 工具系统错误 */
|
||||||
|
export interface ToolResultError {
|
||||||
|
/** 错误码 */
|
||||||
|
code: number;
|
||||||
|
/** 错误消息 */
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== 用户回答 ==============
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户回答请求
|
||||||
|
* POST /api/task/answer
|
||||||
|
*/
|
||||||
|
export interface AnswerRequest {
|
||||||
|
/** 问题ID */
|
||||||
|
askId: string;
|
||||||
|
/** 任务ID */
|
||||||
|
taskId: string;
|
||||||
|
/** 选中的选项列表 */
|
||||||
|
selected?: string[];
|
||||||
|
/** 自定义输入内容 */
|
||||||
|
customInput?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 用户回答响应 */
|
||||||
|
export interface AnswerResponse {
|
||||||
|
success: boolean;
|
||||||
|
message?: string;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== 工具结果响应 ==============
|
||||||
|
|
||||||
|
/** 工具结果响应 */
|
||||||
|
export interface ToolResultResponse {
|
||||||
|
success: boolean;
|
||||||
|
message?: string;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== 辅助类型 ==============
|
||||||
|
|
||||||
|
/** 后端工具名称 */
|
||||||
|
export type ToolName =
|
||||||
|
| 'file_read'
|
||||||
|
| 'file_write'
|
||||||
|
| 'file_list'
|
||||||
|
| 'syntax_check'
|
||||||
|
| 'simulation'
|
||||||
|
| 'waveform_summary';
|
||||||
|
|
||||||
|
/** file_read 工具参数 */
|
||||||
|
export interface FileReadArgs {
|
||||||
|
path: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** file_write 工具参数 */
|
||||||
|
export interface FileWriteArgs {
|
||||||
|
path: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** file_list 工具参数 */
|
||||||
|
export interface FileListArgs {
|
||||||
|
path?: string;
|
||||||
|
extension?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** syntax_check 工具参数 */
|
||||||
|
export interface SyntaxCheckArgs {
|
||||||
|
code: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** simulation 工具参数 */
|
||||||
|
export interface SimulationArgs {
|
||||||
|
rtlPath: string;
|
||||||
|
tbPath: string;
|
||||||
|
duration?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** waveform_summary 工具参数 */
|
||||||
|
export interface WaveformSummaryArgs {
|
||||||
|
vcdPath: string;
|
||||||
|
signals: string;
|
||||||
|
checkpoints?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 工具参数联合类型 */
|
||||||
|
export type ToolArgs =
|
||||||
|
| FileReadArgs
|
||||||
|
| FileWriteArgs
|
||||||
|
| FileListArgs
|
||||||
|
| SyntaxCheckArgs
|
||||||
|
| SimulationArgs
|
||||||
|
| WaveformSummaryArgs;
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import * as vscode from "vscode";
|
import * as vscode from "vscode";
|
||||||
import * as path from "path";
|
|
||||||
import { readFileContent } from "./readFiles";
|
import { readFileContent } from "./readFiles";
|
||||||
import {
|
import {
|
||||||
createFile,
|
createFile,
|
||||||
@ -15,6 +14,15 @@ import {
|
|||||||
checkIverilogAvailable,
|
checkIverilogAvailable,
|
||||||
} from "./iverilogRunner";
|
} from "./iverilogRunner";
|
||||||
import { ChatHistoryManager } from "./chatHistoryManager";
|
import { ChatHistoryManager } from "./chatHistoryManager";
|
||||||
|
import { dialogManager, DialogSession } from "../services/dialogService";
|
||||||
|
import { userInteractionManager } from "../services/userInteraction";
|
||||||
|
import { healthCheck } from "../services/apiClient";
|
||||||
|
|
||||||
|
/** 是否使用后端服务（可通过配置控制） */
|
||||||
|
let useBackendService = true;
|
||||||
|
|
||||||
|
/** 当前对话会话 */
|
||||||
|
let currentSession: DialogSession | null = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理用户消息
|
* 处理用户消息
|
||||||
@ -26,33 +34,53 @@ export async function handleUserMessage(
|
|||||||
) {
|
) {
|
||||||
console.log("收到用户消息:", text);
|
console.log("收到用户消息:", text);
|
||||||
|
|
||||||
// 记录用户消息到历史
|
// 记录用户消息到历史（允许失败，不阻塞主流程）
|
||||||
const historyManager = ChatHistoryManager.getInstance();
|
try {
|
||||||
await historyManager.addUserMessage(text);
|
const historyManager = ChatHistoryManager.getInstance();
|
||||||
|
await historyManager.addUserMessage(text);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn("记录消息历史失败（可能没有打开工作区）:", error);
|
||||||
|
}
|
||||||
|
|
||||||
// 检查是否是 VCD 生成命令
|
// 设置 WebView 面板用于用户交互
|
||||||
|
userInteractionManager.setWebviewPanel(panel);
|
||||||
|
|
||||||
|
// 检查是否是 VCD 生成命令（本地处理）
|
||||||
if (isVCDGenerationCommand(text)) {
|
if (isVCDGenerationCommand(text)) {
|
||||||
await handleVCDGeneration(panel, extensionPath || "");
|
await handleVCDGeneration(panel, extensionPath || "");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 检查是否是文件操作命令
|
// 检查是否是文件操作命令（本地处理）
|
||||||
const fileOperation = parseFileOperation(text);
|
const fileOperation = parseFileOperation(text);
|
||||||
|
|
||||||
console.log("解析结果:", fileOperation);
|
|
||||||
|
|
||||||
if (fileOperation) {
|
if (fileOperation) {
|
||||||
console.log("执行文件操作:", fileOperation.type, fileOperation.filePath);
|
console.log("执行文件操作:", fileOperation.type, fileOperation.filePath);
|
||||||
await handleFileOperation(panel, fileOperation);
|
await handleFileOperation(panel, fileOperation);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 普通消息处理
|
// 尝试使用后端服务
|
||||||
console.log("作为普通消息处理");
|
if (useBackendService && extensionPath) {
|
||||||
|
try {
|
||||||
|
await handleUserMessageWithBackend(panel, text, extensionPath);
|
||||||
|
return;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("后端服务不可用，回退到本地模式:", error);
|
||||||
|
// 后端不可用时，使用本地模拟回复
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 本地模拟回复（后端不可用时的 fallback）
|
||||||
|
console.log("使用本地模拟回复");
|
||||||
const reply = getMockReply(text);
|
const reply = getMockReply(text);
|
||||||
|
|
||||||
// 记录助手回复到历史
|
// 记录AI回复到历史（允许失败）
|
||||||
await historyManager.addAiMessage(reply);
|
try {
|
||||||
|
const historyManager = ChatHistoryManager.getInstance();
|
||||||
|
await historyManager.addAiMessage(reply);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn("记录AI回复历史失败:", error);
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
panel.webview.postMessage({
|
panel.webview.postMessage({
|
||||||
@ -62,6 +90,140 @@ export async function handleUserMessage(
|
|||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 使用后端服务处理用户消息
|
||||||
|
*/
|
||||||
|
async function handleUserMessageWithBackend(
|
||||||
|
panel: vscode.WebviewPanel,
|
||||||
|
text: string,
|
||||||
|
extensionPath: string
|
||||||
|
): Promise<void> {
|
||||||
|
// 创建或复用会话
|
||||||
|
if (!currentSession || !currentSession.active) {
|
||||||
|
currentSession = dialogManager.createSession(extensionPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
const historyManager = ChatHistoryManager.getInstance();
|
||||||
|
|
||||||
|
// 显示状态栏
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "updateStatus",
|
||||||
|
text: "思考中...",
|
||||||
|
type: "thinking",
|
||||||
|
});
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
currentSession!.sendMessage(text, {
|
||||||
|
onText: (fullText, isStreaming) => {
|
||||||
|
if (isStreaming) {
|
||||||
|
// 流式更新消息
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "updateStreamingMessage",
|
||||||
|
text: fullText,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 注意：完成时通过 onComplete 发送分段消息
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolStart: (toolName) => {
|
||||||
|
// 实时显示工具状态
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "toolStart",
|
||||||
|
toolName,
|
||||||
|
});
|
||||||
|
// 同时更新状态栏
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "updateStatus",
|
||||||
|
text: `正在执行 ${toolName}...`,
|
||||||
|
type: "working",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolComplete: (toolName, result) => {
|
||||||
|
// 实时更新工具状态
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "toolComplete",
|
||||||
|
toolName,
|
||||||
|
result,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onToolError: (toolName, error) => {
|
||||||
|
// 实时显示工具错误
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "toolError",
|
||||||
|
toolName,
|
||||||
|
error,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onQuestion: (askId, question, options) => {
|
||||||
|
// 问题会在分段消息中显示，这里只更新状态栏
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "updateStatus",
|
||||||
|
text: "等待用户回答...",
|
||||||
|
type: "working",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onComplete: async (segments) => {
|
||||||
|
// 隐藏状态栏
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "hideStatus",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 发送分段消息
|
||||||
|
console.log('[MessageHandler] 发送分段消息, 段落数:', segments.length);
|
||||||
|
console.log('[MessageHandler] segments 内容:', JSON.stringify(segments));
|
||||||
|
|
||||||
|
const result = await panel.webview.postMessage({
|
||||||
|
command: "receiveSegments",
|
||||||
|
segments: segments,
|
||||||
|
});
|
||||||
|
console.log('[MessageHandler] postMessage 返回值:', result);
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
|
||||||
|
onError: (message) => {
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "hideLoading",
|
||||||
|
});
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "receiveMessage",
|
||||||
|
text: `❌ 错误: ${message}`,
|
||||||
|
});
|
||||||
|
reject(new Error(message));
|
||||||
|
},
|
||||||
|
|
||||||
|
onNotification: (message) => {
|
||||||
|
vscode.window.showInformationMessage(message);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理用户回答（从 WebView 调用）
|
||||||
|
*/
|
||||||
|
export async function handleUserAnswer(
|
||||||
|
askId: string,
|
||||||
|
selected?: string[],
|
||||||
|
customInput?: string
|
||||||
|
): Promise<void> {
|
||||||
|
if (currentSession) {
|
||||||
|
await currentSession.submitAnswer(askId, selected, customInput);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中止当前对话
|
||||||
|
*/
|
||||||
|
export function abortCurrentDialog(): void {
|
||||||
|
dialogManager.abortCurrentSession();
|
||||||
|
currentSession = null;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解析文件操作命令
|
* 解析文件操作命令
|
||||||
*/
|
*/
|
||||||
@ -615,24 +777,17 @@ async function handleVCDGeneration(
|
|||||||
successMsg += `\n\n仿真输出:\n${result.stdout}`;
|
successMsg += `\n\n仿真输出:\n${result.stdout}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送带波形预览的消息
|
panel.webview.postMessage({
|
||||||
if (result.vcdFilePath) {
|
command: "receiveMessage",
|
||||||
const fileName = path.basename(result.vcdFilePath);
|
text: successMsg,
|
||||||
panel.webview.postMessage({
|
});
|
||||||
command: "vcdGenerated",
|
|
||||||
text: successMsg,
|
|
||||||
vcdFilePath: result.vcdFilePath,
|
|
||||||
fileName: fileName,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// 自动打开 VCD 波形查看器
|
||||||
|
if (result.vcdFilePath) {
|
||||||
|
vscode.commands.executeCommand("ic-coder.openVCDViewer", result.vcdFilePath);
|
||||||
vscode.window.showInformationMessage(
|
vscode.window.showInformationMessage(
|
||||||
`VCD 文件生成成功: ${fileName}`
|
`VCD 文件生成成功，已自动打开波形查看器`
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
panel.webview.postMessage({
|
|
||||||
command: "receiveMessage",
|
|
||||||
text: successMsg,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let errorMsg = `❌ ${result.message}`;
|
let errorMsg = `❌ ${result.message}`;
|
||||||
|
|||||||
@ -5,12 +5,17 @@ import {
|
|||||||
insertCodeToEditor,
|
insertCodeToEditor,
|
||||||
handleReadFile,
|
handleReadFile,
|
||||||
handleCreateFile,
|
handleCreateFile,
|
||||||
|
handleUpdateFile,
|
||||||
|
handleRenameFile,
|
||||||
|
handleReplaceInFile,
|
||||||
|
handleUserAnswer,
|
||||||
|
abortCurrentDialog,
|
||||||
} from "../utils/messageHandler";
|
} from "../utils/messageHandler";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建并显示IC 侧边栏视图
|
* 创建并显示IC 侧边栏视图
|
||||||
*/
|
*/
|
||||||
export function showICHelperPanel(content: vscode.ExtensionContext) {
|
export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||||
// 创建WebView面板
|
// 创建WebView面板
|
||||||
const panel = vscode.window.createWebviewPanel(
|
const panel = vscode.window.createWebviewPanel(
|
||||||
"icCoder", // 面板ID
|
"icCoder", // 面板ID
|
||||||
@ -19,20 +24,20 @@ export function showICHelperPanel(content: vscode.ExtensionContext) {
|
|||||||
{
|
{
|
||||||
enableScripts: true,
|
enableScripts: true,
|
||||||
retainContextWhenHidden: true,
|
retainContextWhenHidden: true,
|
||||||
localResourceRoots: [vscode.Uri.joinPath(content.extensionUri, "media")],
|
localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// 设置标签页图标
|
// 设置标签页图标
|
||||||
panel.iconPath = vscode.Uri.joinPath(
|
panel.iconPath = vscode.Uri.joinPath(
|
||||||
content.extensionUri,
|
context.extensionUri,
|
||||||
"media",
|
"media",
|
||||||
"图案（方底）.png"
|
"图案（方底）.png"
|
||||||
);
|
);
|
||||||
|
|
||||||
// 获取页面内图标URI
|
// 获取页面内图标URI
|
||||||
const iconUri = panel.webview.asWebviewUri(
|
const iconUri = panel.webview.asWebviewUri(
|
||||||
vscode.Uri.joinPath(content.extensionUri, "media", "图案（方底）.png")
|
vscode.Uri.joinPath(context.extensionUri, "media", "图案（方底）.png")
|
||||||
);
|
);
|
||||||
// 设置HTML内容
|
// 设置HTML内容
|
||||||
panel.webview.html = getWebviewContent(iconUri.toString());
|
panel.webview.html = getWebviewContent(iconUri.toString());
|
||||||
@ -42,11 +47,20 @@ export function showICHelperPanel(content: vscode.ExtensionContext) {
|
|||||||
(message) => {
|
(message) => {
|
||||||
switch (message.command) {
|
switch (message.command) {
|
||||||
case "sendMessage":
|
case "sendMessage":
|
||||||
handleUserMessage(panel, message.text);
|
handleUserMessage(panel, message.text, context.extensionPath);
|
||||||
break;
|
break;
|
||||||
case "readFile":
|
case "readFile":
|
||||||
handleReadFile(panel, message.filePath);
|
handleReadFile(panel, message.filePath);
|
||||||
break;
|
break;
|
||||||
|
case "updateFile":
|
||||||
|
handleUpdateFile(panel, message.filePath, message.content);
|
||||||
|
break;
|
||||||
|
case "renameFile":
|
||||||
|
handleRenameFile(panel, message.oldPath, message.newPath);
|
||||||
|
break;
|
||||||
|
case "replaceInFile":
|
||||||
|
handleReplaceInFile(panel, message.filePath, message.searchText, message.replaceText);
|
||||||
|
break;
|
||||||
case "insertCode":
|
case "insertCode":
|
||||||
insertCodeToEditor(message.code);
|
insertCodeToEditor(message.code);
|
||||||
break;
|
break;
|
||||||
@ -61,10 +75,18 @@ export function showICHelperPanel(content: vscode.ExtensionContext) {
|
|||||||
case "showInfo":
|
case "showInfo":
|
||||||
vscode.window.showInformationMessage(message.text);
|
vscode.window.showInformationMessage(message.text);
|
||||||
break;
|
break;
|
||||||
|
// 新增：处理用户回答
|
||||||
|
case "submitAnswer":
|
||||||
|
handleUserAnswer(message.askId, message.selected, message.customInput);
|
||||||
|
break;
|
||||||
|
// 新增：中止对话
|
||||||
|
case "abortDialog":
|
||||||
|
abortCurrentDialog();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
undefined,
|
undefined,
|
||||||
content.subscriptions
|
context.subscriptions
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,308 +0,0 @@
|
|||||||
/**
|
|
||||||
* 获取会话历史栏的 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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
@ -1,350 +0,0 @@
|
|||||||
/**
|
|
||||||
* 获取波形预览组件的样式内容（纯 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);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
@ -1,13 +1,3 @@
|
|||||||
import {
|
|
||||||
getWaveformPreviewContent,
|
|
||||||
getWaveformPreviewScript,
|
|
||||||
} from "./waveformPreviewContent";
|
|
||||||
import {
|
|
||||||
getConversationHistoryBarContent,
|
|
||||||
getConversationHistoryBarStyles,
|
|
||||||
getConversationHistoryBarScript,
|
|
||||||
} from "./conversationHistoryBar";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取 WebView 面板的 HTML 内容
|
* 获取 WebView 面板的 HTML 内容
|
||||||
*/
|
*/
|
||||||
@ -24,7 +14,7 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
background: var(--vscode-editor-background);
|
background: var(--vscode-editor-background);
|
||||||
color: var(--vscode-foreground);
|
color: var(--vscode-foreground);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 20px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -32,16 +22,9 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
margin-bottom: 20px;
|
||||||
overflow: hidden;
|
padding-bottom: 15px;
|
||||||
display: flex;
|
border-bottom: 1px solid var(--vscode-panel-border);
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.header.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
.header h1 {
|
.header h1 {
|
||||||
color: var(--vscode-button-background);
|
color: var(--vscode-button-background);
|
||||||
@ -53,7 +36,6 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0 20px 20px 20px;
|
|
||||||
}
|
}
|
||||||
.messages {
|
.messages {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -195,7 +177,6 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: -17px;
|
|
||||||
}
|
}
|
||||||
.mode-selector {
|
.mode-selector {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -209,13 +190,12 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
}
|
}
|
||||||
.mode-selector select {
|
.mode-selector select {
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
background: var(--vscode-input-background);
|
background: transparent;
|
||||||
color: var(--vscode-foreground);
|
color: var(--vscode-foreground);
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
.mode-selector select:hover {
|
.mode-selector select:hover {
|
||||||
background: var(--vscode-list-hoverBackground);
|
background: var(--vscode-list-hoverBackground);
|
||||||
@ -401,8 +381,6 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
${getWaveformPreviewContent()}
|
|
||||||
${getConversationHistoryBarStyles()}
|
|
||||||
.file-editor-section {
|
.file-editor-section {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@ -560,10 +538,254 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
transform: translateX(-50%) translateY(0);
|
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 14px;
|
||||||
|
}
|
||||||
|
.segment-text {
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 状态栏样式 */
|
||||||
|
.status-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: var(--vscode-textBlockQuote-background);
|
||||||
|
border-radius: 6px;
|
||||||
|
margin: 8px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
}
|
||||||
|
.status-indicator {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--vscode-charts-blue);
|
||||||
|
animation: statusPulse 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes statusPulse {
|
||||||
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
|
50% { opacity: 0.5; transform: scale(0.8); }
|
||||||
|
}
|
||||||
|
.status-bar.working .status-indicator {
|
||||||
|
background: var(--vscode-charts-orange);
|
||||||
|
}
|
||||||
|
.status-bar.success .status-indicator {
|
||||||
|
background: var(--vscode-charts-green);
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.status-bar.error .status-indicator {
|
||||||
|
background: var(--vscode-charts-red);
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
${getConversationHistoryBarContent()}
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
|
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
|
||||||
<img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
|
<img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
|
||||||
@ -573,7 +795,41 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat-container">
|
<div class="chat-container">
|
||||||
<div id="messages" class="messages"></div>
|
<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="statusBar" class="status-bar" style="display: none;">
|
||||||
|
<div class="status-indicator"></div>
|
||||||
|
<span id="statusText">思考中...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="quick-actions">
|
<div class="quick-actions">
|
||||||
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
|
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
|
||||||
@ -654,12 +910,15 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
console.log('[WebView] 脚本开始执行');
|
||||||
const vscode = acquireVsCodeApi();
|
const vscode = acquireVsCodeApi();
|
||||||
|
console.log('[WebView] vscode API 已获取');
|
||||||
const messagesEl = document.getElementById('messages');
|
const messagesEl = document.getElementById('messages');
|
||||||
const messageInput = document.getElementById('messageInput');
|
const messageInput = document.getElementById('messageInput');
|
||||||
const modeSelect = document.getElementById('modeSelect');
|
const modeSelect = document.getElementById('modeSelect');
|
||||||
const filePathInput = document.getElementById('filePathInput');
|
const filePathInput = document.getElementById('filePathInput');
|
||||||
const fileContentEl = document.getElementById('fileContent');
|
const fileContentEl = document.getElementById('fileContent');
|
||||||
|
console.log('[WebView] DOM 元素已获取, messagesEl:', !!messagesEl);
|
||||||
const errorMessageEl = document.getElementById('errorMessage');
|
const errorMessageEl = document.getElementById('errorMessage');
|
||||||
const fileEditorSection = document.getElementById('fileEditorSection');
|
const fileEditorSection = document.getElementById('fileEditorSection');
|
||||||
const fileEditorTextarea = document.getElementById('fileEditorTextarea');
|
const fileEditorTextarea = document.getElementById('fileEditorTextarea');
|
||||||
@ -815,20 +1074,10 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
div.appendChild(actionsDiv);
|
div.appendChild(actionsDiv);
|
||||||
} else {
|
} else {
|
||||||
div.textContent = text;
|
div.textContent = text;
|
||||||
// 当添加用户消息时，隐藏 header
|
|
||||||
hideHeaderIfNeeded();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
messagesEl.appendChild(div);
|
messagesEl.appendChild(div);
|
||||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||||
|
|
||||||
// 添加消息后检查 header 显示状态
|
|
||||||
checkHeaderVisibility();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查是否需要隐藏 header
|
|
||||||
function hideHeaderIfNeeded() {
|
|
||||||
checkHeaderVisibility();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyMessage(text, button) {
|
function copyMessage(text, button) {
|
||||||
@ -952,29 +1201,56 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 流式消息相关状态
|
||||||
|
let currentStreamingMessage = null;
|
||||||
|
let loadingIndicator = null;
|
||||||
|
|
||||||
window.addEventListener('message', event => {
|
window.addEventListener('message', event => {
|
||||||
const message = event.data;
|
const message = event.data;
|
||||||
|
console.log('[WebView] 收到消息:', message.command, message);
|
||||||
|
|
||||||
switch (message.command) {
|
switch (message.command) {
|
||||||
case 'receiveMessage':
|
case 'receiveMessage':
|
||||||
addMessage(message.text, 'bot');
|
// 完成流式消息或普通消息
|
||||||
break;
|
if (currentStreamingMessage) {
|
||||||
case 'vcdGenerated':
|
finalizeStreamingMessage(message.text);
|
||||||
// VCD 文件生成成功，显示带波形预览的消息
|
} else {
|
||||||
const messageDiv = document.createElement('div');
|
addMessage(message.text, 'bot');
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
break;
|
||||||
messagesEl.appendChild(messageDiv);
|
case 'receiveSegments':
|
||||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
// 渲染分段消息
|
||||||
|
renderSegments(message.segments);
|
||||||
|
break;
|
||||||
|
case 'updateStreamingMessage':
|
||||||
|
// 流式更新消息
|
||||||
|
updateOrCreateStreamingMessage(message.text);
|
||||||
|
break;
|
||||||
|
case 'showLoading':
|
||||||
|
showLoadingIndicator(message.text || '正在思考...');
|
||||||
|
break;
|
||||||
|
case 'hideLoading':
|
||||||
|
hideLoadingIndicator();
|
||||||
|
break;
|
||||||
|
case 'updateStatus':
|
||||||
|
updateStatusBar(message.text, message.type || 'thinking');
|
||||||
|
break;
|
||||||
|
case 'hideStatus':
|
||||||
|
hideStatusBar();
|
||||||
|
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);
|
||||||
break;
|
break;
|
||||||
case 'fileContent':
|
case 'fileContent':
|
||||||
displayFileContent(message.content, message.filePath);
|
displayFileContent(message.content, message.filePath);
|
||||||
@ -991,41 +1267,273 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
case 'fileUpdateError':
|
case 'fileUpdateError':
|
||||||
addMessage(\`❌ \${message.error}\`, 'bot');
|
addMessage(\`❌ \${message.error}\`, 'bot');
|
||||||
break;
|
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');
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 更新或创建流式消息
|
||||||
|
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, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.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) => {
|
filePathInput.addEventListener('keydown', (event) => {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
@ -1045,24 +1553,7 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
// 初始化时调整一次高度
|
// 初始化时调整一次高度
|
||||||
autoResizeTextarea();
|
autoResizeTextarea();
|
||||||
|
|
||||||
// 初始化时检查是否需要显示 header
|
|
||||||
checkHeaderVisibility();
|
|
||||||
|
|
||||||
messageInput.focus();
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>`;
|
</html>`;
|
||||||
|
|||||||
Reference in New Issue
Block a user