Tiempo Real

La Bandeja de Entrada usa WebSocket para proporcionar una experiencia de comunicacion instantanea.

Caracteristicas en Tiempo Real

Vision General

WebSocket Events

Eventos de Mensajes

message:new

• Nuevo mensaje recibido
• Payload: mensaje completo
• Actualiza lista de hilos
• Incrementa contador no leidos

message:statusChanged

• Estado de entrega cambio
• Payload: {messageId, threadId, status}
• Actualiza indicador de checkmarks
• Status: sent, delivered, read

thread:updated

• Hilo fue modificado
• Payload: hilo actualizado
• Actualiza preview en lista
• Reordena si necesario

thread:created

• Nuevo hilo creado
• Payload: hilo completo
• Aparece en lista

Eventos de Interaccion

user:typing

• Usuario esta escribiendo
• Payload: {threadId, userId, userName, isTyping}
• Muestra "Escribiendo..."
• Auto-clear despues de 3 segundos

thread:read

• Hilo fue leido por otro
• Payload: {threadId, readByUserId, readAt}
• Actualiza estado de mensajes
• Resetea contador no leidos

thread:focus

• Usuario abrio el hilo
• Emitido por cliente
• Usado para presencia

thread:blur

• Usuario cerro el hilo
• Emitido por cliente
• Cleanup de estado

Eventos de Email

email:tracking

• Evento de tracking recibido
• Payload: {messageId, type, timestamp}
• Types: open, click
• Actualiza panel de tracking

Ejemplo:

{
  "messageId": 456,
  "type": "open",
  "timestamp": "2024-01-20T14:35:00Z",
  "userAgent": "Gmail/iOS",
  "ip": "192.168.1.1"
}

Eventos de Bot

chatbot:typing

• Bot esta generando respuesta
• Muestra indicador de IA
• Diferente a typing humano

chatbot:response

• Bot respondio
• Payload: mensaje del bot
• Incluye metadata de IA

chatbot:escalation

• Bot escalo conversacion
• Notifica a agentes
• Hilo aparece en inbox

Indicador de Presencia

Como Funciona

SISTEMA DE PRESENCIA:

1. Usuario abre la app - Se registra como "online"
2. Heartbeat cada 30 segundos - Mantiene estado "online"
3. Usuario cierra app - Timeout de 60 segundos
4. Despues del timeout - Se marca como "offline"

Visualizacion

En lista de hilos:

• Verde Juan Perez - En linea ahora
• Gris Maria Lopez - Desconectado

En cabecera de hilo (online):

Juan Perez En linea

En cabecera de hilo (offline):

Maria Lopez Visto por ultima vez: hace 2 horas

Suscripcion a Presencia

El frontend se suscribe a presencia de los candidatos en los hilos visibles:

usePresence(candidateIds)

• Suscribe a cambios de presencia
• Actualiza en tiempo real
• Desuscribe al desmontar

Indicador de Typing

Comportamiento

FLUJO DE TYPING:

1. Usuario empieza a escribir - Emite inbox:typing {isTyping: true}
2. Servidor broadcast a participantes - Otros ven "Escribiendo..."
3. Usuario deja de escribir (3s) - Auto-clear del indicador
4. Usuario envia mensaje - Clear inmediato del indicador

Visualizacion

En el area de mensajes:

...

Juan Perez esta escribiendo... [...]

Para multiples usuarios:

"Juan y Maria estan escribiendo..."

Debounce

Para evitar spam de eventos:

• Throttle de 1 segundo
• No emite si ya esta typing
• Clear automatico si inactivo

Notificaciones

Tipos de Notificacion

IN-APP:

• Badge en icono de inbox
• Toast de nuevo mensaje
• Numero de no leidos

DESKTOP (Browser):

• Notificacion del sistema
• Requiere permiso
• Click abre el hilo

PUSH (Mobile):

• Notificacion push
• Background supported
• Deep link al hilo

Badge de No Leidos

En menu de navegacion:

Bandeja de Entrada [5]

Se actualiza en tiempo real cuando llegan mensajes o se leen.

