Compare commits
3 Commits
7c1f1fae07
...
feat/plugi
| Author | SHA1 | Date | |
|---|---|---|---|
| b0e1995897 | |||
| f18ca4fb9c | |||
| f2382a8eed |
444
docs/波形预览功能技术文档.md
Normal file
444
docs/波形预览功能技术文档.md
Normal file
@ -0,0 +1,444 @@
|
|||||||
|
# 波形预览功能技术文档
|
||||||
|
|
||||||
|
## 功能概述
|
||||||
|
|
||||||
|
在对话界面中显示 VCD 波形文件的预览卡片，用户可以查看前几个信号的真实波形，并通过"展开查看"按钮打开完整的波形查看器。
|
||||||
|
|
||||||
|
## 功能流程
|
||||||
|
|
||||||
|
```
|
||||||
|
用户输入"生成VCD"命令
|
||||||
|
↓
|
||||||
|
系统执行 iverilog 编译和仿真
|
||||||
|
↓
|
||||||
|
生成 VCD 文件
|
||||||
|
↓
|
||||||
|
在对话界面显示波形预览卡片
|
||||||
|
├─ 显示真实的波形图（前3个信号）
|
||||||
|
├─ 显示信号名称和波形
|
||||||
|
└─ "展开查看"按钮
|
||||||
|
↓
|
||||||
|
点击"展开查看"按钮
|
||||||
|
↓
|
||||||
|
打开完整的 VCDViewerPanel 波形查看器
|
||||||
|
```
|
||||||
|
|
||||||
|
## 文件结构
|
||||||
|
|
||||||
|
### 1. `src/views/waveformPreviewContent.ts`
|
||||||
|
**功能：** 波形预览组件的独立模块
|
||||||
|
|
||||||
|
**导出函数：**
|
||||||
|
- `getWaveformPreviewContent()` - 返回波形预览组件的 CSS 样式
|
||||||
|
- `getWaveformPreviewScript()` - 返回波形预览组件的 JavaScript 代码
|
||||||
|
|
||||||
|
**主要功能：**
|
||||||
|
- 创建波形预览卡片的 HTML 结构
|
||||||
|
- 从 VCD 文件中提取真实信号数据
|
||||||
|
- 使用 SVG 绘制波形图
|
||||||
|
- 单比特信号：绘制数字波形（高/低电平）
|
||||||
|
- 多比特信号：绘制总线波形（梯形）
|
||||||
|
- 处理"展开查看"按钮点击事件
|
||||||
|
|
||||||
|
**关键函数：**
|
||||||
|
```javascript
|
||||||
|
createWaveformPreview(vcdFilePath, fileName)
|
||||||
|
- 创建波形预览卡片的 DOM 结构
|
||||||
|
- 包含头部（标题 + 展开按钮）和内容区域
|
||||||
|
|
||||||
|
loadMiniWaveform(containerId, vcdFilePath, loadingDiv)
|
||||||
|
- 请求后端获取 VCD 文件信息
|
||||||
|
|
||||||
|
renderWaveformInfo(containerId, vcdInfo)
|
||||||
|
- 接收 VCD 信息并渲染波形
|
||||||
|
|
||||||
|
drawRealWaveform(signals)
|
||||||
|
- 根据真实信号数据绘制 SVG 波形图
|
||||||
|
- 支持单比特和多比特信号
|
||||||
|
- 使用不同颜色区分信号
|
||||||
|
|
||||||
|
openFullWaveform(vcdFilePath)
|
||||||
|
- 发送消息打开完整波形查看器
|
||||||
|
|
||||||
|
addWaveformPreviewToMessage(messageDiv, vcdFilePath, fileName)
|
||||||
|
- 将波形预览组件添加到消息中
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. `src/views/webviewContent.ts`
|
||||||
|
**功能：** 主 WebView 页面，集成波形预览组件
|
||||||
|
|
||||||
|
**修改内容：**
|
||||||
|
- 导入波形预览组件的样式和脚本
|
||||||
|
- 在 `<style>` 标签中插入 `getWaveformPreviewContent()`
|
||||||
|
- 在 `<script>` 标签中插入 `getWaveformPreviewScript()`
|
||||||
|
- 添加 `vcdGenerated` 消息处理逻辑
|
||||||
|
- 添加 `vcdInfo` 消息处理逻辑
|
||||||
|
|
||||||
|
**消息处理：**
|
||||||
|
```javascript
|
||||||
|
case 'vcdGenerated':
|
||||||
|
// VCD 文件生成成功，显示带波形预览的消息
|
||||||
|
- 创建消息 div
|
||||||
|
- 添加成功消息文本
|
||||||
|
- 调用 addWaveformPreviewToMessage() 添加波形预览卡片
|
||||||
|
|
||||||
|
case 'vcdInfo':
|
||||||
|
// 接收到 VCD 文件信息，渲染波形预览
|
||||||
|
- 调用 renderWaveformInfo() 渲染波形
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. `src/utils/messageHandler.ts`
|
||||||
|
**功能：** 处理用户消息和 VCD 生成请求
|
||||||
|
|
||||||
|
**修改内容：**
|
||||||
|
- 导入 `path` 模块
|
||||||
|
- 修改 VCD 生成成功后的消息发送逻辑
|
||||||
|
|
||||||
|
**关键代码：**
|
||||||
|
```typescript
|
||||||
|
if (result.success) {
|
||||||
|
if (result.vcdFilePath) {
|
||||||
|
const fileName = path.basename(result.vcdFilePath);
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "vcdGenerated", // 发送 vcdGenerated 消息
|
||||||
|
text: successMsg,
|
||||||
|
vcdFilePath: result.vcdFilePath,
|
||||||
|
fileName: fileName,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. `src/panels/ICHelperPanel.ts`
|
||||||
|
**功能：** IC 助手面板，处理 WebView 消息
|
||||||
|
|
||||||
|
**修改内容：**
|
||||||
|
- 导入 `VCDViewerPanel`
|
||||||
|
- 添加 `openWaveformViewer` 命令处理
|
||||||
|
- 添加 `getVCDInfo` 命令处理
|
||||||
|
- 新增 `getVCDFileInfo()` 函数
|
||||||
|
- 新增 `parseVCDSignals()` 函数
|
||||||
|
|
||||||
|
**新增函数：**
|
||||||
|
|
||||||
|
#### `getVCDFileInfo(panel, vcdFilePath, containerId)`
|
||||||
|
**功能：** 获取 VCD 文件信息并解析信号数据
|
||||||
|
|
||||||
|
**处理流程：**
|
||||||
|
1. 检查文件是否存在
|
||||||
|
2. 获取文件大小
|
||||||
|
3. 读取 VCD 文件内容
|
||||||
|
4. 解析信号数量
|
||||||
|
5. 解析时间范围
|
||||||
|
6. 调用 `parseVCDSignals()` 解析前 3 个信号的数据
|
||||||
|
7. 发送 `vcdInfo` 消息回前端
|
||||||
|
|
||||||
|
**返回数据结构：**
|
||||||
|
```typescript
|
||||||
|
{
|
||||||
|
command: "vcdInfo",
|
||||||
|
containerId: string,
|
||||||
|
vcdInfo: {
|
||||||
|
signalCount: string,
|
||||||
|
timeRange: string,
|
||||||
|
fileSize: string,
|
||||||
|
signals: Array<{
|
||||||
|
name: string,
|
||||||
|
identifier: string,
|
||||||
|
width: number,
|
||||||
|
values: Array<{ time: number, value: string }>
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `parseVCDSignals(content, maxSignals)`
|
||||||
|
**功能：** 解析 VCD 文件中的信号数据
|
||||||
|
|
||||||
|
**处理流程：**
|
||||||
|
1. 使用正则表达式解析信号定义部分（`$var ... $end`）
|
||||||
|
2. 提取信号名称、标识符、位宽
|
||||||
|
3. 找到数据变化部分（`$dumpvars` 之后）
|
||||||
|
4. 解析每个信号的值变化
|
||||||
|
- 单比特信号：格式 `0!` 或 `1!`
|
||||||
|
- 多比特信号：格式 `b1010 !`
|
||||||
|
5. 限制最多 50 个采样点（避免数据过多）
|
||||||
|
6. 返回信号数据数组
|
||||||
|
|
||||||
|
**VCD 文件格式示例：**
|
||||||
|
```vcd
|
||||||
|
$var wire 1 ! clk $end
|
||||||
|
$var wire 8 " data $end
|
||||||
|
$dumpvars
|
||||||
|
0!
|
||||||
|
b00000000 "
|
||||||
|
#10
|
||||||
|
1!
|
||||||
|
#20
|
||||||
|
0!
|
||||||
|
b00000001 "
|
||||||
|
```
|
||||||
|
|
||||||
|
**消息处理：**
|
||||||
|
```typescript
|
||||||
|
case "openWaveformViewer":
|
||||||
|
// 打开完整波形查看器
|
||||||
|
VCDViewerPanel.createOrShow(context.extensionUri, message.vcdFilePath);
|
||||||
|
|
||||||
|
case "getVCDInfo":
|
||||||
|
// 获取 VCD 文件信息
|
||||||
|
getVCDFileInfo(panel, message.vcdFilePath, message.containerId);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. `src/panels/VCDViewerPanel.ts`
|
||||||
|
**功能：** 完整的 VCD 波形查看器面板（已存在）
|
||||||
|
|
||||||
|
**作用：** 当用户点击"展开查看"按钮时，打开此面板显示完整的波形
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 数据流
|
||||||
|
|
||||||
|
### 1. VCD 生成流程
|
||||||
|
```
|
||||||
|
用户输入 → messageHandler.handleUserMessage()
|
||||||
|
↓
|
||||||
|
检测到 VCD 生成命令
|
||||||
|
↓
|
||||||
|
messageHandler.handleVCDGeneration()
|
||||||
|
↓
|
||||||
|
iverilogRunner.generateVCD()
|
||||||
|
↓
|
||||||
|
生成 VCD 文件
|
||||||
|
↓
|
||||||
|
发送 vcdGenerated 消息到前端
|
||||||
|
↓
|
||||||
|
webviewContent 接收消息
|
||||||
|
↓
|
||||||
|
创建波形预览卡片
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 波形预览加载流程
|
||||||
|
```
|
||||||
|
createWaveformPreview() 创建卡片
|
||||||
|
↓
|
||||||
|
loadMiniWaveform() 请求 VCD 信息
|
||||||
|
↓
|
||||||
|
发送 getVCDInfo 消息到后端
|
||||||
|
↓
|
||||||
|
ICHelperPanel 接收消息
|
||||||
|
↓
|
||||||
|
getVCDFileInfo() 读取并解析 VCD 文件
|
||||||
|
↓
|
||||||
|
parseVCDSignals() 解析信号数据
|
||||||
|
↓
|
||||||
|
发送 vcdInfo 消息到前端
|
||||||
|
↓
|
||||||
|
renderWaveformInfo() 渲染波形
|
||||||
|
↓
|
||||||
|
drawRealWaveform() 绘制 SVG 波形图
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 展开查看流程
|
||||||
|
```
|
||||||
|
用户点击"展开查看"按钮
|
||||||
|
↓
|
||||||
|
openFullWaveform() 发送消息
|
||||||
|
↓
|
||||||
|
发送 openWaveformViewer 消息到后端
|
||||||
|
↓
|
||||||
|
ICHelperPanel 接收消息
|
||||||
|
↓
|
||||||
|
VCDViewerPanel.createOrShow()
|
||||||
|
↓
|
||||||
|
打开完整波形查看器窗口
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 样式说明
|
||||||
|
|
||||||
|
### CSS 类名
|
||||||
|
- `.waveform-preview` - 波形预览卡片容器
|
||||||
|
- `.waveform-preview-header` - 卡片头部
|
||||||
|
- `.waveform-preview-title` - 标题区域
|
||||||
|
- `.waveform-expand-btn` - 展开按钮
|
||||||
|
- `.waveform-preview-content` - 内容区域
|
||||||
|
- `.waveform-mini-viewer` - 波形显示容器
|
||||||
|
- `.waveform-loading` - 加载提示
|
||||||
|
|
||||||
|
### 波形绘制
|
||||||
|
- **单比特信号**：使用 SVG `<path>` 绘制数字波形
|
||||||
|
- 高电平：y = 顶部
|
||||||
|
- 低电平：y = 底部
|
||||||
|
- 垂直跳变表示信号变化
|
||||||
|
|
||||||
|
- **多比特信号**：使用 SVG `<path>` 绘制总线波形
|
||||||
|
- 梯形表示数据变化
|
||||||
|
- 中间线表示稳定状态
|
||||||
|
|
||||||
|
- **颜色方案**：
|
||||||
|
- 第1个信号：蓝色 (`var(--vscode-charts-blue)`)
|
||||||
|
- 第2个信号：绿色 (`var(--vscode-charts-green)`)
|
||||||
|
- 第3个信号：橙色 (`var(--vscode-charts-orange)`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 配置参数
|
||||||
|
|
||||||
|
### 可调整参数
|
||||||
|
|
||||||
|
**在 `ICHelperPanel.ts` 中：**
|
||||||
|
```typescript
|
||||||
|
const signals = parseVCDSignals(content, 3); // 解析前3个信号
|
||||||
|
```
|
||||||
|
- 修改数字可以改变显示的信号数量
|
||||||
|
|
||||||
|
**在 `parseVCDSignals()` 中：**
|
||||||
|
```typescript
|
||||||
|
if (values.length >= 50) {
|
||||||
|
break; // 限制最多50个采样点
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- 修改数字可以改变采样点数量
|
||||||
|
|
||||||
|
**在 `drawRealWaveform()` 中：**
|
||||||
|
```typescript
|
||||||
|
const signalHeight = 20; // 信号高度
|
||||||
|
const signalSpacing = 30; // 信号间距
|
||||||
|
const leftMargin = 80; // 左边距（信号名称区域）
|
||||||
|
const rightMargin = 20; // 右边距
|
||||||
|
```
|
||||||
|
- 修改这些参数可以调整波形显示样式
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 性能优化
|
||||||
|
|
||||||
|
1. **限制信号数量**：只解析前 3 个信号
|
||||||
|
2. **限制采样点**：每个信号最多 50 个采样点
|
||||||
|
3. **轻量级渲染**：使用 SVG 而不是 Canvas
|
||||||
|
4. **按需加载**：只在需要时读取和解析 VCD 文件
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 错误处理
|
||||||
|
|
||||||
|
### 文件不存在
|
||||||
|
```typescript
|
||||||
|
if (!fs.existsSync(vcdFilePath)) {
|
||||||
|
// 返回错误信息
|
||||||
|
vcdInfo: {
|
||||||
|
signalCount: 'N/A',
|
||||||
|
timeRange: 'N/A',
|
||||||
|
fileSize: 'N/A',
|
||||||
|
error: '文件不存在'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 解析失败
|
||||||
|
```typescript
|
||||||
|
try {
|
||||||
|
// 解析逻辑
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析 VCD 信号数据失败:', error);
|
||||||
|
return []; // 返回空数组
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 无信号数据
|
||||||
|
```typescript
|
||||||
|
if (!signals || signals.length === 0) {
|
||||||
|
return `<svg>无波形数据</svg>`;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 未来扩展
|
||||||
|
|
||||||
|
### 可能的改进方向
|
||||||
|
|
||||||
|
1. **交互功能**
|
||||||
|
- 鼠标悬停显示信号值
|
||||||
|
- 点击信号高亮显示
|
||||||
|
- 缩放和平移功能
|
||||||
|
|
||||||
|
2. **显示优化**
|
||||||
|
- 自动选择最有代表性的信号
|
||||||
|
- 智能采样（保留关键变化点）
|
||||||
|
- 支持更多信号类型（模拟信号等）
|
||||||
|
|
||||||
|
3. **性能优化**
|
||||||
|
- 使用 Web Worker 解析大文件
|
||||||
|
- 虚拟滚动显示大量信号
|
||||||
|
- 缓存解析结果
|
||||||
|
|
||||||
|
4. **功能增强**
|
||||||
|
- 支持信号搜索和过滤
|
||||||
|
- 导出波形图片
|
||||||
|
- 比较多个 VCD 文件
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 调试技巧
|
||||||
|
|
||||||
|
### 查看消息流
|
||||||
|
在浏览器开发者工具中查看 `vscode.postMessage()` 的调用：
|
||||||
|
```javascript
|
||||||
|
console.log('发送消息:', message);
|
||||||
|
vscode.postMessage(message);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 查看解析结果
|
||||||
|
在 `parseVCDSignals()` 中添加日志：
|
||||||
|
```typescript
|
||||||
|
console.log('解析到的信号:', signals);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 查看 SVG 输出
|
||||||
|
在 `drawRealWaveform()` 中添加日志：
|
||||||
|
```javascript
|
||||||
|
console.log('SVG 内容:', svgContent);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 相关文件
|
||||||
|
|
||||||
|
- `src/utils/iverilogRunner.ts` - VCD 文件生成
|
||||||
|
- `src/panels/VCDViewerPanel.ts` - 完整波形查看器
|
||||||
|
- `media/vcdrom/` - VCDrom 波形查看库
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 版本历史
|
||||||
|
|
||||||
|
### v1.0 (当前版本)
|
||||||
|
- ✅ 创建独立的波形预览组件
|
||||||
|
- ✅ 解析 VCD 文件中的真实信号数据
|
||||||
|
- ✅ 绘制单比特和多比特信号波形
|
||||||
|
- ✅ 支持展开查看完整波形
|
||||||
|
- ✅ 轻量级预览，快速加载
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
波形预览功能通过以下文件协同工作：
|
||||||
|
|
||||||
|
1. **`waveformPreviewContent.ts`** - 组件核心逻辑
|
||||||
|
2. **`webviewContent.ts`** - 集成到主页面
|
||||||
|
3. **`messageHandler.ts`** - 处理 VCD 生成
|
||||||
|
4. **`ICHelperPanel.ts`** - 解析 VCD 数据和消息处理
|
||||||
|
|
||||||
|
整个功能采用模块化设计，易于维护和扩展。
|
||||||
21
package.json
21
package.json
@ -91,26 +91,6 @@
|
|||||||
"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": {
|
||||||
@ -145,7 +125,6 @@
|
|||||||
],
|
],
|
||||||
"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,9 +11,6 @@ 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
|
||||||
@ -665,10 +662,6 @@ 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==}
|
||||||
|
|
||||||
@ -2126,8 +2119,6 @@ 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: {}
|
||||||
|
|||||||
@ -1,46 +0,0 @@
|
|||||||
/**
|
|
||||||
* 配置管理
|
|
||||||
* 从 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,20 +6,19 @@ 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) {
|
export function showICHelperPanel(context: vscode.ExtensionContext, viewColumn?: vscode.ViewColumn) {
|
||||||
// 创建WebView面板
|
// 创建WebView面板
|
||||||
const panel = vscode.window.createWebviewPanel(
|
const panel = vscode.window.createWebviewPanel(
|
||||||
"icCoder", // 面板ID
|
"icCoder", // 面板ID
|
||||||
"IC Coder", // 面板标题
|
"IC Coder", // 面板标题
|
||||||
vscode.ViewColumn.Beside, // 显示在旁边
|
viewColumn || vscode.ViewColumn.Beside, // 默认显示在旁边，但可以指定
|
||||||
{
|
{
|
||||||
enableScripts: true,
|
enableScripts: true,
|
||||||
retainContextWhenHidden: true,
|
retainContextWhenHidden: true,
|
||||||
@ -63,13 +62,31 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
|||||||
case "showInfo":
|
case "showInfo":
|
||||||
vscode.window.showInformationMessage(message.text);
|
vscode.window.showInformationMessage(message.text);
|
||||||
break;
|
break;
|
||||||
// 新增：处理用户回答
|
case "openWaveformViewer":
|
||||||
case "submitAnswer":
|
// 打开波形查看器
|
||||||
handleUserAnswer(message.askId, message.selected, message.customInput);
|
if (message.vcdFilePath) {
|
||||||
|
VCDViewerPanel.createOrShow(context.extensionUri, message.vcdFilePath);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
// 新增：中止对话
|
case "getVCDInfo":
|
||||||
case "abortDialog":
|
// 获取 VCD 文件信息
|
||||||
abortCurrentDialog();
|
if (message.vcdFilePath && message.containerId) {
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -77,3 +94,172 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
|||||||
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;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,154 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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 }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,224 +0,0 @@
|
|||||||
/**
|
|
||||||
* 对话服务
|
|
||||||
* 整合 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 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?: () => 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;
|
|
||||||
|
|
||||||
constructor(extensionPath: string) {
|
|
||||||
this.taskId = generateTaskId();
|
|
||||||
this.toolContext = createToolExecutorContext(extensionPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取任务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 = '';
|
|
||||||
|
|
||||||
const config = getConfig();
|
|
||||||
const request: DialogRequest = {
|
|
||||||
taskId: this.taskId,
|
|
||||||
message,
|
|
||||||
userId: config.userId,
|
|
||||||
toolMode: 'AGENT'
|
|
||||||
};
|
|
||||||
|
|
||||||
const sseCallbacks: SSECallbacks = {
|
|
||||||
onTextDelta: (data) => {
|
|
||||||
this.accumulatedText += data.text;
|
|
||||||
console.log('[DialogSession] onTextDelta, 累积文本长度:', this.accumulatedText.length);
|
|
||||||
callbacks.onText?.(this.accumulatedText, true);
|
|
||||||
},
|
|
||||||
|
|
||||||
onToolCall: async (data: ToolCallRequest) => {
|
|
||||||
callbacks.onToolStart?.(data.params.name);
|
|
||||||
try {
|
|
||||||
await executeToolCall(data, this.toolContext);
|
|
||||||
callbacks.onToolComplete?.(data.params.name, '执行完成');
|
|
||||||
} catch (error) {
|
|
||||||
const errorMsg = error instanceof Error ? error.message : '未知错误';
|
|
||||||
callbacks.onToolError?.(data.params.name, errorMsg);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onToolStart: (data) => {
|
|
||||||
callbacks.onToolStart?.(data.tool_name);
|
|
||||||
},
|
|
||||||
|
|
||||||
onToolComplete: (data) => {
|
|
||||||
callbacks.onToolComplete?.(data.tool_name, data.result);
|
|
||||||
},
|
|
||||||
|
|
||||||
onToolError: (data) => {
|
|
||||||
callbacks.onToolError?.(data.tool_name, data.error);
|
|
||||||
},
|
|
||||||
|
|
||||||
onAskUser: async (data: AskUserEvent) => {
|
|
||||||
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;
|
|
||||||
// 发送最终文本（非流式）
|
|
||||||
if (this.accumulatedText) {
|
|
||||||
callbacks.onText?.(this.accumulatedText, false);
|
|
||||||
}
|
|
||||||
callbacks.onComplete?.();
|
|
||||||
},
|
|
||||||
|
|
||||||
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();
|
|
||||||
@ -1,296 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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)}`;
|
|
||||||
}
|
|
||||||
@ -1,272 +0,0 @@
|
|||||||
/**
|
|
||||||
* 工具执行器
|
|
||||||
* 接收后端的 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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,154 +0,0 @@
|
|||||||
/**
|
|
||||||
* 用户交互处理器
|
|
||||||
* 处理 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
243
src/types/api.ts
@ -1,243 +0,0 @@
|
|||||||
/**
|
|
||||||
* 后端 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,4 +1,5 @@
|
|||||||
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,
|
||||||
@ -14,15 +15,6 @@ 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;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理用户消息
|
* 处理用户消息
|
||||||
@ -34,53 +26,33 @@ export async function handleUserMessage(
|
|||||||
) {
|
) {
|
||||||
console.log("收到用户消息:", text);
|
console.log("收到用户消息:", text);
|
||||||
|
|
||||||
// 记录用户消息到历史（允许失败，不阻塞主流程）
|
// 记录用户消息到历史
|
||||||
try {
|
const historyManager = ChatHistoryManager.getInstance();
|
||||||
const historyManager = ChatHistoryManager.getInstance();
|
await historyManager.addUserMessage(text);
|
||||||
await historyManager.addUserMessage(text);
|
|
||||||
} catch (error) {
|
|
||||||
console.warn("记录消息历史失败（可能没有打开工作区）:", error);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置 WebView 面板用于用户交互
|
// 检查是否是 VCD 生成命令
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 尝试使用后端服务
|
// 普通消息处理
|
||||||
if (useBackendService && extensionPath) {
|
console.log("作为普通消息处理");
|
||||||
try {
|
|
||||||
await handleUserMessageWithBackend(panel, text, extensionPath);
|
|
||||||
return;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("后端服务不可用，回退到本地模式:", error);
|
|
||||||
// 后端不可用时，使用本地模拟回复
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 本地模拟回复（后端不可用时的 fallback）
|
|
||||||
console.log("使用本地模拟回复");
|
|
||||||
const reply = getMockReply(text);
|
const reply = getMockReply(text);
|
||||||
|
|
||||||
// 记录AI回复到历史（允许失败）
|
// 记录助手回复到历史
|
||||||
try {
|
await historyManager.addAiMessage(reply);
|
||||||
const historyManager = ChatHistoryManager.getInstance();
|
|
||||||
await historyManager.addAiMessage(reply);
|
|
||||||
} catch (error) {
|
|
||||||
console.warn("记录AI回复历史失败:", error);
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
panel.webview.postMessage({
|
panel.webview.postMessage({
|
||||||
@ -90,122 +62,6 @@ 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: "showLoading",
|
|
||||||
text: "正在思考...",
|
|
||||||
});
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
currentSession!.sendMessage(text, {
|
|
||||||
onText: (fullText, isStreaming) => {
|
|
||||||
// 暂时只在完成时发送消息（非流式）
|
|
||||||
if (!isStreaming) {
|
|
||||||
console.log('[MessageHandler] 发送最终消息, 文本长度:', fullText.length);
|
|
||||||
panel.webview.postMessage({
|
|
||||||
command: "receiveMessage",
|
|
||||||
text: fullText,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onToolStart: (toolName) => {
|
|
||||||
panel.webview.postMessage({
|
|
||||||
command: "toolStart",
|
|
||||||
toolName,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
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: "showQuestion",
|
|
||||||
askId,
|
|
||||||
question,
|
|
||||||
options,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onComplete: async () => {
|
|
||||||
// 隐藏加载状态
|
|
||||||
panel.webview.postMessage({
|
|
||||||
command: "hideLoading",
|
|
||||||
});
|
|
||||||
|
|
||||||
// 记录到历史（如果有累积文本）
|
|
||||||
// 注意：实际文本已通过 onText 发送
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解析文件操作命令
|
* 解析文件操作命令
|
||||||
*/
|
*/
|
||||||
@ -759,17 +615,24 @@ async function handleVCDGeneration(
|
|||||||
successMsg += `\n\n仿真输出:\n${result.stdout}`;
|
successMsg += `\n\n仿真输出:\n${result.stdout}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
panel.webview.postMessage({
|
// 发送带波形预览的消息
|
||||||
command: "receiveMessage",
|
|
||||||
text: successMsg,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 自动打开 VCD 波形查看器
|
|
||||||
if (result.vcdFilePath) {
|
if (result.vcdFilePath) {
|
||||||
vscode.commands.executeCommand("ic-coder.openVCDViewer", result.vcdFilePath);
|
const fileName = path.basename(result.vcdFilePath);
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "vcdGenerated",
|
||||||
|
text: successMsg,
|
||||||
|
vcdFilePath: result.vcdFilePath,
|
||||||
|
fileName: fileName,
|
||||||
|
});
|
||||||
|
|
||||||
vscode.window.showInformationMessage(
|
vscode.window.showInformationMessage(
|
||||||
`VCD 文件生成成功，已自动打开波形查看器`
|
`VCD 文件生成成功: ${fileName}`
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "receiveMessage",
|
||||||
|
text: successMsg,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let errorMsg = `❌ ${result.message}`;
|
let errorMsg = `❌ ${result.message}`;
|
||||||
|
|||||||
@ -5,17 +5,12 @@ import {
|
|||||||
insertCodeToEditor,
|
insertCodeToEditor,
|
||||||
handleReadFile,
|
handleReadFile,
|
||||||
handleCreateFile,
|
handleCreateFile,
|
||||||
handleUpdateFile,
|
|
||||||
handleRenameFile,
|
|
||||||
handleReplaceInFile,
|
|
||||||
handleUserAnswer,
|
|
||||||
abortCurrentDialog,
|
|
||||||
} from "../utils/messageHandler";
|
} from "../utils/messageHandler";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建并显示IC 侧边栏视图
|
* 创建并显示IC 侧边栏视图
|
||||||
*/
|
*/
|
||||||
export function showICHelperPanel(context: vscode.ExtensionContext) {
|
export function showICHelperPanel(content: vscode.ExtensionContext) {
|
||||||
// 创建WebView面板
|
// 创建WebView面板
|
||||||
const panel = vscode.window.createWebviewPanel(
|
const panel = vscode.window.createWebviewPanel(
|
||||||
"icCoder", // 面板ID
|
"icCoder", // 面板ID
|
||||||
@ -24,20 +19,20 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
|||||||
{
|
{
|
||||||
enableScripts: true,
|
enableScripts: true,
|
||||||
retainContextWhenHidden: true,
|
retainContextWhenHidden: true,
|
||||||
localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
|
localResourceRoots: [vscode.Uri.joinPath(content.extensionUri, "media")],
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// 设置标签页图标
|
// 设置标签页图标
|
||||||
panel.iconPath = vscode.Uri.joinPath(
|
panel.iconPath = vscode.Uri.joinPath(
|
||||||
context.extensionUri,
|
content.extensionUri,
|
||||||
"media",
|
"media",
|
||||||
"图案（方底）.png"
|
"图案（方底）.png"
|
||||||
);
|
);
|
||||||
|
|
||||||
// 获取页面内图标URI
|
// 获取页面内图标URI
|
||||||
const iconUri = panel.webview.asWebviewUri(
|
const iconUri = panel.webview.asWebviewUri(
|
||||||
vscode.Uri.joinPath(context.extensionUri, "media", "图案（方底）.png")
|
vscode.Uri.joinPath(content.extensionUri, "media", "图案（方底）.png")
|
||||||
);
|
);
|
||||||
// 设置HTML内容
|
// 设置HTML内容
|
||||||
panel.webview.html = getWebviewContent(iconUri.toString());
|
panel.webview.html = getWebviewContent(iconUri.toString());
|
||||||
@ -47,20 +42,11 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
|||||||
(message) => {
|
(message) => {
|
||||||
switch (message.command) {
|
switch (message.command) {
|
||||||
case "sendMessage":
|
case "sendMessage":
|
||||||
handleUserMessage(panel, message.text, context.extensionPath);
|
handleUserMessage(panel, message.text);
|
||||||
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;
|
||||||
@ -75,18 +61,10 @@ export function showICHelperPanel(context: 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,
|
||||||
context.subscriptions
|
content.subscriptions
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
308
src/views/conversationHistoryBar.ts
Normal file
308
src/views/conversationHistoryBar.ts
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
/**
|
||||||
|
* 获取会话历史栏的 HTML 内容
|
||||||
|
*/
|
||||||
|
export function getConversationHistoryBarContent(): string {
|
||||||
|
return `
|
||||||
|
<div class="conversation-history-bar">
|
||||||
|
<div class="history-dropdown-container">
|
||||||
|
<button class="history-dropdown-button" onclick="toggleHistoryDropdown()">
|
||||||
|
<span class="dropdown-label">Past Conversations</span>
|
||||||
|
<svg class="dropdown-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="history-dropdown-menu" id="historyDropdownMenu">
|
||||||
|
<div class="history-list" id="historyList">
|
||||||
|
<!-- 会话历史列表将在这里动态生成 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="new-conversation-button" onclick="createNewConversation()" title="新建对话">
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取会话历史栏的 CSS 样式
|
||||||
|
*/
|
||||||
|
export function getConversationHistoryBarStyles(): string {
|
||||||
|
return `
|
||||||
|
.conversation-history-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: var(--vscode-tab-activeBackground);
|
||||||
|
border-bottom: 1px solid var(--vscode-panel-border);
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--vscode-input-foreground);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-button:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-label {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-button.active .dropdown-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 4px);
|
||||||
|
left: 0;
|
||||||
|
min-width: 300px;
|
||||||
|
max-height: 400px;
|
||||||
|
background: var(--vscode-dropdown-background);
|
||||||
|
border: 1px solid var(--vscode-dropdown-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 1000;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-menu.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
padding: 10px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
border-bottom: 1px solid var(--vscode-panel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item:hover {
|
||||||
|
background: var(--vscode-list-hoverBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item-time {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-empty {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-conversation-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-conversation-button:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-conversation-button:active {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-conversation-button svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条样式 */
|
||||||
|
.history-dropdown-menu::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-menu::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-menu::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(128, 128, 128, 0.5);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-dropdown-menu::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(128, 128, 128, 0.7);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取会话历史栏的 JavaScript 脚本
|
||||||
|
*/
|
||||||
|
export function getConversationHistoryBarScript(): string {
|
||||||
|
return `
|
||||||
|
// 会话历史相关变量
|
||||||
|
let conversationHistory = [];
|
||||||
|
let currentConversationId = null;
|
||||||
|
|
||||||
|
// 切换历史记录下拉菜单
|
||||||
|
function toggleHistoryDropdown() {
|
||||||
|
const menu = document.getElementById('historyDropdownMenu');
|
||||||
|
const button = document.querySelector('.history-dropdown-button');
|
||||||
|
|
||||||
|
if (menu.classList.contains('active')) {
|
||||||
|
menu.classList.remove('active');
|
||||||
|
button.classList.remove('active');
|
||||||
|
} else {
|
||||||
|
menu.classList.add('active');
|
||||||
|
button.classList.add('active');
|
||||||
|
// 加载会话历史
|
||||||
|
loadConversationHistory();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载会话历史
|
||||||
|
function loadConversationHistory() {
|
||||||
|
vscode.postMessage({ command: 'loadConversationHistory' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染会话历史列表
|
||||||
|
function renderConversationHistory(history) {
|
||||||
|
conversationHistory = history;
|
||||||
|
const historyList = document.getElementById('historyList');
|
||||||
|
|
||||||
|
if (!history || history.length === 0) {
|
||||||
|
historyList.innerHTML = '<div class="history-empty">暂无会话历史</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
historyList.innerHTML = history.map(item => \`
|
||||||
|
<div class="history-item"
|
||||||
|
onclick="selectConversation('\${item.id}')">
|
||||||
|
<div class="history-item-title">\${item.title || '未命名会话'}</div>
|
||||||
|
<div class="history-item-time">\${formatTime(item.timestamp)}</div>
|
||||||
|
</div>
|
||||||
|
\`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择会话
|
||||||
|
function selectConversation(conversationId) {
|
||||||
|
currentConversationId = conversationId;
|
||||||
|
vscode.postMessage({
|
||||||
|
command: 'selectConversation',
|
||||||
|
conversationId: conversationId
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭下拉菜单
|
||||||
|
const menu = document.getElementById('historyDropdownMenu');
|
||||||
|
const button = document.querySelector('.history-dropdown-button');
|
||||||
|
menu.classList.remove('active');
|
||||||
|
button.classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新会话
|
||||||
|
function createNewConversation() {
|
||||||
|
vscode.postMessage({ command: 'createNewConversation' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
function formatTime(timestamp) {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const now = new Date();
|
||||||
|
const diff = now - date;
|
||||||
|
|
||||||
|
// 小于1分钟
|
||||||
|
if (diff < 60000) {
|
||||||
|
return '刚刚';
|
||||||
|
}
|
||||||
|
// 小于1小时
|
||||||
|
if (diff < 3600000) {
|
||||||
|
return Math.floor(diff / 60000) + '分钟前';
|
||||||
|
}
|
||||||
|
// 小于1天
|
||||||
|
if (diff < 86400000) {
|
||||||
|
return Math.floor(diff / 3600000) + '小时前';
|
||||||
|
}
|
||||||
|
// 小于7天
|
||||||
|
if (diff < 604800000) {
|
||||||
|
return Math.floor(diff / 86400000) + '天前';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 超过7天显示具体日期
|
||||||
|
return date.toLocaleDateString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击外部关闭下拉菜单
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
const container = document.querySelector('.history-dropdown-container');
|
||||||
|
const menu = document.getElementById('historyDropdownMenu');
|
||||||
|
const button = document.querySelector('.history-dropdown-button');
|
||||||
|
|
||||||
|
if (menu && menu.classList.contains('active')) {
|
||||||
|
if (!container.contains(event.target)) {
|
||||||
|
menu.classList.remove('active');
|
||||||
|
button.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`;
|
||||||
|
}
|
||||||
350
src/views/waveformPreviewContent.ts
Normal file
350
src/views/waveformPreviewContent.ts
Normal file
@ -0,0 +1,350 @@
|
|||||||
|
/**
|
||||||
|
* 获取波形预览组件的样式内容（纯 CSS，不包含 style 标签）
|
||||||
|
*/
|
||||||
|
export function getWaveformPreviewContent(): string {
|
||||||
|
return `
|
||||||
|
/* 波形预览组件样式 */
|
||||||
|
.waveform-preview {
|
||||||
|
margin-top: 12px;
|
||||||
|
border: 1px solid var(--vscode-panel-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--vscode-editor-background);
|
||||||
|
}
|
||||||
|
.waveform-preview-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 12px;
|
||||||
|
background: var(--vscode-input-background);
|
||||||
|
border-bottom: 1px solid var(--vscode-panel-border);
|
||||||
|
}
|
||||||
|
.waveform-preview-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
.waveform-preview-title svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: var(--vscode-button-background);
|
||||||
|
}
|
||||||
|
.waveform-expand-btn {
|
||||||
|
padding: 4px 12px;
|
||||||
|
background: var(--vscode-button-background);
|
||||||
|
color: var(--vscode-button-foreground);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
.waveform-expand-btn:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.waveform-expand-btn svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
.waveform-preview-content {
|
||||||
|
padding: 0;
|
||||||
|
min-height: 200px;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: var(--vscode-editor-background);
|
||||||
|
}
|
||||||
|
.waveform-preview-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
.waveform-preview-placeholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.waveform-preview-placeholder svg {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.waveform-info {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
}
|
||||||
|
.waveform-mini-viewer {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background: var(--vscode-editor-background);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.waveform-loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取波形预览组件的 JavaScript 代码
|
||||||
|
*/
|
||||||
|
export function getWaveformPreviewScript(): string {
|
||||||
|
return `
|
||||||
|
/**
|
||||||
|
* 创建波形预览组件
|
||||||
|
*/
|
||||||
|
function createWaveformPreview(vcdFilePath, fileName) {
|
||||||
|
const previewDiv = document.createElement('div');
|
||||||
|
previewDiv.className = 'waveform-preview';
|
||||||
|
|
||||||
|
// 头部
|
||||||
|
const header = document.createElement('div');
|
||||||
|
header.className = 'waveform-preview-header';
|
||||||
|
|
||||||
|
const title = document.createElement('div');
|
||||||
|
title.className = 'waveform-preview-title';
|
||||||
|
title.innerHTML = \`
|
||||||
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M128 512h128l64-128 64 128 64-256 64 384 64-128h320"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="64"
|
||||||
|
fill="none"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<span>波形预览 - \${fileName}</span>
|
||||||
|
\`;
|
||||||
|
|
||||||
|
const expandBtn = document.createElement('button');
|
||||||
|
expandBtn.className = 'waveform-expand-btn';
|
||||||
|
expandBtn.innerHTML = \`
|
||||||
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M342 88.3h340c56.6 0 102.6 46 102.6 102.6v340c0 56.6-46 102.6-102.6 102.6H342c-56.6 0-102.6-46-102.6-102.6v-340c0-56.6 46-102.6 102.6-102.6z"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="48"/>
|
||||||
|
<path d="M239.4 390.5v340c0 56.6 46 102.6 102.6 102.6h340"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="48"
|
||||||
|
stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
展开查看
|
||||||
|
\`;
|
||||||
|
expandBtn.onclick = () => openFullWaveform(vcdFilePath);
|
||||||
|
|
||||||
|
header.appendChild(title);
|
||||||
|
header.appendChild(expandBtn);
|
||||||
|
|
||||||
|
// 内容区域 - 创建一个唯一ID的容器用于显示波形
|
||||||
|
const content = document.createElement('div');
|
||||||
|
content.className = 'waveform-preview-content';
|
||||||
|
|
||||||
|
const miniViewerId = 'waveform-mini-' + Date.now();
|
||||||
|
const miniViewer = document.createElement('div');
|
||||||
|
miniViewer.id = miniViewerId;
|
||||||
|
miniViewer.className = 'waveform-mini-viewer';
|
||||||
|
|
||||||
|
// 添加加载提示
|
||||||
|
const loadingDiv = document.createElement('div');
|
||||||
|
loadingDiv.className = 'waveform-loading';
|
||||||
|
loadingDiv.textContent = '正在加载波形预览...';
|
||||||
|
miniViewer.appendChild(loadingDiv);
|
||||||
|
|
||||||
|
content.appendChild(miniViewer);
|
||||||
|
|
||||||
|
previewDiv.appendChild(header);
|
||||||
|
previewDiv.appendChild(content);
|
||||||
|
|
||||||
|
// 异步加载波形数据
|
||||||
|
loadMiniWaveform(miniViewerId, vcdFilePath, loadingDiv);
|
||||||
|
|
||||||
|
return previewDiv;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载迷你波形预览
|
||||||
|
*/
|
||||||
|
async function loadMiniWaveform(containerId, vcdFilePath, loadingDiv) {
|
||||||
|
try {
|
||||||
|
// 请求 VCD 文件信息
|
||||||
|
vscode.postMessage({
|
||||||
|
command: 'getVCDInfo',
|
||||||
|
vcdFilePath: vcdFilePath,
|
||||||
|
containerId: containerId
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载波形预览失败:', error);
|
||||||
|
loadingDiv.textContent = '波形预览加载失败';
|
||||||
|
loadingDiv.style.color = 'var(--vscode-errorForeground)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 渲染波形预览信息
|
||||||
|
*/
|
||||||
|
function renderWaveformInfo(containerId, vcdInfo) {
|
||||||
|
const container = document.getElementById(containerId);
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
// 清空容器
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
// 绘制真实波形
|
||||||
|
const waveformSvg = document.createElement('div');
|
||||||
|
waveformSvg.innerHTML = drawRealWaveform(vcdInfo.signals || []);
|
||||||
|
|
||||||
|
container.appendChild(waveformSvg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绘制真实波形
|
||||||
|
*/
|
||||||
|
function drawRealWaveform(signals) {
|
||||||
|
if (!signals || signals.length === 0) {
|
||||||
|
return \`
|
||||||
|
<svg width="100%" height="80" viewBox="0 0 800 80" style="background: var(--vscode-editor-background);">
|
||||||
|
<text x="400" y="40" fill="var(--vscode-descriptionForeground)" font-size="12" text-anchor="middle">
|
||||||
|
无波形数据
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
\`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const svgWidth = 800;
|
||||||
|
const svgHeight = Math.max(80, signals.length * 30 + 20);
|
||||||
|
const signalHeight = 20;
|
||||||
|
const signalSpacing = 30;
|
||||||
|
const leftMargin = 80;
|
||||||
|
const rightMargin = 20;
|
||||||
|
const waveformWidth = svgWidth - leftMargin - rightMargin;
|
||||||
|
|
||||||
|
const colors = ['var(--vscode-charts-blue)', 'var(--vscode-charts-green)', 'var(--vscode-charts-orange)'];
|
||||||
|
|
||||||
|
let svgContent = \`<svg width="100%" height="\${svgHeight}" viewBox="0 0 \${svgWidth} \${svgHeight}" style="background: var(--vscode-editor-background);">\`;
|
||||||
|
|
||||||
|
// 绘制每个信号
|
||||||
|
signals.forEach((signal, index) => {
|
||||||
|
const y = 10 + index * signalSpacing;
|
||||||
|
const color = colors[index % colors.length];
|
||||||
|
|
||||||
|
// 绘制信号名称
|
||||||
|
svgContent += \`<text x="5" y="\${y + signalHeight / 2 + 4}" fill="var(--vscode-foreground)" font-size="10" opacity="0.8">\${signal.name}</text>\`;
|
||||||
|
|
||||||
|
// 如果没有值变化数据，显示提示
|
||||||
|
if (!signal.values || signal.values.length === 0) {
|
||||||
|
svgContent += \`<text x="\${leftMargin + waveformWidth / 2}" y="\${y + signalHeight / 2 + 4}" fill="var(--vscode-descriptionForeground)" font-size="9" text-anchor="middle" opacity="0.5">无数据</text>\`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算时间范围
|
||||||
|
const times = signal.values.map(v => v.time);
|
||||||
|
const minTime = Math.min(...times);
|
||||||
|
const maxTime = Math.max(...times);
|
||||||
|
const timeRange = maxTime - minTime || 1;
|
||||||
|
|
||||||
|
// 绘制波形
|
||||||
|
let pathData = '';
|
||||||
|
let lastX = leftMargin;
|
||||||
|
let lastValue = signal.values[0].value;
|
||||||
|
|
||||||
|
signal.values.forEach((point, i) => {
|
||||||
|
const x = leftMargin + ((point.time - minTime) / timeRange) * waveformWidth;
|
||||||
|
const value = point.value;
|
||||||
|
|
||||||
|
if (signal.width === 1) {
|
||||||
|
// 单比特信号 - 绘制数字波形
|
||||||
|
const yHigh = y;
|
||||||
|
const yLow = y + signalHeight;
|
||||||
|
const currentY = (value === '1') ? yHigh : yLow;
|
||||||
|
|
||||||
|
if (i === 0) {
|
||||||
|
pathData = \`M \${x} \${currentY}\`;
|
||||||
|
} else {
|
||||||
|
// 绘制垂直跳变
|
||||||
|
const prevY = (lastValue === '1') ? yHigh : yLow;
|
||||||
|
if (prevY !== currentY) {
|
||||||
|
pathData += \` L \${x} \${prevY} L \${x} \${currentY}\`;
|
||||||
|
} else {
|
||||||
|
pathData += \` L \${x} \${currentY}\`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lastValue = value;
|
||||||
|
lastX = x;
|
||||||
|
} else {
|
||||||
|
// 多比特信号 - 绘制总线波形（梯形）
|
||||||
|
const yTop = y + 5;
|
||||||
|
const yBottom = y + signalHeight - 5;
|
||||||
|
const transitionWidth = 5;
|
||||||
|
|
||||||
|
if (i === 0) {
|
||||||
|
pathData = \`M \${x} \${yTop + (yBottom - yTop) / 2}\`;
|
||||||
|
} else {
|
||||||
|
// 绘制梯形过渡
|
||||||
|
pathData += \` L \${x - transitionWidth} \${yTop} L \${x} \${yTop + (yBottom - yTop) / 2}\`;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastX = x;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 延伸到右边界
|
||||||
|
if (signal.width === 1) {
|
||||||
|
const lastY = (lastValue === '1') ? y : (y + signalHeight);
|
||||||
|
pathData += \` L \${leftMargin + waveformWidth} \${lastY}\`;
|
||||||
|
} else {
|
||||||
|
const yMid = y + signalHeight / 2;
|
||||||
|
pathData += \` L \${leftMargin + waveformWidth} \${yMid}\`;
|
||||||
|
}
|
||||||
|
|
||||||
|
svgContent += \`<path d="\${pathData}" stroke="\${color}" stroke-width="1.5" fill="none"/>\`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绘制时间轴
|
||||||
|
const timeAxisY = svgHeight - 5;
|
||||||
|
svgContent += \`<line x1="\${leftMargin}" y1="\${timeAxisY}" x2="\${leftMargin + waveformWidth}" y2="\${timeAxisY}" stroke="var(--vscode-foreground)" stroke-width="1" opacity="0.2"/>\`;
|
||||||
|
|
||||||
|
svgContent += \`</svg>\`;
|
||||||
|
|
||||||
|
return svgContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开完整波形查看器
|
||||||
|
*/
|
||||||
|
function openFullWaveform(vcdFilePath) {
|
||||||
|
vscode.postMessage({
|
||||||
|
command: 'openWaveformViewer',
|
||||||
|
vcdFilePath: vcdFilePath
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在消息中添加波形预览
|
||||||
|
*/
|
||||||
|
function addWaveformPreviewToMessage(messageDiv, vcdFilePath, fileName) {
|
||||||
|
const preview = createWaveformPreview(vcdFilePath, fileName);
|
||||||
|
messageDiv.appendChild(preview);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
@ -1,3 +1,13 @@
|
|||||||
|
import {
|
||||||
|
getWaveformPreviewContent,
|
||||||
|
getWaveformPreviewScript,
|
||||||
|
} from "./waveformPreviewContent";
|
||||||
|
import {
|
||||||
|
getConversationHistoryBarContent,
|
||||||
|
getConversationHistoryBarStyles,
|
||||||
|
getConversationHistoryBarScript,
|
||||||
|
} from "./conversationHistoryBar";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取 WebView 面板的 HTML 内容
|
* 获取 WebView 面板的 HTML 内容
|
||||||
*/
|
*/
|
||||||
@ -14,7 +24,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: 20px;
|
padding: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -22,9 +32,16 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
padding: 20px;
|
||||||
padding-bottom: 15px;
|
overflow: hidden;
|
||||||
border-bottom: 1px solid var(--vscode-panel-border);
|
display: flex;
|
||||||
|
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);
|
||||||
@ -36,6 +53,7 @@ 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;
|
||||||
@ -177,6 +195,7 @@ 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;
|
||||||
@ -190,12 +209,13 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
}
|
}
|
||||||
.mode-selector select {
|
.mode-selector select {
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
background: transparent;
|
background: var(--vscode-input-background);
|
||||||
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);
|
||||||
@ -381,6 +401,8 @@ 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;
|
||||||
@ -538,151 +560,10 @@ 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;
|
|
||||||
}
|
|
||||||
</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;" />
|
||||||
@ -692,35 +573,7 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat-container">
|
<div class="chat-container">
|
||||||
<div class="file-reader-section">
|
<div id="messages" class="messages"></div>
|
||||||
<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 class="quick-actions">
|
<div class="quick-actions">
|
||||||
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
|
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
|
||||||
@ -962,10 +815,20 @@ 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) {
|
||||||
@ -1089,44 +952,29 @@ 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');
|
||||||
if (currentStreamingMessage) {
|
break;
|
||||||
finalizeStreamingMessage(message.text);
|
case 'vcdGenerated':
|
||||||
} else {
|
// VCD 文件生成成功，显示带波形预览的消息
|
||||||
addMessage(message.text, 'bot');
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = 'message bot-message';
|
||||||
|
|
||||||
|
const messageContent = document.createElement('div');
|
||||||
|
messageContent.textContent = message.text;
|
||||||
|
messageDiv.appendChild(messageContent);
|
||||||
|
|
||||||
|
// 添加波形预览组件
|
||||||
|
if (message.vcdFilePath && message.fileName) {
|
||||||
|
addWaveformPreviewToMessage(messageDiv, message.vcdFilePath, message.fileName);
|
||||||
}
|
}
|
||||||
break;
|
|
||||||
case 'updateStreamingMessage':
|
messagesEl.appendChild(messageDiv);
|
||||||
// 流式更新消息
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||||
updateOrCreateStreamingMessage(message.text);
|
|
||||||
break;
|
|
||||||
case 'showLoading':
|
|
||||||
showLoadingIndicator(message.text || '正在思考...');
|
|
||||||
break;
|
|
||||||
case 'hideLoading':
|
|
||||||
hideLoadingIndicator();
|
|
||||||
break;
|
|
||||||
case 'toolStart':
|
|
||||||
addToolStatus(message.toolName, 'start');
|
|
||||||
break;
|
|
||||||
case 'toolComplete':
|
|
||||||
addToolStatus(message.toolName, 'complete', message.result);
|
|
||||||
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);
|
||||||
@ -1143,166 +991,41 @@ 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);
|
|
||||||
|
|
||||||
messagesContainer.appendChild(div);
|
|
||||||
currentStreamingMessage = div;
|
|
||||||
} else {
|
|
||||||
// 更新现有消息内容
|
|
||||||
const messageContent = currentStreamingMessage.querySelector('.message-content');
|
|
||||||
if (messageContent) {
|
|
||||||
messageContent.textContent = text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动到底部
|
|
||||||
messagesContainer.scrollTop = messagesContainer.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
messagesContainer.scrollTop = messagesContainer.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>
|
|
||||||
\`;
|
|
||||||
messagesContainer.appendChild(loadingIndicator);
|
|
||||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 隐藏加载指示器
|
|
||||||
function hideLoadingIndicator() {
|
|
||||||
if (loadingIndicator) {
|
|
||||||
loadingIndicator.remove();
|
|
||||||
loadingIndicator = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加工具状态消息
|
|
||||||
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>\` : ''}
|
|
||||||
\`;
|
|
||||||
messagesContainer.appendChild(div);
|
|
||||||
messagesContainer.scrollTop = messagesContainer.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');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
messagesContainer.appendChild(div);
|
|
||||||
messagesContainer.scrollTop = messagesContainer.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') {
|
||||||
@ -1322,7 +1045,24 @@ 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