lisichatbot 1.3.0 → 1.3.2

package/package.json

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

package/src/index.js

@@ -656,6 +656,13 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         return;
     }
 
+    // Remove existing rangeWrapper if it exists (for edit flow)
+    const existingRangeWrapper = elements.messages.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+    if (existingRangeWrapper) {
+        console.log('  🗑️ Removing existing rangeWrapper for re-render');
+        existingRangeWrapper.remove();
+    }
+
     // Create wrapper for min/max
     const rangeWrapper = document.createElement('div');
     rangeWrapper.setAttribute('data-chat-element', 'range-wrapper');
@@ -1080,7 +1087,7 @@ function validateMinMax(field, customConfig) {
 // TEXT/NUMBER INPUT RENDERING
 // =============================================================================
 
-function renderTextInput(field, inputType = 'text') {
+function renderTextInput(field, inputType = 'text', inputConfig = {}) {
     if (!elements.messages) return;
 
     // Determine input type attribute value
@@ -1098,6 +1105,17 @@ function renderTextInput(field, inputType = 'text') {
     // Get existing data for this field (for pre-filling when editing)
     const existingValue = chatState.data[field];
     console.log(`📝 Pre-filling ${field}:`, existingValue);
+    
+    // Check if validation should be applied (only if input has min/max defined)
+    const hasValidation = inputType === 'number' && 
+        (inputConfig.min !== undefined || inputConfig.max !== undefined);
+    
+    if (hasValidation) {
+        console.log(`  🔍 Validation enabled for ${field}:`, {
+            min: inputConfig.min,
+            max: inputConfig.max
+        });
+    }
 
     // Clone existing input element
     const clone = existingInput.cloneNode(true);
@@ -1114,17 +1132,46 @@ function renderTextInput(field, inputType = 'text') {
         inputElement.setAttribute('data-field', field);
         inputElement.name = field;
         
+        // Set min/max attributes if validation enabled
+        if (hasValidation) {
+            if (inputConfig.min !== undefined) {
+                inputElement.min = inputConfig.min;
+            }
+            if (inputConfig.max !== undefined) {
+                inputElement.max = inputConfig.max;
+            }
+        }
+        
         // Pre-fill value if it exists
         if (existingValue !== undefined && existingValue !== null) {
             inputElement.value = existingValue;
             console.log(`  ✅ Pre-filled with: ${existingValue}`);
+            
+            // If validation enabled, validate the pre-filled value
+            if (hasValidation) {
+                const value = parseFloat(existingValue);
+                const min = inputConfig.min;
+                const max = inputConfig.max;
+                
+                let isValid = !isNaN(value);
+                if (isValid && min !== undefined && value < min) isValid = false;
+                if (isValid && max !== undefined && value > max) isValid = false;
+                
+                if (isValid) {
+                    enableNextButton();
+                    console.log(`  ✅ Pre-filled value is valid: ${value}`);
+                } else {
+                    disableNextButton();
+                    console.log(`  ❌ Pre-filled value is invalid: ${value}`);
+                }
+            }
         } else {
             inputElement.value = '';
         }
         
         inputElement.type = inputType === 'number' ? 'number' : 'text';
         
-        // Add input event to enable Next button when user types
+        // Add input event handler
         inputElement.oninput = (e) => {
             const value = inputType === 'number' ? parseFloat(e.target.value) : e.target.value;
             
@@ -1132,11 +1179,36 @@ function renderTextInput(field, inputType = 'text') {
             chatState.data[field] = value;
             chatState.currentSelection = { field, value, name: value };
             
-            // Enable Next button if there's a value
-            if (value !== '' && value !== null && !isNaN(value)) {
-                enableNextButton();
+            // Apply validation ONLY if min/max defined at input level
+            if (hasValidation) {
+                const min = inputConfig.min;
+                const max = inputConfig.max;
+                
+                // Check if value is valid
+                let isValid = true;
+                let errorMessage = '';
+                
+                if (value === '' || isNaN(value)) {
+                    isValid = false;
+                    errorMessage = 'Please enter a valid number';
+                } else if (min !== undefined && value < min) {
+                    isValid = false;
+                    errorMessage = `Value must be at least ${min}`;
+                } else if (max !== undefined && value > max) {
+                    isValid = false;
+                    errorMessage = `Value must be at most ${max}`;
+                }
+                
+                if (isValid) {
+                    enableNextButton();
+                    console.log(`  ✅ Number input valid: ${value}`);
+                } else {
+                    disableNextButton();
+                    console.log(`  ❌ Number input invalid: ${errorMessage}`);
+                }
             } else {
-                disableNextButton();
+                // No validation - just log
+                console.log(`  📝 Input updated: ${value} (no validation)`);
             }
         };
     }
@@ -1499,13 +1571,21 @@ async function showNextStep() {
         
         if (inputType === 'text' || inputType === 'number') {
             // Render text or number input
-            renderTextInput(nextStep.input.field, inputType);
+            renderTextInput(nextStep.input.field, inputType, nextStep.input);
             
-            // Disable Next button initially (enabled when user types)
-            if (inputRequired) {
+            // Check if validation is enabled (number input with min/max defined)
+            const hasValidation = inputType === 'number' && 
+                (nextStep.input.min !== undefined || nextStep.input.max !== undefined);
+            
+            // Initial Next button state
+            if (inputRequired || hasValidation) {
+                // Disable if input is required OR has validation rules
                 disableNextButton();
+                console.log('  🔒 Next button disabled initially (input required or validation enabled)');
             } else {
+                // Enable if optional and no validation
                 enableNextButton();
+                console.log('  🔓 Next button enabled (optional input, no validation)');
             }
         } else if (inputType === 'multi-select-color') {
             // Render color options with color blocks
@@ -1540,7 +1620,7 @@ async function showNextStep() {
             }
         }
     } else {
-        // Auto-advance for steps without input
+        // No input - always auto-advance (nextButtonDisplay only controls button visibility)
         setTimeout(() => {
             chatState.step++;
             
@@ -1557,11 +1637,12 @@ async function showNextStep() {
     
     // Handle nextButtonDisplay - default is true
     const showNextButton = nextStep.nextButtonDisplay !== false;
-    if (elements.nextButton) {
+    if (elements.nextBtn) {
         if (showNextButton) {
-            elements.nextButton.style.display = '';
+            elements.nextBtn.style.display = '';
+            console.log('  👁️ Next button shown (nextButtonDisplay: true or undefined)');
         } else {
-            elements.nextButton.style.display = 'none';
+            elements.nextBtn.style.display = 'none';
             console.log('  🙈 Next button hidden (nextButtonDisplay: false)');
         }
     }