enhanced and reorganized ui

app.py

@@ -182,6 +182,7 @@ class Gpt4AllWebUI:
             self.bot_says += text
             self.full_message += text
             self.text_queue.put(text)
+            
         #if self.current_message in self.full_text:
         if len(self.prompt_message) < len(self.full_text):
             self.is_bot_text_started = True

static/js/db_export.js

@@ -1,52 +1,54 @@
+function db_export(){
+    const exportButton = document.getElementById('export-button');
 
-const exportButton = document.getElementById('export-button');
-
-exportButton.addEventListener('click', () => {
-    const messages = Array.from(chatWindow.querySelectorAll('.message')).map(messageElement => {
-        const senderElement = messageElement.querySelector('.sender');
-        const messageTextElement= messageElement.querySelector('.message-text');
-        const sender = senderElement.textContent;
-        const messageText = messageTextElement.textContent;
-        return { sender, messageText };
-        });
-    const exportFormat = 'json'; // replace with desired export format
-
-    if (exportFormat === 'text') {
-        const exportText = messages.map(({ sender, messageText }) => `${sender}: ${messageText}`).join('\n');
-        downloadTextFile(exportText);
-    } else if (exportFormat === 'json') {
-        fetch('/export')
-        .then(response => response.json())
-        .then(data => {
-            db_data = JSON.stringify(data)
-          // Do something with the data, such as displaying it on the page
-          console.log(db_data);
-          downloadJsonFile(db_data);
-        })
-        .catch(error => {
-          // Handle any errors that occur
-          console.error(error);
-        });
-    } else {
-        console.error(`Unsupported export format: ${exportFormat}`);
+    exportButton.addEventListener('click', () => {
+        const messages = Array.from(chatWindow.querySelectorAll('.message')).map(messageElement => {
+            const senderElement = messageElement.querySelector('.sender');
+            const messageTextElement= messageElement.querySelector('.message-text');
+            const sender = senderElement.textContent;
+            const messageText = messageTextElement.textContent;
+            return { sender, messageText };
+            });
+        const exportFormat = 'json'; // replace with desired export format
+    
+        if (exportFormat === 'text') {
+            const exportText = messages.map(({ sender, messageText }) => `${sender}: ${messageText}`).join('\n');
+            downloadTextFile(exportText);
+        } else if (exportFormat === 'json') {
+            fetch('/export')
+            .then(response => response.json())
+            .then(data => {
+                db_data = JSON.stringify(data)
+              // Do something with the data, such as displaying it on the page
+              console.log(db_data);
+              downloadJsonFile(db_data);
+            })
+            .catch(error => {
+              // Handle any errors that occur
+              console.error(error);
+            });
+        } else {
+            console.error(`Unsupported export format: ${exportFormat}`);
+        }
+    });
+    
+    function downloadTextFile(text) {
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    downloadUrl(url);
     }
-});
-
-function downloadTextFile(text) {
-const blob = new Blob([text], { type: 'text/plain' });
-const url = URL.createObjectURL(blob);
-downloadUrl(url);
-}
-
-function downloadJsonFile(json) {
-const blob = new Blob([json], { type: 'application/json' });
-const url = URL.createObjectURL(blob);
-downloadUrl(url);
-}
-
-function downloadUrl(url) {
-const link = document.createElement('a');
-link.href = url;
-link.download = 'chat.txt';
-link.click();
+    
+    function downloadJsonFile(json) {
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    downloadUrl(url);
+    }
+    
+    function downloadUrl(url) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'chat.txt';
+    link.click();
+    }
+    
 }

static/js/discussions.js

@@ -42,8 +42,6 @@ function load_discussion(discussion=0){
   });
 }
 
-load_discussion();
-
 function populate_discussions_list()
 {
   // Populate discussions list
@@ -175,8 +173,6 @@ function populate_discussions_list()
   });
 }
 
-// First time we populate the discussions list
-populate_discussions_list()
 
 // adding export discussion button
 const exportDiscussionButton = document.querySelector('#export-discussion-button');

static/js/main.js

@@ -2,9 +2,10 @@ function update_main(){
   const chatWindow = document.getElementById('chat-window');
   const chatForm = document.getElementById('chat-form');
   const userInput = document.getElementById('user-input');
-  
+
   chatForm.addEventListener('submit', event => {
       event.preventDefault();
+      console.log("Submitting")
   
       // get user input and clear input field
       message = userInput.value;
@@ -85,21 +86,5 @@ function update_main(){
           readStream();
       });
   
-  });
-  
-  const welcome_message = `
-  Welcome! I'm here to assist you with anything you need. What can I do for you today?
-  `;
-  
-  addMessage("GPT4ALL",welcome_message,0,0,false);
-  
-}
-fetch('/main')
-.then(response => response.text())
-.then(html => {
-  document.getElementById('main').innerHTML = html;
-  update_main();
-})
-.catch(error => {
-  console.error('Error loading main page:', error);
-});
+  });  
+}

static/js/tabs.js

@@ -20,4 +20,19 @@ function showTab(tabId) {
         var tabId = this.getAttribute('href').substring(1);
         showTab(tabId);
     });
-}
+}
+
+fetch('/main')
+.then(response => response.text())
+.then(html => {
+  document.getElementById('main').innerHTML = html;
+  // First time we populate the discussions list
+  populate_discussions_list()
+  load_discussion();
+  update_main();
+  db_export();
+  
+})
+.catch(error => {
+  console.error('Error loading main page:', error);
+});

templates/chat.html

@@ -47,12 +47,12 @@
     </footer>
     <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
     <script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/discussions.js') }}"></script>
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
     <script src="{{ url_for('static', filename='js/extensions.js') }}"></script>
     <script src="{{ url_for('static', filename='js/training.js') }}"></script>
     <script src="{{ url_for('static', filename='js/help.js') }}"></script>
 
-    <script src="{{ url_for('static', filename='js/discussions.js') }}"></script>
     <script src="{{ url_for('static', filename='js/settings.js') }}"></script>
     <script src="{{ url_for('static', filename='js/db_export.js') }}"></script>
     <script src="{{ url_for('static', filename='js/tabs.js') }}"></script>

templates/main.html

@@ -1,5 +1,5 @@
 <div class="dark bg-gray-900 md:flex-row flex felx-row">
-    <div class="dark hidden bg-gray-900 md:flex md:w-[260px] flex flex-col">
+    <div class="dark hidden bg-gray-900 md:flex w-[260px] flex flex-col">
         <nav id="action-buttons" class="flex flex-row">
             <button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600">
                 <img src="/static/images/new_message.png" class="w-10 h-10">