app.py

import os
import gradio as gr
from groq import Groq

# -------------------------------
# Initialize Groq Client
# -------------------------------
client = Groq(api_key=os.getenv("GROQ_API_KEY"))

# -------------------------------
# Chatbot Logic (UNCHANGED)
# -------------------------------
def chatbot(message, history):
    if history is None:
        history = []

    # Build Groq messages
    groq_messages = []
    for msg in history:
        groq_messages.append({
            "role": msg["role"],
            "content": msg["content"]
        })

    groq_messages.append({"role": "user", "content": message})

    response = client.chat.completions.create(
        model="llama-3.3-70b-versatile",
        messages=groq_messages
    )

    reply = response.choices[0].message.content

    # Update history for Gradio
    history.append({"role": "user", "content": message})
    history.append({"role": "assistant", "content": reply})

    # Return empty string to clear input
    return history, ""

# -------------------------------
# Light & Calm UI Styling
# -------------------------------
custom_css = """
/* Body & background */
body {
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    font-family: 'Inter', sans-serif;
}

/* Container width */
.gradio-container {
    max-width: 1000px !important;
    margin: auto;
}

/* Chat card */
.chat-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* Chat bubbles */
.message.user {
    background: #e0e7ff !important;
    color: #1e293b !important;
    border-radius: 18px 18px 4px 18px !important;
}

.message.bot {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-radius: 18px 18px 18px 4px !important;
}

/* Chat display panel */
.gr-chatbot {
    background: transparent !important;
}

/* Input box */
textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-radius: 14px !important;
    border: 1px solid #c7d2fe !important;
    min-height: 80px !important;
    font-size: 15px !important;
}

/* Buttons */
button {
    background: linear-gradient(135deg, #818cf8, #a5b4fc) !important;
    color: #1e293b !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
}
"""

# -------------------------------
# Gradio App Layout
# -------------------------------
with gr.Blocks(css=custom_css, theme=None) as demo:  # ❌ Removed theme override
    # Header
    gr.Markdown(
        """
        <h1 style="text-align:center; color:#1e293b;">
            🤖 Groq AI Chatbot
        </h1>
        <p style="text-align:center; color:#475569;">
            A friendly AI assistant powered by LLaMA 3.3 via Groq
        </p>
        """
    )

    with gr.Column(elem_classes="chat-card"):
        # Chat panel (taller)
        chat = gr.Chatbot(height=600)

        # Input row
        with gr.Row():
            msg = gr.Textbox(
                placeholder="Type your message here...",
                show_label=False,
                scale=4
            )
            send_btn = gr.Button("Send 🚀", scale=1)

        # Clear button
        clear_btn = gr.Button("Clear 🧹")

        # Actions
        send_btn.click(chatbot, [msg, chat], [chat, msg])
        msg.submit(chatbot, [msg, chat], [chat, msg])
        clear_btn.click(lambda: [], None, chat, queue=False)

# Launch app
demo.launch()