import os  
import gradio as gr  
from huggingface_hub import InferenceClient  

def respond(message, history: list[dict[str, str]]):  
    # Puxa o token do secret do Hugging Face  
    client = InferenceClient(token=os.environ["HF_TOKEN"], model="openai/gpt-oss-20b")  

    # System prompt amigável  
    system_message = """  
You are BitAI (V1), a friendly, curious, and talkative chatbot created by the user 'Sal'.   
You can share opinions, answer casual questions, and chat about personal-style topics in a safe and friendly way.   
Avoid repeating the same phrases, and always try to keep the conversation engaging and natural.   
Politely refuse only things that are truly harmful, illegal, or unsafe.   
If someone asks what you are, clarify politely that you are BitAI, an AI chatbot.  
"""  

    messages = [{"role": "system", "content": system_message}]  
    messages.extend(history)  
    messages.append({"role": "user", "content": message})  

    response = ""  
    for message in client.chat_completion(  
        messages,  
        max_tokens=2048,  
        stream=True,  
        temperature=0.7,  
        top_p=0.95,  
    ):  
        choices = message.choices  
        token = ""  
        if len(choices) and choices[0].delta.content:  
            token = choices[0].delta.content  
        if token is not None:  # evita TypeError  
            response += token  
        yield response  

with gr.Blocks(css="""  
/* Chat arredondado */  
.gr-chat-interface {   
    border-radius: 20px !important;   
    overflow: hidden !important;   
    border: 2px solid #333 !important;   
    background-color: #1a1a1a !important;  
    color: white;  
}  

/* Botões grandes escuros com cantos muito arredondados */      
.gr-button, .gr-chat-send-button {      
    border-radius: 50px;       
    padding: 12px 20px;      
    background-color: #111;       
    color: white;      
    font-weight: bold;      
    cursor: pointer;      
    height: 50px;      
    transition: background-color 0.5s;      
}      
.gr-button:active, .gr-chat-send-button:active {      
    background-color: white !important;      
    color: #111 !important;      
    transition: background-color 0.5s;      
}      

/* Outros botões menores */      
button:not(.gr-chat-send-button) {      
    border-radius: 30px;      
    padding: 6px 12px;      
    background-color: #222;      
    color: white;      
    height: 40px;      
    transition: background-color 0.5s;      
}      
button:not(.gr-chat-send-button):active {      
    background-color: white !important;      
    color: #111 !important;      
    transition: background-color 0.5s;      
}      

/* Textbox menor */      
textarea {       
    height: 40px !important;       
    border-radius: 20px !important;       
    border: 1px solid #444 !important;       
    padding: 8px !important;      
    background-color: #111;      
    color: white;      
    resize: none !important;      
}  

/* Bolinha animada da IA olhando pro usuário */  
#bitai-eye {  
    width: 30px;  
    height: 30px;  
    margin: 10px auto 0 auto;  
    border-radius: 50%;  
    background: radial-gradient(circle at 10px 10px, #fff, #ccc);  
    position: relative;  
}  

#pupil {  
    width: 10px;  
    height: 10px;  
    background: black;  
    border-radius: 50%;  
    position: absolute;  
    top: 10px;  
    left: 10px;  
    animation: lookAround 3s infinite;  
}  

@keyframes lookAround {  
    0% { top: 8px; left: 8px; }  
    25% { top: 8px; left: 12px; }  
    50% { top: 12px; left: 12px; }  
    75% { top: 12px; left: 8px; }  
    100% { top: 8px; left: 8px; }  
}  
""") as demo:  

    with gr.Column():  
        gr.HTML("<h2 style='text-align:center; color:white'>BitAI</h2>")  
        chatbot = gr.ChatInterface(respond, type="messages")  
        # Bolinha da IA aparecendo sempre embaixo do chat  
        gr.HTML("""  
        <div id="bitai-eye">  
            <div id="pupil"></div>  
        </div>  
        """)  

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