Como ele é
Lembra a tela de revisão de código de um repositório, num cartão branco de cantos arredondados. O cabeçalho mostra o arquivo, quem propôs a mudança, a contagem de linhas somadas e removidas e uma barrinha de quadrados verdes e vermelhos. Linhas removidas aparecem em fundo rosado com sinal de menos; linhas novas, em fundo verde-claro com sinal de mais, e as palavras trocadas ganham um tom mais forte. Trechos sem mudança ficam recolhidos num botão que mostra as linhas. Cada bloco tem botões de aceitar e rejeitar, e uma barra de progresso conta quantos já foram revisados.
Você pode estar procurando isto se pediu algo assim
- mostrar o que a IA mudou no código antes de eu aprovar
- comparar duas versões de um texto com vermelho e verde
- tela de revisão de mudanças igual à do GitHub dentro do meu app
- aceitar ou rejeitar cada alteração que o agente sugeriu
- ver as diferenças entre dois contratos linha por linha
- comparador de versões de configuração para o meu painel
- destacar só as palavras que mudaram entre duas frases
Também chamado de
- diff viewer
- visualizador de diff
- comparação de código
- code diff
- side-by-side diff
- revisão de código
- text compare
Quando usar
- Aprovação de mudanças propostas por agentes de IA antes de aplicar no projeto
- Revisão de código em ferramentas internas e painéis técnicos
- Comparação de versões de contratos, políticas e documentos com aceite por trecho
- Histórico de configurações versionadas, para ver o que mudou entre duas datas
Quando evitar
- Arquivos binários, imagens ou planilhas, que não se comparam linha a linha
- Revisões que pedem comentários em cada linha, recurso que o componente não tem
Como pedir para a sua IA
Crie uma tela de revisão que mostre o diff entre o código atual e o que o agente de IA propôs: lado a lado ou unificado, palavras alteradas em destaque, aceitar ou rejeitar cada bloco, atalhos n e p para navegar, modo unificado no celular e o texto final pronto para aplicar.
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 Diff Viewer
O Diff Viewer devolve o texto final depois da revisão?
Sim. A cada decisão, o Diff Viewer emite o texto resultante com as listas de blocos aceitos, rejeitados e pendentes, e dispara o evento resolve quando não resta nenhum pendente. A prop pendingAs define se os blocos ainda não revisados entram como a versão nova ou como a original.
O Diff Viewer funciona no celular?
Funciona. Abaixo de 640 pixels de largura, o Diff Viewer usa sempre o modo unificado, numa coluna só, e esconde as dicas de atalho para caber na tela. Linhas longas rolam na horizontal por uma barra própria, que aceita arrastar com o dedo.
Dá para revisar as mudanças no Diff Viewer pelo teclado?
Dá. No Diff Viewer, n e p levam à próxima mudança e à anterior, a aceita e r rejeita o bloco atual e já pulam para o próximo pendente, e u desfaz a decisão. As setas rolam o código na horizontal, e cada decisão é anunciada a leitores de tela com a contagem de revisadas.
