Update pages/type_text.py

pages/type_text.py

@@ -26,79 +26,82 @@ def make_spinner(text = "In progress..."):
 
 
 def scrollToBottom():
-    # JavaScript to scroll to bottom
-    JS_code = """
-    <script>
-  // Function to scroll to the bottom of a specific container
-  function scrollToBottom() {
-    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
-    // Once you've found the correct container div, 
-    // note its class names (e.g., class="some-streamlit-class another-class") or its ID (e.g., id="some-id").
-    // If you found a class name like st-emotion-cache-abcxyz, 
-    // you'd change the line to: const scrollableContainer = document.querySelector('.st-emotion-cache-abcxyz');
-    // If you found multiple class names, you might use one that seems most specific, or combine them if necessary (e.g., .class1.class2).
-    // If you found an ID like my-streamlit-container, 
-    // you'd change the line to: const scrollableContainer = document.getElementById('my-streamlit-container'); (and use getElementById instead of querySelector)
-    // *** REPLACE THE SELECTOR BELOW with the correct one you found by inspecting your app's HTML ***
-    const scrollableContainer = document.querySelector('.flex flex-col min-h-dvh bg-white dark:bg-gray-950 text-black SpacePage') // <--- REPLACE THIS SELECTOR
-    #const scrollableContainer = document.getElementById('your-container-id')); // <--- REPLACE THIS 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'
-      });
+  # JavaScript to scroll to bottom
+  JS_code = """
+  <script>
+  // Wrap the code in an Immediately Invoked Function Expression (IIFE)
+  // to create a private scope and potentially avoid conflicts.
+  (function() {
+    // Function to scroll to the bottom of a specific container
+    function scrollToBottom() {
+      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 NEED TO INSPECT YOUR DEPLOYED APP'S HTML TO FIND THE CORRECT SELECTOR
+      // FOR THE ELEMENT THAT ACTUALLY HAS THE SCROLLBAR.
+      //
+      // Common candidates based on Streamlit versions and structure:
+      // - '.stAppViewContainer'
+      // - '.main'
+      // - '.block-container'
+      // - Look for divs with class names starting with 'st-emotion-cache-' followed by random characters.
+      // - A div directly containing your dynamic content (check its class or ID)
+
+      // *** REPLACE THE SELECTOR BELOW with the correct one you found by inspecting your app's HTML ***
+      // Use document.querySelector('.your-class-name') for a class, or document.getElementById('your-id') for an ID.
+      const scrollableContainer = document.querySelector('.flex min-h-dvh flex-col'); // <--- REPLACE THIS ENTIRE LINE IF USING getElementById
+
+      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 using the specified selector. Please inspect your app's HTML to find the correct class or ID.");
+        // Fallback to body scroll (less likely to work for Streamlit's main content area)
+        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
-    // Use requestAnimationFrame to ensure the scroll happens after the browser
-    // has potentially rendered the new content.
-    requestAnimationFrame(scrollToBottom);
-  });
-
-  // Configure the observer to watch for changes to the child list of the body element.
-  // 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.
-  observer.observe(document.body, config);
-
-  // --- Initial scroll on page load ---
-  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)
+    // --- 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
+      // Use requestAnimationFrame to ensure the scroll happens after the browser
+      // has potentially rendered the new content.
+      requestAnimationFrame(scrollToBottom);
+    });
+
+    // Configure the observer to watch for changes to the child list of the body element.
+    // 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.
+    observer.observe(document.body, config);
+
+    // --- Initial scroll on page load ---
+    window.addEventListener('load', function() {
+        console.log("Window loaded. Initial scroll attempt."); // Log on window load
+        requestAnimationFrame(scrollToBottom);
+    });
+
+  })(); // End of IIFE
+
+  </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():