Update app.py

app.py

@@ -130,7 +130,7 @@ def render_message(history):
 js = """
 function Scrolldown() {
     function startObserver() {
-        let targetNode = document.getElementById('chatbox-container');
+        let targetNode = document.querySelector('#chatbox-container');
         
         if (!targetNode) {
             console.log("Chatbox container not found, retrying in 1 second...");
@@ -144,14 +144,15 @@ function Scrolldown() {
         const callback = (mutationList, observer) => {
             targetNode.scrollTop = targetNode.scrollHeight;
         };
-        console.log("begun to observe")
         const observer = new MutationObserver(callback);
         observer.observe(targetNode, config);
     }
 
-    document.addEventListener("DOMContentLoaded", startObserver);
-    console.log("event found")
+    startObserver();
 }
+
+// Ensure function is available globally
+window.Scrolldown = Scrolldown;
 """
 with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}", js=js) as demo:
 
@@ -166,7 +167,7 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid
     with gr.Column(visible=False) as chat_view:
         gr.Markdown("## P-MSQ Chat Interface")
 
-        chatbot_output = gr.HTML(elem_id="chatbox")
+        chatbot_output = gr.HTML(elem_id="chatbox-container")
 
         msg_input = gr.Textbox(
             show_label=False, 
@@ -193,10 +194,7 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid
 
         def user_interaction(message, history, api_key, max_tokens, top_p, temperature):
            history, assistant_reply = respond(message, api_key, max_tokens, top_p, temperature)
-
-           full_history_html = render_message(history)
-
-           return full_history_html, history, "", message
+           return render_message(history), history, "", gr.HTML("<script>Scrolldown();</script>")
 
 
 
@@ -213,13 +211,17 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid
             history = session.get("history", [])
             return render_message(history), history
 
-        msg_input.submit(user_interaction, 
-                 inputs=[msg_input, history_state, api_key_input, max_tokens, top_p, temperature], 
-                 outputs=[chatbot_output, history_state, msg_input, last_message_state])
+        msg_input.submit(
+            user_interaction, 
+            inputs=[msg_input, history_state, api_key_input, max_tokens, top_p, temperature], 
+            outputs=[chatbot_output, history_state, msg_input, gr.HTML()]
+        )
 
-        send_btn.click(user_interaction, 
-                inputs=[msg_input, history_state, api_key_input, max_tokens, top_p, temperature], 
-                outputs=[chatbot_output, history_state, msg_input, last_message_state])
+        send_btn.click(
+            user_interaction, 
+            inputs=[msg_input, history_state, api_key_input, max_tokens, top_p, temperature], 
+            outputs=[chatbot_output, history_state, msg_input, gr.HTML()]
+        )
 
         regen_btn.click(clear_history, 
                         inputs=[api_key_input],