Update app.py

app.py

@@ -15,18 +15,18 @@ chat_history = []
 def chat_with_bots(user_input):
     global chat_history
 
-    # User message
-    chat_history.append(("You", user_input))
+    # Append User message (in red)
+    chat_history.append(("🟥 You", f"<span class='user-msg'>{user_input}</span>"))
 
-    # Create messages
+    # Create ACP 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 input
+    # Log to Firebase
     log_message_to_firestore(msg_to_codebot.to_dict())
     log_message_to_firestore(msg_to_bugbot.to_dict())
 
-    # Bot responses
+    # Get responses
     reply_codebot = codebot.receive_message(msg_to_codebot)
     reply_bugbot = bugbot.receive_message(msg_to_bugbot)
 
@@ -34,23 +34,46 @@ def chat_with_bots(user_input):
     log_message_to_firestore(reply_codebot.to_dict())
     log_message_to_firestore(reply_bugbot.to_dict())
 
-    # Add to history
-    chat_history.append(("🧠 CodeBot", reply_codebot.content))
-    chat_history.append(("🐞 BugBot", reply_bugbot.content))
+    # Append responses with custom colored bubbles
+    chat_history.append(("🟩 CodeBot", f"<span class='codebot-msg'>{reply_codebot.content}</span>"))
+    chat_history.append(("🟧 BugBot", f"<span class='bugbot-msg'>{reply_bugbot.content}</span>"))
 
     return chat_history
 
-# Gradio interface
+# Gradio Blocks App
 with gr.Blocks(css="""
-.chatbox { background-color: #f2f2f2; border-radius: 10px; padding: 10px; }
-.gr-textbox { border-radius: 8px !important; }
+.user-msg {
+    background-color: #ffdddd;
+    padding: 8px 12px;
+    border-radius: 10px;
+    display: inline-block;
+}
+
+.codebot-msg {
+    background-color: #ddffdd;
+    padding: 8px 12px;
+    border-radius: 10px;
+    display: inline-block;
+}
+
+.bugbot-msg {
+    background-color: #ffe5cc;
+    padding: 8px 12px;
+    border-radius: 10px;
+    display: inline-block;
+}
+
+.gr-chatbot {
+    height: 250px !important;
+    overflow-y: auto;
+}
 """) as demo:
-    gr.Markdown("### 💬 WhatsBot: Talk with CodeBot & BugBot")
+    gr.Markdown("### 🤖 BotTalks: Color-Coded AI Chat")
 
-    chatbot = gr.Chatbot(label="WhatsApp-style Chat", height=500, bubble_full_width=False, avatar_images=("👤", "🤖"))
+    chatbot = gr.Chatbot(label="Chat", bubble_full_width=False, show_copy_button=True, avatar_images=("👤", "🤖"))
 
     with gr.Row():
-        msg_input = gr.Textbox(placeholder="Type a message like: How to reverse a string in Python?", lines=1, show_label=False)
+        msg_input = gr.Textbox(placeholder="Ask a question...", lines=1, show_label=False)
         send_btn = gr.Button("Send", variant="primary")
 
     send_btn.click(chat_with_bots, inputs=msg_input, outputs=chatbot)