lisichatbot 1.2.6 → 1.2.8

package/package.json

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

package/src/index.js

@@ -282,6 +282,10 @@ function renderOptions(options, field, isSingleSelect = true) {
     // Create wrapper to hold all options
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
+    optionsWrapper.style.display = 'flex';
+    optionsWrapper.style.flexDirection = 'column';
+    optionsWrapper.style.alignItems = 'flex-start'; // Don't stretch options
+    optionsWrapper.style.gap = '8px';
 
     // Clone and fill option element for each option
     options.forEach((option, index) => {
@@ -396,6 +400,10 @@ function renderColorOptions(options, field) {
     // Create wrapper to hold all options
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
+    optionsWrapper.style.display = 'flex';
+    optionsWrapper.style.flexDirection = 'column';
+    optionsWrapper.style.alignItems = 'flex-start'; // Don't stretch options
+    optionsWrapper.style.gap = '8px';
 
     // Clone and fill option element for each option
     options.forEach((option, index) => {
@@ -514,6 +522,10 @@ function renderCustomSelectOptions(options, field, customConfig) {
     // Create wrapper to hold all options
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
+    optionsWrapper.style.display = 'flex';
+    optionsWrapper.style.flexDirection = 'column';
+    optionsWrapper.style.alignItems = 'flex-start'; // Don't stretch options
+    optionsWrapper.style.gap = '8px';
 
     // Render regular options
     options.forEach((option, index) => {
@@ -649,6 +661,9 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     rangeWrapper.setAttribute('data-chat-element', 'range-wrapper');
     rangeWrapper.setAttribute('data-field', field);
     rangeWrapper.style.marginBottom = '16px'; // Add space below wrapper
+    rangeWrapper.style.display = 'flex';
+    rangeWrapper.style.gap = '16px'; // Gap between min and max
+    rangeWrapper.style.flexWrap = 'wrap';
 
     // Check if should show min/max (custom option selected)
     // Data is stored as array [min, max]
@@ -661,7 +676,9 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     // Clone and setup min input
     const minClone = minTemplate.cloneNode(true);
     minClone.style.display = '';
-    minClone.style.marginRight = '12px'; // Add space between inputs
+    minClone.style.marginRight = '16px'; // Gap between min and max
+    minClone.style.width = 'auto'; // Don't stretch
+    minClone.style.flex = '0 0 auto'; // Don't grow or shrink
     minClone.setAttribute('data-field', field);
     
     const minInput = minClone.querySelector('[data-chat-input-element="input"]');
@@ -682,6 +699,8 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     // Clone and setup max input
     const maxClone = maxTemplate.cloneNode(true);
     maxClone.style.display = '';
+    maxClone.style.width = 'auto'; // Don't stretch
+    maxClone.style.flex = '0 0 auto'; // Don't grow or shrink
     maxClone.setAttribute('data-field', field);
     
     const maxInput = maxClone.querySelector('[data-chat-input-element="input"]');
@@ -870,11 +889,16 @@ function handleCustomSelectClick(element, field, customConfig) {
 }
 
 function validateMinMax(field, customConfig) {
+    console.log(`\n🔍 === VALIDATING MIN/MAX for field: ${field} ===`);
+    
     const minInput = document.querySelector(`[data-field="${field}"][data-input-type="min"] [data-chat-input-element="input"]`);
     const maxInput = document.querySelector(`[data-field="${field}"][data-input-type="max"] [data-chat-input-element="input"]`);
     const errorDiv = document.querySelector(`[data-chat-element="range-error"][data-field="${field}"]`);
 
-    if (!minInput || !maxInput) return { valid: false, error: null };
+    if (!minInput || !maxInput) {
+        console.log('❌ Min or Max input not found');
+        return { valid: false, error: null };
+    }
 
     const minValue = parseFloat(minInput.value);
     const maxValue = parseFloat(maxInput.value);
@@ -884,12 +908,24 @@ function validateMinMax(field, customConfig) {
     const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
     const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
 
-    // Helper to show error in div
+    console.log(`📊 Input values:
+  Min input value: "${minInput.value}" (filled: ${minFilled}, parsed: ${minValue})
+  Max input value: "${maxInput.value}" (filled: ${maxFilled}, parsed: ${maxValue})`);
+    
+    console.log(`📏 Constraints:
+  Min constraint: >= ${minConstraint}
+  Max constraint: <= ${maxConstraint}`);
+
+    // Helper to show error in div and clear data
     const showErrorDiv = (message) => {
         if (errorDiv) {
             errorDiv.textContent = message;
             errorDiv.style.display = 'block';
         }
+        // Clear the data when validation fails
+        delete chatState.data[field];
+        chatState.currentSelection = null;
+        console.log(`🗑️ Data cleared for field: ${field}`);
     };
 
     // Helper to hide error div
@@ -905,7 +941,7 @@ function validateMinMax(field, customConfig) {
     if (minFilled && !maxFilled) {
         const error = config.customRangeErrors.maxRequired;
         showErrorDiv(error);
-        console.log('  ❌ Validation error:', error);
+        console.log(`❌ FAIL: Only min filled`);
         disableNextButton();
         return { valid: false, error };
     }
@@ -913,7 +949,7 @@ function validateMinMax(field, customConfig) {
     if (!minFilled && maxFilled) {
         const error = config.customRangeErrors.minRequired;
         showErrorDiv(error);
-        console.log('  ❌ Validation error:', error);
+        console.log(`❌ FAIL: Only max filled`);
         disableNextButton();
         return { valid: false, error };
     }
@@ -921,6 +957,9 @@ function validateMinMax(field, customConfig) {
     // 2. Check if both are empty
     if (!minFilled && !maxFilled) {
         hideErrorDiv();
+        delete chatState.data[field];
+        chatState.currentSelection = null;
+        console.log(`ℹ️ Both empty - waiting for input`);
         disableNextButton();
         return { valid: false, error: null };
     }
@@ -929,37 +968,43 @@ function validateMinMax(field, customConfig) {
     if (isNaN(minValue) || isNaN(maxValue)) {
         const error = config.customRangeErrors.bothRequired;
         showErrorDiv(error);
-        console.log('  ❌ Validation error:', error);
+        console.log(`❌ FAIL: Invalid numbers (min: ${minValue}, max: ${maxValue})`);
         disableNextButton();
         return { valid: false, error };
     }
 
     // 4. Check min constraint
+    console.log(`🔍 Checking: ${minValue} < ${minConstraint}?`);
     if (minValue < minConstraint) {
         const error = config.customRangeErrors.minBelowConstraint.replace('{min}', minConstraint);
         showErrorDiv(error);
-        console.log('  ❌ Validation error:', error);
+        console.log(`❌ FAIL: Min (${minValue}) < constraint (${minConstraint})`);
         disableNextButton();
         return { valid: false, error };
     }
+    console.log(`✅ PASS: Min (${minValue}) >= constraint (${minConstraint})`);
 
     // 5. Check max constraint
+    console.log(`🔍 Checking: ${maxValue} > ${maxConstraint}?`);
     if (maxValue > maxConstraint) {
         const error = config.customRangeErrors.maxAboveConstraint.replace('{max}', maxConstraint);
         showErrorDiv(error);
-        console.log('  ❌ Validation error:', error);
+        console.log(`❌ FAIL: Max (${maxValue}) > constraint (${maxConstraint})`);
         disableNextButton();
         return { valid: false, error };
     }
+    console.log(`✅ PASS: Max (${maxValue}) <= constraint (${maxConstraint})`);
 
     // 6. Check min < max
+    console.log(`🔍 Checking: ${minValue} >= ${maxValue}?`);
     if (minValue >= maxValue) {
         const error = config.customRangeErrors.minGreaterThanMax;
         showErrorDiv(error);
-        console.log('  ❌ Validation error:', error);
+        console.log(`❌ FAIL: Min (${minValue}) >= Max (${maxValue})`);
         disableNextButton();
         return { valid: false, error };
     }
+    console.log(`✅ PASS: Min (${minValue}) < Max (${maxValue})`);
 
     // All valid! Hide error and save data as array
     hideErrorDiv();
@@ -972,7 +1017,11 @@ function validateMinMax(field, customConfig) {
         name: `${minValue}-${maxValue}` 
     };
     
-    console.log('  ✅ Range valid - stored as array:', [minValue, maxValue]);
+    console.log(`✅✅✅ ALL VALIDATION PASSED!`);
+    console.log(`💾 Data saved: chatState.data.${field} = [${minValue}, ${maxValue}]`);
+    console.log(`💾 Current selection: ${minValue}-${maxValue}`);
+    console.log(`🟢 Next button: ENABLED\n`);
+    
     enableNextButton();
     return { valid: true, error: null };
 }
@@ -1195,37 +1244,58 @@ async function handleNext() {
         const field = currentStep.input.field;
         const customConfig = currentStep.input.custom;
         
+        console.log(`\n🎯 === HANDLE NEXT: Checking single-select-custom validation ===`);
+        console.log(`Field: ${field}`);
+        console.log(`Custom config:`, customConfig);
+        
         // Check if custom range was selected (data is array)
         const selectedValue = chatState.data[field];
         const isCustomRange = Array.isArray(selectedValue);
         
+        console.log(`Selected value:`, selectedValue);
+        console.log(`Is custom range (array)? ${isCustomRange}`);
+        
         if (isCustomRange && customConfig) {
-            // Validate the custom range
+            // Validate the custom range one more time before proceeding
+            console.log(`🔄 Running final validation before proceeding...`);
             const validation = validateMinMax(field, customConfig);
             
-            if (!validation.valid && validation.error) {
-                // Show error as bot message
-                console.log('  ⚠️ Validation failed, showing error message');
-                
-                // Hide current inputs (options and range wrapper)
-                const optionsWrapper = document.querySelector('[data-chat-element="options-wrapper"]');
-                if (optionsWrapper) {
-                    optionsWrapper.style.display = 'none';
-                }
-                
-                const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
-                if (rangeWrapper) {
-                    rangeWrapper.style.display = 'none';
+            console.log(`Validation result:`, validation);
+            
+            if (!validation.valid) {
+                // If there's an error message, show it
+                if (validation.error) {
+                    console.log('  ⚠️ Validation failed in handleNext, showing error message');
+                    
+                    // Hide current inputs (options and range wrapper)
+                    const optionsWrapper = document.querySelector('[data-chat-element="options-wrapper"]');
+                    if (optionsWrapper) {
+                        optionsWrapper.style.display = 'none';
+                    }
+                    
+                    const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+                    if (rangeWrapper) {
+                        rangeWrapper.style.display = 'none';
+                    }
+                    
+                    // Add error message as bot message
+                    addMessage(validation.error, 'bot', false, null);
+                    
+                    // Re-display the same step with fresh inputs
+                    await showNextStep();
+                } else {
+                    // No error message, just incomplete data - do nothing
+                    console.log('  ⚠️ Validation incomplete, waiting for user input');
                 }
                 
-                // Add error message as bot message
-                addMessage(validation.error, 'bot', false, null);
-                
-                // Re-display the same step with fresh inputs
-                await showNextStep();
-                
                 return; // Stop here, don't proceed
             }
+            
+            console.log('✅ Validation passed, proceeding to next step');
+        } else if (customConfig && chatState.currentSelection && chatState.currentSelection.value === customConfig.value) {
+            // User selected the custom option but hasn't entered valid min/max yet
+            console.log('  ⚠️ Custom option selected but no valid range entered');
+            return; // Stop here
         }
     }