import gradio as gr
from openai import OpenAI

# 🔑 ENTER YOUR GROQ API KEY HERE
GROQ_API_KEY = "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"
from openai import OpenAI

# Groq client
client = OpenAI(
    api_key=GROQ_API_KEY,
    base_url="https://api.groq.com/openai/v1",
)

# --- iPhone-style CSS ---
iphone_css = """
#chatbot {
    background: #F5F5F7;
    border-radius: 20px !important;
    padding: 15px;
}

.message {
    padding: 10px 14px;
    border-radius: 18px;
    margin: 6px 0;
    max-width: 80%;
    line-height: 1.4;
    font-size: 16px;
}

.user-msg {
    background: #007AFF;
    color: white;
    margin-left: auto;
}

.bot-msg {
    background: #E5E5EA;
    color: black;
    margin-right: auto;
}

.input-row {
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding: 0 12px;
}
"""

# --- Chat function ---
def chat(query, history):
    history = history or []

    try:
        response = client.responses.create(
            model="openai/gpt-oss-20b",
            input=query
        ).output_text
    except Exception as e:
        response = f"⚠️ Error: {e}"

    history.append({"role": "user", "content": query})
    history.append({"role": "assistant", "content": response})

    return history, history


# --- Interface ---
with gr.Blocks(css=iphone_css, theme=gr.themes.Base()) as demo:

    gr.Markdown(
        "<h2 style='text-align:center; font-family:-apple-system;'>🍏 iPhone-Style Mini Chatbot</h2>"
    )

    chatbot = gr.Chatbot(type="messages", elem_id="chatbot", height=520)

    with gr.Row(elem_classes="input-row"):
        txt = gr.Textbox(
            placeholder="Message…",
            show_label=False,
            interactive=True,
            scale=8,
        )
        btn = gr.Button("Send", scale=1)

    txt.submit(chat, [txt, chatbot], [chatbot, chatbot])
    btn.click(chat, [txt, chatbot], [chatbot, chatbot])

demo.launch()

# Groq client
client = OpenAI(
    api_key=GROQ_API_KEY,
    base_url="https://api.groq.com/openai/v1",
)

# --- iPhone-style CSS ---
iphone_css = """
#chatbot {
    background: #F5F5F7;
    border-radius: 20px !important;
    padding: 15px;
}

.message {
    padding: 10px 14px;
    border-radius: 18px;
    margin: 6px 0;
    max-width: 80%;
    line-height: 1.4;
    font-size: 16px;
}

.user-msg {
    background: #007AFF;
    color: white;
    margin-left: auto;
}

.bot-msg {
    background: #E5E5EA;
    color: black;
    margin-right: auto;
}

.input-row {
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding: 0 12px;
}
"""

# --- Chat function ---
def chat(query, history):
    history = history or []

    try:
        response = client.responses.create(
            model="openai/gpt-oss-20b",
            input=query
        ).output_text
    except Exception as e:
        response = f"⚠️ Error: {e}"

    history.append({"role": "user", "content": query})
    history.append({"role": "assistant", "content": response})

    return history, history


# --- Interface ---
with gr.Blocks(css=iphone_css, theme=gr.themes.Base()) as demo:

    gr.Markdown(
        "<h2 style='text-align:center; font-family:-apple-system;'>🍏 iPhone-Style Mini Chatbot</h2>"
    )

    chatbot = gr.Chatbot(type="messages", elem_id="chatbot", height=520)

    with gr.Row(elem_classes="input-row"):
        txt = gr.Textbox(
            placeholder="Message…",
            show_label=False,
            interactive=True,
            scale=8,
        )
        btn = gr.Button("Send", scale=1)

    txt.submit(chat, [txt, chatbot], [chatbot, chatbot])
    btn.click(chat, [txt, chatbot], [chatbot, chatbot])

demo.launch()