Update app.py

app.py

@@ -1,35 +1,26 @@
 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")
-
     system_message = """You are BitAI (or Bit for short), a friendly chatbot created by the user "Sal". 
 If someone claims that you are "Sal", politely clarify that you are BitAI. 
 Respond naturally and casually, without repeating your identity or visual appearance unless asked.
-Keep a simple, approachable, and friendly tone. do not modify anything else on user thing unless they say what they want to modify on the thing or code"""
+Keep a simple, approachable, and friendly tone."""
 
     messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
     messages.append({"role": "user", "content": message})
 
     response = ""
-    for message_chunk in client.chat_completion(
-        messages,
-        max_tokens=512,
-        stream=True,
-        temperature=0.7,
-        top_p=0.95,
-    ):
+    for chunk in client.chat_completion(messages, max_tokens=512, stream=True, temperature=0.7, top_p=0.95):
         token = ""
-        choices = message_chunk.choices
-        if len(choices) and choices[0].delta.content:
-            token = choices[0].delta.content
+        if chunk.choices and chunk.choices[0].delta.content:
+            token = chunk.choices[0].delta.content
         response += token
         yield response
 
-# HTML do ícone da BitAI
+# Ícone do BitAI que vai dentro de cada balão do bot
 bit_icon_html = """
 <svg class="bit-icon" viewBox="0 0 160 160">
     <circle class="face" cx="80" cy="80" r="72"/>
@@ -39,42 +30,67 @@ bit_icon_html = """
 </svg>
 
 <script>
-function animateEyes(node){
-    const wrap = node.querySelector('.bit-icon');
-    wrap.classList.add('thinking');
-    setTimeout(()=> wrap.classList.remove('thinking'), 1200);
-}
+function addBitIconToBotMessages(){
+    const chatContainer = document.querySelector('.chat-interface');
+    if(!chatContainer) return setTimeout(addBitIconToBotMessages,500);
+
+    const observer = new MutationObserver(mutations=>{
+        mutations.forEach(m=>{
+            m.addedNodes.forEach(node=>{
+                if(node.classList && node.classList.contains('bot') && !node.querySelector('.bit-icon')){
+                    const svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
+                    svg.innerHTML = `<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.setAttribute('class','bit-icon');
+                    svg.setAttribute('viewBox','0 0 160 160');
+                    svg.style.width='30px';
+                    svg.style.height='30px';
+                    svg.style.marginTop='5px';
+                    svg.style.display='block';
+                    node.appendChild(svg);
+
+                    // animação de "lendo"
+                    const left = svg.querySelector('.eye-left');
+                    const right = svg.querySelector('.eye-right');
+                    const extra = svg.querySelector('.extra-dot');
 
-// 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));
+                    let interval = setInterval(()=>{
+                        const dx = (Math.random()*4)-2;
+                        const dy = (Math.random()*4)-2;
+                        left.setAttribute('cx',56+dx);
+                        left.setAttribute('cy',62+dy);
+                        right.setAttribute('cx',104+dx);
+                        right.setAttribute('cy',62+dy);
+                        extra.setAttribute('cx',80+dx);
+                        extra.setAttribute('cy',78+dy);
+                    },100);
+
+                    setTimeout(()=>{
+                        clearInterval(interval);
+                        left.setAttribute('cx',56); left.setAttribute('cy',62);
+                        right.setAttribute('cx',104); right.setAttribute('cy',62);
+                        extra.setAttribute('cx',80); extra.setAttribute('cy',78);
+                    },1200);
                 }
             });
         });
     });
-    observer.observe(chatContainer, {childList:true, subtree:true});
+
+    observer.observe(chatContainer,{childList:true, subtree:true});
 }
+
+document.addEventListener('DOMContentLoaded',addBitIconToBotMessages);
+addBitIconToBotMessages();
 </script>
 
 <style>
-.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;}
+.bit-icon .face{fill:#0b1020;}
+.bit-icon .dot{fill:#fff; transition: all 500ms ease;}
+.bit-icon .extra-dot{opacity:0; transform:translateY(10%); transition: all 500ms ease;}
+.bit-icon.thinking .extra-dot{opacity:1; transform:translateY(0);}
+.bit-icon.thinking .dot{animation: wave 1.4s infinite ease-in-out;}
 @keyframes wave{0%,100%{transform:translateY(0);}50%{transform:translateY(-12%);}}
 </style>
 """
@@ -82,17 +98,17 @@ if(chatContainer){
 chatbot = gr.ChatInterface(respond, type="messages")
 
 with gr.Blocks(css="""
-    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: #f0f0f0; justify-content:flex-start; }
+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; flex-direction:column;}
+.chat-message.user{background-color:#dceefc; align-items:flex-end;}
+.chat-message.bot{background-color:#f0f0f0; align-items:flex-start;}
 """) as demo:
     with gr.Sidebar():
         gr.LoginButton()
-    
+
     chatbot.render()
     gr.HTML(bit_icon_html)
 
-if __name__ == "__main__":
+if __name__=="__main__":
     demo.launch()