Update app.py

app.py

@@ -13,7 +13,7 @@ def respond(message, history, system_message, max_tokens, temperature, top_p, se
         # Create an InferenceClient for the selected model
         client = InferenceClient(model_list.get(selected_model, "HuggingFaceH4/zephyr-7b-beta"))
         
-        # Build conversation messages for the client
+        # Build conversation messages for the client - without any emojis in the history
         messages = [{"role": "system", "content": system_message}]
         for user_msg, assistant_msg in history:
             if user_msg:  # Only add non-empty messages
@@ -147,11 +147,35 @@ with gr.Blocks(css=css) as demo:
             
         # Main area: Chat interface
         with gr.Column(scale=3):
+            # Using a custom chatbot renderer to add emojis
             chatbot = gr.Chatbot(
                 label="Conversation", 
                 show_label=True,
-                height=400
+                height=400,
+                render=False  # We'll render the messages manually
             )
+            
+            # Custom renderer for chat messages
+            def render_chat(history):
+                result = []
+                for user_msg, bot_msg in history:
+                    if user_msg is None:
+                        user_msg = ""
+                    if bot_msg is None:
+                        bot_msg = ""
+                    
+                    # Add emojis to non-empty messages
+                    if user_msg and not user_msg.startswith("👤"):
+                        user_msg = f"👤 {user_msg}"
+                    if bot_msg and not bot_msg.startswith("🛡️"):
+                        bot_msg = f"🛡️ {bot_msg}"
+                        
+                    result.append((user_msg, bot_msg))
+                return result
+            
+            # Custom chatbot with emoji rendering
+            chatbot.render = render_chat
+            
             with gr.Row():
                 user_input = gr.Textbox(
                     placeholder="Type your message here...", 
@@ -168,10 +192,9 @@ with gr.Blocks(css=css) as demo:
             with gr.Row():
                 clear_button = gr.Button("Clear Chat", elem_id="clear-btn")
     
-    # Fix 1: Correct event handling for the chatbot interface
+    # Define functions for chatbot interactions
     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):
@@ -197,39 +220,8 @@ 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 (only if it doesn't already have one)
-            if user_msg:
-                if not user_msg.startswith("👤 "):
-                    user_msg_with_emoji = f"👤 {user_msg}"
-                else:
-                    user_msg_with_emoji = user_msg
-            else:
-                user_msg_with_emoji = user_msg
-                
-            # Add the assistant emoji to the assistant message (only if it doesn't already have one)
-            if assistant_msg:
-                if not assistant_msg.startswith("🛡️ "):
-                    assistant_msg_with_emoji = f"🛡️ {assistant_msg}"
-                else:
-                    assistant_msg_with_emoji = 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 with emoji display
+    # Wire up the event chain - submit and send button work the same way
     user_input.submit(
         user,
         [user_input, chatbot],
@@ -240,10 +232,6 @@ 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(
@@ -256,13 +244,9 @@ 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
+    # Clear the chat history
     def clear_history():
         return []