Update templates/index.html

templates/index.html

@@ -78,8 +78,8 @@
             height: 100vh;
             transition: width 0.3s ease;
         }
-        .left-sidebar { width: 20%; }
-        .right-sidebar { width: 25%; border-right: none; border-left: 1px solid var(--border-color); }
+        .left-sidebar { width: 20%; min-width: 250px; }
+        .right-sidebar { width: 25%; min-width: 300px; border-right: none; border-left: 1px solid var(--border-color); }
 
         .sidebar-header {
             display: flex;
@@ -88,6 +88,7 @@
             padding-bottom: 15px;
             border-bottom: 1px solid var(--border-color);
             margin-bottom: 15px;
+            flex-shrink: 0;
         }
         .sidebar-header i {
             color: var(--primary-color);
@@ -103,6 +104,12 @@
             overflow-y: auto;
         }
 
+        .sidebar-footer {
+            flex-shrink: 0;
+            padding-top: 15px;
+            border-top: 1px solid var(--border-color);
+        }
+
         /* --- File Tree Styling --- */
         #file-tree div {
             padding: 8px 12px;
@@ -128,7 +135,7 @@
 
         /* --- File Content Viewer --- */
         #file-content-display {
-            background-color: var(--background-tertiary);
+            background-color: #161625;
             border-radius: 8px;
             height: 100%;
             padding: 15px;
@@ -163,6 +170,8 @@
             padding: 40px;
             border-radius: 12px;
             border: 1px dashed var(--border-color);
+            width: 90%;
+            max-width: 500px;
         }
         .upload-icon {
             font-size: 3rem;
@@ -175,7 +184,6 @@
         }
         .upload-box p {
             color: var(--text-secondary);
-            max-width: 400px;
             margin-bottom: 30px;
         }
         .upload-label {
@@ -245,12 +253,14 @@
             color: var(--background-primary);
             border-bottom-right-radius: 4px;
             align-self: flex-end;
+            word-wrap: break-word;
         }
         .ai-message {
             background-color: var(--background-secondary);
             color: var(--text-primary);
             border-bottom-left-radius: 4px;
             align-self: flex-start;
+            word-wrap: break-word;
         }
         .ai-message pre {
             background-color: var(--background-primary);
@@ -259,8 +269,8 @@
             padding: 15px;
             margin-top: 10px;
             font-size: 0.85rem;
-            white-space: pre-wrap;
-            word-wrap: break-word;
+            white-space: pre-wrap;       /* Since CSS 2.1 */
+            word-wrap: break-word;       /* Internet Explorer 5.5+ */
         }
         .ai-message code {
             font-family: 'Fira Code', 'Courier New', monospace;
@@ -271,6 +281,7 @@
             align-items: center;
             padding: 15px 20px;
             border-top: 1px solid var(--border-color);
+            flex-shrink: 0;
         }
 
         #message-input {
@@ -285,6 +296,8 @@
             font-size: 1rem;
             line-height: 1.5;
             transition: border-color 0.2s ease;
+            max-height: 200px;
+            overflow-y: auto;
         }
         #message-input:focus {
             outline: none;
@@ -331,7 +344,7 @@
     <div class="container">
         <div class="sidebar left-sidebar">
             <div class="sidebar-header">
-                <i class="fa-solid fa-code"></i>
+                <i class="fa-solid fa-folder-tree"></i>
                 <h2>Project Files</h2>
             </div>
             <div id="file-tree" class="sidebar-content"></div>
@@ -369,7 +382,7 @@
                 <div id="chat-window">
                     </div>
                 <div class="chat-input-area">
-                    <textarea id="message-input" placeholder="Ask the AI to refactor, explain, or improve your code..."></textarea>
+                    <textarea id="message-input" placeholder="Ask the AI to refactor, explain, or improve your code..." rows="1"></textarea>
                     <button id="send-btn"><i class="fa-solid fa-paper-plane"></i></button>
                 </div>
             </div>
@@ -381,7 +394,7 @@
                 <h2>File Content</h2>
             </div>
             <div class="sidebar-content">
