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 = '';
});
});