Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
+# Função principal da IA
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
 
@@ -28,70 +29,64 @@ Keep a simple, approachable, and friendly tone."""
         response += token
         yield response
 
+# HTML do ícone da BitAI
 bit_icon_html = """
-<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"/>
-      <circle class="dot eye-right"/>
-      <circle class="dot extra-dot" cx="80" cy="78" r="8"/>
-    </svg>
-  </div>
-</div>
+<svg class="bit-icon" viewBox="0 0 160 160">
+    <circle class="face" cx="80" cy="80" r="72"/>
+    <circle class="dot eye-left"/>
+    <circle class="dot eye-right"/>
+    <circle class="dot extra-dot" cx="80" cy="78" r="8"/>
+</svg>
 
 <script>
-function initBitAI() {
-  const wrap = document.getElementById('bit');
-  
-  // Espera chat existir
-  const chatContainer = document.querySelector('.chat-interface');
-  if(!chatContainer) return setTimeout(initBitAI, 500);
+function animateEyes(node){
+    const wrap = node.querySelector('.bit-icon');
+    wrap.classList.add('thinking');
+    setTimeout(()=> wrap.classList.remove('thinking'), 1200);
+}
 
-  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);
-        }
-      });
+// Observa novas mensagens do bot
+const chatContainer = document.querySelector('.chat-interface');
+if(chatContainer){
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(m => {
+            m.addedNodes.forEach(node => {
+                if(node.classList && node.classList.contains('bot')){
+                    animateEyes(node);
+                    // move o ícone para o topo da mensagem
+                    node.insertAdjacentElement('afterbegin', wrap.cloneNode(true));
+                }
+            });
+        });
     });
-  });
-
-  observer.observe(chatContainer, { childList: true, subtree: true });
+    observer.observe(chatContainer, {childList:true, subtree:true});
 }
-
-// Inicia observador após o DOM carregar
-document.addEventListener('DOMContentLoaded', initBitAI);
-initBitAI();
 </script>
 
 <style>
-  .face{ fill:#0b1020; }
-  .dot{ fill:#fff; transition: all 500ms ease; }
-  .eye-left  { cx:56; cy:62; r:10; }
-  .eye-right { cx:104; cy:62; r:10; }
-  .wrap.thinking .eye-left  { cx:48; cy:78; r:8; }
-  .wrap.thinking .eye-right { cx:112; cy:78; r:8; }
-  .extra-dot{ opacity:0; transform:translateY(10%); transition: all 500ms ease; }
-  .wrap.thinking .extra-dot{ opacity:1; transform:translateY(0); }
-  .wrap.thinking .dot{ animation: wave 1.4s infinite ease-in-out; }
-  .wrap.thinking .eye-left { animation-delay:0s; }
-  .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%); } }
+.bit-icon{ width:30px; height:30px; margin-right:5px; vertical-align:middle;}
+.face{ fill:#0b1020; }
+.dot{ fill:#fff; transition: all 500ms ease; }
+.eye-left { cx:56; cy:62; r:10;}
+.eye-right{ cx:104; cy:62; r:10;}
+.extra-dot{ opacity:0; transform:translateY(10%); transition: all 500ms ease;}
+.wrap.thinking .extra-dot{ opacity:1; transform:translateY(0);}
+.wrap.thinking .dot{ animation: wave 1.4s infinite ease-in-out;}
+.wrap.thinking .eye-left { animation-delay:0s; }
+.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%);}}
 </style>
 """
 
 chatbot = gr.ChatInterface(respond, 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);}
-    .chat-message { border-radius: 20px; padding: 10px 15px; margin: 5px 0;}
+    body { background-color: #000; font-family: 'Arial', sans-serif; }
+    .gradio-container { border-radius: 20px; padding: 15px; max-width:700px; margin:20px auto; background-color:#fff; }
+    .chat-message { border-radius: 15px; padding:10px 15px; margin:5px 0; display:flex; align-items:flex-start;}
     .chat-message.user { background-color: #dceefc; }
-    .chat-message.bot { background-color: #e8e8e8; }
+    .chat-message.bot { background-color: #f0f0f0; justify-content:flex-start; }
 """) as demo:
     with gr.Sidebar():
         gr.LoginButton()