lisichatbot 2.0.6 → 2.0.8

package/package.json

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

package/src/index.js

@@ -900,7 +900,15 @@ function renderCustomSelectOptions(options, field, customConfig) {
     const hasOverride = chatState.prefillOverrideFields && chatState.prefillOverrideFields.includes(field);
     const disablePrefill = currentStep?.disableInputValuePrefill === true && !hasOverride;
     
+    console.log(`\n🔍 === PREFILL DEBUG for field: ${field} ===`);
+    console.log(`   disableInputValuePrefill:`, currentStep?.disableInputValuePrefill);
+    console.log(`   prefillOverrideFields:`, chatState.prefillOverrideFields);
+    console.log(`   hasOverride:`, hasOverride);
+    console.log(`   disablePrefill:`, disablePrefill);
+    console.log(`   chatState.data[${field}]:`, chatState.data[field]);
+    
     const existingData = disablePrefill ? null : chatState.data[field];
+    console.log(`   ✅ existingData:`, existingData);
     
     if (disablePrefill) {
         console.log(`⏭️ Pre-fill disabled for ${field} (custom) - starting fresh`);
@@ -912,8 +920,16 @@ function renderCustomSelectOptions(options, field, customConfig) {
         }
     }
 
+    // ✅ NEW: Remove any existing options-wrapper for this field
+    const existingWrapper = elements.messages.querySelector(`[data-chat-element="options-wrapper"][data-field="${field}"]`);
+    if (existingWrapper) {
+        existingWrapper.remove();
+        console.log(`  🗑️ Removed existing options-wrapper for field: ${field}`);
+    }
+
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
+    optionsWrapper.setAttribute('data-field', field);  // ✅ Add field attribute for identification
     optionsWrapper.style.display = 'flex';
     optionsWrapper.style.flexDirection = 'row';
     optionsWrapper.style.flexWrap = 'wrap';
@@ -936,15 +952,17 @@ function renderCustomSelectOptions(options, field, customConfig) {
         const shouldBeChecked = existingData !== undefined && 
             JSON.stringify(existingData) === JSON.stringify(optionValue);
 
+        console.log(`  🔍 Option "${optionName}": existingData=${JSON.stringify(existingData)} vs optionValue=${JSON.stringify(optionValue)} → shouldBeChecked=${shouldBeChecked}`);
+
         if (shouldBeChecked) {
             clone.classList.add('cf-checked');
-            clone.style.backgroundColor = config.selectedBackground;
+            clone.style.setProperty('background-color', config.selectedBackground, 'important');  // ✅ Use !important
             console.log(`  ✅ Pre-selected: ${optionName}`);
             hasPreselectedOption = true; // ✅ Mark that we have a pre-selection
             hasMatchingNormalOption = true; // ✅ A normal option matched
         } else {
             clone.classList.remove('cf-checked');
-            clone.style.backgroundColor = 'transparent';
+            clone.style.setProperty('background-color', 'transparent', 'important');  // ✅ Use !important
         }
 
         clone.setAttribute('data-chat-element', 'single-select-input');
@@ -963,7 +981,7 @@ function renderCustomSelectOptions(options, field, customConfig) {
 
         const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
         if (tickIcon) {
-            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
+            tickIcon.style.setProperty('display', shouldBeChecked ? 'block' : 'none', 'important');  // ✅ Use !important
         }
 
         const textElement = clone.querySelector('[data-chat-input-element="text"]');
@@ -986,12 +1004,12 @@ function renderCustomSelectOptions(options, field, customConfig) {
 
         if (isCustomSelected) {
             customClone.classList.add('cf-checked');
-            customClone.style.backgroundColor = config.selectedBackground;
+            customClone.style.setProperty('background-color', config.selectedBackground, 'important');  // ✅ Use !important
             console.log(`  ✅ Pre-selected: Custom Range [${existingData[0]}, ${existingData[1]}]`);
             hasPreselectedOption = true; // ✅ Mark that custom is pre-selected
         } else {
             customClone.classList.remove('cf-checked');
-            customClone.style.backgroundColor = 'transparent';
+            customClone.style.setProperty('background-color', 'transparent', 'important');  // ✅ Use !important
         }
 
         customClone.setAttribute('data-chat-element', 'single-select-input');
@@ -1009,7 +1027,7 @@ function renderCustomSelectOptions(options, field, customConfig) {
 
         const customTickIcon = customClone.querySelector('[data-chat-input-element="tick-icon"]');
         if (customTickIcon) {
-            customTickIcon.style.display = isCustomSelected ? 'block' : 'none';
+            customTickIcon.style.setProperty('display', isCustomSelected ? 'block' : 'none', 'important');  // ✅ Use !important
         }
 
         const customTextElement = customClone.querySelector('[data-chat-input-element="text"]');