Update app.py

app.py

@@ -86,24 +86,25 @@ def respond(message, api_key, max_tokens, top_p, temperature):
 
 def render_message(history):
     messages_html = """
-    <div id="chatbox-container" class="chatbox" style=".chatbox height: 400px; overflow: auto; border: 1px solid #262626; padding: 10px; background-color: #171717; display: flex;  flex-direction: column-reverse;">
+    <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;">
         <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"<span style='color: white;'>{user_message}</span></div><br>"
+            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;'>**{user_profile}**: {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"<span style='color: white;'>{assistant_message}</span></div><br>"
+            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;'>**{assistant_profile}**: {assistant_message}</span>
+            </div><br>"""
 
     messages_html += "</div></div>" 
-    messages_html += "<script>Scrolldown();</script>"
     return messages_html
 
 js = """
@@ -142,7 +143,7 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow: auto; border: 1px solid #
     with gr.Column(visible=False) as chat_view:
         gr.Markdown("## P-MSQ Chat Interface")
 
-        chatbot_output = gr.Markdown()
+        chatbot_output = gr.HTML(elem_id="chatbox-container")
 
         msg_input = gr.Textbox(
             show_label=False,