Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+import asyncio
 
 # Função principal da IA
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
@@ -14,6 +15,9 @@ Keep a simple, approachable, and friendly tone."""
     messages.extend(history)
     messages.append({"role": "user", "content": message})
 
+    # Primeiro: avisa que a IA está pensando
+    yield {"response": "", "mode": "thinking"}
+
     response = ""
     for message_chunk in client.chat_completion(
         messages,
@@ -27,14 +31,16 @@ Keep a simple, approachable, and friendly tone."""
         if len(choices) and choices[0].delta.content:
             token = choices[0].delta.content
         response += token
-        yield response
+        # Atualiza resposta e mantém “thinking”
+        yield {"response": response, "mode": "thinking"}
 
-chatbot = gr.ChatInterface(respond, type="messages")
+    # Quando terminou, volta para normal
+    yield {"response": response, "mode": "normal"}
 
-# HTML do ícone da BitAI
+# HTML do ícone da BitAI (menor)
 bit_icon_html = """
-<div style="text-align:center; margin-bottom:10px;">
-  <div class="wrap" id="bit" style="width:100px; height:100px; margin:auto;">
+<div style="text-align:center; margin-top:10px;">
+  <div class="wrap" id="bit" style="width:50px; height:50px; margin:auto;">
     <svg viewBox="0 0 160 160">
       <circle class="face" cx="80" cy="80" r="72"/>
       <circle class="dot eye-left"/>
@@ -42,18 +48,14 @@ bit_icon_html = """
       <circle class="dot extra-dot" cx="80" cy="78" r="8"/>
     </svg>
   </div>
-  <div class="label"><b>bitAI</b> — <span id="mode">normal</span></div>
 </div>
 
 <script>
   const wrap = document.getElementById('bit');
-  const mode = document.getElementById('mode');
-  let thinking = false;
-  wrap.addEventListener('click', ()=>{
-    thinking = !thinking;
+  const setThinking = (thinking) => {
     wrap.classList.toggle('thinking', thinking);
-    mode.textContent = thinking ? 'pensando...' : 'normal';
-  });
+  }
+  window.setThinking = setThinking; // expõe global pra JS
 </script>
 
 <style>
@@ -70,10 +72,19 @@ bit_icon_html = """
   .wrap.thinking .extra-dot{ animation-delay:0.25s; }
   .wrap.thinking .eye-right{ animation-delay:0.5s; }
   @keyframes wave { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12%); } }
-  .label{ text-align:center; font-family:sans-serif; color:#223; margin-top:4px;}
 </style>
 """
 
+# Função wrapper pra atualizar o modo do ícone via JS
+def respond_wrapper(message, history, hf_token):
+    for output in respond(message, history, hf_token):
+        # Cada yield retorna dict com resposta e modo
+        yield gr.update(value=output["response"]), gr.HTML.update(value=f"<script>window.setThinking({str(output['mode']=='thinking').lower()});</script>")
+
+chatbot = gr.ChatInterface(
+    respond_wrapper, type="messages"
+)
+
 with gr.Blocks(css="""
     body { background-color: #f0f0f0; font-family: 'Arial', sans-serif; }
     .gradio-container { border-radius: 25px; padding: 20px; max-width: 700px; margin: 20px auto; background-color: #fafafa; box-shadow: 0 4px 20px rgba(0,0,0,0.05);}
@@ -84,10 +95,9 @@ with gr.Blocks(css="""
     with gr.Sidebar():
         gr.LoginButton()
     
-    # Coloca o ícone no topo da UI
-    gr.HTML(bit_icon_html)
-    
     chatbot.render()
+    # Ícone abaixo do chat
+    gr.HTML(bit_icon_html)
 
 if __name__ == "__main__":
     demo.launch()