Update app.py

app.py

@@ -101,31 +101,27 @@ def respond(message, api_key, max_tokens, top_p, temperature):
     else:
         return history, "Error: " + response.json().get("error", "Unknown error occurred.")
 
-def append_message(message, previous_html):
-    new_message_html = ""
-    
-    if message[0]: 
-        new_message_html += f"<div style='display: flex; align-items: center; margin-bottom: 10px;'>"
-        if message[4]:
-            new_message_html += f"<img src='{message[4]}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
-        new_message_html += f"{message[0]}</div><br>"
+def render_message(history):
+    messages_html = """
+    <div id="chatbox-container" class="chatbox">
+        <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>"
 
-    if message[1]:
-        new_message_html += f"<div style='display: flex; align-items: center; margin-bottom: 10px;'>"
-        if message[5]:
-            new_message_html += f"<img src='{message[5]}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
-        new_message_html += f"{message[1]}</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>"
 
-    return previous_html + new_message_html
 
+    return messages_html
 
-def render_message(history):
-    chat_html = ""
-    
-    for message in history:
-        chat_html = append_message(message, chat_html)
-    
-    return chat_html
 
 with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}") as demo:
 
@@ -140,7 +136,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() 
+        chatbot_output = gr.HTML(elem_id="chatbox")  
 
         msg_input = gr.Textbox(
             show_label=False, 
@@ -167,9 +163,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)
-    
-            updated_html = render_message(history)
-            return updated_html, history, "", message  
+            return render_message(history), history, "", message  
 
         def regenerate_response(history, last_message, max_tokens, top_p, temperature):
             return "", []
@@ -185,8 +179,8 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid
             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])
+                         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],