whatsapp/test_new_message.md

🧪 Prueba de Mensajes Nuevos en Tiempo Real

✅ Cambios Implementados:

1. Estilo Visual para Mensajes No Leídos

• Fondo amarillo claro (#fffbea) con borde sutil
• Animación de highlight al aparecer
• Se quita automáticamente después de 3 segundos

2. Detección Mejorada de Scroll

• Logs detallados en consola para debugging
• Cambio de initial=false a initial=true cuando estás abajo (esto fuerza una recarga completa)
• Marca el último mensaje como no leído temporalmente

3. Flujo de Funcionamiento:

Cuando estás AL FINAL del chat:

1. SSE detecta nuevo mensaje entrante
2. Verifica que estás dentro de 150px del final
3. Marca flag _nextMessageUnread = true
4. Llama loadMessages(userId, true, true) para recargar
5. El último mensaje se renderiza con clase unread
6. Después de 3 segundos, quita el highlight automáticamente

Cuando estás LEYENDO ARRIBA:

1. SSE detecta nuevo mensaje entrante
2. Verifica que NO estás cerca del final
3. Muestra botón "Nuevo mensaje" o "Nuevos mensajes (N)"
4. Guarda mensaje en staging
5. Cuando haces click, baja y muestra todos los mensajes

🔍 Cómo Probar:

Paso 1: Abrir Navegador y Consola

# Abrir http://localhost:8080/conversations.php
# Presionar F12 para abrir Developer Tools
# Ver pestaña "Console"

Paso 2: Abrir una Conversación

• Hacer click en cualquier conversación de la lista
• Verificar en consola que ves: ✅ SSE conectado (🔐 autenticado)

Paso 3: Enviar Mensaje de Prueba desde WhatsApp

IMPORTANTE: Envía el mensaje desde WhatsApp a tu número de bot

Paso 4: Observar Logs en Consola

Deberías ver algo como:

📨 SSE new_message recibido: {...}
📨 Datos parseados del mensaje: {...}
👤 User ID del mensaje: 123 | Conversación actual: 123
♻️ Mensaje para conversación ACTIVA, procesando...
📍 Posición scroll: {scrollHeight: 1234, scrollTop: 1000, clientHeight: 600, distanceFromBottom: 34, isAtBottom: true}
✅ Usuario AL FINAL, recargando mensajes...

Paso 5: Verificar Resultado

• El mensaje debe aparecer automáticamente (sin refrescar)
• Debe tener fondo amarillo claro durante 3 segundos
• Después el fondo vuelve a blanco

Paso 6: Probar Scroll Arriba

1. Hacer scroll hacia arriba (leer mensajes viejos)
2. Enviar otro mensaje desde WhatsApp
3. Debe aparecer botón "Nuevo mensaje" en la parte inferior
4. Al hacer click, baja y muestra el mensaje

🐛 Debugging:

Si no aparece el mensaje cuando estás abajo:

1. Verificar SSE está conectado:

   # En otra terminal:
   ./test_sse_debug.sh
   

2. Verificar logs en consola:

   • Buscar "SSE new_message recibido"
   • Buscar "Usuario AL FINAL"
   • Buscar errores en rojo

3. Verificar que el mensaje se guardó en BD:

   docker exec -it whatsapp-dev-app php -r "
   require 'config/config.php';
   \$db = Database::getInstance();
   \$msgs = \$db->fetchAll('SELECT * FROM conversations ORDER BY created_at DESC LIMIT 5');
   print_r(\$msgs);
   "
   

4. Verificar el SSE está enviando eventos:

   • Abrir http://localhost:8080/api/sse_events.php?token=demo_token directamente
   • Deberías ver stream de eventos (connected, heartbeat cada 30s)

Si el highlight no aparece:

1. Verificar flag se está seteando:

   • Buscar en consola: "Usuario AL FINAL, recargando mensajes..."
   • Abrir Inspector (Elementos) y buscar la clase unread en el mensaje

2. Verificar CSS está cargado:

   • Buscar en Inspector .message.unread .message-bubble
   • Debe tener background: #fffbea

📊 Métricas Esperadas:

• Tiempo de aparición: 3-5 segundos después de enviar mensaje
• Duración del highlight: 3 segundos
• Intervalo de polling SSE: Cada 3 segundos revisa BD
• Heartbeat: Cada 30 segundos

✨ Próximas Mejoras (Opcional):

1. Contador de mensajes no leídos en la lista de conversaciones
2. Marcar conversación como leída cuando abres
3. Notificación de escritura ("Usuario está escribiendo...")
4. Confirmación de entrega y lectura más precisa