Sistema de UI para Chat Conversacional

O que Sistema de UI para Chat Conversacional faz?

Propósito

O Sistema de UI para Chat Conversacional fornece uma metodologia sistemática para projetar e estruturar widgets de chat persistentes na página, diálogos de suporte ao vivo e interfaces de chatbot automatizadas. As janelas de chat são altamente interativas, densas em conteúdo e espacialmente limitadas, tornando-as propensas a graves falhas de acessibilidade e usabilidade.

Este sistema resolve os desafios de design visual e estrutural de sobreposições de mensagens assíncronas. Ele garante que os fluxos de mensagens sejam altamente legíveis, que os gatilhos interativos (respostas rápidas, cartões de ação) sejam acessíveis, que usuários de tecnologia assistiva sejam notificados sobre novas mensagens sem interrupção de foco e que as sobreposições móveis se adaptem perfeitamente aos teclados virtuais do sistema e áreas seguras.

Casos de Uso

• Painéis de Suporte com Chat ao Vivo: Widgets persistentes que permitem comunicação direta com representantes humanos de suporte ao cliente.
• Chatbots de IA Automatizados: Assistentes automatizados no aplicativo ou no site que guiam os usuários por integração, solução de problemas ou descoberta de produtos.
• Formulários Conversacionais Transacionais: Conclusão de formulários passo a passo projetada como uma conversa interativa.
• Widgets Flutuantes de Central de Ajuda: Sobreposições ancoradas na viewport que pesquisam artigos de suporte e recorrem a threads de chat ao vivo.

Quando NÃO Usar

• Aplicativos Dedicados de Email/Inbox: Painéis de comunicação em tela cheia e de alta densidade (ex.: Gmail, Slack, Zendesk Agent Workspace); use sistema-de-layout-de-painel.
• Navegação Global da Página: Não substitua diretórios persistentes do site por mapas do site baseados em chat, a menos que como uma opção assistiva secundária; use sistema-de-navegacao-do-site.
• Comentários Hierárquicos Complexos: Comentários de blog ou artigo com respostas em thread aninhadas; use sistema-de-comentarios-e-discussao.

Entradas

1. Cenários Conversacionais: Mapeamento dos fluxos principais (iniciado pelo usuário vs. acionado pelo sistema, transferência bot vs. agente).
2. Estilo Visual e Paleta: Tokens de design para superfícies de fundo, bolhas de entrada vs. saída, pontos de status e indicadores de foco (do sistema-de-cores-acessiveis e sistema-de-design-de-indicadores-de-foco).
3. Escala Tipográfica: Regras tipográficas fluidas e altamente legíveis para layouts compactos (do sistema-de-tipografia-fluida).
4. Métricas de Gatilho: Limiares de rolagem e evento que determinam quando o botão de abertura do chat ou a mensagem de boas-vindas automática é ativado.
5. Ativos de Mídia Interativa: Opções de anexo de arquivo, modelos de visualização de imagem e formatos personalizados de resposta rápida.

Saídas

1. Especificação de Layout do Widget de Chat: Limites precisos em pixels/rem para lançadores flutuantes e painéis ancorados.
2. Anatomia do Thread de Mensagens: Espaçamento de componentes, pesos tipográficos e mapeamentos de cores distinguindo tipos de remetente.
3. Blueprint Responsivo para Dispositivos Móveis: Regras de transição transformando painéis flutuantes de desktop em gavetas de altura total para dispositivos móveis.
4. Matriz de Estados Interativos: Mapas de feedback visual para balões de mensagem, áreas de texto, chips de ação e estados de carregamento.
5. Blueprint de Marcos de Acessibilidade: Um mapa de funções ARIA (role="log", aria-live="polite", aria-busy) e caminhos de tabulação do teclado.

---

Fluxo de Trabalho

1. Posicionar o Lançador Flutuante (FAB)

O botão de gatilho de chat flutuante é o ponto de entrada principal e deve permanecer persistente sem bloquear itens importantes do corpo da página.

