let selectedCodeForContext = ''; const vscode = acquireVsCodeApi(); document.addEventListener('DOMContentLoaded', () => { const chatForm = document.getElementById('chat-form'); const userInput = document.getElementById('user-input'); const chatBox = document.getElementById('chat-box'); const loading = document.getElementById('loading'); chatForm.addEventListener('submit', (e) => { e.preventDefault(); const text = userInput.value.trim(); if (!text) return; vscode.postMessage({ command: 'ask', text, fileContent: selectedCodeForContext }); // addMessage('user', text); showLoading(); userInput.value = ''; }); // 判断内容是否为 Markdown(简单判断) function isMarkdown(content) { if (!content || content.trim() === '') return false; const markdownPatterns = [ /^#/m, // 标题 # /\*\*[^*]+\*\*/g, // 加粗 **text** /__[^_]+__/g, // 加粗 __text__ /^- /gm, // 无序列表 /^\* /gm, // 无序列表 /^\d+\. /gm, // 有序列表 /```/g // 代码块 ]; return markdownPatterns.some(pattern => pattern.test(content)); } function addMessage(role, content) { const msgDiv = document.createElement('div'); msgDiv.className = `message ${role}`; // 渲染内容 if (isMarkdown(content)) { console.log("content:", content) msgDiv.innerHTML = marked.parse(content); console.log("msgDiv.innerHTML:", msgDiv.innerHTML) } else { const div = document.createElement('div'); div.textContent = content; msgDiv.appendChild(div); } chatBox.appendChild(msgDiv); // 高亮代码块 const codeBlocks = msgDiv.querySelectorAll('pre code'); codeBlocks.forEach(block => { hljs.highlightElement(block); }); // 滚动到底部 chatBox.scrollTop = chatBox.scrollHeight; } function showLoading() { loading.classList.remove('hidden'); } function hideLoading() { loading.classList.add('hidden'); } window.addEventListener('message', (event) => { const message = event.data; console.log(message) if (message.command === 'addMessage') { addMessage(message.role, message.content); } else if (message.command === 'hideLoading') { hideLoading(); } else if (message.command === 'addToInput') { userInput.value = message.content; // 插入选中内容到输入框 selectedCodeForContext = message.content; userInput.focus(); // 自动聚焦输入框 } else if (message.command === 'fileList') { const fileListContainer = document.getElementById('file-list'); if (message.error) { fileListContainer.innerHTML = `
错误: ${message.error}
`; return; } if (!message.files || message.files.length === 0) { fileListContainer.innerHTML = '
未找到文件
'; return; } // 渲染文件列表 fileListContainer.innerHTML = ''; message.files.forEach(file => { const fileItem = document.createElement('div'); fileItem.className = 'file-item'; fileItem.innerHTML = ` ${file.isDirectory ? '📁' : '📄'} ${file.relativePath} `; fileItem.addEventListener('click', () => { // 选择文件 vscode.postMessage({ command: 'selectFileByPath', filePath: file.path }); // 关闭模态框 document.getElementById('file-browser-modal').classList.add('hidden'); }); fileListContainer.appendChild(fileItem); }); } else if (message.command === 'setContextFile') { const contextPlaceholder = document.getElementById('context-placeholder'); const contextTab = document.getElementById('context-tab'); const fileNameElement = document.getElementById('context-file-name'); const fullPath = message.fileName; const fileName = fullPath.split(/[\/\\]/).pop(); fileNameElement.innerText = fileName; fileNameElement.title = fullPath; selectedCodeForContext = message.fileContent; // 隐藏占位符,显示文件标签 contextPlaceholder.classList.add('hidden'); contextTab.classList.remove('hidden'); } }); // 打开文件浏览器 document.getElementById('select-context-btn').addEventListener('click', () => { // 显示模态框 document.getElementById('file-browser-modal').classList.remove('hidden'); // 请求文件列表 vscode.postMessage({ command: 'getFileList' }); }); // 关闭模态框 document.getElementById('close-modal').addEventListener('click', () => { document.getElementById('file-browser-modal').classList.add('hidden'); }); // 点击模态框外部关闭 document.getElementById('file-browser-modal').addEventListener('click', (e) => { if (e.target.id === 'file-browser-modal') { document.getElementById('file-browser-modal').classList.add('hidden'); } }); // 文件搜索功能 document.getElementById('file-search-input').addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const fileItems = document.querySelectorAll('.file-item'); fileItems.forEach(item => { const fileName = item.querySelector('.file-name').textContent.toLowerCase(); if (fileName.includes(searchTerm)) { item.style.display = ''; } else { item.style.display = 'none'; } }); }); // 添加关闭按钮事件监听 document.getElementById('close-context-btn').addEventListener('click', () => { const contextPlaceholder = document.getElementById('context-placeholder'); const contextTab = document.getElementById('context-tab'); contextTab.classList.add('hidden'); contextPlaceholder.classList.remove('hidden'); selectedCodeForContext = ''; }); });