lisichatbot 1.2.9 → 1.3.0

package/package.json

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

package/src/index.js

@@ -690,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]}`);
@@ -713,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]}`);
@@ -760,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();
@@ -832,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) {
+            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 +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"]');
@@ -1019,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();
@@ -1330,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
         });
     }
 
@@ -1493,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(() => {