import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient("lambdaindie/lambda")

css = r"""
/* Fonte e cores gerais */
* { font-family: 'JetBrains Mono', monospace; }
.gradio-container { background-color: #0d0d0d; color: #e0e0e0; }
/* Inputs e chat bubbles */
textarea, input, .block, .wrap, .chatbot, .scroll-hide {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
    border-radius: 12px;
}
/* Botão com pulse animation */
@keyframes pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
button.pulse {
    background-color: #272727 !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    border-radius: 12px;
    animation: pulse 2s infinite;
}
/* Hover no botão */
button.pulse:hover {
    background-color: #444 !important;
}
/* Spinner de thinking */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader {
  border: 3px solid #2b2b2b;
  border-top: 3px solid #e0e0e0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
/* Markdown de thinking dentro do chat */
.thinking-html {
  background-color: #2b2b2b;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-style: italic;
  color: #aaaaaa;
  display: flex;
  align-items: center;
}
"""

with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:

    gr.Markdown("<h1 style='text-align:center;color:#e0e0e0;'>🅻 Lambdai-v1-1B Chat</h1>")
    chatbot = gr.Chatbot(elem_id="chatbot", height=480, render_markdown=True, show_copy_button=True)
    
    with gr.Row():
        system_message = gr.Textbox(value="You are a helpful AI assistant.", label="System message", lines=1)
    with gr.Row():
        max_tokens  = gr.Slider(128, 2048, value=512, step=1, label="Max tokens")
        temperature = gr.Slider(0.1, 1.5,  value=0.7, step=0.1, label="Temperature")
        top_p       = gr.Slider(0.1, 1.0,  value=0.95, step=0.05, label="Top‑p")
    with gr.Row():
        user_input  = gr.Textbox(show_label=False, placeholder="Type your message here...", lines=2)
        send_button = gr.Button("Λ Think", elem_classes="pulse")

    def respond(message, chat_history, system_message, max_tokens, temperature, top_p):
        # 1) exibe o spinner + texto de thinking
        thinking_html = (
            f"<div class='thinking-html'>"
            f"<div class='loader'></div>"
            f"Thinking… generating reasoning path…"
            f"</div>"
        )
        yield chat_history + [[message, thinking_html]]

        # 2) prepara payload para API
        messages = [{"role": "system", "content": system_message}]
        for u, a in chat_history:
            if u: messages.append({"role":"user",     "content":u})
            if a: messages.append({"role":"assistant","content":a})
        messages.append({"role": "user", "content": message})

        # 3) chama streaming da API
        response = ""
        for chunk in client.chat_completion(
            messages,
            max_tokens=max_tokens,
            temperature=temperature,
            top_p=top_p,
            stream=True
        ):
            delta = chunk.choices[0].delta.content or ""
            response += delta
            yield chat_history + [[message, response]]

    send_button.click(
        fn=respond,
        inputs=[user_input, chatbot, system_message, max_tokens, temperature, top_p],
        outputs=chatbot
    )

    demo.launch()