• Posicionamento Padrão: Ancorar o lançador no canto inferior direito da viewport (canto inferior esquerdo para layouts RTL).
• Deslocamentos da Grade do Desktop: Deslocar o lançador em 24px das bordas inferior e lateral da viewport.
• Deslocamentos da Grade Móvel: Deslocar em 16px das bordas para preservar a área de conteúdo.
• Mitigação de Colisão: Se um botão "Voltar ao Topo" ou banner de cookie persistente estiver presente, posicioná-los verticalmente opostos ou empilhá-los com um mínimo de 16px de separação para evitar sobreposição visual.

2. Estruturar o Contêiner da Janela de Chat

O contêiner da janela de chat abriga todo o quadro de interação. Ele fica acima da página base e deve seguir uma hierarquia estrutural padrão:

• Cabeçalho (A Âncora do Quadro): Banner persistente contendo o avatar/identidade do parceiro de chat (agente/bot), status operacional (indicador online, horários de atividade) e controles rápidos (Minimizar _, Tela Cheia/Expandir e Fechar X).
• Área de Registro de Mensagens (A Viewport do Thread): O corpo rolável que exibe a conversa. Deve lidar com rolagem vertical infinita com uma barra de rolagem sempre visível durante ações de rolagem.
• Baralho de Respostas Rápidas (A Ponte): Um bloco horizontal/envolvente de chips interativos que fica diretamente acima da barra de entrada para oferecer respostas de prompt de um único toque.
• Barra de Entrada (A Utilidade Fixada na Parte Inferior): Um contêiner de formulário persistente que compreende a área de entrada de texto, acionadores de utilitários secundários (emojis, anexos de clipe de papel) e o botão principal "Enviar".

3. Projetar a Anatomia e o Ritmo dos Balões de Mensagem

Para garantir legibilidade rápida, diferencie as mensagens usando direção visual e física:

• Mensagens de Saída (do Usuário):
  • Alinhamento: Alinhado à direita (alinhado à esquerda em RTL).
  • Cor: Cor primária da marca ou fundo escuro de alto contraste com texto branco/claro.
  • Bordas-Arredondadas: Arredondado em todos os cantos, exceto o canto inferior direito (inferior esquerdo em RTL) para criar uma âncora visual de "balão de fala".
• Mensagens de Entrada (do Agente/Bot):
  • Alinhamento: Alinhado à esquerda (alinhado à direita em RTL).
  • Cor: Cinza claro neutro ou tom secundário da marca com texto de alto contraste.
  • Bordas-Arredondadas: Arredondado em todos os cantos, exceto o canto inferior esquerdo (inferior direito em RTL).
• Mensagens Agrupadas: Se o mesmo remetente acionar várias mensagens sequencialmente, empilhe-as com espaço próximo (4px de gap) e mostre o nome do remetente, avatar e carimbo de data/hora apenas no balão final ou cabeçalho do grupo. Use espaçamento de 16px entre remetentes diferentes.
• Mensagens do Sistema/Ação: Centralizadas no thread, pequenas, suaves e estilizadas como texto simples sem borda para indicar meta-eventos (ex.: "Agente entrou no chat", "Transcrição do chat enviada por email").

4. Criar a Área de Entrada Interativa

A área de entrada de texto é onde ocorre o maior atrito. Projete para maximizar a usabilidade:

• Entrada com Expansão Automática: Use um <textarea> que começa com uma única linha (altura mínima de 44px) e expande verticalmente conforme o usuário digita (máximo de 4–5 linhas com rolagem vertical ativada internamente) para que mensagens longas permaneçam completamente visíveis.
• Borda da Entrada e Estados de Hover: Dê à textarea uma borda distinta (mínimo de 1px, alto contraste 3:1 contra a caixa de chat branca). O hover deve aumentar o contraste da borda, e o foco ativo deve acionar um anel de foco de alto contraste (mínimo de 2px).
• Capacidade de Resposta do Botão Enviar: O botão enviar deve permanecer visualmente inativo (desabilitado e opacidade suave) quando a textarea estiver vazia. Assim que caracteres forem digitados, faça a transição do botão para seu estado de cor primária ativa para sinalizar prontidão para entrada.

