lisichatbot 1.6.8 → 1.7.0

package/package.json

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

package/src/index.js

@@ -17,7 +17,8 @@ let chatState = {
     history: [],
     currentSelection: null,
     returnToStep: null,
-    completed: false
+    completed: false,
+    editPath: []  // ✅ NEW: Array of step names/numbers to edit in sequence
 };
 
 let elements = {
@@ -229,14 +230,24 @@ function updateEditIcons() {
                 return;
             }
             
-            if (hasInput && stepNumber < chatState.step && isLatest) {
+            // ✅ NEW: Check if edit icon should be forced to show (even without input)
+            const forceShowEdit = stepData && stepData.showEditIcon === true;
+            
+            if ((hasInput || forceShowEdit) && stepNumber < chatState.step && isLatest) {
                 editIcon.onclick = (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     console.log(`\n🖱️ EDIT ICON CLICKED (from updateEditIcons) - Step ${stepNumber}`);
                     console.log(`   Current step: ${chatState.step}`);
-                    console.log(`   Calling editStep(${stepNumber})...`);
-                    editStep(stepNumber);
+                    
+                    // ✅ NEW: Check if this step has an editSteps path
+                    if (stepData.editSteps && Array.isArray(stepData.editSteps) && stepData.editSteps.length > 0) {
+                        console.log(`   🛤️ Step has editSteps path:`, stepData.editSteps);
+                        startEditPath(stepData.editSteps);
+                    } else {
+                        console.log(`   Calling editStep(${stepNumber})...`);
+                        editStep(stepNumber);
+                    }
                 };
                 editIcon.setAttribute('data-chat-step', stepNumber);
                 editIcon.style.setProperty('display', 'flex', 'important');
@@ -2365,19 +2376,42 @@ async function handleNext() {
             await showNextStep();
             return;
         } else {
-            // Reached or passed target, clear returnToStep and go to target
-            console.log(`   ⏭️ Reached target, returning to step ${targetStep}`);
-            chatState.returnToStep = null;
-            chatState.step = targetStep;
-            
-            const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
-            allRangeWrappers.forEach(wrapper => {
-                wrapper.style.display = 'none';
-            });
-            
-            updateEditIcons();
-            await showNextStep();
-            return;
+            // Reached or passed target
+            console.log(`   ⏭️ Reached target step`);
+            
+            // ✅ NEW: Check if there are more steps in the edit path
+            if (chatState.editPath && chatState.editPath.length > 0) {
+                const nextEditStep = chatState.editPath.shift();
+                console.log(`   🛤️ Edit path continues - going to step ${nextEditStep}`);
+                console.log(`   🛤️ Remaining edit path:`, chatState.editPath);
+                
+                // Keep returnToStep for when edit path completes
+                chatState.step = nextEditStep;
+                
+                const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
+                allRangeWrappers.forEach(wrapper => {
+                    wrapper.style.display = 'none';
+                });
+                
+                updateEditIcons();
+                await showNextStep();
+                return;
+            } else {
+                // No more edit path, return to saved step
+                console.log(`   ✅ Edit complete - returning to step ${targetStep}`);
+                chatState.returnToStep = null;
+                chatState.editPath = [];  // Clear any remaining path
+                chatState.step = targetStep;
+                
+                const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
+                allRangeWrappers.forEach(wrapper => {
+                    wrapper.style.display = 'none';
+                });
+                
+                updateEditIcons();
+                await showNextStep();
+                return;
+            }
         }
     }
 
@@ -2424,6 +2458,16 @@ function findNextAccessibleStep(currentStep) {
 async function showNextStep() {
     const nextStep = flowData.flow[chatState.step];
 
+    // ✅ NEW: Clean up any previously injected elements (from addElements)
+    // BUT: If this step has addElements, we'll re-inject them below
+    if (elements.messages) {
+        const injectedElements = elements.messages.querySelectorAll('[data-chat-injected="true"]');
+        if (injectedElements.length > 0) {
+            console.log(`  🧹 Removing ${injectedElements.length} previously injected element(s)`);
+            injectedElements.forEach(el => el.remove());
+        }
+    }
+
     // ✅ NEW: Check if step should be displayed based on condition
     if (nextStep.shouldDisplay) {
         let shouldShow = false;
@@ -2793,6 +2837,9 @@ async function showNextStep() {
                     // Make it visible (in case it was hidden)
                     clonedElement.style.display = '';
                     
+                    // ✅ Mark as injected for cleanup
+                    clonedElement.setAttribute('data-chat-injected', 'true');
+                    
                     // Add to messages container
                     elements.messages.appendChild(clonedElement);
                     
@@ -2888,20 +2935,29 @@ async function showNextStep() {
             // If hasPreFill, renderOptions already handled it
         }
     } else {
-        const delay = nextStep.autoAdvanceDelay !== undefined ? nextStep.autoAdvanceDelay : config.autoAdvanceDelay;
-        console.log(`  ⏱️ Auto-advance delay: ${delay}ms ${nextStep.autoAdvanceDelay !== undefined ? '(step-level)' : '(global)'}`);
+        // ✅ FIXED: Only auto-advance if explicitly enabled OR if step has autoAdvance
+        const shouldAutoAdvance = nextStep.autoAdvance === true;
         
-        setTimeout(() => {
-            // ✅ NEW: Find next accessible step
-            chatState.step = findNextAccessibleStep(chatState.step);
-            updateEditIcons();
+        if (shouldAutoAdvance) {
+            const delay = nextStep.autoAdvanceDelay !== undefined ? nextStep.autoAdvanceDelay : config.autoAdvanceDelay;
+            console.log(`  ⏱️ Auto-advance delay: ${delay}ms ${nextStep.autoAdvanceDelay !== undefined ? '(step-level)' : '(global)'}`);
             
-            if (chatState.step < flowData.flow.length) {
-                showNextStep();
-            } else {
-                handleCompletion();
-            }
-        }, delay);
+            setTimeout(() => {
+                // ✅ NEW: Find next accessible step
+                chatState.step = findNextAccessibleStep(chatState.step);
+                updateEditIcons();
+                
+                if (chatState.step < flowData.flow.length) {
+                    showNextStep();
+                } else {
+                    handleCompletion();
+                }
+            }, delay);
+        } else {
+            // ✅ No input and no auto-advance - just enable Next button
+            enableNextButton();
+            console.log('  🔓 No input field - Next button enabled for manual progression');
+        }
     }
     
     const showNextButton = nextStep.nextButtonDisplay !== false;
@@ -3081,6 +3137,7 @@ function init(flowName, flowConfig, options = {}) {
 
     if (typeof window !== 'undefined') {
         window.editStep = editStep;
+        window.startEditPath = startEditPath;  // ✅ NEW: Export to window
     }
 
     showNextStep();
@@ -3091,7 +3148,8 @@ function init(flowName, flowConfig, options = {}) {
         getState,
         reset,
         goToStep,
-        editStep
+        editStep,
+        startEditPath  // ✅ NEW: Export from init
     };
 }
 
@@ -3141,6 +3199,53 @@ function goToStep(stepNumber) {
     showNextStep();
 }
 
+// ✅ NEW: Start editing through a path of steps
+function startEditPath(stepNamesOrNumbers) {
+    console.log(`\n🛤️ startEditPath() called with:`, stepNamesOrNumbers);
+    
+    if (!Array.isArray(stepNamesOrNumbers) || stepNamesOrNumbers.length === 0) {
+        console.error('editPath must be a non-empty array');
+        return;
+    }
+    
+    // Convert step names to step numbers
+    const stepNumbers = stepNamesOrNumbers.map(nameOrNumber => {
+        if (typeof nameOrNumber === 'number') {
+            return nameOrNumber;
+        } else if (typeof nameOrNumber === 'string') {
+            // Find step by name
+            const stepIndex = flowData.flow.findIndex(step => step.name === nameOrNumber);
+            if (stepIndex === -1) {
+                console.error(`Step with name "${nameOrNumber}" not found`);
+                return null;
+            }
+            return stepIndex;
+        }
+        return null;
+    }).filter(num => num !== null);
+    
+    if (stepNumbers.length === 0) {
+        console.error('No valid steps found in editPath');
+        return;
+    }
+    
+    console.log(`   ✅ Resolved to step numbers:`, stepNumbers);
+    
+    // Save current step as return point
+    chatState.returnToStep = chatState.step;
+    console.log(`   💾 Saved return step: ${chatState.returnToStep}`);
+    
+    // Save the edit path (remaining steps to edit)
+    chatState.editPath = [...stepNumbers];
+    console.log(`   🛤️ Edit path set:`, chatState.editPath);
+    
+    // Start editing the first step in the path
+    const firstStep = chatState.editPath.shift();
+    console.log(`   🎯 Starting with step ${firstStep}`);
+    
+    editStep(firstStep);
+}
+
 function editStep(stepNumber) {
     console.log(`\n📝 editStep() called with stepNumber: ${stepNumber}`);
     console.log(`   Current step before edit: ${chatState.step}`);
@@ -3282,5 +3387,6 @@ module.exports = {
     reset,
     goToStep,
     editStep,
-    displayMessage  // ✅ NEW: Export helper function
+    displayMessage,
+    startEditPath  // ✅ NEW: Export edit path function
 };