file_type_light

`; const existingTab = tabs.find(t => t.path === filePath); if (existingTab) { activateTab(existingTab); } else { createTab(filePath, imgContent, languageInfo.language, true); } hideSpinner(); resolve(); return; } const content = fs.readFileSync(filePath, 'utf-8'); const existingTab = tabs.find(t => t.path === filePath); if (existingTab) { activateTab(existingTab); } else { createTab(filePath, content, languageInfo.language); } saveState(); hideSpinner(); resolve(); } catch (error) { console.error('Error opening file:', error); showToast(`Error opening file: ${error.message}`, 5000); hideSpinner(); reject(error); } }); } function showExplorerContextMenu(e, itemPath, isDirectory) { e.preventDefault(); const contextMenu = document.getElementById('context-menu'); contextMenu.innerHTML = ''; if (isDirectory) { contextMenu.innerHTML = ` `; } else { contextMenu.innerHTML = ` `; } contextMenu.style.display = 'block'; contextMenu.style.left = `${e.clientX}px`; contextMenu.style.top = `${e.clientY}px`; // Ensure menu stays within window bounds const rect = contextMenu.getBoundingClientRect(); if (rect.right > window.innerWidth) { contextMenu.style.left = `${window.innerWidth - rect.width}px`; } if (rect.bottom > window.innerHeight) { contextMenu.style.top = `${window.innerHeight - rect.height}px`; } } function saveCurrentDirectory(dirPath) { localStorage.setItem('lastDirectory', dirPath); } // Update loadDirectory function to ensure we save the directory function loadDirectory(dirPath) { showSpinner('Loading folder contents...'); setTimeout(() => { try { if (!fs.existsSync(dirPath)) { hideSpinner(); showToast(`Directory "${dirPath}" does not exist`, 5000); // Show folder select dialog if directory doesn't exist remote.dialog.showOpenDialog({ properties: ['openDirectory'], title: 'Select Folder' }).then(result => { if (!result.canceled && result.filePaths.length > 0) { loadDirectory(result.filePaths[0]); } }); return; } // Save the directory AFTER confirming it exists currentPath = dirPath; saveCurrentDirectory(dirPath); // This saves to localStorage currentWorkingDirectory = dirPath; // Update the global working directory variable executeCommand(process.platform === 'win32' ? 'cls' : 'clear'); const fileExplorer = document.getElementById('file-explorer'); fileExplorer.innerHTML = ''; // Show current path const pathElement = document.createElement('div'); pathElement.style.padding = '5px'; pathElement.style.fontSize = '11px'; pathElement.style.color = '#666'; pathElement.textContent = dirPath; fileExplorer.appendChild(pathElement); // Add "Go Back" option if not at root drive if (dirPath.toLowerCase() !== 'c:/') { const backElement = document.createElement('div'); backElement.className = 'folder-item'; backElement.innerHTML = ' ..'; backElement.onclick = () => { const parentPath = path.dirname(dirPath); if (parentPath.match(/^[A-Z]:\\$/i)) { loadDirectory('C:/'); } else { loadDirectory(parentPath); } }; fileExplorer.appendChild(backElement); } const items = fs.readdirSync(dirPath); items.sort((a, b) => { try { const aStats = fs.statSync(path.join(dirPath, a)); const bStats = fs.statSync(path.join(dirPath, b)); if (aStats.isDirectory() && !bStats.isDirectory()) return -1; if (!aStats.isDirectory() && bStats.isDirectory()) return 1; return a.localeCompare(b); } catch (error) { return 0; } }); items.forEach(item => { try { //if (item.startsWith('.')) return; const itemPath = path.join(dirPath, item); if (!fs.existsSync(itemPath)) return; const stats = fs.statSync(itemPath); const element = document.createElement('div'); const languageInfo = getLanguageFromExtension(path.extname(item), stats.isDirectory()); // Add isDirectory here const emoji = languageInfo.emoji; // Get the emoji for the language if (stats.isDirectory()) { element.className = 'folder-item'; element.onclick = () => loadDirectory(itemPath); } else { element.className = 'file-item'; element.onclick = () => openFile(itemPath); } // Change this line to render the emoji as HTML and filename as plain text: element.innerHTML = `${emoji} ${item}`; // Render emoji as HTML and filename as plain text element.dataset.path = itemPath; element.addEventListener('contextmenu', (e) => { showExplorerContextMenu(e, itemPath, stats.isDirectory()); }); element.addEventListener('dblclick', (e) => { e.stopPropagation(); startRename(element, itemPath); }); fileExplorer.appendChild(element); } catch (error) { console.error(`Error processing item ${item}:`, error); } }); hideSpinner(); } catch (error) { console.error('Error loading directory:', error); hideSpinner(); showToast(`Error loading directory: ${error.message}`, 5000); // Show folder select dialog on error remote.dialog.showOpenDialog({ properties: ['openDirectory'], title: 'Select Folder' }).then(result => { if (!result.canceled && result.filePaths.length > 0) { loadDirectory(result.filePaths[0]); } }); } }, 100); // After successfully loading the directory, update the watcher if (folderWatcher) { clearInterval(folderWatcher); } lastFolderContents = getFolderContents(dirPath); folderWatcher = setInterval(() => compareFolderContents(dirPath), 1000); } function showSpinner(message = 'Loading...') { const overlay = document.querySelector('.spinner-overlay'); const messageEl = document.querySelector('.spinner-message'); messageEl.textContent = message; overlay.style.display = 'flex'; } function hideSpinner() { const overlay = document.querySelector('.spinner-overlay'); overlay.style.display = 'none'; } function updateFilePathBar(filePath) { const pathBar = document.getElementById('file-path-bar'); if (filePath && filePath !== 'untitled') { pathBar.textContent = filePath; pathBar.style.display = 'flex'; } else { pathBar.textContent = ''; pathBar.style.display = 'none'; } } function showToast(message, duration = 3000) { const toast = document.getElementById('toast'); toast.textContent = message; toast.style.display = 'block'; setTimeout(() => { toast.style.display = 'none'; }, duration); } function getFolderContents(dirPath) { try { return new Set(fs.readdirSync(dirPath)); } catch (error) { console.error('Error reading directory:', error); return new Set(); } } function compareFolderContents(dirPath) { const currentContents = getFolderContents(dirPath); const previousContents = lastFolderContents; // Find new items const newItems = [...currentContents].filter(x => !previousContents.has(x)); // Find removed items const removedItems = [...previousContents].filter(x => !currentContents.has(x)); if (newItems.length > 0) { console.log('New files/folders detected:', newItems); loadDirectory(dirPath); // Refresh the file explorer } if (removedItems.length > 0) { console.log('Files/folders removed:', removedItems); loadDirectory(dirPath); // Refresh the file explorer } lastFolderContents = currentContents; } function checkFileContent(tab) { if (!tab || tab.path === 'untitled' || tab.isInvalid || tab.path.includes(':old-')) return; try { if (!fs.existsSync(tab.path)) { console.log(`File no longer exists: ${tab.path}`); return; } const diskContent = fs.readFileSync(tab.path, 'utf-8'); const editorContent = tab.model.getValue(); if (diskContent !== editorContent) { console.log('File not saved:', path.basename(tab.path)); if (tab.saved) { tab.saved = false; renderTabs(); // Update the tab display } return false; } else if (!tab.saved) { tab.saved = true; renderTabs(); // Update the tab display } return true; } catch (error) { console.error('Error checking file content:', error); return false; } } // Add window event listeners window.addEventListener('beforeunload', () => { if (folderWatcher) { clearInterval(folderWatcher); } saveState(); }); // Add periodic content checking setInterval(() => { tabs.forEach(tab => { checkFileContent(tab); }); }, 1000); // THEN, add all event handlers // Update the Exit menu option handler document.querySelectorAll('.menu-option').forEach(option => { option.addEventListener('click', async (e) => { const action = e.target.textContent; switch (action) { case 'New Window': remote.app.emit('create-new-window'); break; case 'New File': createTab('untitled', '', 'plaintext'); break; case 'Open File...': const result = await remote.dialog.showOpenDialog({ properties: ['openFile'] }); if (!result.canceled && result.filePaths.length > 0) { openFile(result.filePaths[0]); } break; case 'Open Folder...': const folderResult = await remote.dialog.showOpenDialog({ properties: ['openDirectory'] }); if (!folderResult.canceled && folderResult.filePaths.length > 0) { loadDirectory(folderResult.filePaths[0]); } break; case 'Save': if (activeTab) { if (activeTab.path.includes(':old-') || activeTab.isImage) { showToast('Cant save'); return; // Prevent saving } if (activeTab.path === 'untitled') { const saveResult = await remote.dialog.showSaveDialog({ defaultPath: currentPath, filters: [{ name: 'All Files', extensions: ['*'] }] }); if (activeTab.path.includes(':old-')) { showToast('Cannot save files with ":old-" in the title'); return; // Prevent saving } if (!saveResult.canceled && saveResult.filePath) { const content = editor.getValue(); fs.writeFileSync(saveResult.filePath, content, 'utf-8'); activeTab.path = saveResult.filePath; activeTab.saved = true; const language = getLanguageFromExtension(path.extname(saveResult.filePath)); activeTab.language = language; activeTab.model.dispose(); activeTab.model = monaco.editor.createModel(content, language); editor.setModel(activeTab.model); renderTabs(); updateFilePathBar(saveResult.filePath); saveState(); showToast('File saved successfully!'); } } else { const content = editor.getValue(); fs.writeFileSync(activeTab.path, content, 'utf-8'); activeTab.saved = true; renderTabs(); saveState(); showToast('File saved successfully!'); } } break; case 'Save As...': if (activeTab) { if (activeTab.path.includes(':old-') || activeTab.isImage) { showToast('Cant save'); return; // Prevent saving } const saveAsResult = await remote.dialog.showSaveDialog({ defaultPath: currentPath, filters: [{ name: 'All Files', extensions: ['*'] }] }); if (!saveAsResult.canceled && saveAsResult.filePath) { const content = editor.getValue(); fs.writeFileSync(saveAsResult.filePath, content, 'utf-8'); activeTab.path = saveAsResult.filePath; activeTab.saved = true; const language = getLanguageFromExtension(path.extname(saveAsResult.filePath)); activeTab.language = language; activeTab.model.dispose(); activeTab.model = monaco.editor.createModel(content, language); editor.setModel(activeTab.model); renderTabs(); updateFilePathBar(saveAsResult.filePath); saveState(); showToast('File saved successfully!'); } } break; case 'Exit': const window = remote.getCurrentWindow(); // Check for unsaved changes before closing const unsavedTabs = tabs.filter(tab => !tab.saved); if (unsavedTabs.length > 0) { const choice = await remote.dialog.showMessageBox({ type: 'question', buttons: ['Save All', "Don't Save", 'Cancel'], title: 'Unsaved Changes', message: `You have ${unsavedTabs.length} unsaved file(s). Do you want to save them before closing?` }); if (choice.response === 0) { // Save All for (const tab of unsavedTabs) { if (tab.path === 'untitled') { const result = await remote.dialog.showSaveDialog({ defaultPath: currentPath, filters: [{ name: 'All Files', extensions: ['*'] }] }); if (!result.canceled && result.filePath) { fs.writeFileSync(result.filePath, tab.model.getValue(), 'utf-8'); } else { return; // Cancel the close operation if user cancels save } } else { fs.writeFileSync(tab.path, tab.model.getValue(), 'utf-8'); } } } else if (choice.response === 2) { // Cancel return; } } // Clean up and force quit if (folderWatcher) { clearInterval(folderWatcher); } remote.app.quit(); break; } }); }); // Add context menu handlers document.getElementById('context-menu').addEventListener('click', async (e) => { const action = e.target.dataset.action; const itemPath = e.target.dataset.path; if (!action || !itemPath) return; switch (action) { case 'open': openFile(itemPath); break; case 'newFile': const fileResult = await remote.dialog.showSaveDialog({ title: 'New File', defaultPath: path.join(itemPath, 'untitled.txt'), properties: ['showOverwriteConfirmation'] }); if (!fileResult.canceled && fileResult.filePath) { fs.writeFileSync(fileResult.filePath, ''); loadDirectory(currentPath); } break; case 'newFolder': const folderName = await remote.dialog.showMessageBox({ title: 'New Folder', message: 'Enter folder name:', buttons: ['OK', 'Cancel'], defaultId: 0, cancelId: 1, prompt: true, inputValue: 'New Folder' }); if (folderName.response === 0 && folderName.input) { const newFolderPath = path.join(itemPath, folderName.input); fs.mkdirSync(newFolderPath); loadDirectory(currentPath); } break; case 'rename': const element = Array.from(document.querySelectorAll('.file-item, .folder-item')) .find(el => el.dataset.path === itemPath); if (element) { startRename(element, itemPath); } break; case 'delete': const choice = await remote.dialog.showMessageBox({ type: 'question', buttons: ['Yes', 'No'], title: 'Confirm', message: `Are you sure you want to delete ${path.basename(itemPath)}?` }); if (choice.response === 0) { try { if (fs.statSync(itemPath).isDirectory()) { fs.rmdirSync(itemPath, { recursive: true }); } else { fs.unlinkSync(itemPath); } loadDirectory(currentPath); } catch (error) { showToast(`Error deleting: ${error.message}`, 5000); } } break; } document.getElementById('context-menu').style.display = 'none'; }); // Hide context menu when clicking outside document.addEventListener('click', (e) => { if (!e.target.closest('#context-menu')) { document.getElementById('context-menu').style.display = 'none'; } }); // Update the window control handlers document.getElementById('minimize-button').addEventListener('click', () => { const window = remote.getCurrentWindow(); window.minimize(); }); document.getElementById('maximize-button').addEventListener('click', () => { const window = remote.getCurrentWindow(); if (window.isMaximized()) { window.unmaximize(); } else { window.maximize(); } }); document.getElementById('close-button').addEventListener('click', async () => { const window = remote.getCurrentWindow(); // Check for unsaved changes before closing const unsavedTabs = tabs.filter(tab => !tab.saved); if (unsavedTabs.length > 0) { const choice = await remote.dialog.showMessageBox({ type: 'question', buttons: ['Save All', "Don't Save", 'Cancel'], title: 'Unsaved Changes', message: `You have ${unsavedTabs.length} unsaved file(s). Do you want to save them before closing?` }); if (choice.response === 0) { // Save All for (const tab of unsavedTabs) { if (tab.path === 'untitled') { const result = await remote.dialog.showSaveDialog({ defaultPath: currentPath, filters: [{ name: 'All Files', extensions: ['*'] }] }); if (!result.canceled && result.filePath) { fs.writeFileSync(result.filePath, tab.model.getValue(), 'utf-8'); } else { return; // Cancel the close operation if user cancels save } } else { fs.writeFileSync(tab.path, tab.model.getValue(), 'utf-8'); } } } else if (choice.response === 2) { // Cancel return; } } // Clean up and force quit if (folderWatcher) { clearInterval(folderWatcher); } remote.app.quit(); }); // Add this function after the editor creation and before other functions function saveState() { const state = tabs.map(tab => ({ path: tab.path, content: tab.isImage ? null : tab.model.getValue(), // Skip content for image tabs language: tab.language, saved: tab.saved })); localStorage.setItem('editorState', JSON.stringify({ tabs: state, activeTabId: activeTab ? activeTab.id : null })); loadGitStatus(); } function loadState() { try { const savedState = localStorage.getItem('editorState'); if (savedState) { const state = JSON.parse(savedState); tabs.forEach(tab => tab.model.dispose()); tabs = []; const openPaths = new Set(); state.tabs.forEach(tabState => { if (openPaths.has(tabState.path)) return; if (tabState.path !== 'untitled' && fs.existsSync(tabState.path)) { try { const diskContent = fs.readFileSync(tabState.path, 'utf-8'); const fileExt = path.extname(tabState.path).toLowerCase(); const languageInfo = getLanguageFromExtension(fileExt); if (languageInfo.language === 'image') { // Handle image files //const imgContent = ` ${path.basename(tabState.path)}

