lisichatbot 2.0.9 → 2.1.1

package/package.json

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

package/src/index.js

@@ -19,7 +19,11 @@ let chatState = {
     returnToStep: null,
     completed: false,
     editPath: [],  // ✅ NEW: Array of step names/numbers to edit in sequence
-    chatMode: 'create'  // ✅ NEW: Track if in 'create' or 'edit' mode
+    chatMode: 'create',  // ✅ NEW: Track if in 'create' or 'edit' mode
+    editSteps: null,        // ✅ Array of step indices to walk through in edit-steps mode
+    editStepsIndex: 0,      // ✅ Current position within editSteps array
+    onEditComplete: null,    // ✅ Callback when editSteps flow finishes
+    editFinalButtonText: null // ✅ Button text for the last step in editSteps
 };
 
 let elements = {
@@ -197,45 +201,74 @@ function updateEditIcons() {
     const allBotMessages = elements.messages.querySelectorAll('[data-chat-element="bot-message-wrapper"]');
     
     console.log(`\n🔄 Updating edit icons - Current step: ${chatState.step}, Completed: ${chatState.completed}`);
-    
+
     allBotMessages.forEach(wrapper => {
         const stepNumber = parseInt(wrapper.getAttribute('data-chat-step'));
         const editIcon = wrapper.querySelector('[data-chat-element="bot-edit-icon"]');
         const isLatest = wrapper.hasAttribute('data-chat-latest');
-        
+
         if (editIcon && !isNaN(stepNumber)) {
             const stepData = flowData.flow[stepNumber];
             const hasInput = stepData && !!stepData.input;
-            
+
             // ✅ NEW: Check if edit is disabled for this step
             if (stepData && stepData.disableEdit === true) {
                 editIcon.style.setProperty('display', 'none', 'important');
                 console.log(`  🚫 Step ${stepNumber}: Icon HIDDEN (edit disabled)`);
                 return;
             }
-            
+
             // ✅ FIX: In edit mode, keep edit icons visible even after completion
             if (chatState.completed && chatState.chatMode !== 'edit') {
                 editIcon.style.setProperty('display', 'none', 'important');
                 console.log(`  🏁 Step ${stepNumber}: Icon HIDDEN (flow completed in create mode)`);
                 return;
             }
-            
+
             // ✅ NEW: Check if edit icon should be forced to show (even without input)
             const forceShowEdit = stepData && stepData.showEditIcon === true;
-            
+
             // ✅ FIX: In edit mode, show edit icons for all completed steps (not just previous)
             const shouldShowInEditMode = chatState.chatMode === 'edit' && chatState.completed && isLatest;
             const shouldShowNormally = stepNumber < chatState.step && isLatest;
-            
-            if ((hasInput || forceShowEdit) && (shouldShowInEditMode || shouldShowNormally)) {
+            // ✅ In editSteps mode, show edit icons for steps already visited in the editSteps list
+            const shouldShowInEditSteps = chatState.editSteps && chatState.editSteps.length > 0 &&
+                chatState.editSteps.includes(stepNumber) &&
+                chatState.editSteps.indexOf(stepNumber) < chatState.editStepsIndex && isLatest;
+
+            if ((hasInput || forceShowEdit) && (shouldShowInEditMode || shouldShowNormally || shouldShowInEditSteps)) {
                 editIcon.onclick = (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     console.log(`\n🖱️ EDIT ICON CLICKED (from updateEditIcons) - Step ${stepNumber}`);
                     console.log(`   Current step: ${chatState.step}`);
-                    
-                    // ✅ NEW: Check if this step has an editSteps path
+
+                    // ✅ In editSteps mode, go back to that step within the editSteps flow
+                    if (chatState.editSteps && chatState.editSteps.length > 0) {
+                        const editStepIdx = chatState.editSteps.indexOf(stepNumber);
+                        if (editStepIdx !== -1) {
+                            console.log(`   🛤️ editSteps: jumping back to editSteps[${editStepIdx}] (step ${stepNumber})`);
+                            chatState.editStepsIndex = editStepIdx;
+                            chatState.step = stepNumber;
+                            chatState.currentSelection = null;
+
+                            // Remove history from this editStep onward
+                            const stepsToRemove = chatState.editSteps.slice(editStepIdx);
+                            chatState.history = chatState.history.filter(h => !stepsToRemove.includes(h.step));
+
+                            // Set prefill override
+                            const targetStepData = flowData.flow[stepNumber];
+                            if (targetStepData?.input?.field && chatState.data[targetStepData.input.field] !== undefined) {
+                                chatState.prefillOverrideFields = [targetStepData.input.field];
+                            }
+
+                            disableNextButton();
+                            showNextStep();
+                            return;
+                        }
+                    }
+
+                    // ✅ Check if this step has an editSteps path (normal mode)
                     if (stepData.editSteps && Array.isArray(stepData.editSteps) && stepData.editSteps.length > 0) {
                         console.log(`   🛤️ Step has editSteps path:`, stepData.editSteps);
                         startEditPath(stepData.editSteps);
@@ -320,7 +353,7 @@ function renderMultiSelectDropdown(options, field) {
     // ✅ NEW: Check if prefill is disabled for this step
     const currentStep = flowData.flow[chatState.step];
     const hasOverride = chatState.prefillOverrideFields && chatState.prefillOverrideFields.includes(field);
-    const isEditing = chatState.returnToStep !== null && chatState.returnToStep !== undefined;
+    const isEditing = (chatState.returnToStep !== null && chatState.returnToStep !== undefined) || (chatState.editSteps && chatState.editSteps.length > 0);
     const disablePrefill = currentStep?.disableInputValuePrefill === true && !hasOverride && !isEditing;
 
     const existingData = disablePrefill ? [] : (chatState.data[field] || []);
@@ -622,7 +655,7 @@ function renderOptions(options, field, isSingleSelect = true) {
     // ✅ NEW: Check if prefill is disabled for this step
     const currentStep = flowData.flow[chatState.step];
     const hasOverride = chatState.prefillOverrideFields && chatState.prefillOverrideFields.includes(field);
-    const isEditing = chatState.returnToStep !== null && chatState.returnToStep !== undefined;
+    const isEditing = (chatState.returnToStep !== null && chatState.returnToStep !== undefined) || (chatState.editSteps && chatState.editSteps.length > 0);
     const disablePrefill = currentStep?.disableInputValuePrefill === true && !hasOverride && !isEditing;
 
     const existingData = disablePrefill ? (isSingleSelect ? null : []) : chatState.data[field];
@@ -763,7 +796,7 @@ function renderColorOptions(options, field) {
     // ✅ NEW: Check if prefill is disabled for this step
     const currentStep = flowData.flow[chatState.step];
     const hasOverride = chatState.prefillOverrideFields && chatState.prefillOverrideFields.includes(field);
-    const isEditing = chatState.returnToStep !== null && chatState.returnToStep !== undefined;
+    const isEditing = (chatState.returnToStep !== null && chatState.returnToStep !== undefined) || (chatState.editSteps && chatState.editSteps.length > 0);
     const disablePrefill = currentStep?.disableInputValuePrefill === true && !hasOverride && !isEditing;
 
     const existingData = disablePrefill ? [] : chatState.data[field];
@@ -901,7 +934,7 @@ function renderCustomSelectOptions(options, field, customConfig) {
     // ✅ NEW: Check if prefill is disabled for this step
     const currentStep = flowData.flow[chatState.step];
     const hasOverride = chatState.prefillOverrideFields && chatState.prefillOverrideFields.includes(field);
-    const isEditing = chatState.returnToStep !== null && chatState.returnToStep !== undefined;
+    const isEditing = (chatState.returnToStep !== null && chatState.returnToStep !== undefined) || (chatState.editSteps && chatState.editSteps.length > 0);
     const disablePrefill = currentStep?.disableInputValuePrefill === true && !hasOverride && !isEditing;
 
     console.log(`\n🔍 === PREFILL DEBUG for field: ${field} ===`);
@@ -1692,7 +1725,7 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
     // ✅ NEW: Check if prefill is disabled for this step
     const currentStep = flowData.flow[chatState.step];
     const hasOverride = chatState.prefillOverrideFields && chatState.prefillOverrideFields.includes(field);
-    const isEditing = chatState.returnToStep !== null && chatState.returnToStep !== undefined;
+    const isEditing = (chatState.returnToStep !== null && chatState.returnToStep !== undefined) || (chatState.editSteps && chatState.editSteps.length > 0);
     const disablePrefill = currentStep?.disableInputValuePrefill === true && !hasOverride && !isEditing;
 
     const existingValue = disablePrefill ? null : chatState.data[field];
@@ -2541,6 +2574,100 @@ async function handleNext() {
     chatState.currentSelection = null;
     disableNextButton();
 
+    // ✅ Edit-steps mode: jump to next step in the list or finish
+    if (chatState.editSteps && chatState.editSteps.length > 0) {
+        const currentEditIndex = chatState.editStepsIndex;
+        const nextEditIndex = currentEditIndex + 1;
+
+        if (nextEditIndex < chatState.editSteps.length) {
+            // More steps to edit
+            chatState.editStepsIndex = nextEditIndex;
+            const nextStepIndex = chatState.editSteps[nextEditIndex];
+            console.log(`\n🛤️ Edit-steps: moving to step ${nextEditIndex + 1}/${chatState.editSteps.length} (flow index ${nextStepIndex})`);
+
+            chatState.step = nextStepIndex;
+
+            // Set prefillOverrideFields for the next step
+            const targetStep = flowData.flow[nextStepIndex];
+            if (targetStep?.input?.field && chatState.data[targetStep.input.field] !== undefined) {
+                chatState.prefillOverrideFields = [targetStep.input.field];
+            }
+
+            const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
+            allRangeWrappers.forEach(wrapper => {
+                wrapper.style.display = 'none';
+            });
+
+            updateEditIcons();
+            await showNextStep();
+            scrollToBottom();
+            return;
+        } else {
+            // All edit steps done - call onEditComplete
+            console.log(`\n✅ Edit-steps complete! All ${chatState.editSteps.length} steps finished.`);
+
+            const dataCopy = { ...chatState.data };
+            const historyCopy = [...chatState.history];
+            const callback = chatState.onEditComplete;
+
+            // ✅ Show loader on next button while onEditComplete executes
+            const nextBtnText = elements.nextBtn ? elements.nextBtn.querySelector('[data-chat-element="next-button-text"]') : null;
+            const nextBtnLoader = elements.nextBtn ? elements.nextBtn.querySelector('[data-chat-element="next-button-loader"]') : null;
+
+            if (nextBtnText) nextBtnText.style.display = 'none';
+            if (nextBtnLoader) nextBtnLoader.style.display = 'block';
+
+            // Call onEditComplete callback (await if async)
+            if (callback) {
+                console.log('📞 Calling onEditComplete with data:', dataCopy);
+                try {
+                    await callback(dataCopy);
+                } catch (error) {
+                    console.error('Error in onEditComplete callback:', error);
+                }
+            }
+
+            // ✅ Hide loader and restore button text after callback completes
+            if (nextBtnText) nextBtnText.style.display = '';
+            if (nextBtnLoader) nextBtnLoader.style.display = 'none';
+
+            // Clean up edit-steps state
+            chatState.editSteps = null;
+            chatState.editStepsIndex = 0;
+            chatState.onEditComplete = null;
+            chatState.editFinalButtonText = null;
+            chatState.completed = true;
+
+            // Hide inputs and next button
+            const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
+            allRangeWrappers.forEach(wrapper => { wrapper.style.display = 'none'; });
+
+            const previousInputs = elements.messages.querySelectorAll(
+                '[data-chat-element="options-wrapper"], ' +
+                '[data-chat-element="text-input"]:not([style*="display: none"]), ' +
+                '[data-chat-element="number-input"]:not([style*="display: none"]), ' +
+                '[data-chat-element="multi-select-dropdown"]:not([style*="display: none"])'
+            );
+            previousInputs.forEach(input => { input.style.display = 'none'; });
+
+            if (elements.nextBtn) {
+                elements.nextBtn.style.display = 'none';
+            }
+
+            updateEditIcons();
+
+            // Dispatch event
+            if (typeof window !== 'undefined') {
+                const event = new CustomEvent('conversationalFlowEditStepsComplete', {
+                    detail: { data: dataCopy, history: historyCopy }
+                });
+                window.dispatchEvent(event);
+            }
+
+            return;
+        }
+    }
+
     if (chatState.returnToStep !== null) {
         const targetStep = chatState.returnToStep;
         console.log(`\n🔙 Returning to saved step ${targetStep} (edited step complete)`);
@@ -2740,7 +2867,12 @@ async function showNextStep() {
     }
 
     // ✅ NEW: Check if step should be displayed based on condition
-    if (nextStep.shouldDisplay) {
+    // ✅ Skip shouldDisplay check entirely if this step is explicitly in editSteps
+    const isInEditSteps = chatState.editSteps && chatState.editSteps.includes(chatState.step);
+    if (isInEditSteps) {
+        console.log(`  🔓 Step ${chatState.step} is in editSteps - overriding shouldDisplay, always showing`);
+    }
+    if (nextStep.shouldDisplay && !isInEditSteps) {
         let shouldShow = false;
         
         if (typeof nextStep.shouldDisplay === 'function') {
@@ -2762,13 +2894,31 @@ async function showNextStep() {
         
         if (!shouldShow) {
             console.log(`  ⏭️ Skipping step ${chatState.step} (shouldDisplay returned false)`);
+
+            // ✅ In editSteps mode, skip to the next step in the editSteps list
+            if (chatState.editSteps && chatState.editSteps.length > 0) {
+                const nextEditIndex = chatState.editStepsIndex + 1;
+                if (nextEditIndex < chatState.editSteps.length) {
+                    chatState.editStepsIndex = nextEditIndex;
+                    chatState.step = chatState.editSteps[nextEditIndex];
+                    console.log(`  🛤️ editSteps: skipping to next edit step ${chatState.step}`);
+                    await showNextStep();
+                    return;
+                } else {
+                    // All remaining edit steps should be skipped - trigger edit completion
+                    console.log(`  🛤️ editSteps: no more steps - completing`);
+                    handleCompletion();
+                    return;
+                }
+            }
+
             chatState.step++;
-            
+
             if (chatState.step >= flowData.flow.length) {
                 handleCompletion();
                 return;
             }
-            
+
             // Recursively check next step
             await showNextStep();
             return;
@@ -3348,12 +3498,20 @@ async function showNextStep() {
     
     if (elements.nextBtn) {
         const nextBtnTextElement = elements.nextBtn.querySelector('[data-chat-element="next-button-text"]');
-        
+
         if (nextBtnTextElement) {
-            // ✅ Priority: step-level > global config > original
+            // ✅ Priority: editFinalButtonText (last edit step) > step-level > global config > original
             let buttonText;
-            
-            if (nextStep.nextButtonText) {
+
+            // Check if this is the last step in editSteps mode
+            const isLastEditStep = chatState.editSteps &&
+                chatState.editStepsIndex === chatState.editSteps.length - 1 &&
+                chatState.editFinalButtonText;
+
+            if (isLastEditStep) {
+                buttonText = chatState.editFinalButtonText;
+                console.log(`  📝 Next button text: "${buttonText}" (editFinalButtonText - last edit step)`);
+            } else if (nextStep.nextButtonText) {
                 // Step-level override takes highest priority
                 buttonText = nextStep.nextButtonText;
                 console.log(`  📝 Next button text: "${buttonText}" (step-level)`);
@@ -3366,7 +3524,7 @@ async function showNextStep() {
                 buttonText = elements.originalNextBtnText;
                 console.log(`  📝 Next button text: "${buttonText}" (original)`);
             }
-            
+
             nextBtnTextElement.textContent = buttonText;
         } else if (nextStep.nextButtonText || config.nextButtonText) {
             console.warn(`  ⚠️ nextButtonText specified but next-button-text element not found`);
@@ -3514,6 +3672,43 @@ function init(flowName, flowConfig, options = {}) {
     chatState.history = [];
     chatState.currentSelection = null;
 
+    // ✅ NEW: Edit-steps mode - only walk through specific steps by name
+    if (options.editSteps && Array.isArray(options.editSteps) && options.editSteps.length > 0) {
+        // Resolve step names to indices
+        const resolvedSteps = [];
+        options.editSteps.forEach(stepName => {
+            const index = flowConfig.flow.findIndex(s => s.name === stepName);
+            if (index !== -1) {
+                resolvedSteps.push(index);
+                console.log(`   🔍 editSteps: "${stepName}" → step index ${index}`);
+            } else {
+                console.warn(`   ⚠️ editSteps: step name "${stepName}" not found in flow`);
+            }
+        });
+
+        if (resolvedSteps.length > 0) {
+            chatState.editSteps = resolvedSteps;
+            chatState.editStepsIndex = 0;
+            chatState.onEditComplete = typeof options.onEditComplete === 'function' ? options.onEditComplete : null;
+            chatState.editFinalButtonText = options.editFinalButtonText || null;
+            chatState.step = resolvedSteps[0];  // Start at the first edit step
+            console.log(`🛤️ Edit-steps mode: ${resolvedSteps.length} steps to edit`, resolvedSteps);
+            console.log(`   onEditComplete: ${chatState.onEditComplete ? 'provided' : 'not provided'}`);
+            console.log(`   editFinalButtonText: ${chatState.editFinalButtonText || 'not set'}`);
+        } else {
+            console.warn('⚠️ editSteps provided but no valid step names found - using normal flow');
+            chatState.editSteps = null;
+            chatState.editStepsIndex = 0;
+            chatState.onEditComplete = null;
+            chatState.editFinalButtonText = null;
+        }
+    } else {
+        chatState.editSteps = null;
+        chatState.editStepsIndex = 0;
+        chatState.onEditComplete = null;
+        chatState.editFinalButtonText = null;
+    }
+
     elements.messages = elements.container.querySelector('[data-chat-element="messages-container"]');
     elements.nextBtn = elements.container.querySelector('[data-chat-element="next-button"]');
     elements.cancelBtn = elements.container.querySelector('[data-chat-element="cancel-button"]');
@@ -3617,7 +3812,11 @@ function reset() {
     chatState.history = [];
     chatState.currentSelection = null;
     chatState.chatMode = 'create';  // ✅ Reset to create mode
-    
+    chatState.editSteps = null;
+    chatState.editStepsIndex = 0;
+    chatState.onEditComplete = null;
+    chatState.editFinalButtonText = null;
+
     // ✅ Move back any injected elements before clearing
     if (elements.messages) {
         const injectedElements = elements.messages.querySelectorAll('[data-chat-injected="true"]');