Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+import time
 
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
@@ -18,82 +19,11 @@ Keep a simple, approachable, and friendly tone."""
         if chunk.choices and chunk.choices[0].delta.content:
             token = chunk.choices[0].delta.content
         response += token
-        yield response
 
-# Í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"/>
-    <circle class="dot eye-left"/>
-    <circle class="dot eye-right"/>
-    <circle class="dot extra-dot" cx="80" cy="78" r="8"/>
-</svg>
-
-<script>
-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');
-
-                    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});
-}
-
-document.addEventListener('DOMContentLoaded',addBitIconToBotMessages);
-addBitIconToBotMessages();
-</script>
-
-<style>
-.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>
-"""
+        # Yield por partes para dar efeito de digitação
+        for i in range(len(response)):
+            yield response[:i+1]
+            time.sleep(0.01)  # velocidade do "typing"
 
 chatbot = gr.ChatInterface(respond, type="messages")
 
@@ -106,9 +36,7 @@ body{background-color:#000;font-family:'Arial',sans-serif;}
 """) as demo:
     with gr.Sidebar():
         gr.LoginButton()
-
     chatbot.render()
-    gr.HTML(bit_icon_html)
 
 if __name__=="__main__":
     demo.launch()