From 2a6ebab6df5d2314531c30752d0c412e49cb75f5 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Tue, 18 Apr 2023 22:50:55 +0200
Subject: [PATCH 1/2] huge progress in ui

---
 app.py                   |   1 +
 static/js/audio.js       | 122 +++++++++++++++++++--------------------
 static/js/chat.js        |  14 ++---
 static/js/discussions.js |  10 ++--
 static/js/main.js        |   8 +++
 templates/index.html     |  12 ++--
 templates/main.html      |  73 +++++++++++------------
 7 files changed, 124 insertions(+), 116 deletions(-)

diff --git a/app.py b/app.py
index f98dfab4..0694d77b 100644
--- a/app.py
+++ b/app.py
@@ -215,6 +215,7 @@ class Gpt4AllWebUI(GPT4AllAPI):
                 while not self.text_queue.empty():
                     value = self.text_queue.get(False)
                     yield value#.replace("\n","<br>")
+                    time.sleep(0)
             except :
                 time.sleep(0.1)
 
diff --git a/static/js/audio.js b/static/js/audio.js
index cafe7945..bd8ddab1 100644
--- a/static/js/audio.js
+++ b/static/js/audio.js
@@ -84,7 +84,7 @@ if (!userAgent.match(/firefox|fxios/i)) {
     const audio_out_button = document.createElement("button");
     audio_out_button.title = "Listen to message";
     audio_out_button.id = "audio-out-button";
-    audio_out_button.classList.add("audio_btn",'bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+    audio_out_button.classList.add("audio_btn",'bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded-r', "w-10", "h-10");
     audio_out_button.innerHTML = "🕪";
     audio_out_button.classList.add("audio-out-button");
     container.appendChild(audio_out_button);
@@ -137,69 +137,67 @@ if (!userAgent.match(/firefox|fxios/i)) {
   }
 
   function add_audio_in_ui() {
-    const inputs = document.querySelectorAll("#user-input");
-    inputs.forEach((input) => {
-      // const wrapper = document.createElement("div");
-      // wrapper.classList.add("flex", "items-center");
-      var btn = document.querySelectorAll("#audio_in_tool");
+    const input = document.getElementById("user-input");
+    // const wrapper = document.createElement("div");
+    // wrapper.classList.add("flex", "items-center");
+    var btn = document.querySelectorAll("#audio_in_tool");
 
-      var found = false;
-      // Iterate through the children
-      for (var i = 0; i < btn.length; i++) {
-        var child = btn[i];
-        // Check if the wrapper element contains the current child element
-        if (input.parentNode.parentNode.contains(child)) {
-          found = true;
+    var found = false;
+    // Iterate through the children
+    for (var i = 0; i < btn.length; i++) {
+      var child = btn[i];
+      // Check if the wrapper element contains the current child element
+      if (input.parentNode.parentNode.contains(child)) {
+        found = true;
+      }
+    }
+
+
+    if (!found) {
+      const audio_in_button = document.createElement("button");
+      audio_in_button.title = "Type with your voice";
+      audio_in_button.id = "audio_in_tool";
+      audio_in_button.classList.add("audio_btn");
+      audio_in_button.innerHTML = "🎤";
+
+      input.parentNode.parentNode.insertBefore(
+        audio_in_button,
+        input.parentNode
+      );
+
+      input.classList.add("flex-1");
+      audio_in_button.classList.add("ml-2");
+
+      audio_in_button.addEventListener("click", () => {
+        if (isStarted) {
+          recognition.stop();
+          isStarted = false;
+        } else {
+          recognition.lang = language_select.value;
+          recognition.start();
+          isStarted = true;
         }
+      });
+
+      recognition.addEventListener("result", (event) => {
+        let transcript = "";
+        for (const result of event.results) {
+          transcript += result[0].transcript;
+        }
+        if (transcript != "") {
+          input.value = transcript;
+        }
+      });
+
+      recognition.addEventListener("start", () => {
+        audio_in_button.style.backgroundColor = "red";
+        audio_in_button.style.boxShadow = "2px 2px 0.5px #808080";
+      });
+
+      recognition.addEventListener("end", () => {
+        audio_in_button.style.backgroundColor = "";
+        audio_in_button.style.boxShadow = "";
+      });
       }
-
-
-      if (!found) {
-        const audio_in_button = document.createElement("button");
-        audio_in_button.title = "Type with your voice";
-        audio_in_button.id = "audio_in_tool";
-        audio_in_button.classList.add("audio_btn");
-        audio_in_button.innerHTML = "🎤";
-
-        input.parentNode.parentNode.insertBefore(
-          audio_in_button,
-          input.parentNode
-        );
-
-        input.classList.add("flex-1");
-        audio_in_button.classList.add("ml-2");
-
-        audio_in_button.addEventListener("click", () => {
-          if (isStarted) {
-            recognition.stop();
-            isStarted = false;
-          } else {
-            recognition.lang = language_select.value;
-            recognition.start();
-            isStarted = true;
-          }
-        });
-
-        recognition.addEventListener("result", (event) => {
-          let transcript = "";
-          for (const result of event.results) {
-            transcript += result[0].transcript;
-          }
-          if (transcript != "") {
-            input.value = transcript;
-          }
-        });
-
-        recognition.addEventListener("start", () => {
-          audio_in_button.style.backgroundColor = "red";
-          audio_in_button.style.boxShadow = "2px 2px 0.5px #808080";
-        });
-
-        recognition.addEventListener("end", () => {
-          audio_in_button.style.backgroundColor = "";
-          audio_in_button.style.boxShadow = "";
-        });
-      }
-    });
   }
 }
diff --git a/static/js/chat.js b/static/js/chat.js
index 545e5a81..26aa46bc 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -52,7 +52,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         buttonsContainer.style.width = '100%';
         buttonsContainer.style.height = '100%';
         const clipboardButton = document.createElement('button');
-        clipboardButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        clipboardButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10");
         clipboardButton.style.float = 'right'; // set the float property to right    
         clipboardButton.style.display = 'inline-block'
         clipboardButton.innerHTML = '';
@@ -65,7 +65,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
             copyToClipboard(messageTextElement.innerText)
         })
         const resendButton = document.createElement('button');
-        resendButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        resendButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10");
         resendButton.style.float = 'right'; // set the float property to right    
         resendButton.style.display = 'inline-block'
         resendButton.innerHTML = '';
@@ -177,7 +177,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         });
 
         const editButton = document.createElement('button');
