Update app.py

app.py

@@ -103,6 +103,7 @@ def respond(message, api_key, max_tokens, top_p, temperature):
         return history, "Error: " + response.json().get("error", "Unknown error occurred.")
 
 
+
 def render_message(history):
     messages_html = """
     <div id="chatbox-container" class="chatbox" style="height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;">
@@ -121,7 +122,7 @@ def render_message(history):
                 messages_html += f"<img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
             messages_html += f"<span style='color: white;'>{assistant_message}</span></div><br>"
 
-    messages_html += "</div></div>"
+    messages_html += "</div></div>"  # Close the messages and chatbox container
     return messages_html
 
 
@@ -165,17 +166,21 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid
         last_message_state = gr.State("")  
 
         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)
+
            scroll_script = """
-           <script>
-             setTimeout(() => {
-                const container = document.getElementById('chatbox-container');
-                container.scrollTop = container.scrollHeight;
-             }, 0);
-            </script>"""
-
-           return full_history_html + scroll_script, history, "", message
+    <script>
+        window.onload = function() {
+            const container = document.getElementById('chatbox-container');
+            container.scrollTop = container.scrollHeight; // Scroll to the bottom
+        };
+    </script>"""
+
+            return full_history_html + scroll_script, history, "", message
+
 
 
         def regenerate_response(history, last_message, max_tokens, top_p, temperature):