diff --git a/conversations.php b/conversations.php index eaa483d..403d3e0 100644 --- a/conversations.php +++ b/conversations.php @@ -1213,35 +1213,18 @@ if (!isset($_SESSION['user_id'])) { }); if (isAtBottom) { - // Usuario está al final: recargar mensajes y mostrar un indicador 'Ver mensaje' para que el usuario confirme el scroll + // Usuario está al final: agregar mensaje automáticamente con highlight 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á). Al terminar, mostrar indicador con acción personalizada + + // Recargar mensajes (esto hará el fetch y renderizará) this.loadMessages(this.currentUserId, true, true).then(() => { - try { - this.showNewMessagesIndicator(1, { - label: 'Ver mensaje', - 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); - } + // Después de cargar, quitar el highlight después de 3 segundos + setTimeout(() => { + this._removeUnreadHighlights(); + }, 3000); }); } else { // Usuario está leyendo arriba: mostrar indicador de nuevos mensajes @@ -4188,13 +4171,11 @@ if (!isset($_SESSION['user_id'])) { } // --- New messages indicator helpers --- - showNewMessagesIndicator(count, opts = {}) { + showNewMessagesIndicator(count) { 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'; @@ -4208,8 +4189,7 @@ 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'; - // default handler - el._defaultHandler = async () => { + el.onclick = async () => { try { // Hide indicator immediately and suspend auto-refresh to avoid races this.hideNewMessagesIndicator(); @@ -4228,30 +4208,14 @@ 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); - if (label) { - el.textContent = label; - } else { - el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje'; - } + el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje'; el.style.display = 'inline-block'; } catch (e) { console.warn('showNewMessagesIndicator failed', e); } }