lisichatbot 1.2.6 → 1.2.7

package/package.json

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

package/src/index.js

@@ -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) => {
@@ -649,6 +661,9 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     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]
@@ -661,7 +676,6 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     // 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"]');
@@ -884,12 +898,15 @@ function validateMinMax(field, customConfig) {
     const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
     const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
 
-    // Helper to show error in div
+    // Helper to show error in div and clear data
     const showErrorDiv = (message) => {
         if (errorDiv) {
             errorDiv.textContent = message;
             errorDiv.style.display = 'block';
         }
+        // Clear the data when validation fails
+        delete chatState.data[field];
+        chatState.currentSelection = null;
     };
 
     // Helper to hide error div
@@ -921,6 +938,9 @@ function validateMinMax(field, customConfig) {
     // 2. Check if both are empty
     if (!minFilled && !maxFilled) {
         hideErrorDiv();
+        // Clear data when both empty
+        delete chatState.data[field];
+        chatState.currentSelection = null;
         disableNextButton();
         return { valid: false, error: null };
     }
@@ -1200,32 +1220,41 @@ async function handleNext() {
         const isCustomRange = Array.isArray(selectedValue);
         
         if (isCustomRange && customConfig) {
-            // Validate the custom range
+            // Validate the custom range one more time before proceeding
             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';
+            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');
                 }
                 
-                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
             }
+        } 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
         }
     }