Update app.py

app.py

@@ -127,7 +127,7 @@ def render_message(history):
 
     return messages_html
 
-with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}") as demo:
+with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}", js='handleAutoScrollChat.js') as demo:
 
     with gr.Column(visible=True) as auth_view:
         gr.Markdown("## P-MSQ Authorization")
@@ -221,23 +221,6 @@ 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