Saltearse al contenido

Panel Chat

El Chat Panel (panel de chat) ofrece mensajería entre los participantes de la sesión.

Ubicación

Está en el Tabs Panel (panel de pestañas), en el lado derecho de la interfaz del editor.

El panel Private Chat abierto en el panel de pestañas, resaltado, con el chat Group y la lista de chats directos

Estructura del panel

Vista de lista de chats

Muestra todas las conversaciones disponibles:

ElementoDescripción
Group (grupo)Ícono con varias personas, envía mensajes a todos los participantes
Direct chats (chats directos)Avatares y nombres de cada participante
Online indicator (indicador de conexión)Texto verde “Online” para los usuarios conectados
Unread badge (insignia de no leídos)Círculo rojo con el conteo

Vista de sala de chat

La sala del chat Group abierta con su encabezado, los mensajes y el campo de entrada en la parte inferior

Cuando seleccionas una conversación:

ComponentePosiciónDescripción
Back arrow (flecha atrás)Arriba a la izquierdaVuelve a la lista de chats
Avatar (avatar)EncabezadoÍcono del usuario o del grupo
Name (nombre)Encabezado“Group” o el nombre del participante
Status (estado)Encabezado“Online” cuando está conectado
PTT button (botón PTT)Encabezado, a la derechaPush-to-Talk (solo para el editor)
Messages (mensajes)CuerpoLista de mensajes con desplazamiento
Input (entrada)AbajoCampo de texto y envío

Visualización de mensajes

Cada mensaje muestra:

  • Nombre del remitente - Solo en el primero de una secuencia
  • Avatar - Solo en el primero de una secuencia
  • Texto del mensaje - Con detección de enlaces
  • Hora - Formato: “2:30 PM”
  • Indicador de lectura - Marca de verificación + “Read” en los mensajes directos

Separadores de fecha

Formato: “December 17, 2025”

Push-to-Talk (PTT)

Disponible: cuando el editor abre un chat directo con un participante conectado

EstadoÍconoDescripción
Disponiblei_pttMantén presionado para hablar
ActivoAnimación SiriWaveHablando en este momento
No disponiblei_ptt_disabledEl participante está desconectado

Tooltip de PTT (no disponible): “Push-To-Talk is unavailable because guest is offline”

Archivos adjuntos

Progreso de subida

  • Miniatura de vista previa del archivo
  • Nombre y tamaño del archivo
  • Barra de progreso con porcentaje
  • Botón de cancelar (ícono X)

Visualización de archivos

Tipo de archivoVisualización
ImágenesVista previa en miniatura
VideosVista previa en miniatura
DocumentosÍcono de documento + nombre + tamaño

Estado vacío

Mensaje del chat grupal vacío:

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

Con la imagen de fondo del mensajero.

Mensajes no leídos

Botón para ir al final

  • Botón circular azul con una flecha hacia abajo
  • Insignia roja con el conteo de no leídos
  • Aparece cuando llegan mensajes nuevos mientras estás desplazado hacia arriba
  • Haz clic para ir al final y marcarlos como leídos

Estilo

Burbujas de mensaje

TipoEstilo
Enviado (usuario)Fondo gris, alineado a la derecha
RecibidoFondo con tinte azul, alineado a la izquierda

Encabezado

  • Contenedor con bordes redondeados (10px)
  • Fondo gris (modo oscuro: #1E222B)
  • 44px de alto

Consideraciones para móviles

  • Diseño a ancho completo
  • Botón PTT optimizado para pantallas táctiles
  • Sin relleno horizontal
  • Altura del encabezado adaptada

Relacionado

Artículos relacionados