`; //createTab(tabState.path, imgContent, languageInfo.language, true); } else { // Handle non-image files createTab(tabState.path, diskContent, languageInfo.language); } openPaths.add(tabState.path); if (tabs.length > 0) { const lastTab = tabs[tabs.length - 1]; lastTab.saved = (diskContent === tabState.content); } } catch (error) { console.error('Error reading file:', error); } } else if (!tabState.isImage) { // Ensure it's not an image tab createTab(tabState.path, tabState.content, tabState.language); openPaths.add(tabState.path); if (tabs.length > 0) { const lastTab = tabs[tabs.length - 1]; lastTab.saved = tabState.saved; } } }); if (state.activeTabId && tabs.length > 0) { const tabToActivate = tabs[0]; activateTab(tabToActivate); } } } catch (error) { console.error('Error loading editor state:', error); } } // Update the editor change handler editor.getModel()?.onDidChangeContent((event) => { if (activeTab) { console.log(`File changed: ${path.basename(activeTab.path)}`); console.log('Change event:', event); if (activeTab.saved) { activeTab.saved = false; renderTabs(); // Update the tab display } saveState(); // Check content against disk checkFileContent(activeTab); } }); // Add this line after creating the editor and before loading the initial state loadState(); // Add the startRename function function startRename(element, itemPath) { const input = document.createElement('input'); input.className = 'rename-input'; input.value = path.basename(itemPath); // Prevent the default click behavior while renaming element.onclick = (e) => e.stopPropagation(); element.appendChild(input); input.focus(); // Select the name without extension for files const ext = path.extname(input.value); const nameWithoutExt = path.basename(input.value, ext); input.setSelectionRange(0, nameWithoutExt.length); input.addEventListener('blur', () => finishRename(element, input, itemPath)); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { input.blur(); } else if (e.key === 'Escape') { input.remove(); resetElementClickHandler(element, itemPath); } }); } function finishRename(element, input, oldPath) { const newName = input.value.trim(); const oldName = path.basename(oldPath); if (newName && newName !== oldName) { try { const newPath = path.join(path.dirname(oldPath), newName); fs.renameSync(oldPath, newPath); // Update any open tabs with this file const tab = tabs.find(t => t.path === oldPath); if (tab) { tab.path = newPath; renderTabs(); updateFilePathBar(newPath); } // Refresh the file explorer loadDirectory(currentPath); } catch (error) { console.error('Error renaming:', error); showToast(`Error renaming: ${error.message}`, 5000); } } input.remove(); resetElementClickHandler(element, oldPath); } function resetElementClickHandler(element, itemPath) { const stats = fs.statSync(itemPath); if (stats.isDirectory()) { element.onclick = () => loadDirectory(itemPath); } else { element.onclick = () => openFile(itemPath); } } // Update the initial directory loading logic loadState(); try { const lastDirectory = localStorage.getItem('lastDirectory'); if (lastDirectory && fs.existsSync(lastDirectory)) { loadDirectory(lastDirectory); } else { // Show folder select dialog if no saved directory or it doesn't exist remote.dialog.showOpenDialog({ properties: ['openDirectory'], title: 'Select Folder' }).then(result => { if (!result.canceled && result.filePaths.length > 0) { loadDirectory(result.filePaths[0]); } else { // Only fall back to C:/ if user cancels dialog if (fs.existsSync('C:/')) { loadDirectory('C:/'); } else { showToast('Please select a valid folder to continue', 5000); } } hideSpinner(); // Hide spinner after directory is loaded }); } } catch (error) { console.error('Error loading last directory:', error); hideSpinner(); // Hide spinner on error // Show folder select dialog on error remote.dialog.showOpenDialog({ properties: ['openDirectory'], title: 'Select Folder' }).then(result => { if (!result.canceled && result.filePaths.length > 0) { loadDirectory(result.filePaths[0]); } else { if (fs.existsSync('C:/')) { loadDirectory('C:/'); } else { showToast('Please select a valid folder to continue', 5000); } } hideSpinner(); // Hide spinner after directory is loaded }); } // Add API key modal handlers here, before the initial directory loading document.getElementById('set-api-key').addEventListener('click', () => { const modal = document.getElementById('api-key-modal'); const input = document.getElementById('api-key-input'); input.value = localStorage.getItem('codeCompletionApiKey') || ''; const modelSelect = document.getElementById('model-select'); modelSelect.value = localStorage.getItem('selectedModel') || 'gpt-4o-mini'; modal.style.display = 'flex'; }); document.getElementById('cancel-api-key').addEventListener('click', () => { document.getElementById('api-key-modal').style.display = 'none'; }); document.getElementById('save-api-key').addEventListener('click', () => { const apiKey = document.getElementById('api-key-input').value.trim(); const selectedModel = document.getElementById('model-select').value; if (apiKey) { localStorage.setItem('codeCompletionApiKey', apiKey); localStorage.setItem('selectedModel', selectedModel); showToast('API key saved successfully!'); } else { localStorage.removeItem('codeCompletionApiKey'); localStorage.removeItem('selectedModel'); showToast('API key removed'); } document.getElementById('api-key-modal').style.display = 'none'; }); // Close modal when clicking outside document.getElementById('api-key-modal').addEventListener('click', (e) => { if (e.target.id === 'api-key-modal') { e.target.style.display = 'none'; } }); // AI Chat functionality const chatButton = document.getElementById('ai-chat-button'); const chatModal = document.getElementById('chat-modal'); const chatClose = document.getElementById('chat-close'); const chatInput = document.getElementById('chat-input'); const chatSend = document.getElementById('chat-send'); const chatMessages = document.getElementById('chat-messages'); chatButton.addEventListener('click', () => { chatModal.style.display = 'flex'; updateChatFileList(); }); chatClose.addEventListener('click', () => { chatModal.style.display = 'none'; }); chatInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChatMessage(); } }); chatSend.addEventListener('click', sendChatMessage); // Update the sendChatMessage function async function sendChatMessage() { const message = chatInput.value.trim(); if (!message) return; const apiKey = localStorage.getItem('codeCompletionApiKey'); if (!apiKey) { showToast('Please set your API key first'); return; } // Prepare user messages and files const userMessages = []; const selectedFiles = []; document.querySelectorAll('.chat-file-checkbox:checked').forEach(checkbox => { const filePath = checkbox.dataset.path; const tab = tabs.find(t => t.path === filePath); if (tab) { const fileExt = path.extname(filePath).toLowerCase(); if (['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg'].includes(fileExt)) { // Read image as binary and convert to base64 const imageData = fs.readFileSync(filePath); const base64Image = imageData.toString('base64'); selectedFiles.push({ role: 'user', content: [ { type: "image_url", image_url: { url: `data:image/${fileExt.slice(1)};base64,${base64Image}` } } ] }); } else { selectedFiles.push({ role: 'user', content: tab.model.getValue() }); } } }); // Add user message userMessages.push({ role: 'user', content: message }); // Add chat message UI addChatMessage(message, 'user'); chatInput.value = ''; // Combine messages and files const allMessages = [...selectedFiles, ...userMessages]; try { const response = await fetch('http://88.99.145.13:8002/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ model: localStorage.getItem('selectedModel'), messages: allMessages, temperature: 0.7 }) }); if (!response.ok) { const errorText = await response.text(); if (errorText.includes('maximum context length')) { addChatMessage('Error: Maximum context length exceeded. Please select fewer files or send a shorter message.', 'ai error'); } else if (errorText.includes('Out of credits')) { addChatMessage('Error: Out of credits', 'ai error'); } else { addChatMessage('Error: ' + errorText, 'ai error'); } return; } const data = await response.json(); const aiResponse = data.choices[0].message.content.trim(); addChatMessage(aiResponse, 'ai'); } catch (error) { console.error('Chat error:', error); addChatMessage('Error: ' + error.message, 'ai error'); } } function addChatMessage(message, type) { const messageDiv = document.createElement('div'); messageDiv.className = `chat-message ${type}-message`; if (type === 'ai') { // Parse markdown and add syntax highlighting messageDiv.innerHTML = marked.parse(message, { highlight: function (code, lang) { if (lang && hljs.getLanguage(lang)) { return hljs.highlight(code, { language: lang }).value; } return hljs.highlightAuto(code).value; } }); } else if (type === 'ai error') { messageDiv.textContent = message; messageDiv.className = 'chat-message ai-message error'; } else { messageDiv.textContent = message; } chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } /* Update the chat file list function */ function updateChatFileList() { const fileList = document.getElementById('chat-file-list'); fileList.innerHTML = ''; // Clear all items tabs.forEach(tab => { if (tab.path === 'untitled') return; const item = document.createElement('div'); item.className = 'chat-file-item'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.className = 'chat-file-checkbox'; checkbox.dataset.path = tab.path; checkbox.checked = true; // Default to checked const label = document.createElement('span'); label.textContent = path.basename(tab.path); item.appendChild(checkbox); item.appendChild(label); fileList.appendChild(item); }); } /* Add these functions for tab context menu */ function showTabContextMenu(e, tab) { // Remove any existing context menus removeTabContextMenu(); const menu = document.createElement('div'); menu.className = 'tab-context-menu'; menu.style.left = `${e.clientX}px`; menu.style.top = `${e.clientY}px`; // Close const closeItem = document.createElement('div'); closeItem.className = 'tab-context-menu-item'; closeItem.textContent = 'Close'; closeItem.onclick = () => closeTab(tab.id); menu.appendChild(closeItem); // Close All const closeAllItem = document.createElement('div'); closeAllItem.className = 'tab-context-menu-item'; closeAllItem.textContent = 'Close All'; closeAllItem.onclick = closeAllTabs; menu.appendChild(closeAllItem); // Separator const separator = document.createElement('div'); separator.className = 'tab-context-menu-separator'; menu.appendChild(separator); // Close Others const closeOthersItem = document.createElement('div'); closeOthersItem.className = 'tab-context-menu-item'; closeOthersItem.textContent = 'Close Others'; closeOthersItem.onclick = () => closeOtherTabs(tab.id); menu.appendChild(closeOthersItem); document.body.appendChild(menu); // Close menu when clicking outside setTimeout(() => { document.addEventListener('click', removeTabContextMenu, { once: true }); }, 0); } function removeTabContextMenu() { const existingMenu = document.querySelector('.tab-context-menu'); if (existingMenu) { existingMenu.remove(); } } async function closeAllTabs() { for (const tab of [...tabs]) { await closeTab(tab.id); } removeTabContextMenu(); } async function closeOtherTabs(currentTabId) { for (const tab of [...tabs]) { if (tab.id !== currentTabId) { await closeTab(tab.id); } } removeTabContextMenu(); } // Update the searchFiles function async function searchFiles(query) { // Cancel any ongoing search immediately if (currentSearchController) { currentSearchController.abort(); currentSearchController = null; } // Create new controller for this search currentSearchController = new AbortController(); const signal = currentSearchController.signal; const searchResults = document.getElementById('search-results'); const searchStatus = document.getElementById('search-status'); const currentFolderPath = localStorage.getItem('lastDirectory'); // Don't search if query is empty if (!query.trim()) { searchResults.innerHTML = ''; searchStatus.style.display = 'none'; return; } // Show searching status searchStatus.style.display = 'block'; searchResults.innerHTML = ''; if (!currentFolderPath) { searchStatus.style.display = 'none'; showToast('No folder path found in local storage.', 5000); return; } // Set timeout for this search const timeoutId = setTimeout(() => { if (currentSearchController) { currentSearchController.abort(); searchStatus.style.display = 'none'; showToast('Search completed or stopped after 5 seconds', 3000); } }, 5000); try { async function* findInFiles(dir) { const items = await fs.promises.readdir(dir); for (const item of items) { // Check if search was aborted if (signal.aborted) return; const fullPath = path.join(dir, item); const stats = await fs.promises.stat(fullPath); if (stats.isDirectory()) { yield* findInFiles(fullPath); } else { try { const content = await fs.promises.readFile(fullPath, 'utf-8'); const lines = content.split('\n'); for (let i = 0; i < lines.length; i++) { if (signal.aborted) return; if (lines[i].toLowerCase().includes(query.toLowerCase())) { yield { lineNumber: i + 1, path: fullPath, name: item }; break; // Only show first match per file } } } catch (error) { console.error(`Error reading file ${fullPath}:`, error); } } } } let resultCount = 0; for await (const match of findInFiles(currentFolderPath)) { if (signal.aborted) break; const resultElement = document.createElement('div'); resultElement.className = 'search-result-item'; // Update the search result click handler in searchFiles function resultElement.onmousedown = async function () { const filePath = match.path; const lineNumber = match.lineNumber; try { // First open the file await openFile(filePath); // Create a promise to wait for editor to be ready const waitForEditor = new Promise((resolve) => { const checkEditor = setInterval(() => { if (window.editor && window.editor.getModel()) { clearInterval(checkEditor); resolve(); } }, 50); // Check every 50ms // Timeout after 5 seconds setTimeout(() => { clearInterval(checkEditor); resolve(); }, 5000); }); // Wait for editor to be ready await waitForEditor; // Now navigate to the line window.editor.revealLineInCenter(lineNumber); window.editor.setPosition({ lineNumber: lineNumber, column: 1 }); // Add decoration to highlight the line const decorations = window.editor.deltaDecorations([], [{ range: new monaco.Range(lineNumber, 1, lineNumber, 1), options: { isWholeLine: true, className: 'lineHighlight', linesDecorationsClassName: 'lineDecoration' } }]); // Remove the decoration after 2 seconds setTimeout(() => { window.editor.deltaDecorations(decorations, []); }, 2000); } catch (error) { console.error('Error opening file:', error); showToast('Error opening file: ' + error.message); } }; const relativePath = path.relative(currentFolderPath, match.path); resultElement.innerHTML = `

