From c75f98a6d657883b84ffb0a56fd366cee96b07f7 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Mon, 28 Aug 2023 18:22:03 -0700
Subject: [PATCH] Autoscroll Notebook/Default textareas during streaming

---
 js/main.js             | 52 ++++++++++++++++++++++++++++++++++++++++++
 modules/ui_default.py  |  4 ++--
 modules/ui_notebook.py |  2 +-
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/js/main.js b/js/main.js
index 6267871c..5bb41808 100644
--- a/js/main.js
+++ b/js/main.js
@@ -112,6 +112,58 @@ const config = {
 // Start observing the target element
 observer.observe(targetElement, config);
 
+//------------------------------------------------
+// Notebook box scrolling
+//------------------------------------------------
+
+const notebookElement = document.querySelector('#textbox-notebook textarea');
+let notebookScrolled = false;
+
+notebookElement.addEventListener('scroll', function() {
+  let diff = notebookElement.scrollHeight - notebookElement.clientHeight;
+  if(Math.abs(notebookElement.scrollTop - diff) <= 1 || diff == 0) {
+    notebookScrolled = false;
+  } else {
+    notebookScrolled = true;
+  }
+});
+
+const notebookObserver = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    if(!notebookScrolled) {
+      notebookElement.scrollTop = notebookElement.scrollHeight;
+    }
+  });
+});
+
+notebookObserver.observe(notebookElement.parentNode.parentNode.parentNode, config);
+
+//------------------------------------------------
+// Default box scrolling
+//------------------------------------------------
+
+const defaultElement = document.querySelector('#textbox-default textarea');
+let defaultScrolled = false;
+
+defaultElement.addEventListener('scroll', function() {
+  let diff = defaultElement.scrollHeight - defaultElement.clientHeight;
+  if(Math.abs(defaultElement.scrollTop - diff) <= 1 || diff == 0) {
+    defaultScrolled = false;
+  } else {
+    defaultScrolled = true;
+  }
+});
+
+const defaultObserver = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    if(!defaultScrolled) {
+      defaultElement.scrollTop = defaultElement.scrollHeight;
+    }
+  });
+});
+
+defaultObserver.observe(defaultElement.parentNode.parentNode.parentNode, config);
+
 //------------------------------------------------
 // Add some scrollbars
 //------------------------------------------------
diff --git a/modules/ui_default.py b/modules/ui_default.py
index 29b9bee5..54d1a220 100644
--- a/modules/ui_default.py
+++ b/modules/ui_default.py
@@ -18,7 +18,7 @@ def create_ui():
         with gr.Row():
             with gr.Column():
                 with gr.Row():
-                    shared.gradio['textbox-default'] = gr.Textbox(value='', elem_classes=['textbox_default', 'add_scrollbar'], lines=27, label='Input')
+                    shared.gradio['textbox-default'] = gr.Textbox(value='', lines=27, label='Input', elem_classes=['textbox_default', 'add_scrollbar'])
                     shared.gradio['token-counter-default'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter", "default-token-counter"])
 
                 with gr.Row():
@@ -34,7 +34,7 @@ def create_ui():
 
             with gr.Column():
                 with gr.Tab('Raw'):
-                    shared.gradio['output_textbox'] = gr.Textbox(lines=27, label='Output', elem_classes=['textbox_default_output', 'add_scrollbar'])
+                    shared.gradio['output_textbox'] = gr.Textbox(lines=27, label='Output', elem_id='textbox-default', elem_classes=['textbox_default_output', 'add_scrollbar'])
 
                 with gr.Tab('Markdown'):
                     shared.gradio['markdown_render-default'] = gr.Button('Render')
diff --git a/modules/ui_notebook.py b/modules/ui_notebook.py
index e2aeb860..ba2775d5 100644
--- a/modules/ui_notebook.py
+++ b/modules/ui_notebook.py
@@ -19,7 +19,7 @@ def create_ui():
             with gr.Column(scale=4):
                 with gr.Tab('Raw'):
                     with gr.Row():
-                        shared.gradio['textbox-notebook'] = gr.Textbox(value='', elem_classes=['textbox', 'add_scrollbar'], lines=27)
+                        shared.gradio['textbox-notebook'] = gr.Textbox(value='', lines=27, elem_id='textbox-notebook', elem_classes=['textbox', 'add_scrollbar'])
                         shared.gradio['token-counter-notebook'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter"])
 
                 with gr.Tab('Markdown'):