refactor(webview): 重构网页视图功能

- 移除未使用的导入和函数
-优化消息处理和流式响应逻辑
- 添加会话历史记录功能
- 改进文件浏览器和模态框交互
- 重新添加语言检测和文件扩展名功能
- 新增停止按钮样式

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 (diffs[index]) {
-                if (codeDiffs && codeDiffs[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', () => {
+    const selectContextBtn = document.getElementById('select-context-btn');
-        // 显示模态框
+    if (selectContextBtn) {
-        document.getElementById('file-browser-modal').classList.remove('hidden');
+        selectContextBtn.addEventListener('click', () => {
+            // 显示模态框
+            const fileBrowserModal = document.getElementById('file-browser-modal');
+            if (fileBrowserModal) {
+                fileBrowserModal.classList.remove('hidden');
+            }
 
-        // 请求文件列表
+            // 请求文件列表
-        vscode.postMessage({
+            vscode.postMessage({
-            command: 'getFileList'
+                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('<?php')) {
+            return 'php';
+        } else if (code.includes('using System')) {
+            return 'csharp';
+        }
+        return 'text'; // 默认
+    }
+
+    // 根据语言获取文件扩展名
+    function getFileExtension(language) {
+        const extensions = {
+            'javascript': '.js',
+            'typescript': '.ts',
+            'python': '.py',
+            'java': '.java',
+            'html': '.html',
+            'css': '.css',
+            'php': '.php',
+            'csharp': '.cs',
+            'text': '.txt'
+        };
+        return extensions[language] || '.txt';
+    }
 });

media/webview/style.css

@@ -500,4 +500,13 @@ code {
     padding: 10px;
     color: var(--vscode-descriptionForeground);
     font-size: 12px;
-}
+}
+
+.stop-button {
+    background-color: #f44336 !important;
+    color: white !important;
+}
+
+.stop-button:hover {
+    background-color: #d32f2f !important;
+}

src/utils/common.ts

@@ -81,24 +81,3 @@ export function getFileExtension(language: string): string {
     return languageMap[language?.toLowerCase()] || '.txt';
 }
 
-// 简单的语言检测
-export 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('<?php')) {
-        return 'php';
-    } else if (code.includes('using System')) {
-        return 'csharp';
-    }
-    return 'text'; // 默认
-}
-