up

2026-01-27 23:56:49 -05:00
parent 56c6a24fa5
commit 37d6bf1e20
43 changed files with 9668 additions and 318 deletions
@@ -0,0 +1,121 @@
+# 🧪 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
+```bash
+# 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:**
+   ```bash
+   # 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:**
+   ```bash
+   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