lisichatbot 1.2.8 → 1.3.0

package/package.json

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

package/src/index.js

@@ -671,14 +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'; // Gap between min and max
+    minClone.style.marginRight = '16px'; // Horizontal gap
+    minClone.style.marginBottom = '12px'; // Bottom margin if wraps
     minClone.style.width = 'auto'; // Don't stretch
-    minClone.style.flex = '0 0 auto'; // Don't grow or shrink
+    minClone.style.flex = 'none'; // Don't grow or shrink
     minClone.setAttribute('data-field', field);
     
     const minInput = minClone.querySelector('[data-chat-input-element="input"]');
@@ -689,7 +690,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]}`);
@@ -699,8 +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 = '0 0 auto'; // Don't grow or shrink
+    maxClone.style.flex = 'none'; // Don't grow or shrink
     maxClone.setAttribute('data-field', field);
     
     const maxInput = maxClone.querySelector('[data-chat-input-element="input"]');
@@ -711,7 +713,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]}`);
@@ -758,6 +760,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();
@@ -801,7 +811,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!
     }
 }
 
@@ -830,8 +840,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) {
-            rangeWrapper.style.display = '';
+            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
@@ -843,12 +861,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"]');
@@ -891,12 +915,18 @@ function handleCustomSelectClick(element, field, customConfig) {
 function validateMinMax(field, customConfig) {
     console.log(`\n🔍 === VALIDATING MIN/MAX for field: ${field} ===`);
     
-    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"]`);
+    // 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) {
         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 };
     }
 
@@ -1011,15 +1041,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();
@@ -1322,14 +1372,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
         });
     }
 
@@ -1485,6 +1555,17 @@ async function showNextStep() {
         }, config.autoAdvanceDelay);
     }
     
+    // Handle nextButtonDisplay - default is true
+    const showNextButton = nextStep.nextButtonDisplay !== false;
+    if (elements.nextButton) {
+        if (showNextButton) {
+            elements.nextButton.style.display = '';
+        } else {
+            elements.nextButton.style.display = 'none';
+            console.log('  🙈 Next button hidden (nextButtonDisplay: false)');
+        }
+    }
+    
     // Always update edit icons at the end to ensure correct state
     // Use setTimeout to ensure it runs after any DOM updates
     setTimeout(() => {