app.py

import gradio as gr
from agents.programmer import ProgrammerAgent
from agents.debugger import DebuggerAgent
from agents.base_agent import ACPMessage
import os

# Initialize agents
aymaan = ProgrammerAgent()
zaid = DebuggerAgent()

# In-memory chat
chat_memory = []

# Greeting responses
GREETING_RESPONSES = {
    "hi": "Hey there! 👋",
    "hello": "Hello! How can I help?",
    "how are you": "Doing great! Thanks for asking 😊",
}

def fast_greeting_handler(msg):
    lowered = msg.lower()
    for greeting in GREETING_RESPONSES:
        if greeting in lowered:
            return True, GREETING_RESPONSES[greeting]
    return False, ""

def chat(user_input):
    if not user_input.strip():
        return chat_memory

    is_greeting, shortcut = fast_greeting_handler(user_input)

    if is_greeting:
        response_aymaan = shortcut
        response_zaid = shortcut
    else:
        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: #888;
    font-size: 0.9em;
}
.gradio-container {
    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 — 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...", show_label=False, lines=1, scale=4)
        send_btn = gr.Button("📨 Send", scale=1)
    clear_btn = gr.Button("🧹 Clear Chat", variant="secondary")

    send_btn.click(chat, inputs=msg, outputs=chatbot)
    clear_btn.click(reset_memory, outputs=chatbot)

    gr.HTML("""
    <footer>
        Built with ❤️ by <a href="https://github.com/aymnsk" target="_blank">aymnsk</a>
    </footer>
    """)

if __name__ == "__main__":
    demo.launch()