-        editButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        editButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10", "rounded-l");
         editButton.style.float = 'right'; // set the float property to right    
         editButton.style.display = 'inline-block'
         editButton.innerHTML = '';
@@ -198,7 +198,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
             //buttonsContainer.style.display = "none"
 
             const saveButton = document.createElement('button');
-            saveButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'my-2', 'ml-2');
+            saveButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'my-2', 'ml-2');
             saveButton.innerHTML = 'Save';
             inputBlock.appendChild(inputField)
             inputBlock.appendChild(saveButton)
@@ -230,7 +230,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         });
 
         const deleteButton = document.createElement('button');
-        deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        deleteButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10");
         deleteButton.style.float = 'right'; // set the float property to right    
         deleteButton.style.display = 'inline-block'
         deleteButton.innerHTML = '';
@@ -252,7 +252,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
                 });
         });
         const rank_up = document.createElement('button');
-        rank_up.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        rank_up.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10");
         rank_up.title = "Upvote";
         rank_up.style.float = 'right'; // set the float property to right    
         rank_up.style.display = 'inline-block'
@@ -297,7 +297,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         });
 
         const rank_down = document.createElement('button');
-        rank_down.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        rank_down.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10");
         rank_down.title = "Downvote";
         rank_down.style.float = 'right'; // set the float property to right    
         rank_down.style.display = 'inline-block'
diff --git a/static/js/discussions.js b/static/js/discussions.js
index 39e278a3..9e891229 100644
--- a/static/js/discussions.js
+++ b/static/js/discussions.js
@@ -54,10 +54,10 @@ function populate_discussions_list()
       discussions.forEach(discussion => {
         const buttonWrapper = document.createElement('div');
         //buttonWrapper.classList.add('flex', 'space-x-2', 'mt-2');
-        buttonWrapper.classList.add('flex', 'items-center', 'mt-2', 'px-2', 'py-1', 'text-left');
+        buttonWrapper.classList.add('drop-shadow-sm', 'p-1', 'mx-2', 'my-2', 'flex', 'flex-row', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300', 'text-left');
         
         const renameButton = document.createElement('button');
-        renameButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
+        renameButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
         const renameImg = document.createElement('img');
         renameImg.src = "/static/images/edit_discussion.png";
         renameButton.title = "Rename discussion";
@@ -86,7 +86,7 @@ function populate_discussions_list()
           });
 
           const renameConfirmButton = document.createElement('button');
-          renameConfirmButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2');
+          renameConfirmButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-1', 'px-0', 'rounded', 'ml-2');
           renameConfirmButton.textContent = 'Rename';
           renameConfirmButton.addEventListener('click', () => {
             const newTitle = inputField.value;
@@ -122,7 +122,7 @@ function populate_discussions_list()
           dialog.showModal();
         });
         const deleteButton = document.createElement('button');
-        deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
+        deleteButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
         const deleteImg = document.createElement('img');
         deleteImg.src = "/static/images/delete_discussion.png";
         deleteButton.title = "Delete discussion";
@@ -156,7 +156,7 @@ function populate_discussions_list()
         });
 
         const discussionButton = document.createElement('button');
