lisichatbot 1.8.7 → 1.8.9

package/package.json

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

package/src/index.js

@@ -18,13 +18,15 @@ let chatState = {
     currentSelection: null,
     returnToStep: null,
     completed: false,
-    editPath: []  // ✅ NEW: Array of step names/numbers to edit in sequence
+    editPath: [],  // ✅ NEW: Array of step names/numbers to edit in sequence
+    chatMode: 'create'  // ✅ NEW: Track if in 'create' or 'edit' mode
 };
 
 let elements = {
     container: null,
     messages: null,
     nextBtn: null,
+    cancelBtn: null,  // ✅ NEW: Cancel button element
     originalNextBtnText: null
 };
 
@@ -32,6 +34,7 @@ let config = {
     selectedBackground: '#667eea',
     autoAdvanceDelay: 2000,
     enableAnimations: true,
+    showCancelButton: false,  // ✅ NEW: Control cancel button visibility
     customRangeErrors: {
         minRequired: 'Minimum value is required',
         maxRequired: 'Maximum value is required',
@@ -1075,13 +1078,16 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     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.type = 'text'; // Changed from 'number' to 'text' for locale formatting
+        minInput.setAttribute('inputmode', 'numeric'); // Show numeric keyboard on mobile
+        minInput.setAttribute('data-min', customConfig.min !== undefined ? customConfig.min : 0);
+        minInput.setAttribute('data-max', customConfig.max !== undefined ? customConfig.max : 100);
         
-        if (showMinMax) {
-            console.log(`  ✅ Pre-filled min: ${existingData[0]}`);
+        if (showMinMax && existingData[0] !== undefined) {
+            const numValue = Number(existingData[0]);
+            minInput.value = numValue.toLocaleString();
+            minInput.setAttribute('data-raw-value', existingData[0]);
+            console.log(`  ✅ Pre-filled min: ${existingData[0]} (display: ${numValue.toLocaleString()})`);
         }
     }
 
@@ -1096,13 +1102,16 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     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.type = 'text'; // Changed from 'number' to 'text' for locale formatting
+        maxInput.setAttribute('inputmode', 'numeric'); // Show numeric keyboard on mobile
+        maxInput.setAttribute('data-min', customConfig.min !== undefined ? customConfig.min : 0);
+        maxInput.setAttribute('data-max', customConfig.max !== undefined ? customConfig.max : 100);
         
-        if (showMinMax) {
-            console.log(`  ✅ Pre-filled max: ${existingData[1]}`);
+        if (showMinMax && existingData[1] !== undefined) {
+            const numValue = Number(existingData[1]);
+            maxInput.value = numValue.toLocaleString();
+            maxInput.setAttribute('data-raw-value', existingData[1]);
+            console.log(`  ✅ Pre-filled max: ${existingData[1]} (display: ${numValue.toLocaleString()})`);
         }
     }
 
@@ -1137,8 +1146,8 @@ function renderMinMaxInputs(field, customConfig, existingData) {
 
     if (minInput && maxInput) {
         const updateVisualFeedback = () => {
-            const minFilled = minInput.value.trim() !== '';
-            const maxFilled = maxInput.value.trim() !== '';
+            const minFilled = (minInput.getAttribute('data-raw-value') || minInput.value.trim()) !== '';
+            const maxFilled = (maxInput.getAttribute('data-raw-value') || maxInput.value.trim()) !== '';
             const anyFilled = minFilled || maxFilled;
             
             const minTick = minClone.querySelector('[data-chat-input-element="tick-icon"]');
@@ -1163,20 +1172,40 @@ function renderMinMaxInputs(field, customConfig, existingData) {
             console.log('  ✅ Applied visual feedback for pre-filled values');
         }
         
-        minInput.onfocus = () => {
+        minInput.onchange = () => {
             selectCustomOption(field);
-            updateVisualFeedback();
-        };
-        minInput.oninput = () => {
+            // Remove non-numeric characters except minus sign at start
+            let value = minInput.value.replace(/[^\d-]/g, '');
+            if (value.indexOf('-') > 0) {
+                value = value.replace(/-/g, '');
+            }
+            minInput.setAttribute('data-raw-value', value);
+            
+            // Format with locale string if valid number
+            if (value && value !== '' && !isNaN(value)) {
+                const numValue = Number(value);
+                minInput.value = numValue.toLocaleString();
+            }
+            
             updateVisualFeedback();
             validateMinMax(field, customConfig);
         };
         
-        maxInput.onfocus = () => {
+        maxInput.onchange = () => {
             selectCustomOption(field);
-            updateVisualFeedback();
-        };
-        maxInput.oninput = () => {
+            // Remove non-numeric characters except minus sign at start
+            let value = maxInput.value.replace(/[^\d-]/g, '');
+            if (value.indexOf('-') > 0) {
+                value = value.replace(/-/g, '');
+            }
+            maxInput.setAttribute('data-raw-value', value);
+            
+            // Format with locale string if valid number
+            if (value && value !== '' && !isNaN(value)) {
+                const numValue = Number(value);
+                maxInput.value = numValue.toLocaleString();
+            }
+            
             updateVisualFeedback();
             validateMinMax(field, customConfig);
         };
@@ -1328,10 +1357,12 @@ function handleCustomSelectClick(element, field, customConfig) {
             
             if (minInput) {
                 minInput.value = '';
+                minInput.removeAttribute('data-raw-value');
                 console.log('  🧹 Cleared min input');
             }
             if (maxInput) {
                 maxInput.value = '';
+                maxInput.removeAttribute('data-raw-value');
                 console.log('  🧹 Cleared max input');
             }
             
@@ -1401,17 +1432,20 @@ function validateMinMax(field, customConfig) {
         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() !== '';
+    // Use data-raw-value for validation instead of formatted display value
+    const minRawValue = minInput.getAttribute('data-raw-value') || '';
+    const maxRawValue = maxInput.getAttribute('data-raw-value') || '';
+    const minValue = parseFloat(minRawValue);
+    const maxValue = parseFloat(maxRawValue);
+    const minFilled = minRawValue.trim() !== '';
+    const maxFilled = maxRawValue.trim() !== '';
 
     const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
     const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
 
     console.log(`📊 Input values:
-  Min input value: "${minInput.value}" (filled: ${minFilled}, parsed: ${minValue})
-  Max input value: "${maxInput.value}" (filled: ${maxFilled}, parsed: ${maxValue})`);
+  Min raw value: "${minRawValue}" (filled: ${minFilled}, parsed: ${minValue})
+  Max raw value: "${maxRawValue}" (filled: ${maxFilled}, parsed: ${maxValue})`);
     
     console.log(`📏 Constraints:
   Min constraint: >= ${minConstraint}
@@ -2091,6 +2125,17 @@ async function handleNext() {
         try {
             disableNextButton();
             
+            // ✅ NEW: Show loader and hide text when button is disabled
+            const nextBtnText = elements.nextBtn.querySelector('[data-chat-element="next-button-text"]');
+            const nextBtnLoader = elements.nextBtn.querySelector('[data-chat-element="next-button-loader"]');
+            
+            if (nextBtnText) {
+                nextBtnText.style.display = 'none';
+            }
+            if (nextBtnLoader) {
+                nextBtnLoader.style.display = 'block';
+            }
+            
             // ✅ NEW: Create showMessage helper function
             const showMessage = (message) => {
                 console.log('💬 showMessage called:', message);
@@ -2105,6 +2150,14 @@ async function handleNext() {
                 showMessage  // ✅ NEW: Third parameter
             );
             
+            // ✅ NEW: Hide loader and show text after onNext completes
+            if (nextBtnText) {
+                nextBtnText.style.display = '';
+            }
+            if (nextBtnLoader) {
+                nextBtnLoader.style.display = 'none';
+            }
+            
             // ✅ Still support showMessage in return object for backwards compatibility
             if (result && typeof result === 'object' && result.showMessage) {
                 console.log('💬 onNext displaying message from return:', result.showMessage);
@@ -2355,6 +2408,18 @@ async function handleNext() {
         } catch (error) {
             console.error('Validation error:', error);
             alert('An error occurred. Please try again.');
+            
+            // ✅ NEW: Hide loader and show text on error
+            const nextBtnText = elements.nextBtn.querySelector('[data-chat-element="next-button-text"]');
+            const nextBtnLoader = elements.nextBtn.querySelector('[data-chat-element="next-button-loader"]');
+            
+            if (nextBtnText) {
+                nextBtnText.style.display = '';
+            }
+            if (nextBtnLoader) {
+                nextBtnLoader.style.display = 'none';
+            }
+            
             enableNextButton();
             return;
         }
@@ -3229,12 +3294,14 @@ function init(flowName, flowConfig, options = {}) {
         hasEditData: Object.keys(editData).length > 0,
         selectedBackground: config.selectedBackground,
         autoAdvanceDelay: config.autoAdvanceDelay,
+        showCancelButton: config.showCancelButton,
         customRangeErrors: config.customRangeErrors
     });
 
     flowData = flowConfig;
 
     chatState.step = 0;
+    chatState.chatMode = mode;  // ✅ NEW: Store mode in chatState as chatMode
     
     // ✅ NEW: Merge initialData with editData for edit mode
     if (mode === 'edit' && editData && Object.keys(editData).length > 0) {
@@ -3252,6 +3319,7 @@ function init(flowName, flowConfig, options = {}) {
 
     elements.messages = elements.container.querySelector('[data-chat-element="messages-container"]');
     elements.nextBtn = elements.container.querySelector('[data-chat-element="next-button"]');
+    elements.cancelBtn = elements.container.querySelector('[data-chat-element="cancel-button"]');
 
     if (!elements.messages) {
         console.error('messages-container not found. Please add <div data-chat-element="messages-container"></div>');
@@ -3263,6 +3331,25 @@ function init(flowName, flowConfig, options = {}) {
         return null;
     }
     
+    // ✅ NEW: Show/hide cancel button based on config
+    if (elements.cancelBtn) {
+        if (config.showCancelButton === true) {
+            elements.cancelBtn.style.marginTop = '8px';
+            elements.cancelBtn.style.display = '';
+            console.log('✅ Cancel button found and shown (showCancelButton: true)');
+        } else {
+            elements.cancelBtn.style.display = 'none';
+            console.log('🚫 Cancel button hidden (showCancelButton: false)');
+        }
+    } else {
+        if (config.showCancelButton === true) {
+            console.warn('⚠️ showCancelButton is true but cancel button element not found');
+            console.warn('   Please add <button data-chat-element="cancel-button">Cancel</button> to your HTML');
+        } else {
+            console.log('ℹ️ Cancel button not found (optional, showCancelButton: false)');
+        }
+    }
+    
     const nextBtnTextElement = elements.nextBtn.querySelector('[data-chat-element="next-button-text"]');
     if (nextBtnTextElement) {
         elements.originalNextBtnText = nextBtnTextElement.textContent || nextBtnTextElement.innerText || 'Next';
@@ -3323,7 +3410,8 @@ function getState() {
     return {
         step: chatState.step,
         data: { ...chatState.data },
-        history: [...chatState.history]
+        history: [...chatState.history],
+        chatMode: chatState.chatMode  // ✅ Include chatMode in state
     };
 }
 
@@ -3332,6 +3420,7 @@ function reset() {
     chatState.data = flowData.initialData || {};
     chatState.history = [];
     chatState.currentSelection = null;
+    chatState.chatMode = 'create';  // ✅ Reset to create mode
     
     // ✅ Move back any injected elements before clearing
     if (elements.messages) {