lisichatbot 1.4.0 → 1.4.2

package/package.json

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

package/src/index.js

@@ -540,6 +540,8 @@ function renderOptions(options, field, isSingleSelect = true) {
     optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
 
+    let hasPreselectedOptions = false; // ✅ Track if any options are pre-selected
+
     options.forEach((option, index) => {
         const optionName = option.name || option;
         const optionValue = option.value !== undefined ? option.value : option;
@@ -562,6 +564,7 @@ function renderOptions(options, field, isSingleSelect = true) {
             clone.classList.add('cf-checked');
             clone.style.backgroundColor = config.selectedBackground;
             console.log(`  ✅ Pre-selected: ${optionName}`);
+            hasPreselectedOptions = true; // ✅ Mark that we have pre-selections
         } else {
             clone.classList.remove('cf-checked');
             clone.style.backgroundColor = 'transparent';
@@ -610,6 +613,31 @@ function renderOptions(options, field, isSingleSelect = true) {
             handleOptionClick(el, field, isSingleSelect);
         };
     });
+
+    // ✅ FIX: Enable Next button if options are pre-selected
+    if (hasPreselectedOptions) {
+        // Set currentSelection for pre-selected options
+        if (isSingleSelect) {
+            chatState.currentSelection = {
+                field,
+                value: existingData,
+                name: options.find(o => JSON.stringify(o.value !== undefined ? o.value : o) === JSON.stringify(existingData))?.name || existingData
+            };
+        } else {
+            const selectedNames = existingData.map(val => {
+                const opt = options.find(o => JSON.stringify(o.value !== undefined ? o.value : o) === JSON.stringify(val));
+                return opt ? (opt.name || opt) : val;
+            }).join(', ');
+            chatState.currentSelection = {
+                field,
+                value: existingData,
+                name: selectedNames
+            };
+        }
+        
+        enableNextButton();
+        console.log(`  ✅ Pre-selected options found - Next button enabled`);
+    }
 }
 
 // =============================================================================
@@ -637,6 +665,8 @@ function renderColorOptions(options, field) {
     optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
 
+    let hasPreselectedOptions = false; // ✅ Track if any options are pre-selected
+
     options.forEach((option, index) => {
         const optionName = option.name || option;
         const optionValue = option.value !== undefined ? option.value : option;
@@ -654,6 +684,7 @@ function renderColorOptions(options, field) {
             clone.classList.add('cf-checked');
             clone.style.backgroundColor = config.selectedBackground;
             console.log(`  ✅ Pre-selected color: ${optionName}`);
+            hasPreselectedOptions = true; // ✅ Mark that we have pre-selections
         } else {
             clone.classList.remove('cf-checked');
             clone.style.backgroundColor = 'transparent';
@@ -711,6 +742,24 @@ function renderColorOptions(options, field) {
             handleOptionClick(el, field, false);
         };
     });
+
+    // ✅ FIX: Enable Next button if options are pre-selected
+    if (hasPreselectedOptions) {
+        // Set currentSelection for pre-selected options
+        const selectedNames = existingData.map(val => {
+            const opt = options.find(o => JSON.stringify(o.value !== undefined ? o.value : o) === JSON.stringify(val));
+            return opt ? (opt.name || opt) : val;
+        }).join(', ');
+        
+        chatState.currentSelection = {
+            field,
+            value: existingData,
+            name: selectedNames
+        };
+        
+        enableNextButton();
+        console.log(`  ✅ Pre-selected color options found - Next button enabled`);
+    }
 }
 
 // =============================================================================
@@ -738,6 +787,8 @@ function renderCustomSelectOptions(options, field, customConfig) {
     optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
 
+    let hasPreselectedOption = false; // ✅ Track if any option is pre-selected
+
     options.forEach((option, index) => {
         const optionName = option.name || option;
         const optionValue = option.value !== undefined ? option.value : option;
@@ -755,6 +806,7 @@ function renderCustomSelectOptions(options, field, customConfig) {
             clone.classList.add('cf-checked');
             clone.style.backgroundColor = config.selectedBackground;
             console.log(`  ✅ Pre-selected: ${optionName}`);
+            hasPreselectedOption = true; // ✅ Mark that we have a pre-selection
         } else {
             clone.classList.remove('cf-checked');
             clone.style.backgroundColor = 'transparent';
@@ -799,6 +851,7 @@ function renderCustomSelectOptions(options, field, customConfig) {
             customClone.classList.add('cf-checked');
             customClone.style.backgroundColor = config.selectedBackground;
             console.log(`  ✅ Pre-selected: Custom Range [${existingData[0]}, ${existingData[1]}]`);
+            hasPreselectedOption = true; // ✅ Mark that custom is pre-selected
         } else {
             customClone.classList.remove('cf-checked');
             customClone.style.backgroundColor = 'transparent';
@@ -842,6 +895,35 @@ function renderCustomSelectOptions(options, field, customConfig) {
             handleCustomSelectClick(el, field, customConfig);
         };
     });
+
+    // ✅ FIX: Enable Next button if option is pre-selected
+    if (hasPreselectedOption) {
+        // Set currentSelection
+        const isCustomSelected = Array.isArray(existingData) && existingData.length === 2;
+        
+        if (isCustomSelected) {
+            // Custom range selected - currentSelection will be set by validateMinMax
+            const validation = validateMinMax(field, customConfig);
+            if (validation.valid) {
+                enableNextButton();
+                console.log(`  ✅ Pre-selected custom range is valid - Next button enabled`);
+            }
+        } else {
+            // Regular option selected
+            const selectedOption = options.find(o => 
+                JSON.stringify(o.value !== undefined ? o.value : o) === JSON.stringify(existingData)
+            );
+            
+            chatState.currentSelection = {
+                field,
+                value: existingData,
+                name: selectedOption ? (selectedOption.name || selectedOption) : existingData
+            };
+            
+            enableNextButton();
+            console.log(`  ✅ Pre-selected option found - Next button enabled`);
+        }
+    }
 }
 
 function renderMinMaxInputs(field, customConfig, existingData) {
@@ -1012,7 +1094,52 @@ function handleCustomSelectClick(element, field, customConfig) {
 
     console.log(`Custom-select clicked:`, { field, name: optionName, isCustom });
 
+    // ✅ FIX: Check if this option is already selected - allow deselection
+    const isAlreadySelected = element.classList.contains('cf-checked');
+    
     const allOptions = document.querySelectorAll(`[data-field="${field}"][data-chat-element="single-select-input"]`);
+    
+    if (isAlreadySelected) {
+        // ✅ Deselect the currently selected option
+        console.log(`  🔄 Deselecting "${optionName}"`);
+        
+        element.classList.remove('cf-checked');
+        element.style.setProperty('background-color', 'transparent', 'important');
+        const tickIcon = element.querySelector('[data-chat-input-element="tick-icon"]');
+        if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
+        
+        // Hide range wrapper if custom was deselected
+        if (isCustom) {
+            const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+            if (rangeWrapper) {
+                rangeWrapper.style.display = 'none';
+            }
+        }
+        
+        // Clear data
+        delete chatState.data[field];
+        chatState.currentSelection = null;
+        
+        console.log(`  ❌ Deselected "${optionName}" - No selection`);
+        
+        // ✅ Check if input is required - disable button if nothing selected
+        const currentStep = flowData.flow[chatState.step];
+        const inputRequired = currentStep.inputRequired === true;
+        
+        if (inputRequired) {
+            disableNextButton();
+            console.log('  🔒 Input required - Next button disabled');
+        } else {
+            enableNextButton();
+            console.log('  🔓 Input not required - Next button still enabled');
+        }
+        
+        return; // Exit early
+    }
+    
+    // ✅ Select this option (deselect others first)
+    console.log(`  ✅ Selecting "${optionName}"`);
+    
     allOptions.forEach(opt => {
         opt.classList.remove('cf-checked');
         opt.style.setProperty('background-color', 'transparent', 'important');
@@ -1460,27 +1587,63 @@ function handleOptionClick(element, field, isSingleSelect) {
     }
 
     if (isSingleSelect) {
+        // ✅ FIX: Check if this option is already selected - allow deselection
+        const isAlreadySelected = element.classList.contains('cf-checked');
+        
         const selector = `[data-field="${field}"][data-chat-element="${inputType}"]`;
         const allOptions = document.querySelectorAll(selector);
         
-        allOptions.forEach(opt => {
-            opt.classList.remove('cf-checked');
-            opt.style.setProperty('background-color', 'transparent', 'important');
+        if (isAlreadySelected) {
+            // ✅ Deselect the currently selected option
+            console.log(`  🔄 Deselecting "${optionName}"`);
             
-            const otherTick = opt.querySelector('[data-chat-input-element="tick-icon"]');
-            const otherInput = opt.querySelector('[data-chat-input-element="input"]');
+            element.classList.remove('cf-checked');
+            element.style.setProperty('background-color', 'transparent', 'important');
+            if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
+            if (input) input.checked = false;
             
-            if (otherTick) otherTick.style.setProperty('display', 'none', 'important');
-            if (otherInput) otherInput.checked = false;
-        });
+            // Clear data
+            delete chatState.data[field];
+            chatState.currentSelection = null;
+            
+            console.log(`  ❌ Deselected "${optionName}" - No selection`);
+            
+            // ✅ Check if input is required - disable button if nothing selected
+            const currentStep = flowData.flow[chatState.step];
+            const inputRequired = currentStep.inputRequired === true;
+            
+            if (inputRequired) {
+                disableNextButton();
+                console.log('  🔒 Input required - Next button disabled');
+            } else {
+                enableNextButton();
+                console.log('  🔓 Input not required - Next button still enabled');
+            }
+        } else {
+            // ✅ Select this option (deselect others first)
+            console.log(`  ✅ Selecting "${optionName}"`);
+            
+            allOptions.forEach(opt => {
+                opt.classList.remove('cf-checked');
+                opt.style.setProperty('background-color', 'transparent', 'important');
+                
+                const otherTick = opt.querySelector('[data-chat-input-element="tick-icon"]');
+                const otherInput = opt.querySelector('[data-chat-input-element="input"]');
+                
+                if (otherTick) otherTick.style.setProperty('display', 'none', 'important');
+                if (otherInput) otherInput.checked = false;
+            });
 
-        element.classList.add('cf-checked');
-        element.style.setProperty('background-color', config.selectedBackground, 'important');
-        if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
-        if (input) input.checked = true;
+            element.classList.add('cf-checked');
+            element.style.setProperty('background-color', config.selectedBackground, 'important');
+            if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
+            if (input) input.checked = true;
 
-        chatState.data[field] = value;
-        chatState.currentSelection = { field, value, name: optionName };
+            chatState.data[field] = value;
+            chatState.currentSelection = { field, value, name: optionName };
+            
+            enableNextButton();
+        }
 
     } else {
         const isChecked = !element.classList.contains('cf-checked');
@@ -1764,9 +1927,19 @@ async function showNextStep() {
         } else if (inputType === 'multi-select-color') {
             renderColorOptions(nextStep.input.options, nextStep.input.field);
             
-            if (!inputRequired) {
+            // ✅ Check if pre-filled - renderColorOptions handles enabling if pre-filled
+            // Only disable if NOT pre-filled and required
+            const existingData = chatState.data[nextStep.input.field];
+            const hasPreFill = Array.isArray(existingData) && existingData.length > 0;
+            
+            if (inputRequired && !hasPreFill) {
+                disableNextButton();
+                console.log('  🔒 Multi-select-color required with no pre-fill - Next button disabled');
+            } else if (!inputRequired && !hasPreFill) {
                 enableNextButton();
+                console.log('  🔓 Multi-select-color not required - Next button enabled');
             }
+            // If hasPreFill, renderColorOptions already handled it
         } else if (inputType === 'single-select-custom') {
             renderCustomSelectOptions(
                 nextStep.input.options, 
@@ -1774,11 +1947,18 @@ async function showNextStep() {
                 nextStep.input.custom
             );
             
-            if (inputRequired) {
+            // ✅ Check if pre-filled - renderCustomSelectOptions handles enabling if pre-filled
+            const existingData = chatState.data[nextStep.input.field];
+            const hasPreFill = existingData !== undefined && existingData !== null;
+            
+            if (inputRequired && !hasPreFill) {
                 disableNextButton();
-            } else {
+                console.log('  🔒 Single-select-custom required with no pre-fill - Next button disabled');
+            } else if (!inputRequired && !hasPreFill) {
                 enableNextButton();
+                console.log('  🔓 Single-select-custom not required - Next button enabled');
             }
+            // If hasPreFill, renderCustomSelectOptions already handled it
         } else if (inputType === 'multi-select-dropdown') {
             // ✅ Render multi-select dropdown
             renderMultiSelectDropdown(nextStep.input.options, nextStep.input.field);
@@ -1795,9 +1975,24 @@ async function showNextStep() {
             const isSingleSelect = inputType === 'single-select';
             renderOptions(nextStep.input.options, nextStep.input.field, isSingleSelect);
             
-            if (!inputRequired) {
+            // ✅ Check if pre-filled - renderOptions handles enabling if pre-filled
+            const existingData = chatState.data[nextStep.input.field];
+            let hasPreFill = false;
+            
+            if (isSingleSelect) {
+                hasPreFill = existingData !== undefined && existingData !== null;
+            } else {
+                hasPreFill = Array.isArray(existingData) && existingData.length > 0;
+            }
+            
+            if (inputRequired && !hasPreFill) {
+                disableNextButton();
+                console.log(`  🔒 ${inputType} required with no pre-fill - Next button disabled`);
+            } else if (!inputRequired && !hasPreFill) {
                 enableNextButton();
+                console.log(`  🔓 ${inputType} not required - Next button enabled`);
             }
+            // If hasPreFill, renderOptions already handled it
         }
     } else {
         const delay = nextStep.autoAdvanceDelay !== undefined ? nextStep.autoAdvanceDelay : config.autoAdvanceDelay;