Update app.py

app.py

@@ -85,6 +85,31 @@ 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: 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;'>
+                <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>
+            </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>
+            </div><br>"""
+
+    messages_html += "</div></div>" 
+    return messages_html
+
 
 js = """
 function Scrolldown() {