From 84964a630d29e7f9826ec7e99e22da2c3f015277 Mon Sep 17 00:00:00 2001 From: ZLY Date: Tue, 29 Jul 2025 15:36:55 +0800 Subject: [PATCH] =?UTF-8?q?refactor(webview):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=BD=91=E9=A1=B5=E8=A7=86=E5=9B=BE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除未使用的导入和函数 -优化消息处理和流式响应逻辑 - 添加会话历史记录功能 - 改进文件浏览器和模态框交互 - 重新添加语言检测和文件扩展名功能 - 新增停止按钮样式 --- media/webview/script.js | 74 +++++++++++++++++++++++++++++++++-------- media/webview/style.css | 11 +++++- src/utils/common.ts | 21 ------------ 3 files changed, 70 insertions(+), 36 deletions(-) diff --git a/media/webview/script.js b/media/webview/script.js index d609d29..e1c86c2 100644 --- a/media/webview/script.js +++ b/media/webview/script.js @@ -1,11 +1,10 @@ -import {detectLanguage, getFileExtension} from "../../src/utils/common" - let selectedCodeForContext = ''; let contextFilePath = ''; // 存储当前上下文文件路径 let streamingMessageElement = null; // 用于存储当前流式消息的DOM元素 let streamingMessageContent = ''; // 用于存储当前流式消息的内容 let currentReader = null; // 用于存储当前流的reader,以便可以取消 let isRequestInProgress = false; // 标记是否有请求正在进行 +let currentSessionHistory = []; // 存储当前会话历史 const vscode = acquireVsCodeApi(); document.addEventListener('DOMContentLoaded', () => { @@ -15,7 +14,7 @@ document.addEventListener('DOMContentLoaded', () => { const loading = document.getElementById('loading'); const sendBtn = document.getElementById('send-btn'); // 获取发送按钮 - // 初始化隐藏工作区 + // 初始化显示工作区容器 const workspaceContainer = document.querySelector('.workspace-container'); if (workspaceContainer) { workspaceContainer.style.display = 'none'; @@ -47,7 +46,6 @@ document.addEventListener('DOMContentLoaded', () => { fileContentPath: contextFilePath // 添加文件路径 }); - // addMessage('user', text); showLoading(); userInput.value = ''; @@ -116,6 +114,9 @@ document.addEventListener('DOMContentLoaded', () => { // 如果是AI消息且包含代码块,为每个代码块添加按钮 if (role === 'ai') { const codeBlocks = msgDiv.querySelectorAll('pre code'); + // 确保 codeDiffs 是数组 + const diffs = Array.isArray(codeDiffs) ? codeDiffs : []; + codeBlocks.forEach((block, index) => { // 为每个代码块添加"创建文件"按钮 const createFileButton = document.createElement('button'); @@ -127,12 +128,12 @@ document.addEventListener('DOMContentLoaded', () => { block.parentNode.after(createFileButton); // 如果有代码差异,也为每个代码块添加查看差异按钮 - // codeDiffs是一个数组,每个元素对应一个代码块的差异信息 - if (codeDiffs && codeDiffs[index]) { + if (diffs[index]) { const diffButton = document.createElement('button'); diffButton.className = 'diff-button'; diffButton.textContent = `查看代码差异`; - diffButton.onclick = () => showCodeDiff(codeDiffs[index]); + diffButton.onclick = () => showCodeDiff(diffs[index]); + // 将差异按钮插入到创建文件按钮后面 createFileButton.after(diffButton); } @@ -269,6 +270,7 @@ document.addEventListener('DOMContentLoaded', () => { streamingMessageContent = ''; } + isRequestInProgress = false // 保存消息到历史记录 currentSessionHistory.push({role: 'assistant', content: content}); @@ -538,15 +540,21 @@ document.addEventListener('DOMContentLoaded', () => { }); // 打开文件浏览器 - document.getElementById('select-context-btn').addEventListener('click', () => { - // 显示模态框 - document.getElementById('file-browser-modal').classList.remove('hidden'); + const selectContextBtn = document.getElementById('select-context-btn'); + if (selectContextBtn) { + selectContextBtn.addEventListener('click', () => { + // 显示模态框 + const fileBrowserModal = document.getElementById('file-browser-modal'); + if (fileBrowserModal) { + fileBrowserModal.classList.remove('hidden'); + } - // 请求文件列表 - vscode.postMessage({ - command: 'getFileList' + // 请求文件列表 + vscode.postMessage({ + command: 'getFileList' + }); }); - }); + } // 关闭模态框 document.getElementById('close-modal').addEventListener('click', () => { document.getElementById('file-browser-modal').classList.add('hidden'); @@ -607,4 +615,42 @@ document.addEventListener('DOMContentLoaded', () => { language: language }); } + + + // 简单的语言检测 + function detectLanguage(code) { + // 可以根据代码特征进行简单判断 + if (code.includes('import React') || code.includes('from react')) { + return 'javascript'; // React代码 + } else if (code.includes('public class') || code.includes('private static')) { + return 'java'; + } else if (code.includes('def ') && code.includes(':')) { + return 'python'; + } else if (code.includes('function ') || code.includes('const ') || code.includes('let ')) { + return 'javascript'; + } else if (code.includes('interface ') && code.includes('export ')) { + return 'typescript'; + } else if (code.includes('