Autoscroll Notebook/Default textareas during streaming

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
 //------------------------------------------------

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')

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'):