Pular para o conteúdo

Painel de chat

O painel de chat oferece troca de mensagens entre os participantes da sessão.

Localização

Fica no Tabs Panel (painel de abas), no lado direito da interface do editor.

O painel Private Chat aberto no painel de abas, em destaque, com o chat Group e a lista de conversas diretas

Estrutura do painel

Lista de conversas

Mostra todas as conversas disponíveis:

ElementoDescrição
Group (grupo)Ícone com várias pessoas, envia mensagens para todos os participantes
Direct chats (conversas diretas)Avatares e nomes de cada participante
Online indicator (indicador de online)Texto verde “Online” para usuários conectados
Unread badge (selo de não lidas)Círculo vermelho com a contagem

Sala de conversa

A sala do chat Group aberta com o cabeçalho, as mensagens e a caixa de texto na parte de baixo

Quando uma conversa está selecionada:

ComponentePosiçãoDescrição
Back arrow (seta de voltar)Canto superior esquerdoVolta para a lista de conversas
AvatarCabeçalhoÍcone do usuário ou do grupo
Name (nome)Cabeçalho“Group” ou o nome do participante
StatusCabeçalho“Online” quando conectado
PTT button (botão PTT)Cabeçalho, à direitaPush-to-Talk, apertar para falar (só para o editor)
Messages (mensagens)CorpoLista de mensagens com rolagem
Input (entrada)Parte de baixoCaixa de texto e envio

Exibição das mensagens

Cada mensagem mostra:

  • Sender name (nome do remetente) - Na primeira de uma sequência
  • Avatar - Na primeira de uma sequência
  • Message text (texto da mensagem) - Com detecção de links
  • Time (horário) - Formato: “2:30 PM”
  • Read indicator (indicador de leitura) - Marca de visto + “Read” nas mensagens diretas

Separadores de data

Formato: “December 17, 2025”

Push-to-Talk (PTT)

Disponível: quando o editor abre uma conversa direta com um participante online

EstadoÍconeDescrição
Disponíveli_pttPressione e segure para falar
AtivoAnimação SiriWaveFala em andamento
Indisponíveli_ptt_disabledParticipante offline

Dica do PTT (indisponível): “Push-To-Talk is unavailable because guest is offline”

Arquivos anexos

Progresso do envio

  • Miniatura de prévia do arquivo
  • Nome e tamanho do arquivo
  • Barra de progresso com porcentagem
  • Botão de cancelar (ícone X)

Exibição dos arquivos

Tipo de arquivoExibição
ImagensPrévia em miniatura
VídeosPrévia em miniatura
DocumentosÍcone de documento + nome do arquivo + tamanho

Estado vazio

Mensagem do chat em grupo vazio:

“Be the first one to write a message to the group”

Com a imagem de fundo do mensageiro.

Mensagens não lidas

Botão de rolar até o fim

  • Botão azul redondo com uma seta para baixo
  • Selo vermelho com a contagem de não lidas
  • Aparece quando chegam mensagens novas enquanto você está mais acima na conversa
  • Clique para rolar até o fim e marcar como lidas

Estilo

Balões de mensagem

TipoEstilo
Enviada (usuário)Fundo cinza, alinhada à direita
RecebidaFundo em tom azulado, alinhada à esquerda

Cabeçalho

  • Contêiner arredondado (10px)
  • Fundo cinza (modo escuro: #1E222B)
  • Altura de 44px

Considerações para celular

  • Layout com largura total
  • Botão PTT otimizado para toque
  • Sem espaçamento horizontal
  • Altura do cabeçalho adaptada

Relacionados

Artigos relacionados