Update app.py

app.py

@@ -124,38 +124,10 @@ def render_message(history):
 
     messages_html += "</div></div>" 
 
-    scroll_script = """
-    <script>
-    const container = document.getElementById('chatbox-container');
-
-    const observer = new MutationObserver(() => {
-        container.scrollTop = container.scrollHeight;  // Force scroll to bottom after re-render
-    });
 
-    observer.observe(container, { childList: true, subtree: true });
-
-    window.onload = function() {
-        container.scrollTop = container.scrollHeight;
-    };
-    </script>
-    """
+    return messages_html
 
-    return messages_html + scroll_script
-
-with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}", 
-        js="""
-    function scrollToBottom() {
-        const container = document.getElementById('chatbox-container');
-        if (container) {
-            container.scrollTop = container.scrollHeight;
-        }
-    }
-
-    window.onload = scrollToBottom;
-
-    const observer = new MutationObserver(scrollToBottom);
-    observer.observe(document.getElementById('chatbox-container'), { childList: true, subtree: true });
-        """) as demo:
+with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}") as demo:
 
     with gr.Column(visible=True) as auth_view:
         gr.Markdown("## P-MSQ Authorization")
@@ -249,6 +221,23 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid
     auth_button.click(authorize_and_proceed, inputs=[api_user_input, api_key_input], outputs=[auth_view, chat_view, chatbot_output, history_state])
     save_instructions_btn.click(save_custom_instructions, inputs=[api_key_input, system_instructions_input], outputs=auth_status)
     demo.load(lambda: None, [], None)
+    demo.append(gr.HTML("""
+    <script>
+    function scrollToBottom() {
+        const container = document.getElementById('chatbox-container');
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+        }
+    }
+
+    // Scroll to bottom after the page has loaded
+    window.onload = scrollToBottom;
+
+    // Observe changes in the chatbox container to scroll on new messages
+    const observer = new MutationObserver(scrollToBottom);
+    observer.observe(document.getElementById('chatbox-container'), { childList: true, subtree: true });
+    </script>
+    """))
     demo.launch()
 if __name__ == "__main__":
     demo.queue = False