Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
+# Função principal que chama o modelo
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
     system_message = """You are BitAI (or Bit for short), a friendly chatbot created by the user "Sal". 
@@ -15,13 +16,15 @@ Keep a simple, approachable, and friendly tone otherwise."""
 
     response = ""
     for chunk in client.chat_completion(messages, max_tokens=512, stream=True, temperature=0.7, top_p=0.95):
+        token = ""
         if chunk.choices and chunk.choices[0].delta.content:
-            response += chunk.choices[0].delta.content
+            token = chunk.choices[0].delta.content
+        response += token
         yield response
 
+# JS para animações suaves
 fade_js = """
 <script>
-// Fade-in das mensagens
 const observer = new MutationObserver(mutations=>{
     mutations.forEach(m=>{
         m.addedNodes.forEach(node=>{
@@ -38,19 +41,21 @@ const observer = new MutationObserver(mutations=>{
     });
 });
 
-// Auto-expand textarea
 document.addEventListener("DOMContentLoaded", ()=>{
     const chatContainer = document.querySelector(".chat-interface");
     if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
 
+    // Animação sutil ao digitar na textarea
     const txt = document.querySelector("textarea");
     if(txt){
         txt.addEventListener("input", ()=>{
-            txt.style.height = "auto";
-            txt.style.height = txt.scrollHeight + "px"; // cresce suavemente
+            txt.style.transition = "background-color 0.15s ease";
+            txt.style.backgroundColor = "#222";
+            setTimeout(()=> txt.style.backgroundColor="#1a1a1a",150);
         });
     }
 
+    // Clique no botão anima
     const btn = document.querySelector(".send-btn");
     if(btn){
         btn.addEventListener("click", ()=>{
@@ -68,61 +73,18 @@ body { background-color:#000; font-family:'Arial',sans-serif; margin:0; padding:
 .chat-message { border-radius:45px; padding:14px 18px; margin:8px 0; display:flex; flex-direction:column; opacity:0;}
 .chat-message.user { background-color:#1f1f1f; color:#fff; align-items:flex-end;}
 .chat-message.bot { background-color:#2b2b2b; color:#fff; align-items:flex-start;}
-
-/* input com botão dentro */
-.input-wrapper {
-    display: flex;
-    align-items: flex-end;
-    position: relative;
-    margin-top: 10px;
-    border-radius:45px;
-    background-color:#1a1a1a;
-    padding-right:60px; /* espaço pro botão */
-}
-textarea {
-    border:none;
-    outline:none;
-    border-radius:45px;
-    padding:12px 16px;
-    background:transparent;
-    color:#fff;
-    font-size:16px;
-    width:100%;
-    resize:none;
-    transition: height 0.2s ease;
-}
-.send-btn {
-    position:absolute;
-    right:8px;
-    bottom:8px;
-    border:none;
-    border-radius:45px;
-    background-color:#444;
-    color:#fff;
-    width:48px;
-    height:48px;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    cursor:pointer;
-    transition: transform 0.1s ease, background-color 0.2s ease;
-}
-.send-btn:hover { background-color:#555; }
-
+textarea { border:none; outline:none; border-radius:45px; padding:12px; background-color:#1a1a1a; color:#fff; font-size:16px; flex:1; height:48px; box-sizing:border-box;}
+.send-btn { border:none; border-radius:45px; background-color:#444; color:#fff; width:48px; height:48px; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:8px; transition:transform 0.1s ease;}
+.send-btn:hover { background-color:#555;}
 .gr-button.gr-login { border-radius:45px !important; background-color:#222 !important; color:#fff !important; margin-bottom:15px;}
 .gr-button.gr-login:hover { background-color:#444 !important;}
+.input-container { display:flex; margin-top:10px; }
 """) as demo:
 
+    # Login direto na página
     gr.LoginButton()
-    chatbot = gr.ChatInterface(respond, type="messages")
 
-    # Container de input + botão
-    with gr.Row(elem_classes=["input-wrapper"]):
-        textbox = gr.Textbox(label="", placeholder="Pergunte qualquer coisa...", lines=1)
-        send = gr.Button("→", elem_classes=["send-btn"])
-
-    # Conecta botão ao chatbot
-    send.click(chatbot.submit, inputs=[textbox], outputs=[chatbot])
+    chatbot = gr.ChatInterface(respond, type="messages")
 
     gr.HTML(fade_js)