5. Estabelecer a Adaptação para Viewport Móvel (A Mudança para Gaveta)

As caixas de chat de desktop são pequenas sobreposições (geralmente com 360px a 400px de largura, 500px a 650px de altura). Em dispositivos móveis, essas proporções são inutilizáveis e entram em conflito com teclados virtuais.

• Assunção Total da Viewport: Abaixo do ponto de quebra de 576px, faça a transição do contêiner de chat de um painel flutuante para uma gaveta de tela cheia (width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;).
• Área Segura do Teclado Virtual: Garanta que a Barra de Entrada use position: sticky; bottom: 0; e ancore na parte inferior da viewport visível, levando em consideração a barra de endereço inferior do navegador móvel e o teclado virtual.
• Evitar Vazamentos de Rolagem: Bloqueie a rolagem do corpo de fundo usando body { overflow: hidden; } ou classes padrão de interceptação de toque sempre que a gaveta de chat móvel em tela cheia estiver ativa.

---

Regras de Decisão

• Dimensionamento do Botão de Gatilho: O botão lançador flutuante deve ter um diâmetro visual de pelo menos 56px em desktop e dispositivos móveis, com uma área de toque interativa de 64x64px para garantir ativação fácil com o polegar.
• Prioridade do "Emblema de Não Lidas": Quando uma mensagem não lida chegar enquanto o painel estiver minimizado, mostre um emblema numérico vermelho/cor da marca sobre o lançador. Se uma mensagem for altamente crítica, mostre uma prévia de texto temporária e auto-dispensável adjacente ao lançador por 5 segundos antes de recolher para o emblema.
• Exibição do Indicador de Digitação: Quando o agente/bot estiver digitando, exiba um balão persistente contendo uma animação de três pontos pulando. Posicione este indicador como a mensagem de entrada mais recente, mas remova-o instantaneamente quando o bloco de mensagem real chegar.
• Temporização de Notificação e Sinais Sonoros: Habilite alertas de áudio sutis e de tom agudo para mensagens recebidas apenas se a guia estiver em segundo plano. Forneça uma alternância clara e persistente no cabeçalho do chat para silenciar completamente as notificações sonoras.
• Ancoragem de Rolagem Dinâmica: Quando o usuário estiver na parte inferior do registro de chat, role automaticamente o contêiner do thread para baixo para revelar novas mensagens à medida que chegam. No entanto, se o usuário rolou para cima para ler o histórico passado, bloqueie a posição de rolagem para evitar saltos bruscos e exiba um botão flutuante "Novas Mensagens ↓" na parte inferior da viewport.

---

Restrições

1. Acessibilidade (Conformidade WCAG AA)

• Funções de Marco e ARIA:
  • Envolva o widget de chat principal em um contêiner de marco: <section aria-label="Chat do Cliente"> ou <div role="region" aria-label="Chat de Suporte">.
  • A área de registro de mensagens rolável deve usar role="log" e aria-live="polite". Isso informa aos leitores de tela que anunciem novas mensagens à medida que são anexadas, sem interromper a navegação ativa do teclado ou a entrada de texto do usuário.
  • O balão indicador de digitação deve definir aria-busy="true" e incluir uma alternativa de texto oculta (ex.: <span class="sr-only">O agente de suporte está digitando...</span>).
• Acesso por Teclado e Foco Aprisionado:
  • A navegação padrão com Tab deve percorrer os controles do cabeçalho, o fluxo de mensagens rolável, os chips de resposta rápida e os campos de entrada em sequência lógica.
  • Quando a gaveta de chat móvel em tela cheia estiver aberta, aprisione o foco do teclado dentro da gaveta. Pressionar Escape deve minimizar ou fechar instantaneamente o painel de chat e retornar o foco ao botão lançador flutuante.
