Update app.py

app.py

@@ -105,23 +105,23 @@ def respond(message, api_key, max_tokens, top_p, temperature):
 
 def render_message(history):
     messages_html = """
-    <div id="chatbox-container" class="chatbox" style="height: 350px; overflow-y: auto;">  <!-- Ensure the chatbox can scroll -->
-        <div id="messages">"""  #
+    <div id="chatbox-container" class="chatbox" style="height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;">
+        <div id="messages">"""
 
     for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
         if user_message:
             messages_html += f"<div style='display: flex; align-items: center; margin-bottom: 10px;'>"
             if user_pic:
                 messages_html += f"<img src='{user_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
-            messages_html += f"{user_message}</div><br>"
+            messages_html += f"<span style='color: white;'>{user_message}</span></div><br>"
 
         if assistant_message:
             messages_html += f"<div style='display: flex; align-items: center; margin-bottom: 10px;'>"
             if assistant_pic:
                 messages_html += f"<img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
-            messages_html += f"{assistant_message}</div><br>"
+            messages_html += f"<span style='color: white;'>{assistant_message}</span></div><br>"
 
-    messages_html += "</div></div>"  # Close the messages and chatbox container
+    messages_html += "</div></div>"
     return messages_html
 
 
@@ -167,8 +167,15 @@ 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)
-           scroll_script = "<script>setTimeout(() => { document.getElementById('chatbox-container').scrollTop = document.getElementById('chatbox-container').scrollHeight; }, 0);</script>"
-           return full_history_html + scroll_script, history, "", message
+           scroll_script = """
+    <script>
+        setTimeout(() => {
+            const container = document.getElementById('chatbox-container');
+            container.scrollTop = container.scrollHeight;
+        }, 0);
+    </script>"""
+
+          return full_history_html + scroll_script, history, "", message
 
 
         def regenerate_response(history, last_message, max_tokens, top_p, temperature):