lisichatbot 1.6.6 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "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
@@ -2167,20 +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);
-                    
-                    // ✅ NEW: Final scroll for steps with multiple inputs
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 800);
+                    // ✅ Single scroll call - MutationObserver will handle the rest
+                    scrollToBottom();
                     
                     return;
                 } else {
@@ -2406,16 +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);
-    
-    // ✅ NEW: Additional scroll for steps with multiple inputs
-    setTimeout(() => {
-        scrollToBottom();
-    }, 700);
+    // ✅ Final scroll after showNextStep completes
+    scrollToBottom();
 }
 
 // ✅ NEW: Helper function to find next step that is accessible in normal flow
@@ -2482,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
@@ -2496,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
@@ -2675,25 +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);
-                    
-                    // ✅ NEW: Final scroll for steps with multiple inputs
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 800);
+                    // ✅ Single scroll call - MutationObserver will handle the rest
+                    scrollToBottom();
                     
                     return;
                 } else {
@@ -2723,25 +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);
-                    
-                    // ✅ NEW: Final scroll for steps with multiple inputs
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 800);
+                    // ✅ Single scroll call - MutationObserver will handle the rest
+                    scrollToBottom();
                     
                     return;
                 } else {
@@ -2818,6 +2777,38 @@ async function showNextStep() {
     
     addMessage(messageToDisplay, 'bot', hasInput, chatState.step);
 
+    // ✅ NEW: Add custom elements if specified
+    if (nextStep.addElements && Array.isArray(nextStep.addElements)) {
+        console.log(`  🎨 Adding ${nextStep.addElements.length} custom element(s) to chat`);
+        
+        nextStep.addElements.forEach((selector, index) => {
+            try {
+                // Find the element in the DOM
+                const element = document.querySelector(selector);
+                
+                if (element) {
+                    // Clone the element to avoid removing it from its original location
+                    const clonedElement = element.cloneNode(true);
+                    
+                    // Make it visible (in case it was hidden)
+                    clonedElement.style.display = '';
+                    
+                    // Add to messages container
+                    elements.messages.appendChild(clonedElement);
+                    
+                    console.log(`    ✅ Added element ${index + 1}: ${selector}`);
+                } else {
+                    console.warn(`    ⚠️ Element not found: ${selector}`);
+                }
+            } catch (error) {
+                console.error(`    ❌ Error adding element ${selector}:`, error);
+            }
+        });
+        
+        // Scroll after adding elements
+        scrollToBottom();
+    }
+
     const inputRequired = nextStep.inputRequired === true;
 
     if (nextStep.input) {
@@ -2961,20 +2952,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);
-    
-    // ✅ NEW: Final scroll for complex steps with multiple inputs or slow rendering
-    setTimeout(() => {
-        scrollToBottom();
-    }, 600);
+    // ✅ Final scroll after all rendering completes
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                // Triple RAF to ensure everything is laid out
+                scrollToBottom();
+            });
+        });
+    });
 }
 
 function handleCompletion() {