lisichatbot 1.4.1 → 1.4.3

package/package.json

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

package/src/index.js

@@ -1094,7 +1094,52 @@ function handleCustomSelectClick(element, field, customConfig) {
 
     console.log(`Custom-select clicked:`, { field, name: optionName, isCustom });
 
+    // ✅ FIX: Check if this option is already selected - allow deselection
+    const isAlreadySelected = element.classList.contains('cf-checked');
+    
     const allOptions = document.querySelectorAll(`[data-field="${field}"][data-chat-element="single-select-input"]`);
+    
+    if (isAlreadySelected) {
+        // ✅ Deselect the currently selected option
+        console.log(`  🔄 Deselecting "${optionName}"`);
+        
+        element.classList.remove('cf-checked');
+        element.style.setProperty('background-color', 'transparent', 'important');
+        const tickIcon = element.querySelector('[data-chat-input-element="tick-icon"]');
+        if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
+        
+        // Hide range wrapper if custom was deselected
+        if (isCustom) {
+            const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
+            if (rangeWrapper) {
+                rangeWrapper.style.display = 'none';
+            }
+        }
+        
+        // Clear data
+        delete chatState.data[field];
+        chatState.currentSelection = null;
+        
+        console.log(`  ❌ Deselected "${optionName}" - No selection`);
+        
+        // ✅ Check if input is required - disable button if nothing selected
+        const currentStep = flowData.flow[chatState.step];
+        const inputRequired = currentStep.inputRequired === true;
+        
+        if (inputRequired) {
+            disableNextButton();
+            console.log('  🔒 Input required - Next button disabled');
+        } else {
+            enableNextButton();
+            console.log('  🔓 Input not required - Next button still enabled');
+        }
+        
+        return; // Exit early
+    }
+    
+    // ✅ Select this option (deselect others first)
+    console.log(`  ✅ Selecting "${optionName}"`);
+    
     allOptions.forEach(opt => {
         opt.classList.remove('cf-checked');
         opt.style.setProperty('background-color', 'transparent', 'important');
@@ -1542,27 +1587,63 @@ function handleOptionClick(element, field, isSingleSelect) {
     }
 
     if (isSingleSelect) {
+        // ✅ FIX: Check if this option is already selected - allow deselection
+        const isAlreadySelected = element.classList.contains('cf-checked');
+        
         const selector = `[data-field="${field}"][data-chat-element="${inputType}"]`;
         const allOptions = document.querySelectorAll(selector);
         
-        allOptions.forEach(opt => {
-            opt.classList.remove('cf-checked');
-            opt.style.setProperty('background-color', 'transparent', 'important');
+        if (isAlreadySelected) {
+            // ✅ Deselect the currently selected option
+            console.log(`  🔄 Deselecting "${optionName}"`);
             
-            const otherTick = opt.querySelector('[data-chat-input-element="tick-icon"]');
-            const otherInput = opt.querySelector('[data-chat-input-element="input"]');
+            element.classList.remove('cf-checked');
+            element.style.setProperty('background-color', 'transparent', 'important');
+            if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
+            if (input) input.checked = false;
             
-            if (otherTick) otherTick.style.setProperty('display', 'none', 'important');
-            if (otherInput) otherInput.checked = false;
-        });
+            // Clear data
+            delete chatState.data[field];
+            chatState.currentSelection = null;
+            
+            console.log(`  ❌ Deselected "${optionName}" - No selection`);
+            
+            // ✅ Check if input is required - disable button if nothing selected
+            const currentStep = flowData.flow[chatState.step];
+            const inputRequired = currentStep.inputRequired === true;
+            
+            if (inputRequired) {
+                disableNextButton();
+                console.log('  🔒 Input required - Next button disabled');
+            } else {
+                enableNextButton();
+                console.log('  🔓 Input not required - Next button still enabled');
+            }
+        } else {
+            // ✅ Select this option (deselect others first)
+            console.log(`  ✅ Selecting "${optionName}"`);
+            
+            allOptions.forEach(opt => {
+                opt.classList.remove('cf-checked');
+                opt.style.setProperty('background-color', 'transparent', 'important');
+                
+                const otherTick = opt.querySelector('[data-chat-input-element="tick-icon"]');
+                const otherInput = opt.querySelector('[data-chat-input-element="input"]');
+                
+                if (otherTick) otherTick.style.setProperty('display', 'none', 'important');
+                if (otherInput) otherInput.checked = false;
+            });
 
-        element.classList.add('cf-checked');
-        element.style.setProperty('background-color', config.selectedBackground, 'important');
-        if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
-        if (input) input.checked = true;
+            element.classList.add('cf-checked');
+            element.style.setProperty('background-color', config.selectedBackground, 'important');
+            if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
+            if (input) input.checked = true;
 
-        chatState.data[field] = value;
-        chatState.currentSelection = { field, value, name: optionName };
+            chatState.data[field] = value;
+            chatState.currentSelection = { field, value, name: optionName };
+            
+            enableNextButton();
+        }
 
     } else {
         const isChecked = !element.classList.contains('cf-checked');
@@ -1734,6 +1815,21 @@ async function handleNext() {
         }
     }
 
+    // ✅ FIX: Remove old user message for this step (if exists)
+    // This handles cases where user edits and changes/deselects their answer
+    const existingUserMessage = elements.messages.querySelector(
+        `[data-chat-element="user-message-wrapper"][data-chat-step="${chatState.step}"]`
+    );
+    if (existingUserMessage) {
+        existingUserMessage.remove();
+        console.log(`  🗑️ Removed old user message for step ${chatState.step}`);
+    }
+    
+    // ✅ FIX: Remove from history for this step
+    chatState.history = chatState.history.filter(h => h.step !== chatState.step);
+    console.log(`  🗑️ Cleared history for step ${chatState.step}`);
+
+    // ✅ Only add new user message if there's a selection
     if (chatState.currentSelection) {
         const inputConfig = currentStep.input || {};
         const valueType = inputConfig.selectedInputValueType;
@@ -1753,6 +1849,7 @@ async function handleNext() {
         if (suffix) displayName = `${displayName} ${suffix}`;
         
         addMessage(displayName, 'user', false, chatState.step);
+        console.log(`  ✅ Added new user message: "${displayName}"`);
 
         chatState.history.push({
             step: chatState.step,
@@ -1760,6 +1857,8 @@ async function handleNext() {
             value: chatState.currentSelection.value,
             name: displayName
         });
+    } else {
+        console.log(`  ℹ️ No selection - no user message added (deselected or optional empty)`);
     }
 
     chatState.currentSelection = null;