Make it possible to scroll during streaming (#3721)

css/main.css

@@ -291,17 +291,13 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
         padding: 0px;
     }
 
-    #chat {
+    .chat-parent {
         height: calc(100dvh - 262px) !important;
     }
 
-    .bigchat #chat {
+    .bigchat {
         height: calc(100dvh - 180px) !important;
     }
-
-    .chat {
-        flex-direction: column-reverse !important;
-    }
 }
 
 .chat {
@@ -318,11 +314,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     padding-top: 6px;
 }
 
-#chat {
+.chat-parent {
     height: calc(100dvh - 272px);
+    overflow: auto !important;
 }
 
-.bigchat #chat {
+.bigchat {
     height: calc(100dvh - 200px);
 }
 

js/main.js

@@ -29,16 +29,6 @@ document.querySelector('.header_bar').addEventListener('click', function(event)
     }
 });
 
-//------------------------------------------------
-// Add some scrollbars
-//------------------------------------------------
-const textareaElements = document.querySelectorAll('.add_scrollbar textarea');
-for(i = 0; i < textareaElements.length; i++) {
-    textareaElements[i].classList.remove('scroll-hide');
-    textareaElements[i].classList.add('pretty_scrollbar');
-    textareaElements[i].style.resize = "none";
-}
-
 //------------------------------------------------
 // Keyboard shortcuts
 //------------------------------------------------
@@ -72,13 +62,25 @@ document.addEventListener("keydown", function(event) {
 // Chat scrolling
 //------------------------------------------------
 const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode;
+targetElement.classList.add('pretty_scrollbar');
+targetElement.classList.add('chat-parent');
+let isScrolled = false;
+
+targetElement.addEventListener('scroll', function() {
+  let diff = targetElement.scrollHeight - targetElement.clientHeight;
+  if(Math.abs(targetElement.scrollTop - diff) <= 1 || diff == 0) {
+    isScrolled = false;
+  } else {
+    isScrolled = true;
+  }
+});
 
 // Create a MutationObserver instance
 const observer = new MutationObserver(function(mutations) {
   mutations.forEach(function(mutation) {
-    let nodes = targetElement.childNodes[2].childNodes[0].childNodes;
+    if(!isScrolled) {
-    let childElement = nodes[nodes.length - 1];
+      targetElement.scrollTop = targetElement.scrollHeight;
-    childElement.scrollTop = childElement.scrollHeight;
+    }
   });
 });
 
@@ -94,6 +96,16 @@ const config = {
 // Start observing the target element
 observer.observe(targetElement, config);
 
+//------------------------------------------------
+// Add some scrollbars
+//------------------------------------------------
+const textareaElements = document.querySelectorAll('.add_scrollbar textarea');
+for(i = 0; i < textareaElements.length; i++) {
+    textareaElements[i].classList.remove('scroll-hide');
+    textareaElements[i].classList.add('pretty_scrollbar');
+    textareaElements[i].style.resize = "none";
+}
+
 //------------------------------------------------
 // Improve the looks of the chat input field
 //------------------------------------------------

js/show_controls.js

@@ -1,5 +1,5 @@
 const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+3), #extensions");
-const chatParent = document.getElementById("chat").parentNode;
+const chatParent = document.getElementById("chat").parentNode.parentNode.parentNode;
 
 function toggle_controls(value) {
     if (value) {

modules/html_generator.py

@@ -182,7 +182,7 @@ def get_image_cache(path):
 
 
 def generate_instruct_html(history):
-    output = f'<style>{instruct_css}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
+    output = f'<style>{instruct_css}</style><div class="chat" id="chat"><div class="messages">'
     for i, _row in enumerate(history):
         row = [convert_to_markdown(entry) for entry in _row]
 
@@ -213,7 +213,7 @@ def generate_instruct_html(history):
 
 
 def generate_cai_chat_html(history, name1, name2, style, reset_cache=False):
-    output = f'<style>{chat_styles[style]}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
+    output = f'<style>{chat_styles[style]}</style><div class="chat" id="chat"><div class="messages">'
 
     # We use ?name2 and ?time.time() to force the browser to reset caches
     img_bot = f'<img src="file/cache/pfp_character.png?{name2}">' if Path("cache/pfp_character.png").exists() else ''
@@ -260,7 +260,7 @@ def generate_cai_chat_html(history, name1, name2, style, reset_cache=False):
 
 
 def generate_chat_html(history, name1, name2, reset_cache=False):
-    output = f'<style>{chat_styles["wpp"]}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
+    output = f'<style>{chat_styles["wpp"]}</style><div class="chat" id="chat"><div class="messages">'
 
     for i, _row in enumerate(history):
         row = [convert_to_markdown(entry) for entry in _row]