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
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.