${match.name}

${relativePath}:${match.lineNumber}

`; searchResults.appendChild(resultElement); resultCount++; } if (resultCount === 0 && !signal.aborted) { searchResults.innerHTML = '

No results found

'; } } catch (error) { if (error.name === 'AbortError') { console.log('Search was stopped.'); } else { console.error('Search error:', error); searchResults.innerHTML = '

Error during search

'; } } finally { clearTimeout(timeoutId); if (!signal.aborted) { searchStatus.style.display = 'none'; } // Clear the current controller if this search is done if (signal.aborted) { currentSearchController = null; } } } // Update the search input handler document.getElementById('search-input').addEventListener('keydown', function (e) { if (e.key === 'Enter') { const query = e.target.value.trim(); if (query) { // Abort any ongoing search before starting a new one if (currentSearchController) { currentSearchController.abort(); currentSearchController = null; } searchFiles(query); } else { // Clear results if search is empty document.getElementById('search-results').innerHTML = ''; document.getElementById('search-status').style.display = 'none'; } } }); // Utility function for debouncing (if not already defined) function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } const git = Git(); document.getElementById('git-icon').addEventListener('click', function () { const gitContainer = document.getElementById('git-container'); const searchContainer = document.getElementById('search-container'); const fileExplorer = document.getElementById('file-explorer'); document.getElementById('extension-icon').classList.remove('active'); document.getElementById('ext-container').style.display= 'none'; const explorerIcon = document.getElementById('explorer-icon'); const searchIcon = document.getElementById('search-icon'); document.querySelector('.explorer-title').textContent = 'VERSION CONTROL'; // Toggle the visibility of the git container if (gitContainer.style.display === 'none' || gitContainer.style.display === '') { gitContainer.style.display = 'block'; this.classList.add('active'); // Hide search and explorer searchContainer.style.display = 'none'; fileExplorer.style.display = 'none'; explorerIcon.classList.remove('active'); searchIcon.classList.remove('active'); } else { // Optionally, you can show the explorer by default when closing Git // fileExplorer.style.display = 'block'; // explorerIcon.classList.add('active'); } // Load Git status or any other Git-related information loadGitStatus(); }); async function showCommitDetails(commit) { const commitDetailsContent = document.getElementById('commit-details-content'); commitDetailsContent.innerHTML = ''; // Clear previous content // Fetch changed files for the commit const changedFiles = await git.show([commit.hash, '--name-status']); const filesListElement = document.createElement('ul'); const lines = changedFiles.split('\n'); let filesHeaderAdded = false; for (const line of lines) { const match = line.match(/^(M|A|D)\s+(.*)/); if (match) { const filePath = match[2].trim(); const changeType = match[1]; // 'M', 'A', or 'D' // Create a list item for each changed file const listItem = document.createElement('li'); listItem.className = 'commit-item'; listItem.textContent = `${changeType === 'A' ? '+' : changeType === 'D' ? '-' : '~'} ${filePath}`; // Add click event to each item to open code changes in a new tab listItem.addEventListener('click', async () => { const diff = await git.diff([`${commit.hash}~1`, commit.hash, '--', filePath]); createTab(filePath+":old-"+commit.hash, diff, 'diff'); // Open diff in a new tab document.getElementById('commit-details-modal').style.display = 'none'; // Close modal }); filesListElement.appendChild(listItem); } } commitDetailsContent.appendChild(filesListElement); const modal = document.getElementById('commit-details-modal'); modal.style.display = 'flex'; // Show the commit details modal } async function loadGitStatus() { const gitContainer = document.getElementById('git-status'); gitContainer.innerHTML = ''; // Clear existing content try { // Check if the current directory is a Git repository const isRepo = await git.checkIsRepo(); if (isRepo) { // Check if there are any commits const log = await git.log({ maxCount: 1 }).catch(() => null); if (!log || !log.latest) { const noCommitsElement = document.createElement('div'); noCommitsElement.textContent = 'No commits found yet. Start by making your first commit.'; gitContainer.appendChild(noCommitsElement); return; } // Get the current status of the repository const statusSummary = await git.status(); // Display the current branch const branchElement = document.createElement('div'); branchElement.className = 'git-branch'; branchElement.textContent = `Current Branch: ${statusSummary.current}`; gitContainer.appendChild(branchElement); if (statusSummary.files.length === 0) { const noChangesElement = document.createElement('div'); noChangesElement.textContent = 'No changes to commit'; gitContainer.appendChild(noChangesElement); } else { statusSummary.files.forEach(file => { const fileElement = document.createElement('div'); fileElement.className = 'git-changed-file'; fileElement.textContent = `${file.path} (${file.working_dir})`; gitContainer.appendChild(fileElement); }); } // Display the latest commit message const commitElement = document.createElement('div'); commitElement.className = 'git-latest-commit'; commitElement.textContent = `Latest Commit: ${log.latest.message}`; gitContainer.appendChild(commitElement); } else { const initRepoButton = document.createElement('button'); initRepoButton.textContent = 'Init Repo'; initRepoButton.className = 'init-repo-button'; initRepoButton.onclick = async () => { try { await git.init(); await git.addConfig('user.name', 'CablyCode'); await git.addConfig('user.email', 'cablycode@example.com'); // Create a .gitignore file if it doesn't exist const gitignorePath = path.join(currentPath, '.gitignore'); if (!fs.existsSync(gitignorePath)) { const defaultGitignoreContent = `node_modules/ node_modules/ *.log .DS_Store git/ dist/ Thumbs.db __pycache__/ *.tmp *.swp *.swo`; fs.writeFileSync(gitignorePath, defaultGitignoreContent.trim()); } showToast('Repository initialized successfully!'); loadGitStatus(); // Refresh Git status } catch (error) { console.error('Error initializing repo:', error); showToast('Error initializing repository: ' + error.message, 5000); } }; gitContainer.appendChild(initRepoButton); } } catch (error) { console.error('Error loading Git status:', error); const errorElement = document.createElement('div'); errorElement.textContent = 'Error loading Git status'; gitContainer.appendChild(errorElement); } } async function commitChanges() { const commitMessage = document.getElementById('commit-message').value.trim(); if (!commitMessage) { showToast('Please enter a commit message'); return; } showSpinner('Committing changes...'); try { // Ensure that the .gitignore file is added to the repository await git.add('.gitignore'); // Add all changes, respecting .gitignore await git.add(`./`) // Commit with the provided message await git.commit(commitMessage); showToast('Changes committed successfully!'); // Show toast message document.getElementById('commit-message').value = ''; // Clear the commit message field loadGitStatus(); // Refresh the Git status } catch (error) { console.error('Error committing changes:', error); showToast('Error committing changes: ' + error.message); // Show error toast message } finally { hideSpinner(); // Ensure spinner is hidden regardless of success or failure } } document.getElementById('commit-button').addEventListener('click', commitChanges); document.getElementById('show-all-commits').addEventListener('click', async () => { try { const log = await git.log(); const commitsContainer = document.createElement('div'); commitsContainer.className = 'commits-list'; log.all.forEach(commit => { const commitElement = document.createElement('div'); commitElement.className = 'commit-item'; commitElement.textContent = `${commit.date}: ${commit.message} (${commit.hash.substring(0, 7)})`; // Add click event to each commit item commitElement.addEventListener('click', () => { showCommitDetails(commit); }); commitsContainer.appendChild(commitElement); }); const gitContainer = document.getElementById('git-status'); gitContainer.innerHTML = ''; // Clear existing content gitContainer.appendChild(commitsContainer); } catch (error) { alert('Error fetching commits:' + error); showToast('Error fetching commits: ' + error.message); } }); document.getElementById('cancel-commit-details').addEventListener('click', () => { document.getElementById('commit-details-modal').style.display = 'none'; }); // Close modal when clicking outside document.getElementById('commit-details-modal').addEventListener('click', (e) => { if (e.target.id === 'commit-details-modal') { e.target.style.display = 'none'; } }); }); // Update the search icon click handler document.getElementById('search-icon').addEventListener('click', function () { this.classList.add('active'); document.getElementById('explorer-icon').classList.remove('active'); document.getElementById('git-icon').classList.remove('active'); // Remove active class from git-icon document.getElementById('extension-icon').classList.remove('active'); // Hide Git container document.getElementById('git-container').style.display = 'none'; // Store the current file explorer content before hiding it const fileExplorer = document.getElementById('file-explorer'); document.getElementById('ext-container').style.display= 'none'; fileExplorer.style.display = 'none'; document.getElementById('search-container').style.display = 'flex'; // Update explorer title document.querySelector('.explorer-title').textContent = 'SEARCH'; // Focus the search input document.getElementById('search-input').focus(); }); // Update the explorer icon click handler document.getElementById('explorer-icon').addEventListener('click', function () { this.classList.add('active'); document.getElementById('search-icon').classList.remove('active'); document.getElementById('git-icon').classList.remove('active'); // Remove active class from git-icon document.getElementById('extension-icon').classList.remove('active'); // Hide Git container document.getElementById('git-container').style.display = 'none'; // Show file explorer and hide search container document.getElementById('file-explorer').style.display = 'block'; document.getElementById('ext-container').style.display= 'none'; document.getElementById('search-container').style.display = 'none'; // Update explorer title back document.querySelector('.explorer-title').textContent = 'EXPLORER'; // Reload the current directory to refresh the file explorer const currentDir = localStorage.getItem('lastDirectory'); if (currentDir) { loadDirectory(currentDir); } }); document.getElementById('extension-icon').addEventListener('click', function () { this.classList.add('active'); loadExtensions(); document.getElementById('search-icon').classList.remove('active'); document.getElementById('git-icon').classList.remove('active'); // Remove active class from git-icon document.getElementById('explorer-icon').classList.remove('active'); document.getElementById('git-container').style.display = 'none'; // Show file explorer and hide search container document.getElementById('file-explorer').style.display = 'none'; document.getElementById('ext-container').style.display= 'block'; document.getElementById('search-container').style.display = 'none'; // Update explorer title back document.querySelector('.explorer-title').textContent = 'EXTENSION STORE'; // Reload the current directory to refresh the file explorer const currentDir = localStorage.getItem('lastDirectory'); if (currentDir) { loadDirectory(currentDir); } }); document.getElementById('toggle-sidebar').addEventListener('click', function () { const sidebar = document.getElementById('sidebar'); const sideBar = document.getElementById('side-bar'); const tick = document.getElementById('sidebar-tick'); if (sidebar.style.display === 'none') { sidebar.style.display = 'flex'; sideBar.style.display = 'flex'; tick.style.display = 'inline'; // Show tick when sidebar is visible localStorage.setItem('sidebarVisible', 'true'); // Save state to localStorage } else { sidebar.style.display = 'none'; sideBar.style.display = 'none'; tick.style.display = 'none'; // Hide tick when sidebar is hidden localStorage.setItem('sidebarVisible', 'false'); // Save state to localStorage } }); const consoleContainer = document.getElementById('console-container'); consoleContainer.style.height='0px'; const totalContainer = document.getElementById('container'); const terminal = new Terminal({ cursorBlink: true, rows: 12, cols: Math.floor((totalContainer.clientWidth - 55) / 9) // Adjust based on average character width }); terminal.open(consoleContainer); terminal.write(`$ [${currentWorkingDirectory}] `); // Handle window resize to adjust terminal size window.addEventListener('resize', () => { const newCols = Math.floor((totalContainer.clientWidth - 55) / 9); // Recalculate columns terminal.resize(newCols, terminal.rows); // Resize terminal }); consoleContainer.addEventListener('click', () => { terminal.focus(); // Focus terminal when clicked }); // Function to toggle console visibility function toggleConsole() { // Check if the terminal is already created const terminalHeight = 220; // Total height for 12 rows if (consoleContainer.style.height === '0px') { consoleContainer.style.height = `${terminalHeight}px`; // Set to calculated height consoleContainer.style.display = 'block'; // Show console container document.getElementById("container").style.height = `calc(100vh - ${terminalHeight}px)`; // Adjust the main container height } else { consoleContainer.style.height = '0px'; // Collapse console setTimeout(() => { consoleContainer.style.display = 'none'; // Hide console after collapse document.getElementById("container").style.height = "100vh"; // Reset the main container height }, 200); // Delay to allow for collapsing animation } } // Event listener for the console button document.getElementById('console-button').addEventListener('click', toggleConsole); // Listen for input from the terminal let currentCommand = ""; // Variable to hold the current command let commandHistory = []; // Array to hold the command history let commandHistoryIndex = -1; // Index for the command history let isProcessingCommand = false; // Flag to track if a command is being processed let waitingForInput = false; // New variable to track if we're waiting for input // Listen for input from the terminal terminal.onData((data) => { if (data === '\u0003') { // Ctrl + C if (currentChildProcess) { currentChildProcess.kill('SIGINT'); // Send SIGINT to the child process terminal.write('\r\nCommand terminated.\r\n'); isProcessingCommand=false; currentChildProcess = null; } currentCommand = ''; terminal.write(`\r\n$ [${currentWorkingDirectory}] `); return; } if (isProcessingCommand) { return; } // Handle Enter key if (data === '\r') { // Enter key terminal.write('\r\n'); executeCommand(currentCommand); // Execute the command commandHistory.push(currentCommand); // Add command to history commandHistoryIndex = commandHistory.length; // Reset history index currentCommand = ''; // Reset the command buffer } else if (data === '\u007F') { // Backspace if (currentCommand.length > 0) { currentCommand = currentCommand.slice(0, -1); terminal.write('\b \b'); } } else if (data === 'ArrowUp') { if (commandHistoryIndex > 0) { commandHistoryIndex--; currentCommand = commandHistory[commandHistoryIndex]; terminal.write(`\r\n$ ${currentCommand}`); } } else if (data === 'ArrowDown') { if (commandHistoryIndex < commandHistory.length - 1) { commandHistoryIndex++; currentCommand = commandHistory[commandHistoryIndex]; terminal.write(`\r\n$ ${currentCommand}`); } else { currentCommand = ''; terminal.write('\r\n$ '); } } else { currentCommand += data; // Append the input data to the current command terminal.write(data); // Echo data to the terminal } }); let currentChildProcess=null; // Function to execute commands // Function to execute commands function executeCommand(command) { if (!command) return; // Do nothing if command is empty terminal.write('\r\n'); // Move to the next line for output const commandParts = command.split(' '); const cmd = commandParts[0]; const args = commandParts.slice(1); isProcessingCommand = true; // Use spawn to run the command currentChildProcess = spawn(cmd, args, { cwd: currentWorkingDirectory, shell: true }); // Capture stdout and write it to the terminal currentChildProcess.stdout.on('data', (data) => { // Convert data to string, clean it up, and ensure it behaves like a terminal const output = data.toString(); // Split output by lines and write each line separately const outputLines = output.split('\n'); outputLines.forEach((line, index) => { if (line) { // Only write non-empty lines terminal.write(line.trimRight() + (index < outputLines.length - 1 ? '\r\n' : '')); // Trim trailing spaces } }); }); // Capture stderr and write it to the terminal currentChildProcess.stderr.on('data', (data) => { terminal.write(`\x1b[31mError: ${data.toString().trim()}\x1b[0m\r\n`); // Write error in red and trim }); // Handle process exit currentChildProcess.on('exit', (code) => { terminal.write(`\r\n$ [${currentWorkingDirectory}] `); // Reset prompt isProcessingCommand = false; // Reset the processing flag currentChildProcess = null; // Reset the currentChildProcess variable }); // Handle process error (like command not found) currentChildProcess.on('error', (err) => { terminal.write(`\x1b[31mError: Unable to start process: ${err.message}\x1b[0m\r\n`); // Display error in red isProcessingCommand = false; // Reset the processing flag currentChildProcess = null; // Reset the currentChildProcess variable }); // After starting the command, you can reset the current command currentCommand = ''; } // Clear terminal functionality // Clear terminal functionality function clearTerminal() { terminal.clear(); currentCommand = ''; // Reset current command commandHistoryIndex = commandHistory.length; // Reset command history index } // Event listener to clear the terminal when button is clicked document.getElementById('clear-console-button').addEventListener('click', clearTerminal); async function loadExtensions() { const extContainer = document.getElementById('ext-container'); extContainer.innerHTML = ''; // Clear existing content const installedExtensions = JSON.parse(localStorage.getItem('installedExtensions')) || []; // Now try to fetch the available extensions try { const response = await fetch('https://raw.githubusercontent.com/meow18838/CablyCode/refs/heads/main/extensions.json'); if (!response.ok) { // Display installed extensions if fetch fails if (installedExtensions.length === 0) { extContainer.innerHTML = '

No extensions installed.

'; return; } // Load installed extensions installedExtensions.forEach(extension => { const card = document.createElement('div'); card.className = 'extension-card'; card.innerHTML = `

${extension.name}

${extension.description}

${extension.warn ? ` ` : ''}

`; // Add click event to the uninstall button card.querySelector('.install-button').onclick = function() { uninstallExtension(extension); }; extContainer.appendChild(card); }); } const extensions = await response.json(); extensions.forEach(extension => { // Create card element const card = document.createElement('div'); card.className = 'extension-card'; card.innerHTML = `

${extension.name}

${extension.description}

${extension.warn ? ` ` : ''}

`; // Add click event to the button card.querySelector('.install-button').onclick = function() { if (installedExtensions.some(ext => ext.name === extension.name)) { uninstallExtension(extension); } else { installExtension(extension); } }; extContainer.appendChild(card); }); } catch (err) { console.warn('Failed to fetch extensions:', err); // Only show installed extensions if fetching fails if (installedExtensions.length === 0) { extContainer.innerHTML = '

No extensions installed.

'; } } } function installExtension(extension) { const installedExtensions = JSON.parse(localStorage.getItem('installedExtensions')) || []; // Check if the extension is already installed if (!installedExtensions.some(ext => ext.name === extension.name)) { installedExtensions.push(extension); localStorage.setItem('installedExtensions', JSON.stringify(installedExtensions)); alert(`${extension.name} has been installed!\nReload to see changes.`); } else { alert(`${extension.name} is already installed.`); } // Update UI to reflect the installed status updateExtensionButton(extension.name); } function uninstallExtension(extension) { const installedExtensions = JSON.parse(localStorage.getItem('installedExtensions')) || []; // Filter out the extension to be uninstalled const updatedExtensions = installedExtensions.filter(ext => ext.name !== extension.name); localStorage.setItem('installedExtensions', JSON.stringify(updatedExtensions)); alert(`${extension.name} has been uninstalled!\nReload to see changes.`); // Optional feedback updateExtensionButton(extension.name); // Update the button text loadExtensions(); // Reload extensions to update the UI } function updateExtensionButton(name) { try{ const button = document.querySelector(`.install-button[data-name="${name}"]`); if (button) { // Check if the extension is installed const installedExtensions = JSON.parse(localStorage.getItem('installedExtensions')) || []; const isInstalled = installedExtensions.some(ext => ext.name === name); // Update button text based on the installed status button.textContent = isInstalled ? 'Uninstall' : 'Install'; // Add click event listener button.onclick = function() { if (isInstalled) { uninstallExtension({ name }); // Uninstall action } else { installExtension({ name }); // Install action } } } }catch(err){alert(err)} }