Update app.py

app.py

@@ -101,56 +101,31 @@ 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">
-        <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 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 += """
-        </div>
-    </div>
-
-    <script>
-        function saveScrollPosition() {
-            var chatbox = document.getElementById('chatbox-container');
-            return chatbox.scrollTop;
-        }
-
-        function restoreScrollPosition(scrollPosition) {
-            var chatbox = document.getElementById('chatbox-container');
-            chatbox.scrollTop = scrollPosition;
-        }
-
-        function scrollToBottom() {
-            var chatbox = document.getElementById('chatbox-container');
-            chatbox.scrollTop = chatbox.scrollHeight;
-        }
-
-        var previousScrollPosition = saveScrollPosition();
+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>"
 
-        setTimeout(function() {
-            restoreScrollPosition(previousScrollPosition);
-            scrollToBottom();  
-        }, 100);  
+    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>"
 
-    </script>
-    """
+    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:
 
@@ -165,7 +140,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(elem_id="chatbox")  
+        chatbot_output = gr.HTML() 
 
         msg_input = gr.Textbox(
             show_label=False, 
@@ -192,7 +167,9 @@ 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)
-            return render_message(history), history, "", message  
+    
+            updated_html = render_message(history)
+            return updated_html, history, "", message  
 
         def regenerate_response(history, last_message, max_tokens, top_p, temperature):
             return "", []
@@ -208,8 +185,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],