Update script.js

script.js

@@ -8,7 +8,9 @@ let files = {
     'style.css': '/* Main styles */\nbody {\n  font-family: Arial, sans-serif;\n  background-color: #f0f0f0;\n}',
     'script.js': '// Main script\nconsole.log("Hello from JavaScript!");',
     'header.py': '# Header component\n\ndef render_header():\n    return "<header>Header Content</header>"',
-    'footer.py': '# Footer component\n\ndef render_footer():\n    return "<footer>Footer Content</footer>"'
+    'footer.py': '# Footer component\n\ndef render_footer():\n    return "<footer>Footer Content</footer>"',
+    'README.md': '# My Project\nThis is a sample project.',
+    'requirements.txt': 'flask==2.3.3\nopenai==1.10.0'
 };
 
 // DOM Elements
@@ -20,6 +22,7 @@ const hamburgerBtn = document.getElementById('hamburger-btn');
 const closeSidebarBtn = document.getElementById('close-sidebar-btn');
 const sidebar = document.getElementById('sidebar');
 const newChatBtn = document.getElementById('new-chat-btn');
+const floatingNewChatBtn = document.getElementById('floating-new-chat');
 const suggestionCards = document.querySelectorAll('.suggestion-card');
 const modeSelector = document.getElementById('mode-selector');
 const modelSelector = document.getElementById('model-selector');
@@ -35,6 +38,7 @@ const refreshPreviewBtn = document.getElementById('refresh-preview-btn');
 const openPreviewBtn = document.getElementById('open-preview-btn');
 const newFileBtn = document.getElementById('new-file-btn');
 const newFolderBtn = document.getElementById('new-folder-btn');
