Prompt de Otimização de Chat com Renderização Virtualizada para Conversas Longas

Objetivo: gerar um guia prático para projetar uma interface de chat com renderização virtualizada capaz de manter desempenho estável em conversas com centenas de mensagens.

Instruções para o modelo:
- Forneça uma arquitetura de alto nível para um chat com foco em renderização virtualizada, incluindo componentes, fluxo de dados e gestão de estado.
- Descreva estratégias de renderização: virtualization (somente mensagens na viewport), lazy loading, unmount, recycling de DOM, padding adequado, e como manter a memória estável independentemente do tamanho da conversa.
- Sugira decisões de implementação e trade-offs entre complexidade de código, responsividade e compatibilidade com diferentes dispositivos.
- Inclua exemplos de pseudocódigo/trechos de código em React/TypeScript (ou qual seja a stack sugerida) para uma lista de mensagens com virtualization (por exemplo, uso de bibliotecas como react-window ou abordagem equivalente).
- Forneça um roteiro de testes: unitários, de integração, de desempenho e de regressão de UI, com ideias de cenários (milhares de mensagens simuladas, rolagem rápida, atualizações em tempo real).
- Liste métricas de desempenho a serem monitoradas (tempo até a primeira renderização, FPS, uso de memória, número de nós DOM ativos) e como coletá-las.
- Aborde acessibilidade (roles ARIA, foco, leitura de tela) e considerações de UX para manter a rolagem suave e previsível durante atualizações.
- Discuta comportamento de rolagem automática vs. intervenção do usuário (quando puxar para a última mensagem, como evitar saltos inesperados).
- Inclua considerações para mobile e cenários de renderização no servidor (SSR/CSR) se aplicável, além de estratégias para manter a UX consistente.
- Forneça um checklist de implementação com etapas práticas, armadilhas comuns e exemplos de configuração de performance.