From a959fd6e6d39c671363ae383f093d9833c4183e1 Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Fri, 24 Jul 2026 11:06:19 +0200
Subject: [PATCH] Keep widget scrolled to latest messages

---
 public/widget.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/widget.js b/public/widget.js
index 2af4f25..ba0815a 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -272,7 +272,7 @@
       if (message.senderType === "admin") lastAdminName = message.senderName || "Operator";
       else lastAdminName = null;
     }
-    messages.scrollTop = messages.scrollHeight;
+    scrollMessagesToBottom(messages);
   }
 
   function addMessage(messages, sender, senderName, body, attachments, lastAdminName) {
@@ -286,7 +286,19 @@
     item.className = `mf-message ${sender}`;
     item.innerHTML = `${body ? `<p>${escapeHtml(body)}</p>` : ""}${attachments.map((a) => `<a class="mf-photo" href="${apiBase}${a.url}" target="_blank" rel="noreferrer"><img src="${apiBase}${a.url}" alt="${escapeHtml(a.name)}"></a>`).join("")}`;
     messages.append(item);
-    messages.scrollTop = messages.scrollHeight;
+    for (const image of item.querySelectorAll("img")) {
+      image.addEventListener("load", () => scrollMessagesToBottom(messages), { once: true });
+      image.addEventListener("error", () => scrollMessagesToBottom(messages), { once: true });
+    }
+    scrollMessagesToBottom(messages);
+  }
+
+  function scrollMessagesToBottom(messages) {
+    const scroll = () => { messages.scrollTop = messages.scrollHeight; };
+    scroll();
+    requestAnimationFrame(scroll);
+    setTimeout(scroll, 80);
+    setTimeout(scroll, 240);
   }
 
   function mergeImageFiles(currentFiles, incomingFiles) {