From 57e9ded00cb023d5ea846eee53711650054147cf Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Mon, 28 Aug 2023 16:03:20 -0300
Subject: [PATCH] Make it possible to scroll during streaming (#3721)

---
 css/main.css              | 13 +++++--------
 js/main.js                | 38 +++++++++++++++++++++++++-------------
 js/show_controls.js       |  2 +-
 modules/html_generator.py |  6 +++---
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/css/main.css b/css/main.css
index d23b3445..8628f6bb 100644
--- a/css/main.css
+++ b/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);
 }
 
diff --git a/js/main.js b/js/main.js
index bba3106a..81e6a991 100644
--- a/js/main.js
+++ b/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;
-    let childElement = nodes[nodes.length - 1];
-    childElement.scrollTop = childElement.scrollHeight;
+    if(!isScrolled) {
+      targetElement.scrollTop = targetElement.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
 //------------------------------------------------
diff --git a/js/show_controls.js b/js/show_controls.js
index 83bb6c02..2a86a15e 100644
--- a/js/show_controls.js
+++ b/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) {
diff --git a/modules/html_generator.py b/modules/html_generator.py
index 47ca6095..bccb2ff1 100644
--- a/modules/html_generator.py
+++ b/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]