rem last build change

chat/public/builder.html

@@ -55,10 +55,6 @@
       flex: 1;
       overflow-y: auto;
       min-height: 0;
-      -webkit-overflow-scrolling: touch;
-      scroll-behavior: auto;
-      transform: translateZ(0);
-      will-change: scroll-position;
     }
 
     .app-shell.builder-single>* {

chat/public/builder.js

@@ -1520,7 +1520,7 @@ function closeHistoryModal() {
   if (el.historyModal) el.historyModal.style.display = 'none';
 }
 
-function scrollChatToBottom() {
+function scrollChatToBottom(force = false) {
   if (!el.chatArea) return;
   const target = el.chatArea;
   
@@ -1529,48 +1529,91 @@ function scrollChatToBottom() {
     target.scrollTop = target.scrollHeight;
   };
 
-  // Use multiple scroll techniques in sequence for reliability
-  // 1. Immediate scroll
+  // Use multiple techniques to ensure scroll happens after content is rendered
+  // 1. Immediate scroll attempt
   doScroll();
   
-  // 2. After DOM updates
-  setTimeout(doScroll, 50);
-  setTimeout(doScroll, 100);
-  setTimeout(doScroll, 200);
-  setTimeout(doScroll, 500);
+  // 2. After short delays to allow DOM updates
+  setTimeout(() => { doScroll(); }, 10);
+  setTimeout(() => { doScroll(); }, 50);
+  setTimeout(() => { doScroll(); }, 100);
+  setTimeout(() => { doScroll(); }, 250);
+  setTimeout(() => { doScroll(); }, 500);
   
-  // 3. After content fully renders
-  setTimeout(doScroll, 1000);
+  // 3. Longer delay for content to fully settle (especially on page load)
+  setTimeout(() => { doScroll(); }, 1000);
+  setTimeout(() => { doScroll(); }, 2000);
   
-  // 4. requestAnimationFrame for smooth scrolling
+  // 4. Use requestAnimationFrame for smooth scrolling
   requestAnimationFrame(() => {
     doScroll();
-    requestAnimationFrame(doScroll);
+    requestAnimationFrame(() => {
+      doScroll();
+      requestAnimationFrame(() => {
+        doScroll();
+      });
+    });
   });
 
-  // 5. Scroll to last message element if it exists (most reliable method)
-  setTimeout(() => {
-    const lastMessage = target.querySelector('.message:last-child');
-    if (lastMessage) {
-      lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
-    } else {
-      // Fallback to regular scroll
-      doScroll();
+  // 5. Wait for ALL images to load before scrolling
+  const images = target.querySelectorAll('img');
+  let imagesToLoad = 0;
+  
+  images.forEach((img) => {
+    if (!img.complete) {
+      imagesToLoad++;
+      img.addEventListener('load', () => {
+        imagesToLoad--;
+        doScroll();
+        // Scroll again after a short delay to ensure layout is updated
+        setTimeout(() => doScroll(), 100);
+      }, { once: true });
+      
+      img.addEventListener('error', () => {
+        imagesToLoad--;
+        doScroll();
+      }, { once: true });
     }
-  }, 100);
-
-  // 6. ResizeObserver for dynamic content
-  if (typeof ResizeObserver !== 'undefined') {
-    const resizeObserver = new ResizeObserver(() => doScroll());
-    resizeObserver.observe(target);
-    setTimeout(() => resizeObserver.disconnect(), 2000);
+  });
+  
+  // If there are images loading, scroll again after they all complete
+  if (imagesToLoad > 0) {
+    const checkImagesLoaded = setInterval(() => {
+      if (imagesToLoad === 0) {
+        clearInterval(checkImagesLoaded);
+        doScroll();
+        setTimeout(() => doScroll(), 100);
+        setTimeout(() => doScroll(), 500);
+      }
+    }, 100);
+    
+    // Stop checking after 5 seconds to avoid infinite interval
+    setTimeout(() => clearInterval(checkImagesLoaded), 5000);
   }
-
-  // 7. MutationObserver for DOM changes
+  
+  // 6. Use ResizeObserver to detect when content height changes
+  if (typeof ResizeObserver !== 'undefined') {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === target) {
+          doScroll();
+        }
+      }
+    });
+    resizeObserver.observe(target);
+    
+    // Stop observing after a while
+    setTimeout(() => resizeObserver.disconnect(), 3000);
+  }
+  
+  // 7. Also scroll when any content finishes rendering (using MutationObserver)
   if (typeof MutationObserver !== 'undefined') {
-    const observer = new MutationObserver(() => doScroll());
+    const observer = new MutationObserver(() => {
+      doScroll();
+    });
     observer.observe(target, { childList: true, subtree: true });
-    setTimeout(() => observer.disconnect(), 2000);
+    // Stop observing after a while to avoid memory leaks
+    setTimeout(() => observer.disconnect(), 3000);
   }
 }
 
@@ -1984,22 +2027,7 @@ function renderMessages(session) {
     }
   }
 
-  // Scroll to bottom after DOM updates
   scrollChatToBottom();
-  
-  // Additional scroll with longer delay to ensure all content is rendered
-  setTimeout(() => {
-    scrollChatToBottom();
-    // Force scroll by accessing scrollHeight directly
-    if (el.chatArea) {
-      el.chatArea.scrollTop = el.chatArea.scrollHeight;
-      // Scroll last element into view as fallback
-      const lastMessage = el.chatArea.querySelector('.message:last-child');
-      if (lastMessage) {
-        lastMessage.scrollIntoView({ block: 'end' });
-      }
-    }
-  }, 200);
 
   updateExportButtonVisibility(session);
 }