Update app.py

app.py

@@ -92,13 +92,6 @@ body {
 #clear-btn:hover {
     background-color: #fff9e6 !important;
 }
-/* User/assistant emoji in chat */
-.user-msg::before {
-    content: "👤 ";
-}
-.bot-msg::before {
-    content: "🛡️ ";
-}
 /* Hide elements */
 footer {
     display: none !important;
@@ -157,53 +150,8 @@ with gr.Blocks(css=css) as demo:
             chatbot = gr.Chatbot(
                 label="Conversation", 
                 show_label=True,
-                height=400,
-                elem_classes=["chat-box"]
+                height=400
             )
-            
-            # Add JavaScript to inject user/assistant emojis
-            gr.HTML("""
-            <script>
-            // Function to add emojis to chat messages
-            function addEmojisToChat() {
-                setTimeout(function() {
-                    // Find all user messages and add emoji
-                    document.querySelectorAll('.user').forEach(function(el) {
-                        if (!el.querySelector('.emoji-added')) {
-                            let textEl = el.querySelector('p');
-                            if (textEl) {
-                                textEl.innerHTML = '👤 ' + textEl.innerHTML;
-                                let span = document.createElement('span');
-                                span.className = 'emoji-added';
-                                span.style.display = 'none';
-                                el.appendChild(span);
-                            }
-                        }
-                    });
-                    
-                    // Find all bot messages and add emoji
-                    document.querySelectorAll('.bot').forEach(function(el) {
-                        if (!el.querySelector('.emoji-added')) {
-                            let textEl = el.querySelector('p');
-                            if (textEl) {
-                                textEl.innerHTML = '🛡️ ' + textEl.innerHTML;
-                                let span = document.createElement('span');
-                                span.className = 'emoji-added';
-                                span.style.display = 'none';
-                                el.appendChild(span);
-                            }
-                        }
-                    });
-                    
-                    // Call this function again to catch new messages
-                    addEmojisToChat();
-                }, 1000);
-            }
-            
-            // Start the process
-            window.addEventListener('load', addEmojisToChat);
-            </script>
-            """)
             with gr.Row():
                 user_input = gr.Textbox(
                     placeholder="Type your message here...", 
@@ -223,6 +171,7 @@ with gr.Blocks(css=css) as demo:
     # Fix 1: Correct event handling for the chatbot interface
     def user(user_message, history):
         # Return the user's message and add it to history
+        # No emoji here since we'll add it during display
         return "", history + [[user_message, None]]
     
     def bot(history, system_message, max_tokens, temperature, top_p, selected_model):
@@ -248,8 +197,33 @@ with gr.Blocks(css=css) as demo:
         for response in response_generator:
             history[-1][1] = response
             yield history
+            
+    # Add a function to display history with emojis
+    def display_with_emojis(history):
+        if history is None or len(history) == 0:
+            return []
+            
+        # Create a new history with emojis added
+        history_with_emojis = []
+        for user_msg, assistant_msg in history:
+            # Add the user emoji to the user message
+            if user_msg:
+                user_msg_with_emoji = f"👤 {user_msg}"
+            else:
+                user_msg_with_emoji = user_msg
+                
+            # Add the assistant emoji to the assistant message
+            if assistant_msg:
+                assistant_msg_with_emoji = f"🛡️ {assistant_msg}"
+            else:
+                assistant_msg_with_emoji = assistant_msg
+                
+            # Add the modified messages to the new history
+            history_with_emojis.append([user_msg_with_emoji, assistant_msg_with_emoji])
+            
+        return history_with_emojis
     
-    # Wire up the event chain
+    # Wire up the event chain with emoji display
     user_input.submit(
         user,
         [user_input, chatbot],
@@ -260,6 +234,10 @@ with gr.Blocks(css=css) as demo:
         [chatbot, system_message, max_tokens_slider, temperature_slider, top_p_slider, model_dropdown],
         [chatbot],
         queue=True
+    ).then(
+        display_with_emojis,  # Add the emoji processing step
+        [chatbot],
+        [chatbot]
     )
     
     send_button.click(
@@ -272,6 +250,10 @@ with gr.Blocks(css=css) as demo:
         [chatbot, system_message, max_tokens_slider, temperature_slider, top_p_slider, model_dropdown],
         [chatbot],
         queue=True
+    ).then(
+        display_with_emojis,  # Add the emoji processing step
+        [chatbot],
+        [chatbot]
     )
     
     # Clear the chat history - using a proper function