Update pages/type_text.py

pages/type_text.py

@@ -28,32 +28,58 @@ def scrollToBottom():
     # JavaScript to scroll to bottom
     JS_code = """
     <script>
-      function scrollToBottom() {
-        window.scrollTo({
-          top: document.body.scrollHeight,
-          behavior: 'smooth'
-        });
-      }
-
-      const observer = new MutationObserver(function(mutations) {
-        requestAnimationFrame(scrollToBottom);
-      });
-
-      const config = { childList: true, subtree: true };
-      observer.observe(document.body, config);
-
-      window.addEventListener('load', function() {
-          requestAnimationFrame(scrollToBottom);
-      });
+  // Function to scroll to the bottom of the page
+  function scrollToBottom() {
+    console.log("Scrolling to bottom."); // Log when scroll function is called
+    // Use window.scrollTo to scroll to the bottom smoothly.
+    // The first argument is the x-coordinate (0 for horizontal scroll).
+    // The second argument is the y-coordinate, document.body.scrollHeight gives the total height of the page.
+    // The 'behavior: "smooth"' option provides a smooth scrolling animation.
+    window.scrollTo({
+      top: document.body.scrollHeight,
+      behavior: 'smooth'
+    });
+  }
+
+  // --- Logic for handling dynamically added content ---
+
+  // Create a MutationObserver instance.
+  // This observer will watch for changes in the DOM.
+  const observer = new MutationObserver(function(mutations) {
+    console.log("MutationObserver detected changes."); // Log when observer fires
+    // We don't need to inspect the mutations array in detail for this case.
+    // Any significant change in the body's content (like new elements being added by Streamlit)
+    // should trigger a scroll to the bottom.
+
+    // Use requestAnimationFrame to ensure the scroll happens after the browser
+    // has potentially rendered the new content. This helps prevent choppy scrolling.
+    requestAnimationFrame(scrollToBottom);
+  });
+
+  // Configure the observer to watch for changes to the child list of the body element.
+  // This means it will trigger when elements are added or removed directly from the body.
+  const config = { childList: true, subtree: true }; // subtree: true to watch descendants as well
+
+  console.log("Starting MutationObserver on document.body."); // Log when observer starts
+  // Start observing the document body for the configured mutations.
+  // This will start the auto-scrolling whenever Streamlit adds new content to the page.
+  observer.observe(document.body, config);
+
+  // --- Initial scroll on page load (optional, but good for initial state) ---
+  // You might still want an initial scroll when the page first loads,
+  // in case there's content already present.
+  window.addEventListener('load', function() {
+      console.log("Window loaded. Initial scroll attempt."); // Log on window load
+      requestAnimationFrame(scrollToBottom);
+  });
+
     </script>
-    """
-    
+"""
     # Render the JavaScript code
     html = f'<div style="display:none">{JS_code}</div>'
     st.components.v1.html(html, height=0, width=0)
 
 
-
 def auto_scroll_to_bottom():
     # JavaScript to scroll to bottom
     js_code = """