-                 <pre id="file-content-display"><code class="python">Select a file from the left to view its content.</code></pre>
+                 <pre id="file-content-display"><code class="plaintext">Select a file from the left to view its content.</code></pre>
             </div>
         </div>
     </div>
@@ -422,29 +435,39 @@
                 document.querySelector('.upload-box').style.display = 'none';
                 progressIndicator.style.display = 'block';
 
-                const response = await fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                const data = await response.json();
-                progressIndicator.style.display = 'none';
+                try {
+                    const response = await fetch('/upload', {
+                        method: 'POST',
+                        body: formData
+                    });
 
-                if (data.error) {
-                    alert(data.error);
+                    const data = await response.json();
+                    progressIndicator.style.display = 'none';
+
+                    if (data.error) {
+                        alert(data.error);
+                        document.querySelector('.upload-box').style.display = 'block';
+                        return;
+                    }
+
+                    uploadSection.style.display = 'none';
+                    chatSection.style.display = 'flex';
+                    updateFileTree(data.file_tree);
+                    chatWindow.innerHTML = '';
+                    data.chat_history.forEach(msg => {
+                        const role = msg.role === 'model' ? 'assistant' : msg.role;
+                        let content = msg.content;
+                        // For the very first message, don't show the full file context
+                        if (role === 'user' && content.startsWith('The user has uploaded a new project')) {
+                           content = 'Project context sent to AI.'
+                        }
+                        appendMessage(role, content);
+                    });
+                } catch (error) {
+                    progressIndicator.style.display = 'none';
+                    alert('An error occurred during upload. Please check the console and ensure the backend is running.');
                     document.querySelector('.upload-box').style.display = 'block';
-                    return;
                 }
-
-                uploadSection.style.display = 'none';
-                chatSection.style.display = 'flex';
-                updateFileTree(data.file_tree);
-                chatWindow.innerHTML = '';
-                data.chat_history.forEach(msg => {
-                    // Convert Gemini's 'model' role to 'assistant' for frontend consistency
-                    const role = msg.role === 'model' ? 'assistant' : msg.role;
-                    appendMessage(role, msg.content);
-                });
             });
 
             sendBtn.addEventListener('click', sendMessage);
@@ -468,92 +491,91 @@
                 messageInput.value = '';
                 messageInput.style.height = 'auto'; // Reset height
 
-                // Show a typing indicator for the AI
-                appendMessage('assistant', '<div class="typing-indicator"><span></span><span></span><span></span></div>', true);
-
-                const response = await fetch('/chat', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ message: message })
-                });
-
-                // Remove typing indicator
-                const typingIndicator = document.querySelector('.ai-message:last-child');
-                if (typingIndicator && typingIndicator.innerHTML.includes('typing-indicator')) {
-                    typingIndicator.remove();
-                }
+                try {
+                    const response = await fetch('/chat', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ message: message })
+                    });
+                    
+                    const data = await response.json();
 
-                const data = await response.json();
-                if(data.error) {
-                     appendMessage('assistant', `**Error:** ${data.error}`);
-                } else {
-                     appendMessage('assistant', data.reply);
-                }
+                    if(data.error) {
+                         appendMessage('assistant', `**Error:** ${data.error}`);
+                    } else {
+                         appendMessage('assistant', data.reply);
+                    }
                 
-                updateFileTree(); // Refresh file tree in case files were created/deleted
+                    updateFileTree(); // Refresh file tree in case files were created/deleted
+                } catch (error) {
+                     appendMessage('assistant', `**Error:** Could not connect to the backend. Please ensure it is running correctly.`);
+                }
             }
 
