Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
+def respond(message, history, hf_token):
     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". 
 Respond naturally. Respectfully refuse harmful requests, and if user insists, tell them to stop using the service."""
@@ -46,7 +46,7 @@ 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;}
-textarea { border:none; outline:none; border-radius:45px; padding:12px; background-color:#1a1a1a; color:#fff; font-size:16px; width:calc(100% - 60px); box-sizing:border-box; }
+textarea { border:none; outline:none; border-radius:45px; padding:12px; background-color:#1a1a1a; color:#fff; font-size:16px; width:calc(100% - 70px); box-sizing:border-box; }
 .send-btn { border:none; border-radius:45px; background-color:#444; color:#fff; width:60px; height:60px; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:8px;}
 .send-btn:hover { background-color:#555;}
 .gr-button.gr-login { border-radius:45px !important; background-color:#222 !important; color:#fff !important; margin-bottom:15px;}
@@ -54,20 +54,19 @@ textarea { border:none; outline:none; border-radius:45px; padding:12px; backgrou
 .input-container { display:flex; margin-top:10px; }
 """) as demo:
 
-    # Login direto na página
-    gr.LoginButton()
+    gr.LoginButton()  # login direto
 
-    with gr.Row():
-        chatbot = gr.ChatInterface(respond, type="messages")
-    
-    # Campo de texto + botão enviar
-    with gr.Row(elem_classes=["input-container"]):
-        textbox = gr.Textbox(label="", placeholder="Escreva algo...", lines=1)
-        send = gr.Button("→", elem_classes=["send-btn"])
-    
-    # Conecta botão ao chatbot
-    send.click(chatbot.submit, inputs=[textbox], outputs=[chatbot])
+    chatbot = gr.Chatbot(elem_classes=["chat-interface"])
+    textbox = gr.Textbox(label="", placeholder="Escreva algo...", lines=1)
+    send = gr.Button("→", elem_classes=["send-btn"])
 
+    # quando clicar enviar, atualiza o chatbot
+    def submit(message, history, hf_token):
+        for r in respond(message, history or [], hf_token):
+            yield history + [[message, r]]
+
+    send.click(submit, inputs=[textbox, chatbot, gr.State()], outputs=[chatbot])
+    
     gr.HTML(fade_js)
 
 if __name__=="__main__":