-        discussionButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
+        discussionButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
         discussionButton.textContent = discussion.title;
         discussionButton.title = "Open discussion";
         discussionButton.addEventListener('click', () => {
diff --git a/static/js/main.js b/static/js/main.js
index 2bce0560..1c4817d2 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -2,6 +2,14 @@ function update_main(){
   const chatWindow = document.getElementById('chat-window');
   const chatForm = document.getElementById('chat-form');
   const userInput = document.getElementById('user-input');
+  
+  userInput.addEventListener('keydown', function(event) {
+    if (event.shiftKey && event.key === 'Enter') {
+      event.preventDefault();
+      userInput.style.height = userInput.scrollHeight + 'px';
+      userInput.value += '\n';
+    }
+    });
 
   chatForm.addEventListener('submit', event => {
       event.preventDefault();
diff --git a/templates/index.html b/templates/index.html
index 11c47637..25967fad 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,7 +8,7 @@
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
 
 </head>
-<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900">
+<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900 h-screen overflow-hidden">
     <div class="w-full h-50 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6 py-6">
         <div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
         <h1>GPT4All - WEBUI</h1>
@@ -32,15 +32,15 @@
           </li>
         </ul>
     </div>
-    <div id="main" class="tab-pane overflow-hidden flex flex-row w-full h-full relative flex">
+    <div id="main" class="tab-pane flex flex-row flex-1">
     </div>
-    <div class="tab-pane" id="settings" style="display: none;">
+    <div class="tab-pane flex-1 overflow-auto" id="settings" style="display: none;">
     </div>
-    <div class="tab-pane" id="extensions" style="display: none;">
+    <div class="tab-pane flex-1 overflow-auto" id="extensions" style="display: none;">
     </div>
-    <div class="tab-pane" id="training" style="display: none;">
+    <div class="tab-pane flex-1 overflow-auto" id="training" style="display: none;">
     </div>
-    <div class="tab-pane" id="help" style="display: none;">
+    <div class="tab-pane flex-1 overflow-auto" id="help" style="display: none;">
 
     </div>
     <footer class="border-t border-accent flex">
diff --git a/templates/main.html b/templates/main.html
index ee9596b2..b269e91a 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,40 +1,41 @@
-<div class="dark bg-gray-900 md:flex-row flex flex-row">
-    <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">
-            </button>
-            <button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600">
-                <img src="/static/images/reset_db.png" class="w-10 h-10">
-            </button>
-            <button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600">
-                <img src="/static/images/export_database.png" class="w-10 h-10">
-            </button>
-            <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600">
-                <img src="/static/images/export_discussion.png" class="w-10 h-10">
-            </button>
-        </nav>
-        <div>
-            <h1 class="font-bold font-large">Discussions</h1>
+<div class="flex h-screen w-screen">
+    <div class="w-1/4 flex flex-col rounded bg-gray-700 text-white h-full overflow-hidden">
+      <div  id="action-buttons" class="flex-shrink-0 h-20">
+        <button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600">
+          <img src="/static/images/new_message.png" class="w-5 h-5">
+        </button>
+        <button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600">
+          <img src="/static/images/reset_db.png" class="w-5 h-5">
+        </button>
+        <button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600">
+          <img src="/static/images/export_database.png" class="w-5 h-5">
+        </button>
+        <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600">
+          <img src="/static/images/export_discussion.png" class="w-5 h-5">
+        </button>
+      </div>
+      <div class="flex-shrink-0 p-0">
+        <h1 class="font-bold font-large">Discussions</h1>
+      </div>
+      <div class="flex-1 overflow-y-auto p-0">
+        <div id="discussions-list" class="pb-96" >
         </div>
-        <nav id="discussions-list" class="flex h-full flex-1 flex-col space-y-1 p-2 overflow-y-auto">
-
-        </nav>
+      </div>
     </div>
-    <div class="flex max-w-full flex-1 flex-col">
-        <div class="text-white">
-            <h1 class="font-bold font-large">Chat box</h1>
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <div class="flex-shrink-0 p-4 bg-gray-700 text-white">
+        <h1 class="font-bold font-large">Chat box</h1>
+      </div>
+      <div class="flex-grow overflow-y-auto p-0 bg-gray-700 rounded">
+        <div id="chat-window" class="pb-96">
         </div>
-        <div id="chat-window" class="overflow-y-auto max-h-full">
-    
-        </div>
-        <div class="flex w-full mt-auto flex-row">
-            <form id="chat-form" class="flex w-full mt-auto">
-                <textarea id="user-input" placeholder="Type your message..." class="bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"></textarea>
-                <div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
-                <input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1]  transition-colors ease-in-out">
-            </form>
-        </div>    
+      </div>
     </div>
-    
-</div>
\ No newline at end of file
+  </div>
+  <div class="w-full mx-2 flex flex-row  bottom-0 fixed rounded shadow shadow-white bg-gray-300 flex-wrap">
+    <form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
+      <input type="text" id="user-input" placeholder="Type your message..." class="bg-gray-600 my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md">
+      <div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
+      <input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1]  transition-colors ease-in-out">
+    </form>
+  </div>

From 39470b1c3205c1474464739b13da92ab42211cd9 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Tue, 18 Apr 2023 23:41:51 +0200
Subject: [PATCH 2/2] started working on extensions

---
 app.py                   |  2 +-
 pyGpt4All/extension.py   |  7 +++++--
 static/js/discussions.js |  2 +-
 static/js/main.js        | 15 ++++++---------
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app.py b/app.py
index 0694d77b..c8f5e580 100644
--- a/app.py
+++ b/app.py
@@ -322,7 +322,7 @@ class Gpt4AllWebUI(GPT4AllAPI):
         app.config['executor'].submit(self.create_chatbot)
 
         # Return a success response
-        return json.dumps({"id": self.current_discussion.discussion_id, "time": timestamp, "welcome_message":self.personality["welcome_message"]})
+        return json.dumps({"id": self.current_discussion.discussion_id, "time": timestamp, "welcome_message":self.personality["welcome_message"], "sender":self.personality["name"]})
 
     def update_model_params(self):
         data = request.get_json()
diff --git a/pyGpt4All/extension.py b/pyGpt4All/extension.py
index 793b310f..4bf00c23 100644
--- a/pyGpt4All/extension.py
+++ b/pyGpt4All/extension.py
@@ -6,5 +6,8 @@
 from config import load_config, save_config
 
 class Extension():
-    def __init__(self, metadata_file_path:str) -> None:
-        self.config = load_config()
\ No newline at end of file
+    def __init__(self, metadata_file_path:str, app) -> None:
+        self.app = app
+        self.metadata_file_path = metadata_file_path
+        self.config = load_config(metadata_file_path)
+
diff --git a/static/js/discussions.js b/static/js/discussions.js
index 9e891229..54194dd4 100644
--- a/static/js/discussions.js
+++ b/static/js/discussions.js
@@ -233,7 +233,7 @@ function populate_menu(){
           // Select the new discussion
           //selectDiscussion(discussionId);
           chatWindow.innerHTML=""
-          addMessage("GPT4ALL", data.welcome_message,0);
+          addMessage(data.sender, data.welcome_message,0);
           
           populate_discussions_list()
           sendbtn.style.display="block";
diff --git a/static/js/main.js b/static/js/main.js
index 1c4817d2..7dd1c837 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -26,9 +26,6 @@ function update_main(){
       waitAnimation.style.display="block";
       console.log("Sending message to bot")
 
-      let hiddenElement = undefined
-      let messageTextElement = undefined
-
       user_msg = addMessage('',message, 0, 0, can_edit=true);
       bot_msg = addMessage('', '', 0, 0, can_edit=true);
 
@@ -81,8 +78,8 @@ function update_main(){
                     bot_msg.setSender(infos.bot);
                     bot_msg.setID(infos.response_id);
 
-                    messageTextElement  = bot_msg.messageTextElement;
-                    hiddenElement       = bot_msg.hiddenElement;
+                    bot_msg.messageTextElement;
+                    bot_msg.hiddenElement;
                     entry_counter ++;
                   }
                   else{
@@ -90,8 +87,8 @@ function update_main(){
                     prefix = "FINAL:";
                     if(text.startsWith(prefix)){
                         text = text.substring(prefix.length);
-                        hiddenElement.innerHTML         = text
-                        messageTextElement.innerHTML    = text
+                        bot_msg.hiddenElement.innerHTML         = text
+                        bot_msg.messageTextElement.innerHTML    = text
                     }
                     else{
                     // For the other enrtries, these are just the text of the chatbot
@@ -99,8 +96,8 @@ function update_main(){
                         txt = hiddenElement.innerHTML;
                         if (char != '\f') {
                             txt += char
-                            hiddenElement.innerHTML         = txt;
-                            messageTextElement.innerHTML    = txt;
+                            bot_msg.hiddenElement.innerHTML         = txt;
+                            bot_msg.messageTextElement.innerHTML    = txt;
                         }
 
                     // scroll to bottom of chat window