Update pages/type_text.py

pages/type_text.py

@@ -28,17 +28,36 @@ def scrollToBottom():
     # JavaScript to scroll to bottom
     JS_code = """
     <script>
-  // Function to scroll to the bottom of the page
+  // Function to scroll to the bottom of a specific container
   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'
-    });
+    console.log("Attempting to scroll container to bottom."); // Log when scroll function is called
+
+    // --- Identify the scrollable container ---
+    // Streamlit often uses a main container div. We'll try to find it.
+    // You might need to inspect your deployed app's HTML to find the correct selector
+    // for the element that actually has the scrollbar.
+    // Common candidates:
+    // - Elements with classes like 'stAppViewContainer', 'main', 'block-container'
+    // - A div directly containing your dynamic content
+
+    // Let's try a common Streamlit container class. You might need to adjust this.
+    const scrollableContainer = document.querySelector('.stAppViewContainer'); // Example selector
+
+    if (scrollableContainer) {
+      console.log("Scrollable container found. Scrolling...");
+      // Scroll the found container to its bottom
+      scrollableContainer.scrollTo({
+        top: scrollableContainer.scrollHeight,
+        behavior: 'smooth'
+      });
+    } else {
+      console.warn("Scrollable container not found. Falling back to document.body scroll.");
+      // Fallback to body scroll if the specific container isn't found
+      window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
   }
 
   // --- Logic for handling dynamically added content ---
@@ -47,27 +66,21 @@ def scrollToBottom():
   // 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.
+    // has potentially rendered the new content.
     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
+  // We keep observing the body because Streamlit adds content there,
+  // even if a child element is the one that scrolls.
+  const config = { childList: true, subtree: true };
 
   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.
+  // --- Initial scroll on page load ---
   window.addEventListener('load', function() {
       console.log("Window loaded. Initial scroll attempt."); // Log on window load
       requestAnimationFrame(scrollToBottom);