lisichatbot 1.2.5 → 1.2.7

package/package.json

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

package/src/index.js

@@ -145,7 +145,7 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
                     console.log(`   Calling editStep(${stepNumber})...`);
                     editStep(stepNumber);
                 };
-                editIcon.style.setProperty('display', 'block', 'important');
+                editIcon.style.setProperty('display', 'flex', 'important');
                 editIcon.style.setProperty('margin-left', '8px', 'important');
                 editIcon.style.setProperty('cursor', 'pointer', 'important');
                 console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} is latest previous step with input)`);
@@ -184,7 +184,7 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             
             // Only show if has input AND it's a previous step AND it's latest instance
             if (hasInput && stepNumber !== null && stepNumber < chatState.step && isLatest) {
-                editIconAfterAppend.style.setProperty('display', 'block', 'important');
+                editIconAfterAppend.style.setProperty('display', 'flex', 'important');
                 
                 // Debug: Check spacing
                 setTimeout(() => {
@@ -238,7 +238,7 @@ function updateEditIcons() {
                     editStep(stepNumber);
                 };
                 editIcon.setAttribute('data-chat-step', stepNumber);
-                editIcon.style.setProperty('display', 'block', 'important');
+                editIcon.style.setProperty('display', 'flex', 'important');
                 editIcon.style.setProperty('cursor', 'pointer', 'important');
                 editIcon.style.setProperty('margin-left', '8px', 'important');
                 console.log(`  ✏️ Step ${stepNumber}: Icon SHOWN (latest previous step)`);
@@ -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) => {
@@ -648,6 +660,10 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     const rangeWrapper = document.createElement('div');
     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]
@@ -712,14 +728,48 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     
     elements.messages.appendChild(rangeWrapper);
 
-    // Add focus handlers to select custom option when editing
-    if (minInput) {
-        minInput.onfocus = () => selectCustomOption(field);
-        minInput.oninput = () => validateMinMax(field, customConfig);
-    }
-    if (maxInput) {
-        maxInput.onfocus = () => selectCustomOption(field);
-        maxInput.oninput = () => validateMinMax(field, customConfig);
+    // Add handlers for both inputs
+    if (minInput && maxInput) {
+        const updateVisualFeedback = () => {
+            const minFilled = minInput.value.trim() !== '';
+            const maxFilled = maxInput.value.trim() !== '';
+            const anyFilled = minFilled || maxFilled;
+            
+            // Get tick icons
+            const minTick = minClone.querySelector('[data-chat-input-element="tick-icon"]');
+            const maxTick = maxClone.querySelector('[data-chat-input-element="tick-icon"]');
+            
+            // Update background and tick for BOTH inputs
+            if (anyFilled) {
+                minClone.style.backgroundColor = config.selectedBackground;
+                maxClone.style.backgroundColor = config.selectedBackground;
+                if (minTick) minTick.style.display = 'block';
+                if (maxTick) maxTick.style.display = 'block';
+            } else {
+                minClone.style.backgroundColor = 'transparent';
+                maxClone.style.backgroundColor = 'transparent';
+                if (minTick) minTick.style.display = 'none';
+                if (maxTick) maxTick.style.display = 'none';
+            }
+        };
+        
+        minInput.onfocus = () => {
+            selectCustomOption(field);
+            updateVisualFeedback();
+        };
+        minInput.oninput = () => {
+            updateVisualFeedback();
+            validateMinMax(field, customConfig);
+        };
+        
+        maxInput.onfocus = () => {
+            selectCustomOption(field);
+            updateVisualFeedback();
+        };
+        maxInput.oninput = () => {
+            updateVisualFeedback();
+            validateMinMax(field, customConfig);
+        };
     }
 }
 
@@ -783,10 +833,39 @@ function handleCustomSelectClick(element, field, customConfig) {
         chatState.currentSelection = null;
         console.log('  ℹ️ Custom selected - waiting for min/max input');
     } else {
-        // Hide min/max inputs
+        // Hide min/max inputs and clear them
         const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
         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"]');
+            
+            if (minInput) minInput.value = '';
+            if (maxInput) maxInput.value = '';
+            
+            // Reset visual feedback (background and ticks)
+            const minContainer = rangeWrapper.querySelector('[data-chat-element="single-select-custom-min"]');
+            const maxContainer = rangeWrapper.querySelector('[data-chat-element="single-select-custom-max"]');
+            
+            if (minContainer) {
+                minContainer.style.backgroundColor = 'transparent';
+                const minTick = minContainer.querySelector('[data-chat-input-element="tick-icon"]');
+                if (minTick) minTick.style.display = 'none';
+            }
+            
+            if (maxContainer) {
+                maxContainer.style.backgroundColor = 'transparent';
+                const maxTick = maxContainer.querySelector('[data-chat-input-element="tick-icon"]');
+                if (maxTick) maxTick.style.display = 'none';
+            }
+            
+            // Hide error message
+            const errorDiv = rangeWrapper.querySelector('[data-chat-element="range-error"]');
+            if (errorDiv) errorDiv.style.display = 'none';
+            
+            console.log('  🧹 Min/max inputs cleared and hidden');
         }
 
         // Parse and save regular value
@@ -809,7 +888,7 @@ function validateMinMax(field, customConfig) {
     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 false;
+    if (!minInput || !maxInput) return { valid: false, error: null };
 
     const minValue = parseFloat(minInput.value);
     const maxValue = parseFloat(maxInput.value);
@@ -819,66 +898,91 @@ function validateMinMax(field, customConfig) {
     const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
     const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
 
-    // Helper to show error
-    const showError = (message) => {
+    // Helper to show error in div and clear data
+    const showErrorDiv = (message) => {
         if (errorDiv) {
             errorDiv.textContent = message;
             errorDiv.style.display = 'block';
         }
-        console.log('  ❌ Validation error:', message);
-        disableNextButton();
-        return false;
+        // Clear the data when validation fails
+        delete chatState.data[field];
+        chatState.currentSelection = null;
     };
 
-    // Helper to hide error
-    const hideError = () => {
+    // Helper to hide error div
+    const hideErrorDiv = () => {
         if (errorDiv) {
             errorDiv.style.display = 'none';
         }
     };
 
-    // Validation rules
+    // Validation rules - return error message if invalid
     
     // 1. Check if only one is filled
     if (minFilled && !maxFilled) {
-        return showError(config.customRangeErrors.maxRequired);
+        const error = config.customRangeErrors.maxRequired;
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
     }
     
     if (!minFilled && maxFilled) {
-        return showError(config.customRangeErrors.minRequired);
+        const error = config.customRangeErrors.minRequired;
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
     }
     
     // 2. Check if both are empty
     if (!minFilled && !maxFilled) {
-        hideError();
+        hideErrorDiv();
+        // Clear data when both empty
+        delete chatState.data[field];
+        chatState.currentSelection = null;
         disableNextButton();
-        return false;
+        return { valid: false, error: null };
     }
 
     // 3. Check if values are valid numbers
     if (isNaN(minValue) || isNaN(maxValue)) {
-        return showError(config.customRangeErrors.bothRequired);
+        const error = config.customRangeErrors.bothRequired;
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
     }
 
     // 4. Check min constraint
     if (minValue < minConstraint) {
-        const msg = config.customRangeErrors.minBelowConstraint.replace('{min}', minConstraint);
-        return showError(msg);
+        const error = config.customRangeErrors.minBelowConstraint.replace('{min}', minConstraint);
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
     }
 
     // 5. Check max constraint
     if (maxValue > maxConstraint) {
-        const msg = config.customRangeErrors.maxAboveConstraint.replace('{max}', maxConstraint);
-        return showError(msg);
+        const error = config.customRangeErrors.maxAboveConstraint.replace('{max}', maxConstraint);
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
     }
 
     // 6. Check min < max
     if (minValue >= maxValue) {
-        return showError(config.customRangeErrors.minGreaterThanMax);
+        const error = config.customRangeErrors.minGreaterThanMax;
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
     }
 
     // All valid! Hide error and save data as array
-    hideError();
+    hideErrorDiv();
     
     // Store as array [min, max]
     chatState.data[field] = [minValue, maxValue];
@@ -890,7 +994,7 @@ function validateMinMax(field, customConfig) {
     
     console.log('  ✅ Range valid - stored as array:', [minValue, maxValue]);
     enableNextButton();
-    return true;
+    return { valid: true, error: null };
 }
 
 // =============================================================================
@@ -1106,6 +1210,54 @@ async function handleNext() {
         return;
     }
 
+    // VALIDATION: Check for single-select-custom validation before proceeding
+    if (currentStep.inputType === 'single-select-custom' && currentStep.input) {
+        const field = currentStep.input.field;
+        const customConfig = currentStep.input.custom;
+        
+        // Check if custom range was selected (data is array)
+        const selectedValue = chatState.data[field];
+        const isCustomRange = Array.isArray(selectedValue);
+        
+        if (isCustomRange && customConfig) {
+            // Validate the custom range one more time before proceeding
+            const validation = validateMinMax(field, customConfig);
+            
+            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');
+                }
+                
+                return; // Stop here, don't proceed
+            }
+        } 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
+        }
+    }
+
     // Call onNext validation if exists
     if (currentStep.onNext) {
         try {
@@ -1155,6 +1307,13 @@ async function handleNext() {
             chatState.step = targetStep;
             console.log(`   ✅ Jumped to step ${targetStep}`);
             
+            // Hide all range-wrappers
+            const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
+            allRangeWrappers.forEach(wrapper => {
+                wrapper.style.display = 'none';
+            });
+            console.log('  🙈 Hidden all range-wrappers');
+            
             // Update edit icons for the new position
             updateEditIcons();
             
@@ -1169,6 +1328,13 @@ async function handleNext() {
     // Normal flow: Move to next step
     chatState.step++;
     
+    // Hide all range-wrappers (custom min/max inputs)
+    const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
+    allRangeWrappers.forEach(wrapper => {
+        wrapper.style.display = 'none';
+    });
+    console.log('  🙈 Hidden all range-wrappers');
+    
     // Update edit icons for all previous steps
     updateEditIcons();