lisichatbot 1.2.7 → 1.2.9

package/package.json

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

package/src/index.js

@@ -671,11 +671,15 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         Array.isArray(existingData) && 
         existingData.length === 2;
 
-    rangeWrapper.style.display = showMinMax ? '' : 'none';
+    rangeWrapper.style.display = showMinMax ? 'flex' : 'none'; // Keep flex when visible!
 
     // Clone and setup min input
     const minClone = minTemplate.cloneNode(true);
     minClone.style.display = '';
+    minClone.style.marginRight = '16px'; // Horizontal gap
+    minClone.style.marginBottom = '12px'; // Bottom margin if wraps
+    minClone.style.width = 'auto'; // Don't stretch
+    minClone.style.flex = 'none'; // Don't grow or shrink
     minClone.setAttribute('data-field', field);
     
     const minInput = minClone.querySelector('[data-chat-input-element="input"]');
@@ -696,6 +700,9 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     // Clone and setup max input
     const maxClone = maxTemplate.cloneNode(true);
     maxClone.style.display = '';
+    maxClone.style.marginBottom = '12px'; // Bottom margin if wraps
+    maxClone.style.width = 'auto'; // Don't stretch
+    maxClone.style.flex = 'none'; // Don't grow or shrink
     maxClone.setAttribute('data-field', field);
     
     const maxInput = maxClone.querySelector('[data-chat-input-element="input"]');
@@ -796,7 +803,7 @@ function selectCustomOption(field) {
     // Show min/max inputs
     const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
     if (rangeWrapper) {
-        rangeWrapper.style.display = '';
+        rangeWrapper.style.display = 'flex'; // Keep flex!
     }
 }
 
@@ -826,7 +833,7 @@ function handleCustomSelectClick(element, field, customConfig) {
         // Show min/max inputs
         const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
         if (rangeWrapper) {
-            rangeWrapper.style.display = '';
+            rangeWrapper.style.display = 'flex'; // Keep flex!
         }
         
         // Don't save data yet - wait for validation
@@ -884,11 +891,22 @@ function handleCustomSelectClick(element, field, customConfig) {
 }
 
 function validateMinMax(field, customConfig) {
-    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"]`);
+    console.log(`\n🔍 === VALIDATING MIN/MAX for field: ${field} ===`);
+    
+    // Fixed selectors - input has all attributes on it directly
+    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');
+        console.log('  Tried selectors:');
+        console.log(`  Min: [data-field="${field}"][data-input-type="min"][data-chat-input-element="input"]`);
+        console.log(`  Max: [data-field="${field}"][data-input-type="max"][data-chat-input-element="input"]`);
+        console.log('  Found min:', minInput);
+        console.log('  Found max:', maxInput);
+        return { valid: false, error: null };
+    }
 
     const minValue = parseFloat(minInput.value);
     const maxValue = parseFloat(maxInput.value);
@@ -898,6 +916,14 @@ function validateMinMax(field, customConfig) {
     const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
     const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
 
+    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) {
@@ -907,6 +933,7 @@ function validateMinMax(field, customConfig) {
         // 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
@@ -922,7 +949,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 };
     }
@@ -930,7 +957,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 };
     }
@@ -938,9 +965,9 @@ function validateMinMax(field, customConfig) {
     // 2. Check if both are empty
     if (!minFilled && !maxFilled) {
         hideErrorDiv();
-        // Clear data when both empty
         delete chatState.data[field];
         chatState.currentSelection = null;
+        console.log(`ℹ️ Both empty - waiting for input`);
         disableNextButton();
         return { valid: false, error: null };
     }
@@ -949,37 +976,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();
@@ -992,7 +1025,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 };
 }
@@ -1215,14 +1252,24 @@ 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 one more time before proceeding
+            console.log(`🔄 Running final validation before proceeding...`);
             const validation = validateMinMax(field, customConfig);
             
+            console.log(`Validation result:`, validation);
+            
             if (!validation.valid) {
                 // If there's an error message, show it
                 if (validation.error) {
@@ -1251,6 +1298,8 @@ async function handleNext() {
                 
                 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');