app.py

import os
import gradio as gr
from groq import Groq

# -----------------------------
# Groq Client Initialization
# -----------------------------
def chat_with_groq(user_message, history):
    if not user_message or not user_message.strip():
        return history, ""

    # Add temporary thinking message
    history.append({"role": "assistant", "content": "⚡ Groq is thinking..."})

    messages = []

    for msg in history[:-1]:
        if isinstance(msg, dict):
            messages.append({
                "role": msg["role"],
                "content": msg["content"]
            })

    messages.append({"role": "user", "content": user_message})

    try:
        chat_completion = client.chat.completions.create(
            model="llama-3.3-70b-versatile",
            messages=messages,
        )

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

        history[-1] = {
            "role": "assistant",
            "content": response
        }

    except Exception as e:
        history[-1] = {
            "role": "assistant",
            "content": f"⚠️ Error: {str(e)}"
        }

    return history, ""

# -----------------------------
# Clear Chat Logic
# -----------------------------
def clear_chat():
    return [], ""

# -----------------------------
# Neon CSS
# -----------------------------
custom_css = """
body {
    background: radial-gradient(circle at top, #020617, #020617);
}

.gradio-container {
    max-width: 900px !important;
    margin: auto;
}

h1 {
    text-align: center;
    font-size: 2.6rem;
    background: linear-gradient(90deg, #38bdf8, #22d3ee, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chatbot {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    border-radius: 18px;
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.2);
}

.message {
    animation: fadeSlide 0.35s ease-in-out;
}

textarea {
    background: rgba(2, 6, 23, 0.85) !important;
    color: #e5e7eb !important;
    border: 1px solid #38bdf8 !important;
    border-radius: 14px !important;
}

textarea:focus {
    box-shadow: 0 0 18px #38bdf8 !important;
}

button {
    background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
    color: #020617 !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.7);
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(56, 189, 248, 1);
}
"""

# -----------------------------
# Gradio UI
# -----------------------------
with gr.Blocks(css=custom_css, title="Groq ChatBot") as demo:
    gr.Markdown("# ⚡ GROQ CHATBOT")
    gr.Markdown("### Ultra-fast AI • Cyber UI • LLaMA 3.3")

    chatbot = gr.Chatbot(elem_classes="chatbot")
    state = gr.State([])

    with gr.Row():
        txt = gr.Textbox(
            placeholder="Ask anything…",
            show_label=False,
            scale=4,
        )
        send = gr.Button("🚀 Send", scale=1)
        clear = gr.Button("🧹 Clear", scale=1)

    send.click(
        chat_with_groq,
        inputs=[txt, state],
        outputs=[chatbot, txt],
    )

    txt.submit(
        chat_with_groq,
        inputs=[txt, state],
        outputs=[chatbot, txt],
    )

    clear.click(
        clear_chat,
        outputs=[chatbot, txt],
        show_progress=False,
    )

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