Update conversations.php

conversations.php

@@ -1213,18 +1213,35 @@ if (!isset($_SESSION['user_id'])) {
                                 });
                                 
                                 if (isAtBottom) {
-                                    // Usuario está al final: agregar mensaje automáticamente con highlight
+                                    // Usuario está al final: recargar mensajes y mostrar un indicador 'Ver mensaje' para que el usuario confirme el scroll
                                     console.log('✅ Usuario AL FINAL, recargando mensajes...');
 
                                     // Marcar que el próximo mensaje nuevo debe tener highlight
                                     this._nextMessageUnread = true;
 
-                                    // Recargar mensajes (esto hará el fetch y renderizará)
+                                    // Recargar mensajes (esto hará el fetch y renderizará). Al terminar, mostrar indicador con acción personalizada
                                     this.loadMessages(this.currentUserId, true, true).then(() => {
-                                        // Después de cargar, quitar el highlight después de 3 segundos
+                                        try {
-                                        setTimeout(() => {
+                                            this.showNewMessagesIndicator(1, {
-                                            this._removeUnreadHighlights();
+                                                label: 'Ver mensaje',
-                                        }, 3000);
+                                                onClick: async () => {
+                                                    try {
+                                                        this.hideNewMessagesIndicator();
+                                                        // Asegurar que el contenedor baje al final y aplicar highlight temporal
+                                                        await this.scrollToBottom();
+                                                        const container = document.getElementById('chat-conversations');
+                                                        const msgs = container ? container.querySelectorAll('[data-message-id]') : null;
+                                                        const last = msgs && msgs.length ? msgs[msgs.length - 1] : null;
+                                                        if (last) {
+                                                            last.classList.add('unread');
+                                                            setTimeout(() => { try { last.classList.remove('unread'); } catch(e){} }, 3000);
+                                                        }
+                                                    } catch (e) { console.warn('Ver mensaje click failed', e); }
+                                                }
+                                            });
+                                        } catch (e) {
+                                            console.warn('Failed to show Ver mensaje indicator', e);
+                                        }
                                     });
                                 } else {
                                     // Usuario está leyendo arriba: mostrar indicador de nuevos mensajes
@@ -4171,11 +4188,13 @@ if (!isset($_SESSION['user_id'])) {
             }
 
 // --- New messages indicator helpers ---
-            showNewMessagesIndicator(count) {
+            showNewMessagesIndicator(count, opts = {}) {
                 try {
                     if (this._applyingStaged) return; // avoid toggling while applying
                     const container = document.getElementById('chat-area') || document.body;
                     let el = document.getElementById('new-messages-indicator');
+                    const label = opts.label || null;
+                    const customHandler = typeof opts.onClick === 'function' ? opts.onClick : null;
                     if (!el) {
                         el = document.createElement('div');
                         el.id = 'new-messages-indicator';
@@ -4189,7 +4208,8 @@ if (!isset($_SESSION['user_id'])) {
                         el.style.borderRadius = '20px';
                         el.style.boxShadow = '0 6px 18px rgba(2,6,23,0.12)';
                         el.style.cursor = 'pointer';
-                        el.onclick = async () => {
+                        // default handler
+                        el._defaultHandler = async () => {
                             try {
                                 // Hide indicator immediately and suspend auto-refresh to avoid races
                                 this.hideNewMessagesIndicator();
@@ -4208,14 +4228,30 @@ if (!isset($_SESSION['user_id'])) {
                                 try { this._suspendAutoRefresh = false; } catch(e) {}
                             }
                         };
+                        el.onclick = el._defaultHandler;
+
                         // subtle fade-in
                         el.style.opacity = '0';
                         el.style.transition = 'opacity 220ms ease, transform 220ms ease';
                         container.appendChild(el);
                         setTimeout(() => { try { el.style.opacity = '1'; el.style.transform = 'translateX(-50%) translateY(-6px)'; } catch(e) {} }, 20);
                     }
+
+                    // If a custom handler is provided, set it; otherwise ensure default
+                    if (customHandler) {
+                        el.onclick = async (ev) => {
+                            try { await customHandler(ev); } catch (e) { console.warn('Custom indicator handler failed', e); }
+                        };
+                    } else {
+                        el.onclick = el._defaultHandler;
+                    }
+
                     const c = (typeof count === 'number') ? count : (this._stagedMessages ? this._stagedMessages.length : 0);
-                    el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje';
+                    if (label) {
+                        el.textContent = label;
+                    } else {
+                        el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje';
+                    }
                     el.style.display = 'inline-block';
                 } catch (e) { console.warn('showNewMessagesIndicator failed', e); }
             }