lisichatbot 1.4.4 → 1.4.6

package/package.json

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

package/src/index.js

@@ -610,7 +610,7 @@ function renderOptions(options, field, isSingleSelect = true) {
         el.onclick = (e) => {
             e.stopPropagation();
             e.preventDefault();
-            handleOptionClick(el, field, isSingleSelect);
+            handleOptionClick(el, field, isSingleSelect, options); // ✅ Pass options
         };
     });
 
@@ -739,7 +739,7 @@ function renderColorOptions(options, field) {
         el.onclick = (e) => {
             e.stopPropagation();
             e.preventDefault();
-            handleOptionClick(el, field, false);
+            handleOptionClick(el, field, false, options); // ✅ Pass options
         };
     });
 
@@ -1555,7 +1555,7 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
 // OPTION CLICK HANDLER USING CUSTOM ATTRIBUTES
 // =============================================================================
 
-function handleOptionClick(element, field, isSingleSelect) {
+function handleOptionClick(element, field, isSingleSelect, options) {
     const now = Date.now();
     const lastClick = element.getAttribute('data-last-click');
     if (lastClick && (now - parseInt(lastClick)) < 300) {
@@ -1705,24 +1705,35 @@ function handleOptionClick(element, field, isSingleSelect) {
             console.log(`   chatState.data.${field}:`, chatState.data[field]);
         }
 
-        const selector = `[data-field="${field}"][data-chat-element="${inputType}"].cf-checked`;
-        const selectedOptions = document.querySelectorAll(selector);
-        const selectedNames = Array.from(selectedOptions).map(opt => 
-            opt.getAttribute('data-name')
-        ).join(', ');
-
-        chatState.currentSelection = { 
-            field, 
-            value: chatState.data[field], 
-            name: selectedNames || 'None selected'
-        };
-        
-        console.log(`📊 Final state after toggle:`, {
-            field,
-            dataValue: chatState.data[field],
-            currentSelectionName: chatState.currentSelection.name,
-            checkedOptionsCount: selectedOptions.length
-        });
+        // ✅ FIX: Build currentSelection from actual data array, not DOM elements
+        // The DOM might have duplicate/old elements that still have cf-checked class
+        if (!chatState.data[field] || chatState.data[field].length === 0) {
+            // No selections
+            chatState.currentSelection = null;
+            console.log(`📊 No selections - currentSelection set to null`);
+        } else {
+            // Build name from actual data array by finding matching options
+            const selectedNames = chatState.data[field].map(val => {
+                // Find the option config that matches this value
+                const matchingOption = options.find(opt => {
+                    const optValue = opt.value !== undefined ? opt.value : opt;
+                    return JSON.stringify(optValue) === JSON.stringify(val);
+                });
+                return matchingOption ? (matchingOption.name || matchingOption) : val;
+            }).join(', ');
+            
+            chatState.currentSelection = { 
+                field, 
+                value: chatState.data[field], 
+                name: selectedNames || 'None selected'
+            };
+            
+            console.log(`📊 Final state after toggle:`, {
+                field,
+                dataValue: chatState.data[field],
+                currentSelectionName: chatState.currentSelection.name
+            });
+        }
     }
 
     enableNextButton();
@@ -1919,6 +1930,42 @@ async function handleNext() {
 async function showNextStep() {
     const nextStep = flowData.flow[chatState.step];
 
+    // ✅ NEW: Check if step should be displayed based on condition
+    if (nextStep.shouldDisplay) {
+        let shouldShow = false;
+        
+        if (typeof nextStep.shouldDisplay === 'function') {
+            // Custom function
+            try {
+                shouldShow = await nextStep.shouldDisplay(chatState.data);
+                console.log(`  🔍 shouldDisplay function returned: ${shouldShow}`);
+            } catch (error) {
+                console.error('Error in shouldDisplay function:', error);
+                shouldShow = false;
+            }
+        } else if (typeof nextStep.shouldDisplay === 'boolean') {
+            // Simple boolean
+            shouldShow = nextStep.shouldDisplay;
+            console.log(`  🔍 shouldDisplay boolean: ${shouldShow}`);
+        }
+        
+        if (!shouldShow) {
+            console.log(`  ⏭️ Skipping step ${chatState.step} (shouldDisplay returned false)`);
+            chatState.step++;
+            
+            if (chatState.step >= flowData.flow.length) {
+                handleCompletion();
+                return;
+            }
+            
+            // Recursively check next step
+            await showNextStep();
+            return;
+        }
+        
+        console.log(`  ✅ Displaying step ${chatState.step} (shouldDisplay returned true)`);
+    }
+
     if (nextStep.onStart) {
         try {
             const canStart = await nextStep.onStart(chatState.data);
@@ -2253,7 +2300,32 @@ function editStep(stepNumber) {
     console.log(`   Clearing history from step ${stepNumber} forward...`);
     chatState.history = chatState.history.filter(h => h.step < stepNumber);
     
-    console.log(`   ✅ Keeping ALL data intact for editing (no data deleted)`);
+    // ✅ Find dependent steps (but don't clear anything)
+    const editedStepField = flowData.flow[stepNumber]?.input?.field;
+    console.log(`   🔗 Checking for steps dependent on: ${editedStepField}`);
+    
+    if (editedStepField) {
+        // Find all steps that depend on the edited step
+        const dependentSteps = [];
+        flowData.flow.forEach((step, index) => {
+            if (index > stepNumber && step.dependsOn) {
+                // Check if this step depends on the edited field
+                const dependencies = Array.isArray(step.dependsOn) ? step.dependsOn : [step.dependsOn];
+                
+                if (dependencies.includes(editedStepField)) {
+                    dependentSteps.push(index);
+                    console.log(`   🔗 Found dependent step ${index} (depends on ${editedStepField})`);
+                }
+            }
+        });
+        
+        if (dependentSteps.length > 0) {
+            console.log(`   ✅ ${dependentSteps.length} dependent steps will be re-shown after editing`);
+            console.log(`   ✅ All data, messages, and history kept intact`);
+        }
+    }
+    
+    console.log(`   ✅ Keeping ALL data, messages, and history intact for editing`);
     console.log(`   Current data:`, chatState.data);
 
     console.log(`   Calling goToStep(${stepNumber})...`);