Update app.py

app.py

@@ -1,21 +1,29 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-def respond(message, history, hf_token):
+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". 
-Respond naturally. Respectfully refuse harmful requests, and if user insists, tell them to stop using the service."""
-    
-    messages = [{"role":"system","content":system_message}]
+You always respond politely and helpfully. If a user requests something appropriate, fulfill it. 
+If a user requests something harmful, illegal, or inappropriate, politely refuse. 
+If a user keeps insisting on harmful requests, firmly tell them to stop and that they cannot use the service for that purpose.
+Keep a simple, approachable, and friendly tone otherwise."""
+
+    messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
-    messages.append({"role":"user","content":message})
+    messages.append({"role": "user", "content": message})
 
     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
 
+chatbot = gr.ChatInterface(respond, type="messages")
+
 fade_js = """
 <script>
 const observer = new MutationObserver(mutations=>{
@@ -23,50 +31,101 @@ const observer = new MutationObserver(mutations=>{
         m.addedNodes.forEach(node=>{
             if(node.classList && node.classList.contains('chat-message')){
                 node.style.opacity = 0;
-                node.style.transform = 'translateY(20px)';
-                node.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                node.style.transition = "opacity 0.4s ease, transform 0.4s ease";
+                node.style.transform = "translateY(10px)";
                 requestAnimationFrame(()=>{
                     node.style.opacity = 1;
-                    node.style.transform = 'translateY(0)';
+                    node.style.transform = "translateY(0)";
                 });
             }
         });
     });
 });
+
 document.addEventListener("DOMContentLoaded", ()=>{
     const chatContainer = document.querySelector(".chat-interface");
-    if(chatContainer) observer.observe(chatContainer,{childList:true,subtree:true});
+    if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
 });
 </script>
 """
 
 with gr.Blocks(css="""
-body { background-color:#000; font-family:'Arial',sans-serif; margin:0; padding:0; }
-.gradio-container { border-radius:45px; padding:20px; max-width:700px; margin:30px auto; background-color:#121212; box-shadow:0 6px 25px rgba(0,0,0,0.3);}
-.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% - 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;}
-.gr-button.gr-login:hover { background-color:#444 !important;}
-.input-container { display:flex; margin-top:10px; }
+body {
+    background-color:#000;
+    font-family:'Arial',sans-serif;
+    margin:0;
+    padding:0;
+}
+.gradio-container {
+    border-radius:45px; 
+    padding:20px; 
+    max-width:700px; 
+    margin:30px auto; 
+    background-color:#121212; 
+    box-shadow:0 6px 25px rgba(0,0,0,0.3);
+}
+.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:100%;
+    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;
+}
+.send-btn:hover {
+    background-color:#555;
+}
+/* login button default Gradio */
+.gr-button.gr-login {
+    border-radius:45px !important;
+    background-color:#444 !important;
+    color:#fff !important;
+    margin-bottom:15px;
+}
+.gr-button.gr-login:hover {
+    background-color:#555 !important;
+}
 """) as demo:
 
-    gr.LoginButton()  # login direto
-
-    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])
+    # Login direto na página
+    gr.LoginButton()
     
+    chatbot.render()
     gr.HTML(fade_js)
 
 if __name__=="__main__":