Update app.py

app.py

@@ -8,21 +8,20 @@ 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})
 
     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:
-            token = chunk.choices[0].delta.content
-        response += token
+            response += chunk.choices[0].delta.content
         yield response
 
 fade_js = """
 <script>
+// Fade-in das mensagens
 const observer = new MutationObserver(mutations=>{
     mutations.forEach(m=>{
         m.addedNodes.forEach(node=>{
@@ -38,21 +37,20 @@ 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});
 
-    // auto resize do textarea
     const txt = document.querySelector("textarea");
     if(txt){
-        txt.style.transition = "height 0.2s ease";
         txt.addEventListener("input", ()=>{
             txt.style.height = "auto";
-            txt.style.height = (txt.scrollHeight) + "px";
+            txt.style.height = txt.scrollHeight + "px"; // cresce suavemente
         });
     }
 
-    // animação de clique do botão
     const btn = document.querySelector(".send-btn");
     if(btn){
         btn.addEventListener("click", ()=>{
@@ -72,30 +70,60 @@ body { background-color:#000; font-family:'Arial',sans-serif; margin:0; padding:
 .chat-message.bot { background-color:#2b2b2b; color:#fff; align-items:flex-start;}
 
 /* input com botão dentro */
-.input-container {
-    display:flex; 
-    position:relative; 
-    margin-top:10px;
+.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 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;
+    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: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;
+    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; }
+
 .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;}
 """) as demo:
 
     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])
+
     gr.HTML(fade_js)
 
 if __name__=="__main__":