lisichatbot 1.2.4 → 1.2.6

package/package.json

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

package/src/index.js

@@ -29,7 +29,15 @@ let elements = {
 let config = {
     selectedBackground: '#667eea',
     autoAdvanceDelay: 2000,
-    enableAnimations: true
+    enableAnimations: true,
+    customRangeErrors: {
+        minRequired: 'Minimum value is required',
+        maxRequired: 'Maximum value is required',
+        bothRequired: 'Both minimum and maximum values are required',
+        minGreaterThanMax: 'Minimum must be less than maximum',
+        minBelowConstraint: 'Minimum must be at least {min}',
+        maxAboveConstraint: 'Maximum must be at most {max}'
+    }
 };
 
 let flowData = null;
@@ -137,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)`);
@@ -176,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(() => {
@@ -230,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)`);
@@ -483,6 +491,492 @@ function renderColorOptions(options, field) {
     });
 }
 
+// =============================================================================
+// SINGLE-SELECT-CUSTOM (WITH MIN/MAX RANGE)
+// =============================================================================
+
+function renderCustomSelectOptions(options, field, customConfig) {
+    if (!elements.messages) return;
+
+    // Find existing single-select option element
+    const optionSelector = '[data-chat-element="single-select-input"]';
+    const existingOption = document.querySelector(optionSelector);
+    
+    if (!existingOption) {
+        console.error(`Element with ${optionSelector} not found in HTML.`);
+        return;
+    }
+
+    // Get existing data for pre-filling
+    const existingData = chatState.data[field];
+    console.log(`📝 Pre-filling ${field} (custom):`, existingData);
+
+    // Create wrapper to hold all options
+    const optionsWrapper = document.createElement('div');
+    optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
+
+    // Render regular options
+    options.forEach((option, index) => {
+        const optionName = option.name || option;
+        const optionValue = option.value !== undefined ? option.value : option;
+        const valueStr = typeof optionValue === 'object' ? 
+            JSON.stringify(optionValue) : String(optionValue);
+
+        const clone = existingOption.cloneNode(true);
+        clone.style.display = '';
+
+        // Check if this option should be pre-selected
+        const shouldBeChecked = existingData !== undefined && 
+            !Array.isArray(existingData) &&  // Exclude array (custom range)
+            JSON.stringify(existingData) === JSON.stringify(optionValue);
+
+        if (shouldBeChecked) {
+            clone.classList.add('cf-checked');
+            clone.style.backgroundColor = config.selectedBackground;
+            console.log(`  ✅ Pre-selected: ${optionName}`);
+        } else {
+            clone.classList.remove('cf-checked');
+            clone.style.backgroundColor = 'transparent';
+        }
+
+        clone.setAttribute('data-chat-element', 'single-select-input');
+        clone.setAttribute('data-field', field);
+        clone.setAttribute('data-value', valueStr);
+        clone.setAttribute('data-name', optionName);
+        clone.setAttribute('data-index', index);
+        clone.setAttribute('data-is-custom', 'false');
+
+        const input = clone.querySelector('[data-chat-input-element="input"]');
+        if (input) {
+            input.name = field;
+            input.value = valueStr;
+            input.checked = shouldBeChecked;
+        }
+
+        const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
+        if (tickIcon) {
+            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
+        }
+
+        const textElement = clone.querySelector('[data-chat-input-element="text"]');
+        if (textElement) {
+            textElement.textContent = optionName;
+        }
+
+        optionsWrapper.appendChild(clone);
+    });
+
+    // Render custom option
+    if (customConfig) {
+        const customClone = existingOption.cloneNode(true);
+        customClone.style.display = '';
+        
+        // Check if custom was selected before (data is array [min, max])
+        const isCustomSelected = existingData !== undefined && 
+            Array.isArray(existingData) && 
+            existingData.length === 2;
+
+        if (isCustomSelected) {
+            customClone.classList.add('cf-checked');
+            customClone.style.backgroundColor = config.selectedBackground;
+            console.log(`  ✅ Pre-selected: Custom Range [${existingData[0]}, ${existingData[1]}]`);
+        } else {
+            customClone.classList.remove('cf-checked');
+            customClone.style.backgroundColor = 'transparent';
+        }
+
+        customClone.setAttribute('data-chat-element', 'single-select-input');
+        customClone.setAttribute('data-field', field);
+        customClone.setAttribute('data-value', customConfig.value || 'custom');
+        customClone.setAttribute('data-name', customConfig.name);
+        customClone.setAttribute('data-is-custom', 'true');
+
+        const customInput = customClone.querySelector('[data-chat-input-element="input"]');
+        if (customInput) {
+            customInput.name = field;
+            customInput.value = customConfig.value || 'custom';
+            customInput.checked = isCustomSelected;
+        }
+
+        const customTickIcon = customClone.querySelector('[data-chat-input-element="tick-icon"]');
+        if (customTickIcon) {
+            customTickIcon.style.display = isCustomSelected ? 'block' : 'none';
+        }
+
+        const customTextElement = customClone.querySelector('[data-chat-input-element="text"]');
+        if (customTextElement) {
+            customTextElement.textContent = customConfig.name;
+        }
+
+        optionsWrapper.appendChild(customClone);
+    }
+
+    // Append wrapper to messages
+    elements.messages.appendChild(optionsWrapper);
+
+    // Render min/max inputs
+    renderMinMaxInputs(field, customConfig, existingData);
+
+    scrollToBottom();
+
+    // Add click handlers for regular and custom options
+    const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
+    optionElements.forEach(el => {
+        el.onclick = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleCustomSelectClick(el, field, customConfig);
+        };
+    });
+}
+
+function renderMinMaxInputs(field, customConfig, existingData) {
+    if (!elements.messages || !customConfig) return;
+
+    // Find min/max input templates
+    const minSelector = '[data-chat-element="single-select-custom-min"]';
+    const maxSelector = '[data-chat-element="single-select-custom-max"]';
+    const minTemplate = document.querySelector(minSelector);
+    const maxTemplate = document.querySelector(maxSelector);
+
+    if (!minTemplate || !maxTemplate) {
+        console.error('Min/Max input templates not found');
+        return;
+    }
+
+    // Create wrapper for min/max
+    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
+
+    // Check if should show min/max (custom option selected)
+    // Data is stored as array [min, max]
+    const showMinMax = existingData !== undefined && 
+        Array.isArray(existingData) && 
+        existingData.length === 2;
+
+    rangeWrapper.style.display = showMinMax ? '' : 'none';
+
+    // Clone and setup min input
+    const minClone = minTemplate.cloneNode(true);
+    minClone.style.display = '';
+    minClone.style.marginRight = '12px'; // Add space between inputs
+    minClone.setAttribute('data-field', field);
+    
+    const minInput = minClone.querySelector('[data-chat-input-element="input"]');
+    if (minInput) {
+        minInput.setAttribute('data-field', field);
+        minInput.setAttribute('data-input-type', 'min');
+        minInput.type = 'number';
+        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}+)`;
+        
+        if (showMinMax) {
+            console.log(`  ✅ Pre-filled min: ${existingData[0]}`);
+        }
+    }
+
+    // Clone and setup max input
+    const maxClone = maxTemplate.cloneNode(true);
+    maxClone.style.display = '';
+    maxClone.setAttribute('data-field', field);
+    
+    const maxInput = maxClone.querySelector('[data-chat-input-element="input"]');
+    if (maxInput) {
+        maxInput.setAttribute('data-field', field);
+        maxInput.setAttribute('data-input-type', 'max');
+        maxInput.type = 'number';
+        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)`;
+        
+        if (showMinMax) {
+            console.log(`  ✅ Pre-filled max: ${existingData[1]}`);
+        }
+    }
+
+    rangeWrapper.appendChild(minClone);
+    rangeWrapper.appendChild(maxClone);
+    
+    // Add error message display
+    const errorDiv = document.createElement('div');
+    errorDiv.setAttribute('data-chat-element', 'range-error');
+    errorDiv.setAttribute('data-field', field);
+    errorDiv.style.color = '#ff4444';
+    errorDiv.style.fontSize = '14px';
+    errorDiv.style.marginTop = '8px';
+    errorDiv.style.display = 'none';
+    rangeWrapper.appendChild(errorDiv);
+    
+    elements.messages.appendChild(rangeWrapper);
+
+    // 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);
+        };
+    }
+}
+
+function selectCustomOption(field) {
+    // Deselect all regular options
+    const allOptions = document.querySelectorAll(`[data-field="${field}"][data-chat-element="single-select-input"]`);
+    allOptions.forEach(opt => {
+        const isCustom = opt.getAttribute('data-is-custom') === 'true';
+        if (isCustom) {
+            // Select custom option
+            opt.classList.add('cf-checked');
+            opt.style.setProperty('background-color', config.selectedBackground, 'important');
+            const tickIcon = opt.querySelector('[data-chat-input-element="tick-icon"]');
+            if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
+        } else {
+            // Deselect regular options
+            opt.classList.remove('cf-checked');
+            opt.style.setProperty('background-color', 'transparent', 'important');
+            const tickIcon = opt.querySelector('[data-chat-input-element="tick-icon"]');
+            if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
+        }
+    });
+
+    // Show min/max inputs
+    const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+    if (rangeWrapper) {
+        rangeWrapper.style.display = '';
+    }
+}
+
+function handleCustomSelectClick(element, field, customConfig) {
+    const isCustom = element.getAttribute('data-is-custom') === 'true';
+    const valueStr = element.getAttribute('data-value');
+    const optionName = element.getAttribute('data-name');
+
+    console.log(`Custom-select clicked:`, { field, name: optionName, isCustom });
+
+    // Deselect all options first
+    const allOptions = document.querySelectorAll(`[data-field="${field}"][data-chat-element="single-select-input"]`);
+    allOptions.forEach(opt => {
+        opt.classList.remove('cf-checked');
+        opt.style.setProperty('background-color', 'transparent', 'important');
+        const tickIcon = opt.querySelector('[data-chat-input-element="tick-icon"]');
+        if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
+    });
+
+    // Select this option
+    element.classList.add('cf-checked');
+    element.style.setProperty('background-color', config.selectedBackground, 'important');
+    const tickIcon = element.querySelector('[data-chat-input-element="tick-icon"]');
+    if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
+
+    if (isCustom) {
+        // Show min/max inputs
+        const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+        if (rangeWrapper) {
+            rangeWrapper.style.display = '';
+        }
+        
+        // Don't save data yet - wait for validation
+        chatState.currentSelection = null;
+        console.log('  ℹ️ Custom selected - waiting for min/max input');
+    } else {
+        // 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
+        let value;
+        try {
+            value = JSON.parse(valueStr);
+        } catch (e) {
+            value = valueStr;
+        }
+
+        chatState.data[field] = value;
+        chatState.currentSelection = { field, value, name: optionName };
+        console.log('  ✅ Regular option selected:', value);
+        enableNextButton();
+    }
+}
+
+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"]`);
+    const errorDiv = document.querySelector(`[data-chat-element="range-error"][data-field="${field}"]`);
+
+    if (!minInput || !maxInput) return { valid: false, error: null };
+
+    const minValue = parseFloat(minInput.value);
+    const maxValue = parseFloat(maxInput.value);
+    const minFilled = minInput.value.trim() !== '';
+    const maxFilled = maxInput.value.trim() !== '';
+
+    const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
+    const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
+
+    // Helper to show error in div
+    const showErrorDiv = (message) => {
+        if (errorDiv) {
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+        }
+    };
+
+    // Helper to hide error div
+    const hideErrorDiv = () => {
+        if (errorDiv) {
+            errorDiv.style.display = 'none';
+        }
+    };
+
+    // Validation rules - return error message if invalid
+    
+    // 1. Check if only one is filled
+    if (minFilled && !maxFilled) {
+        const error = config.customRangeErrors.maxRequired;
+        showErrorDiv(error);
+        console.log('  ❌ Validation error:', error);
+        disableNextButton();
+        return { valid: false, error };
+    }
+    
+    if (!minFilled && maxFilled) {
+        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) {
+        hideErrorDiv();
+        disableNextButton();
+        return { valid: false, error: null };
+    }
+
+    // 3. Check if values are valid numbers
+    if (isNaN(minValue) || isNaN(maxValue)) {
+        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 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 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) {
+        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
+    hideErrorDiv();
+    
+    // Store as array [min, max]
+    chatState.data[field] = [minValue, maxValue];
+    chatState.currentSelection = { 
+        field, 
+        value: [minValue, maxValue], 
+        name: `${minValue}-${maxValue}` 
+    };
+    
+    console.log('  ✅ Range valid - stored as array:', [minValue, maxValue]);
+    enableNextButton();
+    return { valid: true, error: null };
+}
+
 // =============================================================================
 // TEXT/NUMBER INPUT RENDERING
 // =============================================================================
@@ -696,6 +1190,45 @@ 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
+            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';
+                }
+                
+                // 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
+            }
+        }
+    }
+
     // Call onNext validation if exists
     if (currentStep.onNext) {
         try {
@@ -745,6 +1278,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();
             
@@ -759,6 +1299,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();
 
@@ -828,6 +1375,20 @@ async function showNextStep() {
             if (!inputRequired) {
                 enableNextButton();
             }
+        } else if (inputType === 'single-select-custom') {
+            // Render single-select with custom min/max option
+            renderCustomSelectOptions(
+                nextStep.input.options, 
+                nextStep.input.field,
+                nextStep.input.custom
+            );
+            
+            // Disable Next button initially (wait for selection/validation)
+            if (inputRequired) {
+                disableNextButton();
+            } else {
+                enableNextButton();
+            }
         } else {
             // Render options (single-select or multi-select)
             const isSingleSelect = inputType === 'single-select';