Update app.py

app.py

@@ -1,6 +1,5 @@
 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):
@@ -15,10 +14,8 @@ 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 = ""
+    # Stream das respostas
     for message_chunk in client.chat_completion(
         messages,
         max_tokens=512,
@@ -31,13 +28,9 @@ Keep a simple, approachable, and friendly tone."""
         if len(choices) and choices[0].delta.content:
             token = choices[0].delta.content
         response += token
-        # Atualiza resposta e mantém “thinking”
-        yield {"response": response, "mode": "thinking"}
-
-    # Quando terminou, volta para normal
-    yield {"response": response, "mode": "normal"}
+        yield response  # só retorna a resposta
 
-# HTML do ícone da BitAI (menor)
+# HTML e JS do ícone BitAI embaixo do chat
 bit_icon_html = """
 <div style="text-align:center; margin-top:10px;">
   <div class="wrap" id="bit" style="width:50px; height:50px; margin:auto;">
@@ -52,10 +45,21 @@ bit_icon_html = """
 
 <script>
   const wrap = document.getElementById('bit');
-  const setThinking = (thinking) => {
-    wrap.classList.toggle('thinking', thinking);
-  }
-  window.setThinking = setThinking; // expõe global pra JS
+
+  // Observa novas mensagens do bot e dispara animação thinking
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach(mutation => {
+      mutation.addedNodes.forEach(node => {
+        if (node.classList && node.classList.contains('bot')) {
+          wrap.classList.add('thinking');
+          setTimeout(()=>{ wrap.classList.remove('thinking'); }, 1200);
+        }
+      });
+    });
+  });
+
+  const chatContainer = document.querySelector('.gradio-chatbot-container');
+  if(chatContainer) observer.observe(chatContainer, { childList: true, subtree: true });
 </script>
 
 <style>
@@ -75,15 +79,7 @@ bit_icon_html = """
 </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"
-)
+chatbot = gr.ChatInterface(respond, type="messages")
 
 with gr.Blocks(css="""
     body { background-color: #f0f0f0; font-family: 'Arial', sans-serif; }
@@ -96,7 +92,7 @@ with gr.Blocks(css="""
         gr.LoginButton()
     
     chatbot.render()
-    # Ícone abaixo do chat
+    # Ícone animado no final do chat
     gr.HTML(bit_icon_html)
 
 if __name__ == "__main__":