Spaces:

Athspi
/

Aigg

Sleeping

App Files Files Community

Athspi commited on 21 days ago

Commit

82129f8

verified ·

1 Parent(s): a3f61dd

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +63 -14

templates/index.html CHANGED Viewed

@@ -75,13 +75,16 @@
         #download-btn { width: 100%; background-color: var(--primary-color); color: var(--background-primary); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; font-weight: 600; border-radius: 8px; padding: 12px; }
         #download-btn:hover { background-color: var(--accent-color); color: var(--background-primary); }
         #download-btn i { font-size: 1.1rem; }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="sidebar left-sidebar">
             <div class="sidebar-header"><i class="fa-solid fa-folder-tree"></i><h2>Project Files</h2></div>
-            <div id="file-tree" class="sidebar-content"></div>
             <div class="sidebar-footer"><button id="download-btn"><i class="fa-solid fa-download"></i><span>Download Project</span></button></div>
         </div>
         <div class="main-content">
@@ -139,6 +142,9 @@
             const fetchApi = async (url, options) => {
                 try {
                     const response = await fetch(url, options);
                     const data = await response.json();
                     if (data.error) {
                         handleApiError(data.error);
@@ -147,6 +153,7 @@
                     return data;
                 } catch (error) {
                     handleApiError('Failed to connect to the backend. Please ensure it is running.');
                     return null;
                 }
             };
@@ -154,17 +161,23 @@
             const uploadProject = async (formData) => {
                 ui.uploadBox.style.display = 'none';
                 ui.progressIndicator.style.display = 'block';
-                const data = await fetchApi('/upload', { method: 'POST', body: formData });
                 ui.progressIndicator.style.display = 'none';
                 if (data) {
                     ui.uploadSection.style.display = 'none';
                     ui.chatSection.style.display = 'flex';
                     updateFileTree(data.file_tree);
                     ui.chatWindow.innerHTML = '';
-                    data.chat_history.forEach(msg => {
-                        let content = (msg.role === 'user' && msg.content.startsWith('The user has uploaded')) ? 'Project context sent to AI.' : msg.content;
-                        appendMessage(msg.role === 'model' ? 'assistant' : msg.role, content);
-                    });
                 } else {
                     ui.uploadBox.style.display = 'block';
                 }
@@ -173,14 +186,17 @@
             const sendMessage = async () => {
                 const message = ui.messageInput.value.trim();
                 if (!message) return;
                 appendMessage('user', message);
                 ui.messageInput.value = '';
                 ui.messageInput.style.height = 'auto';
                 const data = await fetchApi('/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ message })
                 });
                 if (data && data.reply) {
                     appendMessage('assistant', data.reply);
                     updateFileTree();
@@ -197,9 +213,13 @@
                 html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
                 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 ${lang}">${highlighted}</code></pre>`;
                 });
                 messageElement.innerHTML = html.replace(/\n/g, '<br>');
                 ui.chatWindow.appendChild(messageElement);
                 ui.chatWindow.scrollTop = ui.chatWindow.scrollHeight;
@@ -207,9 +227,11 @@
             const updateFileTree = async () => {
                 const data = await fetchApi('/file_tree');
-                if (data && data.file_tree) {
                     const activeFilePath = document.querySelector('#file-tree .active')?.dataset.path;
-                    ui.fileTree.innerHTML = '';
                     data.file_tree.forEach(path => {
                         const fileElement = document.createElement('div');
                         fileElement.textContent = path;
@@ -222,6 +244,11 @@
                         if (path === activeFilePath) fileElement.classList.add('active');
                         ui.fileTree.appendChild(fileElement);
                     });
                 }
             };
@@ -231,21 +258,43 @@
                     ui.fileContentDisplay.textContent = data.content;
                     hljs.highlightElement(ui.fileContentDisplay);
                 } else {
-                    ui.fileContentDisplay.textContent = 'Could not load file content.';
                 }
             };
             ui.projectZipInput.addEventListener('change', () => {
                 if (ui.projectZipInput.files.length > 0) {
                     ui.fileNameDisplay.textContent = `Selected: ${ui.projectZipInput.files[0].name}`;
                     ui.uploadButton.click();
                 }
             });
-            ui.uploadForm.addEventListener('submit', (e) => { e.preventDefault(); uploadProject(new FormData(ui.uploadForm)); });
             ui.sendBtn.addEventListener('click', sendMessage);
