lisichatbot 1.4.3 → 1.4.5

package/package.json

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

package/src/index.js

@@ -610,7 +610,7 @@ function renderOptions(options, field, isSingleSelect = true) {
         el.onclick = (e) => {
             e.stopPropagation();
             e.preventDefault();
-            handleOptionClick(el, field, isSingleSelect);
+            handleOptionClick(el, field, isSingleSelect, options); // ✅ Pass options
         };
     });
 
@@ -739,7 +739,7 @@ function renderColorOptions(options, field) {
         el.onclick = (e) => {
             e.stopPropagation();
             e.preventDefault();
-            handleOptionClick(el, field, false);
+            handleOptionClick(el, field, false, options); // ✅ Pass options
         };
     });
 
@@ -1555,7 +1555,7 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
 // OPTION CLICK HANDLER USING CUSTOM ATTRIBUTES
 // =============================================================================
 
-function handleOptionClick(element, field, isSingleSelect) {
+function handleOptionClick(element, field, isSingleSelect, options) {
     const now = Date.now();
     const lastClick = element.getAttribute('data-last-click');
     if (lastClick && (now - parseInt(lastClick)) < 300) {
@@ -1648,6 +1648,12 @@ function handleOptionClick(element, field, isSingleSelect) {
     } else {
         const isChecked = !element.classList.contains('cf-checked');
         
+        console.log(`Multi-select "${optionName}":`, {
+            isChecked,
+            currentData: chatState.data[field],
+            valueToToggle: value
+        });
+        
         if (isChecked) {
             element.classList.add('cf-checked');
             element.style.setProperty('background-color', config.selectedBackground, 'important');
@@ -1667,33 +1673,67 @@ function handleOptionClick(element, field, isSingleSelect) {
                 chatState.data[field].push(value);
             }
             
-            console.log(`✅ Added "${optionName}" - Total selected:`, chatState.data[field]);
+            console.log(`✅ Added "${optionName}"`);
+            console.log(`   chatState.data.${field}:`, chatState.data[field]);
         } else {
             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;
 
+            console.log(`   BEFORE filter - chatState.data.${field}:`, chatState.data[field]);
+            
             if (Array.isArray(chatState.data[field])) {
-                chatState.data[field] = chatState.data[field].filter(v => 
-                    JSON.stringify(v) !== JSON.stringify(value)
-                );
+                const beforeLength = chatState.data[field].length;
+                chatState.data[field] = chatState.data[field].filter(v => {
+                    const match = JSON.stringify(v) === JSON.stringify(value);
+                    console.log(`     Comparing:`, {
+                        arrayValue: v,
+                        clickedValue: value,
+                        stringifiedArray: JSON.stringify(v),
+                        stringifiedClick: JSON.stringify(value),
+                        match: match,
+                        keep: !match
+                    });
+                    return !match;
+                });
+                const afterLength = chatState.data[field].length;
+                console.log(`   AFTER filter - removed ${beforeLength - afterLength} items`);
             }
             
-            console.log(`❌ Removed "${optionName}" - Total selected:`, chatState.data[field]);
+            console.log(`❌ Removed "${optionName}"`);
+            console.log(`   chatState.data.${field}:`, chatState.data[field]);
         }
 
-        const selector = `[data-field="${field}"][data-chat-element="${inputType}"].cf-checked`;
-        const selectedOptions = document.querySelectorAll(selector);
-        const selectedNames = Array.from(selectedOptions).map(opt => 
-            opt.getAttribute('data-name')
-        ).join(', ');
-
-        chatState.currentSelection = { 
-            field, 
-            value: chatState.data[field], 
-            name: selectedNames || 'None selected'
-        };
+        // ✅ FIX: Build currentSelection from actual data array, not DOM elements
+        // The DOM might have duplicate/old elements that still have cf-checked class
+        if (!chatState.data[field] || chatState.data[field].length === 0) {
+            // No selections
+            chatState.currentSelection = null;
+            console.log(`📊 No selections - currentSelection set to null`);
+        } else {
+            // Build name from actual data array by finding matching options
+            const selectedNames = chatState.data[field].map(val => {
+                // Find the option config that matches this value
+                const matchingOption = options.find(opt => {
+                    const optValue = opt.value !== undefined ? opt.value : opt;
+                    return JSON.stringify(optValue) === JSON.stringify(val);
+                });
+                return matchingOption ? (matchingOption.name || matchingOption) : val;
+            }).join(', ');
+            
+            chatState.currentSelection = { 
+                field, 
+                value: chatState.data[field], 
+                name: selectedNames || 'None selected'
+            };
+            
+            console.log(`📊 Final state after toggle:`, {
+                field,
+                dataValue: chatState.data[field],
+                currentSelectionName: chatState.currentSelection.name
+            });
+        }
     }
 
     enableNextButton();
@@ -1815,21 +1855,6 @@ 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;
@@ -1849,7 +1874,6 @@ 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,
@@ -1857,8 +1881,6 @@ 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;