Pular para o conteúdo
Faculdade PhorteDesign System

ChatWindow

Em andamento

Janela de conversa de aula ao vivo: mensagens (que chegam sozinhas, simuladas, quando ao vivo), um botão para pausar essa chegada e o campo de envio. É um role="log" que anuncia só o que chega.

Função
Conteúdo
Também chamado de
chat, conversa, bate-papo, chat ao vivo
Mora em
app/components/organisms/ChatWindow.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Vazio
  3. Ao Vivo
  4. Fechado

Quando usar

Ao lado de uma transmissão ao vivo, dentro de uma tela que traga o título e o botão de fechar.

Faça

  • Traga o título e o fechar na tela que monta a janela: ela não tem cabeçalho próprio.
  • Mantenha o botão de pausa: conteúdo que se atualiza sozinho precisa de como parar (WCAG 2.2.2).
  • Use isLive={false} quando a transmissão acabou — o campo fica desabilitado e diz por quê.

Evite

  • Usar a simulação de mensagens em produção: os nomes e textos são sorteados no componente.
  • Tirar o role="log": sem ele, quem usa leitor de tela não sabe que alguém falou.

Quando não usar. Para um formulário de contato, use o ContactForm. Para uma mensagem do sistema, o Alert.

Nota de uso

Tem controle de pausa para a simulação de mensagens ao vivo, dentro da própria região role="log" — sem ele, quem usa leitor de tela era interrompido a cada 8 segundos sem como parar. Se você for montar um chat, o botão de pausa não é enfeite: é o que a WCAG 2.2.2 exige de conteúdo que se atualiza sozinho.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Mensagens — Região `role="log"` com rolagem própria, fundo `--muted`, e as mensagens numa lista (`ul`, E73).
  2. Pausa — Só ao vivo: botão "Pausar as mensagens", no topo da região.
  3. Mensagem — Nome e hora em cima; balão do sistema (vermelho claro), de outros (branco) ou seu (vermelho, à direita).
  4. Envio — O Input do sistema, redondo, com rótulo escondido, e o Button "Enviar mensagem" no encaixe do fim (E73).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Ao vivoisLive (padrão): chega uma mensagem sorteada a cada 8 segundos e o botão de pausa aparece.
PausadoSem mensagens novas; o botão vira "Retomar as mensagens", com aria-pressed="true".
EncerradoisLive={false}: sem simulação, sem pausa, campo desabilitado ("Chat encerrado").
FechadoisOpen={false}: a janela sai esmaecendo.
Enviar indisponívelCom o campo vazio, o botão de enviar fica aria-disabled (continua focável, o clique não envia); encerrado, fica disabled.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Mensagem novaRola o contêiner até o fim (E73; o scrollIntoView de antes levava a página junto), suave, ou direto com movimento reduzido; o leitor anuncia só a nova (aria-atomic="false").
Enter no campo com textoEnvia como "Você" e limpa o campo — medido; o foco fica no campo.
Enviar pelo botãoEnvia, limpa o campo e devolve o foco a ele — medido no teste da ficha.
Movimento reduzido no sistemaA simulação já nasce parada (usePausaDeMovimento).

Relacionados