Toast de Mensaje

Nuevo mensaje

Juan Perez "Gracias por la informacion..."

[Ver mensaje]

• Auto-dismiss: 5 segundos
• Click: Abre el hilo

Notificacion Desktop

Talivo

Nuevo mensaje de Juan Perez "Gracias por la informacion sobre..."

hace unos segundos

Permiso requerido: Notification.requestPermission()

Confirmacion de Lectura

Como Funciona

FLUJO DE LECTURA:

1. Usuario abre hilo - Focus en el hilo
2. Despues de 2 segundos - Envia PUT /threads/:id/read
3. Servidor actualiza - unreadCount = 0, mensajes marcados como leidos
4. WebSocket notifica - thread:read a otros participantes
5. UI actualiza - Checkmarks azules en mensajes

Indicadores

Estados de lectura:

• checkmark - Enviado (gris)
• checkmark checkmark - Entregado (gris)
• checkmark checkmark - Leido (azul)

Con timestamp:

"Leido a las 14:35"

Email Tracking en Vivo

Panel de Tracking

APERTURAS (3):

• 20 ene 14:35 - Gmail/iOS
• 20 ene 15:10 - Chrome/Windows
• 21 ene 09:15 - Outlook/Mac

CLICKS (1):

• 20 ene 14:36 - "Ver vacante"

Actualizacion en Vivo

Cuando se detecta apertura/click:

1. Tracking pixel/link disparado
2. Webhook recibe evento
3. Guarda en BD
4. Emite email:tracking via WebSocket
5. UI actualiza panel en tiempo real

Sincronizacion Multi-Tab

Comportamiento

Si tienes multiples tabs abiertas:

• Tab 1: Inbox abierto
• Tab 2: Inbox abierto
• Tab 3: Otra pagina

Mensaje llega:

• Tab 1: Actualiza lista
• Tab 2: Actualiza lista
• Tab 3: Badge en menu

Marcas como leido en Tab 1:

• Tab 2: Se sincroniza
• Tab 3: Badge se actualiza

Implementacion

Cada tab tiene su propia conexion WebSocket pero comparten el mismo userId.

El servidor broadcast a todas las conexiones del mismo usuario.

Reconexion

Manejo de Desconexion

FLUJO DE RECONEXION:

1. Conexion se pierde - UI muestra "Reconectando..."
2. Intentos automaticos:
   • Intento 1: 1 segundo
   • Intento 2: 2 segundos
   • Intento 3: 4 segundos
   • ...backoff exponencial
3. Reconexion exitosa - UI muestra "Conectado", sincroniza mensajes perdidos
4. Falla permanente - UI muestra "Sin conexion", boton manual de reconexion

Indicador de Estado

Conectado:

(verde) Conectado

Reconectando:

(gris) Reconectando...

Sin conexion:

(warning) Sin conexion [Reintentar]

Optimistic UI

Envio de Mensajes

FLUJO OPTIMISTIC:

1. Usuario envia mensaje - Mensaje aparece INMEDIATAMENTE con tempId temporal
2. Mientras tanto - Request al servidor
3. Si exito - Reemplaza tempId con id real, actualiza estado a "sent"
4. Si error - Muestra indicador de error, opcion de reintentar

Visualizacion

Mensaje recien enviado:

Tu (ahora) Hola, me gustaria agendar... [Enviando...]

Despues de confirmar:

Tu (14:32) Hola, me gustaria agendar... checkmark Enviado

Rendimiento

Optimizaciones

OPTIMIZACIONES IMPLEMENTADAS:

Conexion:

• Una conexion WebSocket por cliente
• Multiplexado de eventos
• Compresion de mensajes

Suscripciones:

• Solo eventos relevantes
• Desuscripcion al cerrar
• Lazy loading de presencia

Rendering:

• Virtual scrolling en lista
• Debounce de actualizaciones
• Batch de cambios de estado

Proximos Pasos

• WhatsApp y SMS - Canales de Twilio
• Email - Tracking detallado
• Hilos y Conversaciones - Gestion de hilos