Update pages/type_text.py

pages/type_text.py

@@ -47,40 +47,46 @@ def convert_json(df:pd.DataFrame):
     #st.json(json_string, expanded=True)
     return json_string
 
-def auto_scroll_to_bottom():
-    # JavaScript to scroll to bottom
+def scroll_to_bottom():
+    # This script uses Streamlit's message system to ensure proper timing
     js_code = """
     <script>
-        // Wait for the page to fully render
-        const scrollToBottom = () => {
-            // Get the main Streamlit iframe
-            const streamlitDoc = window.parent.document;
-            // Get the app container
-            const appContainer = streamlitDoc.querySelector('.main');
-            if (appContainer) {
-                // Scroll the app container to the bottom
-                appContainer.scrollTop = appContainer.scrollHeight;
-            } else {
-                // Fallback to scrolling the entire page
-                window.parent.scrollTo(0, streamlitDoc.body.scrollHeight);
+        // Function to scroll to bottom
+        function scrollToBottom() {
+            // This targets Streamlit's specific structure
+            const mainContainer = window.parent.document.querySelector('.stApp');
+            if (mainContainer) {
+                mainContainer.scrollTo({
+                    top: mainContainer.scrollHeight,
+                    behavior: 'smooth'
+                });
             }
-        };
+        }
         
-        // Try immediately
-        scrollToBottom();
+        // Use MutationObserver to detect when content is added
+        const observer = new MutationObserver((mutations) => {
+            scrollToBottom();
+        });
         
-        // Also try after a short delay to ensure content is rendered
-        setTimeout(scrollToBottom, 200);
+        // Start observing the document body for changes
+        const streamlitDoc = window.parent.document;
+        observer.observe(streamlitDoc.body, { 
+            childList: true,
+            subtree: true 
+        });
         
-        // And after a longer delay just to be safe
-        setTimeout(scrollToBottom, 500);
+        // Initial scroll and disconnect after some time
+        scrollToBottom();
+        setTimeout(() => {
+            observer.disconnect();
+            // One final scroll
+            scrollToBottom();
+        }, 1000);
     </script>
     """
     
-    # Render the JavaScript code
-    html = f'<div style="display:none">{js_code}</div>'
-    st.components.v1.html(html, height=0)
-
+    # Use unsafe_allow_html to inject JavaScript
+    st.markdown(js_code, unsafe_allow_html=True)
 
 #df_chapters = pd.read_csv("SBS_V2_0/Chapter_Index_Rows.csv") 
 df_chapters = pd.read_csv("SBS_V2_0/Chapter_Index_Rows_with_total.csv") 
@@ -141,8 +147,6 @@ dfALL = pd.DataFrame.from_dict(dictA)
 
 #INTdesc_input = st.text_input("Type internal description", key="user_input") 
 INTdesc_input = st.text_input(r"$\textsf{\Large Type internal description}$", key="user_input")
-auto_scroll_to_bottom()
-
 placeholder, centerL_column, centerR_column, right_column = st.columns(4)
 #placeholder_clicked = placeholder.button("Perform some action", key="user_placeholder")
 right_column.button("Reset description", on_click=on_click)