From d77eabc27206258fc40b6e70ad77f95d68cf2fd3 Mon Sep 17 00:00:00 2001
From: Lizandro <lizandrogd@gmail.com>
Date: Sun, 19 Jul 2026 22:10:56 +0000
Subject: [PATCH] fix: reemplazar livewire:update con MutationObserver para
 scroll en Android
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

livewire:update no es un evento DOM válido en Livewire 2.
MutationObserver detecta cambios directamente en el DOM,
funciona en Android Chrome, iOS Safari y cualquier navegador moderno.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../views/livewire/chat/public-chat.blade.php | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/resources/views/livewire/chat/public-chat.blade.php b/resources/views/livewire/chat/public-chat.blade.php
index daed003..fa26142 100755
--- a/resources/views/livewire/chat/public-chat.blade.php
+++ b/resources/views/livewire/chat/public-chat.blade.php
@@ -614,14 +614,14 @@
 
         let userScrolledUp = false;
         let newMsgCount    = 0;
-        let lastHeight     = 0;
+        let lastScrollHeight = container.scrollHeight;
 
         function atBottom() {
-            return container.scrollHeight - container.scrollTop - container.clientHeight < 100;
+            return container.scrollHeight - container.scrollTop - container.clientHeight < 120;
         }
 
-        function scrollToBottom(smooth) {
-            container.scrollTo({ top: container.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+        function scrollToBottom() {
+            container.scrollTop = container.scrollHeight;
         }
 
         function showBadge(n) {
@@ -638,15 +638,13 @@
             newMsgCount = 0;
         }
 
-        // Bajar al fondo al hacer click en el badge
         if (badgeBtn) {
             badgeBtn.addEventListener('click', function () {
-                scrollToBottom(true);
+                container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
                 hideBadge();
             });
         }
 
-        // Detectar scroll manual
         container.addEventListener('scroll', function () {
             if (atBottom()) {
                 userScrolledUp = false;
@@ -657,24 +655,23 @@
         }, { passive: true });
 
         // Scroll inicial al fondo
-        scrollToBottom(false);
-        lastHeight = container.scrollHeight;
+        scrollToBottom();
 
-        // Después de cada actualización de Livewire
-        document.addEventListener('livewire:update', function () {
-            setTimeout(function () {
-                const newHeight = container.scrollHeight;
-                const grew = newHeight > lastHeight;
-                lastHeight = newHeight;
+        // MutationObserver: detecta cuando Livewire agrega/modifica nodos en el contenedor
+        const observer = new MutationObserver(function () {
+            const newHeight = container.scrollHeight;
+            if (newHeight === lastScrollHeight) return;
+            lastScrollHeight = newHeight;
 
-                if (!userScrolledUp) {
-                    scrollToBottom(false);
-                } else if (grew) {
-                    newMsgCount++;
-                    showBadge(newMsgCount);
-                }
-            }, 30);
+            if (!userScrolledUp) {
+                scrollToBottom();
+            } else {
+                newMsgCount++;
+                showBadge(newMsgCount);
+            }
         });
+
+        observer.observe(container, { childList: true, subtree: true });
     }
 
     if (document.readyState === 'loading') {
@@ -683,7 +680,6 @@
         initChatScroll();
     }
 
-    // Re-inicializar si Livewire monta el componente dinámicamente
     document.addEventListener('livewire:load', initChatScroll);
 })();
 </script>