Update app.py

app.py

@@ -10,43 +10,50 @@ from firebase.firebase_config import log_message_to_firestore
 codebot = ProgrammerAgent()
 bugbot = DebuggerAgent()
 
+chat_history = []
+
 def chat_with_bots(user_input):
-    # Send same input to both agents
+    global chat_history
+
+    # User message
+    chat_history.append(("You", user_input))
+
+    # Create messages
     msg_to_codebot = ACPMessage(sender="User", receiver="CodeBot", performative="request", content=user_input)
     msg_to_bugbot = ACPMessage(sender="User", receiver="BugBot", performative="request", content=user_input)
 
-    # Log inputs
+    # Log input
     log_message_to_firestore(msg_to_codebot.to_dict())
     log_message_to_firestore(msg_to_bugbot.to_dict())
 
-    # Get both responses
+    # Bot responses
     reply_codebot = codebot.receive_message(msg_to_codebot)
     reply_bugbot = bugbot.receive_message(msg_to_bugbot)
 
-    # Log responses
+    # Log replies
     log_message_to_firestore(reply_codebot.to_dict())
     log_message_to_firestore(reply_bugbot.to_dict())
 
-       full_reply = f"""
-    ### 🧠 **CodeBot** (Programmer)
-    {reply_codebot.content}
-    
-    ---
-    
-    ### 🐞 **BugBot** (Debugger)
-    {reply_bugbot.content}
-    """
+    # Add to history
+    chat_history.append(("🧠 CodeBot", reply_codebot.content))
+    chat_history.append(("🐞 BugBot", reply_bugbot.content))
+
+    return chat_history
 
-    return full_reply.strip()
+# Gradio interface
+with gr.Blocks(css="""
+.chatbox { background-color: #f2f2f2; border-radius: 10px; padding: 10px; }
+.gr-textbox { border-radius: 8px !important; }
+""") as demo:
+    gr.Markdown("### 💬 WhatsBot: Talk with CodeBot & BugBot")
 
-# Gradio UI
-with gr.Blocks(title="BotTalks: Chat with 2 AI Agents") as demo:
-    gr.Markdown("# 🤖 BotTalks: Chat with 2 AI Friends!\nAsk anything and see how both agents respond.")
-    input_box = gr.Textbox(label="You", placeholder="Ask something like: How do I reverse a list?", lines=2)
-    output_box = gr.Markdown()
+    chatbot = gr.Chatbot(label="WhatsApp-style Chat", height=500, bubble_full_width=False, avatar_images=("👤", "🤖"))
 
-    send_btn = gr.Button("Send")
+    with gr.Row():
+        msg_input = gr.Textbox(placeholder="Type a message like: How to reverse a string in Python?", lines=1, show_label=False)
+        send_btn = gr.Button("Send", variant="primary")
 
-    send_btn.click(chat_with_bots, inputs=input_box, outputs=output_box)
+    send_btn.click(chat_with_bots, inputs=msg_input, outputs=chatbot)
+    msg_input.submit(chat_with_bots, inputs=msg_input, outputs=chatbot)
 
 demo.launch()