Update app.py

app.py

@@ -84,7 +84,6 @@ def respond(message, api_key, max_tokens, top_p, temperature):
     else:
         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: auto; border: 1px solid #262626; padding: 10px; background-color: #171717; display: flex; flex-direction: column-reverse;">
@@ -95,22 +94,19 @@ def render_message(history):
             messages_html += f"""
             <div style='display: flex; align-items: center; margin-bottom: 10px;'>
                 <img src='{user_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>
-                <span style='color: white;'><b>{user_profile}:</b></span>
-                <span style='color: white;'>{gr.Markdown(user_message)}</span>
+                <span style='color: white;'>**{user_profile}**: {user_message}</span>
             </div><br>"""
 
         if assistant_message:
             messages_html += f"""
             <div style='display: flex; align-items: center; margin-bottom: 10px;'>
                 <img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>
-                <span style='color: white;'><b>{assistant_profile}:</b></span>
-                <span style='color: white;'>{gr.Markdown(assistant_message)}</span>
+                <span style='color: white;'>**{assistant_profile}**: {assistant_message}</span>
             </div><br>"""
 
     messages_html += "</div></div>" 
     return messages_html
 
-
 js = """
 function Scrolldown() {
     const messagesContainer = document.getElementById('chatbox-container');
@@ -173,20 +169,11 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow: auto; border: 1px solid #
         last_message_state = gr.State("")  
 
         def user_interaction(message, history, api_key, max_tokens, top_p, temperature):
+            loading_message = history + [(message, "Loading...", "You", "P-ALPLE", USER_PIC_PATH, ASSISTANT_PIC_PATH)]
+            yield render_message(loading_message), loading_message, ""
+
             history, assistant_reply = respond(message, api_key, max_tokens, top_p, temperature)
-            
-            for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
-                with chatbot_output:
-                    if user_message:
-                        with gr.Row():
-                            gr.Image(value=user_pic, label=user_profile, width=40, height=40)
-                            gr.Markdown(f"**{user_profile}:** {user_message}")
-                    if assistant_message:
-                        with gr.Row():
-                            gr.Image(value=assistant_pic, label=assistant_profile, width=40, height=40)
-                            gr.Markdown(f"**{assistant_profile}:** {assistant_message}")
-
-            return history, ""
+            yield render_message(history), history, ""
 
         def regenerate_response(history, last_message, max_tokens, top_p, temperature):
             return "", []