Update app.py

app.py

@@ -1,7 +1,6 @@
 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". 
@@ -9,7 +8,7 @@ You always respond politely and helpfully. If a user requests something appropri
 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})
@@ -22,7 +21,6 @@ Keep a simple, approachable, and friendly tone otherwise."""
         response += token
         yield response
 
-# JS para animações suaves
 fade_js = """
 <script>
 const observer = new MutationObserver(mutations=>{
@@ -40,22 +38,21 @@ const observer = new MutationObserver(mutations=>{
         });
     });
 });
-
 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
+    // auto resize do textarea
     const txt = document.querySelector("textarea");
     if(txt){
+        txt.style.transition = "height 0.2s ease";
         txt.addEventListener("input", ()=>{
-            txt.style.transition = "background-color 0.15s ease";
-            txt.style.backgroundColor = "#222";
-            setTimeout(()=> txt.style.backgroundColor="#1a1a1a",150);
+            txt.style.height = "auto";
+            txt.style.height = (txt.scrollHeight) + "px";
         });
     }
 
-    // Clique no botão anima
+    // animação de clique do botão
     const btn = document.querySelector(".send-btn");
     if(btn){
         btn.addEventListener("click", ()=>{
@@ -73,19 +70,32 @@ 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; 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;}
+
+/* input com botão dentro */
+.input-container {
+    display:flex; 
+    position:relative; 
+    margin-top:10px;
+}
+textarea {
+    border:none; outline:none; border-radius:45px; padding:12px 60px 12px 12px; 
+    background-color:#1a1a1a; color:#fff; font-size:16px; flex:1; 
+    min-height:48px; max-height:200px; box-sizing:border-box;
+    overflow:hidden; resize:none; transition:height 0.2s ease;
+}
+.send-btn {
+    position:absolute; right:4px; top:50%; transform:translateY(-50%);
+    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; 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")
-
     gr.HTML(fade_js)
 
 if __name__=="__main__":