Update app.py

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 from agents.programmer import ProgrammerAgent
 from agents.debugger import DebuggerAgent
 from agents.base_agent import ACPMessage
-import json
 import os
 
 # Initialize agents
@@ -12,7 +11,7 @@ zaid = DebuggerAgent()
 # In-memory chat
 chat_memory = []
 
-# Greeting shortcuts
+# Greeting responses
 GREETING_RESPONSES = {
     "hi": "Hey there! 👋",
     "hello": "Hello! How can I help?",
@@ -33,62 +32,69 @@ def chat(user_input):
     is_greeting, shortcut = fast_greeting_handler(user_input)
 
     if is_greeting:
-        response_aymaan = shortcut + " (Aymaan)"
-        response_zaid = shortcut + " (Zaid)"
+        response_aymaan = shortcut
+        response_zaid = shortcut
     else:
-        user_msg = ACPMessage(sender="User", receiver="Aymaan", performative="inform", content=user_input)
-        response_aymaan = aymaan.receive_message(user_msg).content
-
-        user_msg = ACPMessage(sender="User", receiver="Zaid", performative="inform", content=user_input)
-        response_zaid = zaid.receive_message(user_msg).content
-
-    chat_memory.append({"role": "You", "content": user_input})
-    chat_memory.append({"role": "Aymaan", "content": response_aymaan})
-    chat_memory.append({"role": "Zaid", "content": response_zaid})
-
-    formatted = [(item["role"], item["content"]) for item in chat_memory]
-    return formatted
+        msg_to_aymaan = ACPMessage(sender="User", receiver="Aymaan", performative="inform", content=user_input)
+        response_aymaan = aymaan.receive_message(msg_to_aymaan).content
+
+        msg_to_zaid = ACPMessage(sender="User", receiver="Zaid", performative="inform", content=user_input)
+        response_zaid = zaid.receive_message(msg_to_zaid).content
+
+    # Simulate message bubbles with alignment and avatars
+    chat_memory.append({
+        "role": "user",
+        "content": f"<div style='text-align:right; margin: 5px 0;'>🙋‍♂️ <strong>You:</strong> {user_input}</div>"
+    })
+    chat_memory.append({
+        "role": "aymaan",
+        "content": f"<div style='text-align:left; margin: 5px 0;'>🤖 <strong>Aymaan:</strong> {response_aymaan}</div>"
+    })
+    chat_memory.append({
+        "role": "zaid",
+        "content": f"<div style='text-align:left; margin: 5px 0;'>🛠️ <strong>Zaid:</strong> {response_zaid}</div>"
+    })
+
+    return [(None, item["content"]) for item in chat_memory]
 
 def reset_memory():
     global chat_memory
     chat_memory = []
     return []
 
+# CSS Styling
 custom_css = """
 footer {
     margin-top: 2em;
     text-align: center;
-    color: #999;
+    color: #888;
     font-size: 0.9em;
 }
-
 .gradio-container {
-    background: linear-gradient(to bottom right, #f0f2f5, #dbe6f3);
+    background: linear-gradient(to bottom right, #f4f4f9, #e0eafc);
     font-family: 'Segoe UI', sans-serif;
 }
-
 textarea, .gr-button {
     border-radius: 12px !important;
 }
-
 .gr-button {
     background-color: #007bff !important;
     color: white !important;
     font-weight: bold;
     transition: background-color 0.3s ease;
 }
-
 .gr-button:hover {
     background-color: #0056b3 !important;
 }
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("### 💬 ChatLoop — Your Dual AI Chat")
-    
+    gr.Markdown("### 💬 ChatLoop — Talk with Aymaan & Zaid")
+
     chatbot = gr.Chatbot(label="Chat", height=400, bubble_full_width=False)
+    chatbot.render_markdown = False  # Allow HTML for alignment and avatar
     with gr.Row():
-        msg = gr.Textbox(placeholder="Type your message here...", show_label=False, lines=1, max_lines=4, scale=4)
+        msg = gr.Textbox(placeholder="Type your message...", show_label=False, lines=1, scale=4)
         send_btn = gr.Button("📨 Send", scale=1)
     clear_btn = gr.Button("🧹 Clear Chat", variant="secondary")