lisichatbot 1.6.5 → 1.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "type": "module",
   "main": "./src/index.js",
   "exports": {

package/src/index.js

@@ -48,16 +48,29 @@ let flowData = null;
 // =============================================================================
 
 function scrollToBottom() {
-    if (elements.messages) {
-        // ✅ Use requestAnimationFrame to ensure DOM has updated
+    if (!elements.messages) return;
+    
+    // ✅ NEW: Ensure the very last child is fully visible
+    const scrollToLastElement = () => {
+        const lastChild = elements.messages.lastElementChild;
+        if (lastChild) {
+            lastChild.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+            console.log(`  📜 Scrolled last element into view`);
+        } else {
+            // Fallback to scrollHeight
+            elements.messages.scrollTop = elements.messages.scrollHeight;
+        }
+    };
+    
+    // Immediate scroll
+    scrollToLastElement();
+    
+    // ✅ Use requestAnimationFrame to ensure DOM layout is complete
+    requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                // Double RAF ensures layout is complete
-                elements.messages.scrollTop = elements.messages.scrollHeight;
-                console.log(`  📜 Scrolled to bottom: ${elements.messages.scrollHeight}px`);
-            });
+            scrollToLastElement();
         });
-    }
+    });
 }
 
 function enableNextButton() {
@@ -2011,10 +2024,6 @@ async function handleNext() {
                 console.log('💬 showMessage called:', message);
                 addMessage(message, 'bot', false, null);
                 scrollToBottom();
-                // ✅ Delayed scroll to ensure message is fully rendered
-                setTimeout(() => {
-                    scrollToBottom();
-                }, 100);
             };
             
             // ✅ Pass showMessage as third parameter
@@ -2029,10 +2038,6 @@ async function handleNext() {
                 console.log('💬 onNext displaying message from return:', result.showMessage);
                 addMessage(result.showMessage, 'bot', false, null);
                 scrollToBottom();
-                // ✅ Delayed scroll to ensure message is fully rendered
-                setTimeout(() => {
-                    scrollToBottom();
-                }, 100);
             }
             
             // ✅ NEW: Check if onNext wants to update steps by field name
@@ -2129,6 +2134,11 @@ async function handleNext() {
                         scrollToBottom();
                     }, 500);
                     
+                    // ✅ NEW: Final scroll for steps with multiple inputs
+                    setTimeout(() => {
+                        scrollToBottom();
+                    }, 800);
+                    
                     return;
                 } else {
                     console.error(`❌ No step found with name: "${stepName}"`);
@@ -2162,15 +2172,8 @@ async function handleNext() {
                     disableNextButton();
                     await showNextStep();
                     
-                    // ✅ NEW: Extra scroll after jump to ensure inputs are visible
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 350);
-                    
-                    // ✅ NEW: Additional delayed scroll for cases with multiple showMessage calls
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 500);
+                    // ✅ Single scroll call - MutationObserver will handle the rest
+                    scrollToBottom();
                     
                     return;
                 } else {
@@ -2396,11 +2399,8 @@ async function handleNext() {
 
     await showNextStep();
     
-    // ✅ NEW: Extra scroll after step is shown to ensure visibility
-    // This catches cases where showMessage was called in onNext before progressing
-    setTimeout(() => {
-        scrollToBottom();
-    }, 350);
+    // ✅ Final scroll after showNextStep completes
+    scrollToBottom();
 }
 
 // ✅ NEW: Helper function to find next step that is accessible in normal flow
@@ -2467,10 +2467,6 @@ async function showNextStep() {
                 console.log('💬 showMessage called:', message);
                 addMessage(message, 'bot', false, null);
                 scrollToBottom();
-                // ✅ Delayed scroll to ensure message is fully rendered
-                setTimeout(() => {
-                    scrollToBottom();
-                }, 100);
             };
             
             // ✅ Pass showMessage as second parameter
@@ -2481,10 +2477,6 @@ async function showNextStep() {
                 console.log('💬 onStart displaying message from return:', result.showMessage);
                 addMessage(result.showMessage, 'bot', false, null);
                 scrollToBottom();
-                // ✅ Delayed scroll to ensure message is fully rendered
-                setTimeout(() => {
-                    scrollToBottom();
-                }, 100);
             }
             
             // ✅ NEW: Check if onStart wants to update steps by field name
@@ -2660,20 +2652,16 @@ async function showNextStep() {
                         console.log(`   🔓 Override active for fields:`, chatState.prefillOverrideFields);
                     }
                     
+                    // ✅ Check if we're jumping from the very first step (needs extra time to initialize)
+                    const isJumpingFromFirstStep = chatState.step === 0;
+                    
                     chatState.step = targetStepIndex;
                     chatState.currentSelection = null;
                     disableNextButton();
                     await showNextStep();
                     
-                    // ✅ NEW: Extra scroll after jump to ensure inputs are visible
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 350);
-                    
-                    // ✅ NEW: Additional delayed scroll for cases with multiple showMessage calls
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 500);
+                    // ✅ Single scroll call - MutationObserver will handle the rest
+                    scrollToBottom();
                     
                     return;
                 } else {
@@ -2703,20 +2691,16 @@ async function showNextStep() {
                         console.log(`   🔓 Override active for fields:`, chatState.prefillOverrideFields);
                     }
                     
+                    // ✅ Check if we're jumping from the very first step (needs extra time to initialize)
+                    const isJumpingFromFirstStep = chatState.step === 0;
+                    
                     chatState.step = targetStep;
                     chatState.currentSelection = null;
                     disableNextButton();
                     await showNextStep();
                     
-                    // ✅ NEW: Extra scroll after jump to ensure inputs are visible
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 350);
-                    
-                    // ✅ NEW: Additional delayed scroll for cases with multiple showMessage calls
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 500);
+                    // ✅ Single scroll call - MutationObserver will handle the rest
+                    scrollToBottom();
                     
                     return;
                 } else {
@@ -2936,15 +2920,15 @@ async function showNextStep() {
         updateEditIcons();
     }, 10);
     
-    // ✅ NEW: Delayed scroll to ensure inputs are fully rendered and visible
-    setTimeout(() => {
-        scrollToBottom();
-    }, 150);
-    
-    // ✅ NEW: Extra delayed scroll to catch cases where showMessage was called before this step
-    setTimeout(() => {
-        scrollToBottom();
-    }, 300);
+    // ✅ Final scroll after all rendering completes
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                // Triple RAF to ensure everything is laid out
+                scrollToBottom();
+            });
+        });
+    });
 }
 
 function handleCompletion() {