lisichatbot 1.2.9 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "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');
@@ -690,7 +697,7 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         minInput.min = customConfig.min !== undefined ? customConfig.min : 0;
         minInput.max = customConfig.max !== undefined ? customConfig.max : 100;
         minInput.value = showMinMax && existingData[0] !== undefined ? existingData[0] : '';
-        minInput.placeholder = `Min (${minInput.min}+)`;
+        // Removed placeholder
         
         if (showMinMax) {
             console.log(`  ✅ Pre-filled min: ${existingData[0]}`);
@@ -713,7 +720,7 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         maxInput.min = customConfig.min !== undefined ? customConfig.min : 0;
         maxInput.max = customConfig.max !== undefined ? customConfig.max : 100;
         maxInput.value = showMinMax && existingData[1] !== undefined ? existingData[1] : '';
-        maxInput.placeholder = `Max (${maxInput.max} max)`;
+        // Removed placeholder
         
         if (showMinMax) {
             console.log(`  ✅ Pre-filled max: ${existingData[1]}`);
@@ -760,6 +767,14 @@ function renderMinMaxInputs(field, customConfig, existingData) {
             }
         };
         
+        // Apply visual feedback immediately if pre-filled
+        if (showMinMax) {
+            updateVisualFeedback();
+            // Also run validation to set currentSelection
+            validateMinMax(field, customConfig);
+            console.log('  ✅ Applied visual feedback for pre-filled values');
+        }
+        
         minInput.onfocus = () => {
             selectCustomOption(field);
             updateVisualFeedback();
@@ -832,8 +847,16 @@ function handleCustomSelectClick(element, field, customConfig) {
     if (isCustom) {
         // Show min/max inputs
         const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+        console.log('  📦 Looking for rangeWrapper:', `[data-chat-element="range-wrapper"][data-field="${field}"]`);
+        console.log('  📦 Found rangeWrapper:', rangeWrapper);
+        
         if (rangeWrapper) {
+            console.log('  📦 Current display:', rangeWrapper.style.display);
             rangeWrapper.style.display = 'flex'; // Keep flex!
+            console.log('  ✅ Set rangeWrapper display to flex');
+            console.log('  📦 New display:', rangeWrapper.style.display);
+        } else {
+            console.log('  ❌ rangeWrapper not found!');
         }
         
         // Don't save data yet - wait for validation
@@ -845,12 +868,18 @@ function handleCustomSelectClick(element, field, customConfig) {
         if (rangeWrapper) {
             rangeWrapper.style.display = 'none';
             
-            // Clear input values
-            const minInput = rangeWrapper.querySelector('[data-input-type="min"] [data-chat-input-element="input"]');
-            const maxInput = rangeWrapper.querySelector('[data-input-type="max"] [data-chat-input-element="input"]');
+            // Clear input values - fixed selectors
+            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"]`);
             
-            if (minInput) minInput.value = '';
-            if (maxInput) maxInput.value = '';
+            if (minInput) {
+                minInput.value = '';
+                console.log('  🧹 Cleared min input');
+            }
+            if (maxInput) {
+                maxInput.value = '';
+                console.log('  🧹 Cleared max input');
+            }
             
             // Reset visual feedback (background and ticks)
             const minContainer = rangeWrapper.querySelector('[data-chat-element="single-select-custom-min"]');
@@ -1019,15 +1048,35 @@ function validateMinMax(field, customConfig) {
     
     // Store as array [min, max]
     chatState.data[field] = [minValue, maxValue];
+    
+    // Get the current step's input config for formatting
+    const currentStep = flowData.flow[chatState.step];
+    const inputConfig = currentStep?.input || {};
+    const valueType = inputConfig.selectedInputValueType;
+    const prefix = inputConfig.selectedInputPrefix || '';
+    const suffix = inputConfig.selectedInputSuffix || '';
+    
+    // Format display name
+    let displayName = `${minValue}-${maxValue}`;
+    if (valueType === 'arrayRange') {
+        const formattedMin = minValue.toLocaleString();
+        const formattedMax = maxValue.toLocaleString();
+        displayName = `${formattedMin} - ${formattedMax}`;
+    }
+    
+    // Add prefix and suffix with spaces
+    if (prefix) displayName = `${prefix} ${displayName}`;
+    if (suffix) displayName = `${displayName} ${suffix}`;
+    
     chatState.currentSelection = { 
         field, 
         value: [minValue, maxValue], 
-        name: `${minValue}-${maxValue}` 
+        name: displayName
     };
     
     console.log(`✅✅✅ ALL VALIDATION PASSED!`);
     console.log(`💾 Data saved: chatState.data.${field} = [${minValue}, ${maxValue}]`);
-    console.log(`💾 Current selection: ${minValue}-${maxValue}`);
+    console.log(`💾 Display name: "${displayName}"`);
     console.log(`🟢 Next button: ENABLED\n`);
     
     enableNextButton();
@@ -1038,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
@@ -1056,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);
@@ -1072,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;
             
@@ -1090,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)`);
             }
         };
     }
@@ -1330,14 +1444,34 @@ async function handleNext() {
 
     // Add user message (only if selection was made)
     if (chatState.currentSelection) {
-        addMessage(chatState.currentSelection.name, 'user', false, chatState.step);
+        // Get the step's input config
+        const inputConfig = currentStep.input || {};
+        const valueType = inputConfig.selectedInputValueType;
+        const prefix = inputConfig.selectedInputPrefix || '';
+        const suffix = inputConfig.selectedInputSuffix || '';
+        
+        let displayName = chatState.currentSelection.name;
+        
+        // Format based on valueType
+        if (valueType === 'arrayRange' && Array.isArray(chatState.currentSelection.value)) {
+            const [min, max] = chatState.currentSelection.value;
+            const formattedMin = min.toLocaleString();
+            const formattedMax = max.toLocaleString();
+            displayName = `${formattedMin} - ${formattedMax}`;
+        }
+        
+        // Add prefix and suffix with spaces
+        if (prefix) displayName = `${prefix} ${displayName}`;
+        if (suffix) displayName = `${displayName} ${suffix}`;
+        
+        addMessage(displayName, 'user', false, chatState.step);
 
         // Save to history
         chatState.history.push({
             step: chatState.step,
             field: chatState.currentSelection.field,
             value: chatState.currentSelection.value,
-            name: chatState.currentSelection.name
+            name: displayName
         });
     }
 
@@ -1437,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
@@ -1478,19 +1620,39 @@ async function showNextStep() {
             }
         }
     } else {
-        // Auto-advance for steps without input
-        setTimeout(() => {
-            chatState.step++;
-            
-            // Update edit icons after auto-advance
-            updateEditIcons();
-            
-            if (chatState.step < flowData.flow.length) {
-                showNextStep();
-            } else {
-                handleCompletion();
-            }
-        }, config.autoAdvanceDelay);
+        // No input
+        const shouldAutoAdvance = nextStep.nextButtonDisplay !== false;
+        
+        if (shouldAutoAdvance) {
+            // Auto-advance for steps without input (default behavior)
+            setTimeout(() => {
+                chatState.step++;
+                
+                // Update edit icons after auto-advance
+                updateEditIcons();
+                
+                if (chatState.step < flowData.flow.length) {
+                    showNextStep();
+                } else {
+                    handleCompletion();
+                }
+            }, config.autoAdvanceDelay);
+        } else {
+            // Don't auto-advance if nextButtonDisplay is explicitly false
+            console.log('  ⏸️ Not auto-advancing (nextButtonDisplay: false)');
+        }
+    }
+    
+    // Handle nextButtonDisplay - default is true
+    const showNextButton = nextStep.nextButtonDisplay !== false;
+    if (elements.nextBtn) {
+        if (showNextButton) {
+            elements.nextBtn.style.display = '';
+            console.log('  👁️ Next button shown (nextButtonDisplay: true or undefined)');
+        } else {
+            elements.nextBtn.style.display = 'none';
+            console.log('  🙈 Next button hidden (nextButtonDisplay: false)');
+        }
     }
     
     // Always update edit icons at the end to ensure correct state