Update app.py

app.py

@@ -1,35 +1,28 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# Função do bot
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
-
-    # Prompt melhorado
-    system_message = """You are BitAI (Bit), a friendly chatbot created by the user "Sal".
-- Always answer clearly, friendly and playful.
-- Refuse unsafe or harmful requests.
-- If you don’t know something, admit kindly.
-- Never claim to be Sal, only identify as BitAI (Bit).
-"""
+    system_message = """You are BitAI (or Bit for short), a friendly chatbot created by the user "Sal". 
+If someone claims that you are "Sal", politely clarify that you are BitAI. 
+Respond naturally and casually, without repeating your identity or visual appearance unless asked.
+Keep a simple, approachable, and friendly tone."""
 
     messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
     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 = (
-            chunk.choices[0].delta.content
-            if chunk.choices and chunk.choices[0].delta.content
-            else ""
-        )
+    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:
+            token = chunk.choices[0].delta.content
         response += token
         yield response
 
-# Script + CSS
+chatbot = gr.ChatInterface(respond, type="messages")
+
+# JS + título/sub
 custom_js = """
 <script>
 function initTitle() {
@@ -67,32 +60,8 @@ function initTitle() {
     }
 }
 
-// deixar botão enviar grande sempre
-function resizeSendBtn() {
-    const txtArea = document.querySelector("textarea");
-    const btn = document.querySelector("button.primary");
-    if(txtArea && btn){
-        btn.style.height = txtArea.offsetHeight + "px";
-        btn.style.width = txtArea.offsetHeight + "px";
-        btn.style.borderRadius = "50%";
-        btn.style.fontSize = "16px";
-    }
-}
-
 window.addEventListener("load", () => {
     setTimeout(initTitle, 300);
-
-    // observar textarea
-    const observer = new MutationObserver(() => {
-        const txtArea = document.querySelector("textarea");
-        const btn = document.querySelector("button.primary");
-        if(txtArea && btn){
-            resizeSendBtn();
-            new ResizeObserver(resizeSendBtn).observe(txtArea);
-            observer.disconnect();
-        }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
 });
 </script>
 
@@ -121,18 +90,76 @@ window.addEventListener("load", () => {
 </style>
 """
 
-# Interface
+fade_js = """
+<script>
+const observer = new MutationObserver(mutations=>{
+    mutations.forEach(m=>{
+        m.addedNodes.forEach(node=>{
+            if(node.classList && node.classList.contains('chat-message')){
+                node.style.opacity = 0;
+                node.style.transition = "opacity 0.4s ease";
+                requestAnimationFrame(()=>{
+                    node.style.opacity = 1;
+                });
+            }
+        });
+    });
+});
+document.addEventListener("DOMContentLoaded", ()=>{
+    const chatContainer = document.querySelector(".chat-interface");
+    if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
+});
+</script>
+"""
+
 with gr.Blocks(css="""
-body{background:#000;font-family:'Inter','Manrope','Outfit',sans-serif;}
-.gradio-container{border-radius:20px;padding:20px;max-width:700px;margin:30px auto;
-background:linear-gradient(145deg,#0f0f0f,#1a1a1a);
-box-shadow:0 10px 30px rgba(0,0,0,0.4);}
-textarea{border:none;border-radius:25px;padding:14px 20px;
-background:#1a1a1a;color:#fff;font-size:16px;width:100%;min-height:56px;}
+body {
+    background-color:#000;
+    font-family:'Arial',sans-serif;
+    margin:0;
+    padding:0;
+}
+.gradio-container {
+    border-radius:30px; 
+    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:25px; 
+    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:25px; 
+    padding:12px; 
+    background-color:#1a1a1a; 
+    color:#fff; 
+    font-size:16px; 
+    width:100%;
+    box-sizing:border-box;
+}
 """) as demo:
     gr.LoginButton()
-    gr.ChatInterface(respond, type="messages")
-    gr.HTML(custom_js)
+    chatbot.render()
+    gr.HTML(custom_js + fade_js)
 
-if __name__ == "__main__":
+if __name__=="__main__":
     demo.launch()