-            function appendMessage(sender, text, isRawHtml = false) {
+            function appendMessage(sender, text) {
                 const messageElement = document.createElement('div');
                 messageElement.classList.add('message', sender === 'user' ? 'user-message' : 'ai-message');
                 
-                if (isRawHtml) {
-                    messageElement.innerHTML = text;
-                } else {
-                    // Basic Markdown to HTML conversion
-                    let html = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // Bold
-                    html = html.replace(/\`(.*?)\`/g, '<code>$1</code>'); // Inline code
-                    
-                    // Convert Markdown code blocks to highlighted HTML
-                    html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
-                        const highlighted = hljs.highlight(code.trim(), { language: lang || 'plaintext', ignoreIllegals: true }).value;
-                        return `<pre><code class="hljs ${lang}">${highlighted}</code></pre>`;
-                    });
-                    
-                    messageElement.innerHTML = html.replace(/\n/g, '<br>');
-                }
+                // Basic Markdown to HTML conversion
+                let html = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // Bold
+                html = html.replace(/\`(.*?)\`/g, '<code>$1</code>'); // Inline code
+                
+                // Convert Markdown code blocks to highlighted HTML
+                html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+                    const trimmedCode = code.trim();
+                    const highlighted = hljs.highlight(trimmedCode, { language: lang || 'plaintext', ignoreIllegals: true }).value;
+                    return `<pre><code class="hljs <span class="math-inline">\{lang\}"\></span>{highlighted}</code></pre>`;
+                });
+                
+                messageElement.innerHTML = html.replace(/\n/g, '<br>');
                 
                 chatWindow.appendChild(messageElement);
                 chatWindow.scrollTop = chatWindow.scrollHeight;
             }
 
             async function updateFileTree() {
-                const response = await fetch('/file_tree');
-                const data = await response.json();
-                if (data.file_tree) {
-                    const currentlyActive = document.querySelector('#file-tree .active');
-                    const activeFilePath = currentlyActive ? currentlyActive.dataset.path : null;
-                    
-                    fileTree.innerHTML = '';
-                    data.file_tree.forEach(path => {
-                        const fileElement = document.createElement('div');
-                        fileElement.textContent = path;
-                        fileElement.dataset.path = path;
-                        fileElement.addEventListener('click', () => {
-                            // Remove active class from any previously active file
-                            document.querySelectorAll('#file-tree div').forEach(el => el.classList.remove('active'));
-                            // Add active class to the clicked one
-                            fileElement.classList.add('active');
-                            fetchFileContent(path);
+                try {
+                    const response = await fetch('/file_tree');
+                    const data = await response.json();
+                    if (data.file_tree) {
+                        const currentlyActive = document.querySelector('#file-tree .active');
+                        const activeFilePath = currentlyActive ? currentlyActive.dataset.path : null;
+                        
+                        fileTree.innerHTML = '';
+                        data.file_tree.forEach(path => {
+                            const fileElement = document.createElement('div');
+                            fileElement.textContent = path;
+                            fileElement.dataset.path = path;
+                            fileElement.addEventListener('click', () => {
+                                document.querySelectorAll('#file-tree div').forEach(el => el.classList.remove('active'));
+                                fileElement.classList.add('active');
+                                fetchFileContent(path);
+                            });
+
+                            if(path === activeFilePath) {
+                                fileElement.classList.add('active');
+                            }
+
+                            fileTree.appendChild(fileElement);
                         });
-
-                        if(path === activeFilePath) {
-                            fileElement.classList.add('active');
-                        }
-
-                        fileTree.appendChild(fileElement);
-                    });
+                    }
+                } catch(error) {
+                    console.error("Could not update file tree:", error);
                 }
             }
 
             async function fetchFileContent(path) {
-                const response = await fetch(`/file_content?path=${encodeURIComponent(path)}`);
-                const data = await response.json();
-                if (data.content) {
-                    fileContentDisplay.textContent = data.content;
-                    hljs.highlightElement(fileContentDisplay);
-                } else {
-                    fileContentDisplay.textContent = 'Could not load file content.';
+                try {
+                    const response = await fetch(`/file_content?path=${encodeURIComponent(path)}`);
+                    const data = await response.json();
+                    if (data.content) {
+                        fileContentDisplay.textContent = data.content;
+                        hljs.highlightElement(fileContentDisplay);
+                    } else {
+                        fileContentDisplay.textContent = 'Could not load file content.';
+                    }
+                } catch (error) {
+                    fileContentDisplay.textContent = 'Error loading file content.';
                 }
             }