• Contraste de Texto e Componentes:
  • Todo o texto dentro dos balões de mensagem (tanto de entrada quanto de saída) deve atender a uma proporção de contraste mínima de 4.5:1 em relação aos seus respectivos fundos de balão.
  • Ícones interativos (clipe de anexo, seta de envio, X de fechar) e limites de formulário devem atender a uma proporção de contraste mínima de 3:1 em relação às superfícies de fundo adjacentes.

2. Responsividade e Preservação do Layout

• Estabilidade da Proporção de Aspecto:
  • Os threads de mensagens devem usar porcentagens flexíveis ou modelos de flex-grow para preencher a altura do contêiner, evitando estouro de texto ou colapso do contêiner.
  • Imagens ou cartões enviados dentro de balões de chat devem ter proporções de aspecto fixas ou limites de Largura Máxima (max-width: 80% da largura do balão) para evitar o rompimento visual do layout do chat.
• Prevenção de Mudança de Layout:
  • Ao carregar mensagens históricas (ex.: rolagem infinita para cima), use técnicas de ancoragem de rolagem para evitar que a posição de rolagem ativa salte para baixo, mantendo a viewport do usuário perfeitamente bloqueada na mensagem que estava lendo.

---

Padrões Comuns de Falha

• A Armadilha do "Sequestro de Foco": Abrir automaticamente o widget de chat no carregamento da página e instantaneamente aprisionar o foco do teclado dentro da textarea do chat. Isso bloqueia completamente os usuários de teclado e leitores de tela de ler o conteúdo principal da página.
• A "Cobertura pelo Teclado": Em dispositivos móveis, posicionar a barra de entrada com coordenadas absolute, fazendo com que o teclado virtual do dispositivo sobreponha e oculte a textarea e o botão enviar durante a digitação ativa.
• O "Fluxo Não Anunciado": Anexar novas mensagens ao thread puramente visualmente, sem role="log" ou aria-live, deixando usuários cegos e com baixa visão completamente inconscientes de que o agente respondeu.
• O Bug do "Salto de Rolagem": Forçar a viewport de rolagem a pular para o fundo absoluto a cada nova mensagem recebida, interrompendo um usuário que está tentando ler instruções históricas mais acima no thread.
• A Tendência de "Desvanecimento de Contraste": Estilizar bolhas de entrada com um fundo cinza ultra-claro e texto branco fino, violando as proporções de contraste e tornando o texto ilegível sob iluminação ambiente normal.

---

Critérios de Validação

• Verificação de Marco de Acessibilidade: O widget de chat está envolto em uma <section> ou role="region" com um aria-label descritivo.
• Verificação de Anúncio do Leitor de Tela: O thread de mensagens usa role="log" com aria-live="polite" e foi verificado para anunciar texto recebido dinamicamente.
• Verificação de Contraste: Bolhas de saída e entrada atendem ao padrão de contraste texto-fundo de 4.5:1, e as bordas do formulário atendem ao padrão de 3:1.
• Verificação do Caminho do Teclado: As armadilhas de foco funcionam corretamente em viewports móveis, e pressionar a tecla Escape fecha o widget e retorna o foco ao lançador.
• Adaptação para Gaveta Móvel: O painel ocupa 100% da altura e largura da viewport abaixo de 576px sem vazamento de rolagem no corpo da página de fundo.
• Alvos de Toque Mínimos: O gatilho do lançador, botões de fechar, controles de envio e chips de resposta rápida têm áreas de toque interativas de pelo menos 44x44px.
• Ritmo dos Balões de Mensagem: Mensagens consecutivas do mesmo remetente são agrupadas com padding apertado de 4px, enquanto mudanças de remetente usam gaps generosos de 16px.
• Proteção de Estado Vazio: O botão enviar está desabilitado e visualmente suave quando a textarea de entrada contém apenas espaços em branco.