Keep widget scrolled to latest messages

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) {