lisichatbot 1.8.8 → 1.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.8.8",
+  "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',
@@ -2122,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);
@@ -2136,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);
@@ -2386,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;
         }
@@ -3260,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) {
@@ -3283,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>');
@@ -3294,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';
@@ -3354,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
     };
 }
 
@@ -3363,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) {