+const sidebarBackdrop = document.querySelector('.sidebar-backdrop');
 
 // Fungsi untuk menambahkan pesan ke UI
 function addMessageToUI(role, content) {
@@ -115,6 +119,7 @@ async function sendUserMessage() {
     addMessageToUI('user', message);
     chatHistory.push({ role: 'user', content: message });
     userInput.value = '';
+    userInput.style.height = 'auto';
 
     // Tampilkan indikator pengetikan
     const typingElement = showTypingIndicator();
@@ -163,14 +168,17 @@ function handleSidebarItemClick(itemId) {
         case 'project-planning':
             userInput.value = 'Help me plan a new project. What should be the first steps?';
             userInput.focus();
+            switchTab('chat');
             break;
         case 'code-review':
             userInput.value = 'Please review this code snippet and suggest improvements:';
             userInput.focus();
+            switchTab('chat');
             break;
         case 'web-app-builder':
             userInput.value = 'Help me build a simple web application. What technologies should I use?';
             userInput.focus();
+            switchTab('chat');
             break;
         case 'file-explorer':
             switchTab('files');
@@ -185,24 +193,29 @@ function handleSidebarItemClick(itemId) {
         case 'create-application':
             userInput.value = 'Create a new application for me. What kind of application would you like?';
             userInput.focus();
+            switchTab('chat');
             break;
         case 'auto-debug':
             userInput.value = 'I have an error in my code. Can you help me debug it? Here is the error: ';
             userInput.focus();
+            switchTab('chat');
             break;
         case 'code-suggestions':
             userInput.value = 'Can you suggest code improvements for best practices?';
             userInput.focus();
+            switchTab('chat');
             break;
         case 'performance-analysis':
             userInput.value = 'Analyze the performance of this code:';
             userInput.focus();
+            switchTab('chat');
             break;
         default:
             console.log('Unknown sidebar item:', itemId);
     }
     // Tutup sidebar setelah klik (opsional)
     sidebar.classList.remove('open');
+    sidebarBackdrop.classList.remove('active');
 }
 
 // Fungsi untuk beralih antar tab
@@ -220,22 +233,86 @@ function switchTab(tabName) {
 function updateFileTree() {
     fileTree.innerHTML = '';
     
-    for (const [filename, content] of Object.entries(files)) {
-        const fileItem = document.createElement('div');
-        fileItem.classList.add('file-item');
-        fileItem.setAttribute('data-file', filename);
-        
-        // Ikon berdasarkan ekstensi file
-        let icon = 'fa-file-code';
-        if (filename.endsWith('.css')) icon = 'fa-file-code';
-        else if (filename.endsWith('.js')) icon = 'fa-file-code';
-        else if (filename.endsWith('.html')) icon = 'fa-file-code';
-        else if (filename.endsWith('.json')) icon = 'fa-file-code';
-        
-        fileItem.innerHTML = `<i class="fas ${icon}"></i> ${filename}`;
-        fileItem.addEventListener('click', () => openFile(filename));
-        fileTree.appendChild(fileItem);
-    }
+    // Simulasi struktur file
+    const srcFolder = document.createElement('div');
+    srcFolder.classList.add('folder-item');
+    srcFolder.innerHTML = `
+        <div class="folder-header">
+            <i class="fas fa-folder folder-icon"></i>
+            <span>src</span>
+        </div>
+        <div class="folder-content">
+            <div class="file-item" data-file="main.py">
+                <i class="fas fa-file-code"></i> main.py
+            </div>
+            <div class="file-item" data-file="app.py">
+                <i class="fas fa-file-code"></i> app.py
+            </div>
+        </div>
+    `;
+    fileTree.appendChild(srcFolder);
+    
+    const staticFolder = document.createElement('div');
+    staticFolder.classList.add('folder-item');
+    staticFolder.innerHTML = `
+        <div class="folder-header">
+            <i class="fas fa-folder folder-icon"></i>
+            <span>static</span>
+        </div>
+        <div class="folder-content">
+            <div class="folder-item">
+                <div class="folder-header">
+                    <i class="fas fa-folder folder-icon"></i>
+                    <span>css</span>
+                </div>
+                <div class="folder-content">
+                    <div class="file-item" data-file="style.css">
+                        <i class="fas fa-file-code"></i> style.css
+                    </div>
+                </div>
+            </div>
+            <div class="folder-item">
+                <div class="folder-header">
+                    <i class="fas fa-folder folder-icon"></i>
+                    <span>js</span>
+                </div>
+                <div class="folder-content">
+                    <div class="file-item" data-file="script.js">
+                        <i class="fas fa-file-code"></i> script.js
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    fileTree.appendChild(staticFolder);
+    
+    const readmeFile = document.createElement('div');
+    readmeFile.classList.add('file-item');
+    readmeFile.setAttribute('data-file', 'README.md');
+    readmeFile.innerHTML = `<i class="fas fa-file-alt"></i> README.md`;
+    fileTree.appendChild(readmeFile);
+    
+    const reqFile = document.createElement('div');
+    reqFile.classList.add('file-item');
+    reqFile.setAttribute('data-file', 'requirements.txt');
+    reqFile.innerHTML = `<i class="fas fa-file-alt"></i> requirements.txt`;
+    fileTree.appendChild(reqFile);
+    
+    // Tambahkan event listener ke file
+    document.querySelectorAll('.file-item').forEach(item => {
+        item.addEventListener('click', () => {
+            const filename = item.getAttribute('data-file');
+            openFile(filename);
+        });
+    });
+    
+    // Tambahkan event listener ke folder
+    document.querySelectorAll('.folder-header').forEach(header => {
+        header.addEventListener('click', () => {
+            const folderItem = header.parentElement;
+            folderItem.classList.toggle('expanded');
+        });
+    });
 }
 
 // Fungsi untuk membuka file
@@ -261,15 +338,20 @@ function addTerminalOutput(output, isError = false) {
 
 // Fungsi untuk menjalankan perintah terminal
 function runTerminalCommand(command) {
-    addTerminalOutput(`$ ${command}`);
+    addTerminalOutput(`[user@ai-assistant ~]$ ${command}`);
     
     if (command === 'help') {
-        addTerminalOutput('Available commands: help, ls, clear, run [file]');
+        addTerminalOutput('Available commands: help, ls, clear, run [file], pwd, cd');
     } else if (command === 'ls') {
         addTerminalOutput('Files in directory:');
         for (const filename of Object.keys(files)) {
             addTerminalOutput(`  ${filename}`);
         }
+    } else if (command === 'pwd') {
+        addTerminalOutput('/home/user/project');
+    } else if (command.startsWith('cd ')) {
+        const dir = command.split(' ')[1];
+        addTerminalOutput(`Changed directory to ${dir}`);
     } else if (command.startsWith('run ')) {
         const filename = command.split(' ')[1];
         if (filename && files[filename]) {
@@ -290,6 +372,11 @@ function runTerminalCommand(command) {
 // Event Listeners
 sendButton.addEventListener('click', sendUserMessage);
 
+userInput.addEventListener('input', function() {
+    this.style.height = 'auto';
+    this.style.height = (this.scrollHeight) + 'px';
+});
+
 userInput.addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
@@ -299,13 +386,21 @@ userInput.addEventListener('keydown', (e) => {
 
 hamburgerBtn.addEventListener('click', () => {
     sidebar.classList.add('open');
+    sidebarBackdrop.classList.add('active');
 });
 
 closeSidebarBtn.addEventListener('click', () => {
     sidebar.classList.remove('open');
+    sidebarBackdrop.classList.remove('active');
+});
+
+sidebarBackdrop.addEventListener('click', () => {
+    sidebar.classList.remove('open');
+    sidebarBackdrop.classList.remove('active');
 });
 
 newChatBtn.addEventListener('click', startNewChat);
+floatingNewChatBtn.addEventListener('click', startNewChat);
 
 // Tambahkan event listener ke kartu saran
 suggestionCards.forEach(card => {
@@ -313,6 +408,7 @@ suggestionCards.forEach(card => {
         const prompt = card.getAttribute('data-prompt');
         userInput.value = prompt;
         userInput.focus();
+        switchTab('chat');
     });
 });
 
@@ -335,7 +431,7 @@ tabs.forEach(tab => {
 
 // Event listener untuk file tree
 newFileBtn.addEventListener('click', () => {
-    const filename = prompt('Enter new file name:');
+    const filename = prompt('Enter new file name (e.g., myfile.py):');
     if (filename) {
         files[filename] = '';
         updateFileTree();
@@ -368,8 +464,8 @@ runCodeBtn.addEventListener('click', () => {
 
 clearTerminalBtn.addEventListener('click', () => {
     terminalOutput.innerHTML = '';
-    addTerminalOutput('$ Welcome to VicoXDarkGPT Terminal');
-    addTerminalOutput('$ Type \'help\' for available commands');
+    addTerminalOutput('[user@ai-assistant ~]$ Welcome to VicoXDarkGPT Terminal');
+    addTerminalOutput('[user@ai-assistant ~]$ Type \'help\' for available commands');
 });
 
 // Event listener untuk preview