-            ui.messageInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
-            ui.downloadBtn.addEventListener('click', () => { window.location.href = '/download'; });
-            ui.messageInput.addEventListener('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; });
         });
     </script>
 </body>

         #download-btn { width: 100%; background-color: var(--primary-color); color: var(--background-primary); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; font-weight: 600; border-radius: 8px; padding: 12px; }
         #download-btn:hover { background-color: var(--accent-color); color: var(--background-primary); }
         #download-btn i { font-size: 1.1rem; }
+        .empty-state { color: var(--text-secondary); padding: 20px; text-align: center; }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="sidebar left-sidebar">
             <div class="sidebar-header"><i class="fa-solid fa-folder-tree"></i><h2>Project Files</h2></div>
+            <div id="file-tree" class="sidebar-content">
+                <div class="empty-state">No project files. Upload a project first.</div>
+            </div>
             <div class="sidebar-footer"><button id="download-btn"><i class="fa-solid fa-download"></i><span>Download Project</span></button></div>
         </div>
         <div class="main-content">
             const fetchApi = async (url, options) => {
                 try {
                     const response = await fetch(url, options);
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
                     const data = await response.json();
                     if (data.error) {
                         handleApiError(data.error);
                     return data;
                 } catch (error) {
                     handleApiError('Failed to connect to the backend. Please ensure it is running.');
+                    console.error('API Error:', error);
                     return null;
                 }
             };
             const uploadProject = async (formData) => {
                 ui.uploadBox.style.display = 'none';
                 ui.progressIndicator.style.display = 'block';
+                const data = await fetchApi('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
                 ui.progressIndicator.style.display = 'none';
                 if (data) {
                     ui.uploadSection.style.display = 'none';
                     ui.chatSection.style.display = 'flex';
                     updateFileTree(data.file_tree);
                     ui.chatWindow.innerHTML = '';
+                    if (data.chat_history && data.chat_history.length > 0) {
+                        data.chat_history.forEach(msg => {
+                            appendMessage(msg.role === 'user' ? 'user' : 'assistant', msg.content);
+                        });
+                    }
                 } else {
                     ui.uploadBox.style.display = 'block';
                 }
             const sendMessage = async () => {
                 const message = ui.messageInput.value.trim();
                 if (!message) return;
                 appendMessage('user', message);
                 ui.messageInput.value = '';
                 ui.messageInput.style.height = 'auto';
                 const data = await fetchApi('/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ message })
                 });
                 if (data && data.reply) {
                     appendMessage('assistant', data.reply);
                     updateFileTree();
                 html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
                 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 ${lang}">${highlighted}</code></pre>`;
                 });
                 messageElement.innerHTML = html.replace(/\n/g, '<br>');
                 ui.chatWindow.appendChild(messageElement);
                 ui.chatWindow.scrollTop = ui.chatWindow.scrollHeight;
             const updateFileTree = async () => {
                 const data = await fetchApi('/file_tree');
+                ui.fileTree.innerHTML = '';
+                if (data && data.file_tree && data.file_tree.length > 0) {
                     const activeFilePath = document.querySelector('#file-tree .active')?.dataset.path;
                     data.file_tree.forEach(path => {
                         const fileElement = document.createElement('div');
                         fileElement.textContent = path;
                         if (path === activeFilePath) fileElement.classList.add('active');
                         ui.fileTree.appendChild(fileElement);
                     });
+                } else {
+                    const emptyMessage = document.createElement('div');
+                    emptyMessage.textContent = 'No project files. Upload a project first.';
+                    emptyMessage.classList.add('empty-state');
+                    ui.fileTree.appendChild(emptyMessage);
                 }
             };
                     ui.fileContentDisplay.textContent = data.content;
                     hljs.highlightElement(ui.fileContentDisplay);
                 } else {
+                    ui.fileContentDisplay.textContent = data?.error || 'Could not load file content.';
                 }
             };
+            // Event listeners
             ui.projectZipInput.addEventListener('change', () => {
                 if (ui.projectZipInput.files.length > 0) {
                     ui.fileNameDisplay.textContent = `Selected: ${ui.projectZipInput.files[0].name}`;
                     ui.uploadButton.click();
                 }
             });
+            ui.uploadForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                uploadProject(new FormData(ui.uploadForm));
+            });
             ui.sendBtn.addEventListener('click', sendMessage);
+            ui.messageInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            ui.downloadBtn.addEventListener('click', () => {
+                window.location.href = '/download';
+            });
+            ui.messageInput.addEventListener('input', function() {
+                this.style.height = 'auto';
+                this.style.height = (this.scrollHeight) + 'px';
+            });
+            // Initialize the application
+            updateFileTree();
         });
     </script>
 </body>