# Pingue-pongue Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. > Pingue-pongue é um componente exclusivo do THM Componentes que entrega pronta a conversa de um assistente de IA: respostas em streaming com markdown seguro, código com botão Copiar, regenerar e editar com navegação entre versões, feedback com comentário e rolagem inteligente. Conecta a um backend real por uma função geradora assíncrona. Serve para atendimento e copilotos. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/pingue-pongue/ ## Como ele é Parece um app de mensagens com um assistente do outro lado. No topo ficam o avatar com iniciais em degradê, o nome do assistente e o status digitando. Suas mensagens aparecem à direita em balões anil com texto branco; as respostas ficam à esquerda em balões brancos com borda, com negrito, listas e blocos de código formatados. Enquanto a resposta não chega, três pontinhos pulsam; depois o texto entra aos poucos com um cursor piscando. Ao passar o mouse, surgem copiar, editar, regenerar e os polegares, e mensagens com versões mostram setas e um contador como 2/3. Embaixo, a caixa de mensagem tem anexo e um botão que vira Parar. ## Você pode estar procurando isto se pediu algo assim - “uma tela de chat igual ao ChatGPT para o meu app” - “conversa com IA em que a resposta aparece aos poucos” - “botão de gerar outra resposta e alternar entre as versões” - “chat de atendimento com polegar para cima e para baixo em cada resposta” - “mostrar código na resposta da IA com botão de copiar” - “editar a pergunta já enviada e refazer a resposta” - “chat que não pula para o fim enquanto eu leio mensagens antigas” ## Também chamado de chat de IA, interface de chat, thread de conversa, conversa com assistente, chat UI, AI chat interface, message branching, streaming chat ## Quando usar - Assistentes de atendimento que conversam com o cliente dentro do produto - Copilotos internos para equipes de vendas, suporte ou operação - Agentes de produto que respondem com listas, citações e trechos de código - Protótipos de produto de IA que precisam de uma conversa completa antes do backend ## Quando evitar - Envio real de arquivos sem adaptação, já que o botão de anexo da demonstração só adiciona exemplos - Perguntas e respostas de uma linha só, em que uma caixa de prompt simples basta ## Como pedir para a sua IA ```text Crie uma conversa de assistente de IA no meu app ligada à minha API de streaming: respostas em markdown seguro com código copiável, regenerar e editar com navegação entre versões, polegares com comentário, rolagem que respeita a leitura e anúncios para leitor de tela. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Pingue-pongue ### Como ligo Pingue-pongue ao meu modelo de IA? Passe na prop responder uma função geradora assíncrona que recebe o prompt, o histórico e o número da versão e devolve a resposta em pedaços. Pingue-pongue mostra cada pedaço assim que chega, permite parar a geração e guarda as mensagens por v-model, numa árvore em que cada uma aponta para a anterior. ### O markdown de Pingue-pongue é seguro? É. Pingue-pongue usa um parser próprio e monta os elementos sem v-html, então um texto vindo do modelo não injeta HTML na página. O parser trata parágrafos, títulos, listas, citações, linhas, negrito, itálico, código em linha, blocos de código com Copiar e links http e https, que abrem em nova aba. ### Como funcionam as versões em Pingue-pongue? Regenerar uma resposta ou editar uma pergunta cria uma nova versão ao lado da original, sem apagar nada. Em Pingue-pongue, cada mensagem com versões ganha setas e um contador como 2/3, e a conversa segue pelo ramo escolhido. O evento branch avisa a sua aplicação quando a pessoa troca de versão. ## Componentes relacionados - [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [Bastidores](https://vibecode.thmtecnologia.com/componentes/bastidores/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. - [Aval](https://vibecode.thmtecnologia.com/componentes/aval/): Cartão em que a pessoa revisa o que a IA vai fazer e segura o botão para aprovar, ou então rejeita ou edita o pedido. - [Degustação](https://vibecode.thmtecnologia.com/componentes/degustacao/): Dois modelos de IA respondem à mesma pergunta lado a lado, sem nome, e você vota antes de descobrir quem é quem. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.