lisichatbot 1.3.6 → 1.3.8

package/src/index.js

@@ -2,7 +2,7 @@
  * Conversational Flow Builder
  * A simple, flexible conversational flow builder for multi-step chat interfaces
  * @version 1.0.0
- * WITH CUSTOM DATA ATTRIBUTES
+ * WITH MULTI-SELECT-DROPDOWN - COMPLETE FIXED VERSION
  */
 
 'use strict';
@@ -16,15 +16,15 @@ let chatState = {
     data: {},
     history: [],
     currentSelection: null,
-    returnToStep: null,  // Track where to return after editing
-    completed: false     // Track if flow is completed
+    returnToStep: null,
+    completed: false
 };
 
 let elements = {
     container: null,
     messages: null,
     nextBtn: null,
-    originalNextBtnText: null  // Store original button text
+    originalNextBtnText: null
 };
 
 let config = {
@@ -78,7 +78,6 @@ function disableNextButton() {
 function addMessage(content, type = 'bot', hasInput = false, stepNumber = null) {
     if (!elements.messages) return;
 
-    // Find the wrapper element directly by data-chat-element
     const wrapperSelector = `[data-chat-element="${type}-message-wrapper"]`;
     const existingWrapper = document.querySelector(wrapperSelector);
     
@@ -87,20 +86,16 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
         return;
     }
 
-    // Clone the existing wrapper
     const clone = existingWrapper.cloneNode(true);
     
-    // Immediately hide any edit icons in the clone (regardless of template state)
     const allEditIcons = clone.querySelectorAll('[data-chat-element="bot-edit-icon"]');
     allEditIcons.forEach(icon => {
         icon.style.setProperty('display', 'none', 'important');
     });
 
-    // Add step number if provided
     if (stepNumber !== null) {
         clone.setAttribute('data-chat-step', stepNumber);
         
-        // Mark all previous instances of this step as NOT latest
         const previousInstances = elements.messages.querySelectorAll(
             `[data-chat-element="${type}-message-wrapper"][data-chat-step="${stepNumber}"]`
         );
@@ -108,11 +103,9 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             prev.removeAttribute('data-chat-latest');
         });
         
-        // Mark this as the latest instance of this step
         clone.setAttribute('data-chat-latest', 'true');
     }
 
-    // Find text element in clone and set content
     const textElement = clone.querySelector(`[data-chat-element="${type}-message-text"]`);
     if (textElement) {
         textElement.textContent = content;
@@ -120,7 +113,6 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
         console.error(`Element with data-chat-element="${type}-message-text" not found in wrapper`);
     }
 
-    // Handle edit icon for bot messages
     if (type === 'bot') {
         console.log(`\n🔍 Processing bot message - Step ${stepNumber || 'N/A'}, hasInput: ${hasInput}`);
         
@@ -128,14 +120,11 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
         if (editIcon) {
             console.log('  ✓ Edit icon element found');
             
-            // ALWAYS hide first with !important to override any CSS
             editIcon.style.setProperty('display', 'none', 'important');
             console.log('  ✓ Edit icon hidden (display: none !important)');
             
-            // Check if this is the latest instance (it should be since we just marked it)
             const isLatest = clone.hasAttribute('data-chat-latest');
             
-            // Only show if this step has input AND it's a PREVIOUS step AND it's the latest instance
             if (hasInput && stepNumber !== null && stepNumber < chatState.step && isLatest) {
                 editIcon.setAttribute('data-chat-step', stepNumber);
                 editIcon.onclick = (e) => {
@@ -161,33 +150,22 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             console.warn('  ⚠️ Edit icon element not found in bot-message-wrapper!');
             console.warn('  → Make sure you have: <span data-chat-element="bot-edit-icon">✏️</span>');
         }
-        
-        // REMOVED: No longer setting wrapper flex properties
-        // User controls wrapper styling with their own CSS
     }
 
-    // Make clone visible
     clone.style.display = '';
-
-    // Append to messages container
     elements.messages.appendChild(clone);
     
-    // IMPORTANT: Set edit icon display AFTER appending to DOM
-    // This ensures our styles override any CSS rules
     if (type === 'bot') {
         const editIconAfterAppend = clone.querySelector('[data-chat-element="bot-edit-icon"]');
         if (editIconAfterAppend) {
-            // Force hide with !important AFTER append
             editIconAfterAppend.style.setProperty('display', 'none', 'important');
             editIconAfterAppend.style.setProperty('margin-left', '8px', 'important');
             
             const isLatest = clone.hasAttribute('data-chat-latest');
             
-            // Only show if has input AND it's a previous step AND it's latest instance
             if (hasInput && stepNumber !== null && stepNumber < chatState.step && isLatest) {
                 editIconAfterAppend.style.setProperty('display', 'flex', 'important');
                 
-                // Debug: Check spacing
                 setTimeout(() => {
                     const computedMargin = window.getComputedStyle(editIconAfterAppend).marginLeft;
                     const computedDisplay = window.getComputedStyle(editIconAfterAppend).display;
@@ -205,7 +183,6 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
 // =============================================================================
 
 function updateEditIcons() {
-    // Find all rendered bot message wrappers
     const allBotMessages = elements.messages.querySelectorAll('[data-chat-element="bot-message-wrapper"]');
     
     console.log(`\n🔄 Updating edit icons - Current step: ${chatState.step}, Completed: ${chatState.completed}`);
@@ -216,20 +193,16 @@ function updateEditIcons() {
         const isLatest = wrapper.hasAttribute('data-chat-latest');
         
         if (editIcon && !isNaN(stepNumber)) {
-            // Check if this step has input by looking at the flow
             const stepData = flowData.flow[stepNumber];
             const hasInput = stepData && !!stepData.input;
             
-            // Hide ALL icons if flow is completed
             if (chatState.completed) {
                 editIcon.style.setProperty('display', 'none', 'important');
                 console.log(`  🏁 Step ${stepNumber}: Icon HIDDEN (flow completed)`);
                 return;
             }
             
-            // Only show icon if: has input AND is previous step AND is latest instance
             if (hasInput && stepNumber < chatState.step && isLatest) {
-                // Set onclick handler
                 editIcon.onclick = (e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -257,6 +230,288 @@ function updateEditIcons() {
     });
 }
 
+// =============================================================================
+// MULTI-SELECT DROPDOWN RENDERING - COMPLETE FIXED VERSION
+// =============================================================================
+
+function renderMultiSelectDropdown(options, field) {
+    if (!elements.messages) return;
+    
+    console.log(`\n🎨 renderMultiSelectDropdown for field: ${field}`);
+    console.log(`Options:`, options);
+    
+    const template = document.querySelector('[data-chat-element="multi-select-dropdown"]');
+    if (!template) {
+        console.error('multi-select-dropdown template not found');
+        return;
+    }
+    
+    const clone = template.cloneNode(true);
+    clone.style.display = '';
+    clone.setAttribute('data-field', field);
+    
+    const dropdown = clone.querySelector('[data-chat-input-element="dropdown"]');
+    const optionsWrapper = clone.querySelector('[data-chat-input-element="dropdown-options-wrapper"]');
+    const searchBar = clone.querySelector('[data-chat-input-element="search-bar"]');
+    const optionsContainer = clone.querySelector('.lisi-app--dropdown_options-list');
+    const optionTemplate = clone.querySelector('[data-chat-input-element="dropdown-option-wrapper"]');
+    const tagsContainer = clone.querySelector('[data-chat-input-element="tags-container"]');
+    const tagTemplate = clone.querySelector('[data-chat-input-element="tag-wrapper"]');
+    
+    if (!dropdown || !optionsWrapper || !searchBar || !optionsContainer || !optionTemplate || !tagsContainer || !tagTemplate) {
+        console.error('Multi-select dropdown: Missing required elements');
+        console.error({
+            dropdown: !!dropdown,
+            optionsWrapper: !!optionsWrapper,
+            searchBar: !!searchBar,
+            optionsContainer: !!optionsContainer,
+            optionTemplate: !!optionTemplate,
+            tagsContainer: !!tagsContainer,
+            tagTemplate: !!tagTemplate
+        });
+        return;
+    }
+    
+    const optionTemplateClone = optionTemplate.cloneNode(true);
+    const tagTemplateClone = tagTemplate.cloneNode(true);
+    optionTemplate.remove();
+    tagTemplate.remove();
+    
+    // ✅ Get existing data for pre-filling (edit mode)
+    const existingData = chatState.data[field] || [];
+    const selectedValues = new Set(existingData);
+    console.log(`📝 Pre-filling selections for ${field}:`, Array.from(selectedValues));
+    
+    const allOptions = [];
+    
+    // Render options
+    options.forEach(option => {
+        const optionEl = optionTemplateClone.cloneNode(true);
+        optionEl.style.display = '';
+        optionEl.setAttribute('data-value', JSON.stringify(option.value));
+        optionEl.setAttribute('data-name', option.name);
+        
+        const nameEl = optionEl.querySelector('[data-chat-input-element="dropdown-option-name"]');
+        const tickIcon = optionEl.querySelector('[data-chat-input-element="dropdown-option-tick-icon"]');
+        
+        if (nameEl) nameEl.textContent = option.name;
+        
+        // ✅ Check if pre-selected (for edit mode)
+        const isSelected = selectedValues.has(option.value);
+        if (isSelected) {
+            optionEl.style.backgroundColor = config.selectedBackground;
+            if (tickIcon) {
+                // ✅ FIX: Use display: block instead of empty string
+                tickIcon.style.display = 'block';
+            }
+            console.log(`  ✅ Pre-selected: ${option.name}`);
+        } else {
+            if (tickIcon) {
+                tickIcon.style.display = 'none';
+            }
+        }
+        
+        optionEl.onclick = (e) => {
+            e.stopPropagation();
+            toggleOption(option, optionEl, tickIcon, field);
+        };
+        
+        optionsContainer.appendChild(optionEl);
+        allOptions.push({ element: optionEl, option });
+    });
+    
+    dropdown.onclick = (e) => {
+        e.stopPropagation();
+        const isVisible = optionsWrapper.style.display !== 'none';
+        
+        if (isVisible) {
+            optionsWrapper.style.display = 'none';
+            console.log('  🙈 Dropdown closed');
+        } else {
+            optionsWrapper.style.display = '';
+            console.log('  👁️ Dropdown opened');
+            
+            setTimeout(() => {
+                searchBar.focus();
+            }, 100);
+            
+            searchBar.value = '';
+            allOptions.forEach(({ element }) => {
+                element.style.display = '';
+            });
+        }
+    };
+    
+    const closeDropdownHandler = (e) => {
+        if (!clone.contains(e.target)) {
+            if (optionsWrapper.style.display !== 'none') {
+                optionsWrapper.style.display = 'none';
+                console.log('  🙈 Dropdown closed (clicked outside)');
+            }
+        }
+    };
+    
+    document.addEventListener('click', closeDropdownHandler);
+    clone.dataset.closeHandler = 'attached';
+    
+    searchBar.oninput = (e) => {
+        const searchTerm = e.target.value.toLowerCase();
+        console.log(`🔍 Searching for: "${searchTerm}"`);
+        
+        allOptions.forEach(({ element, option }) => {
+            const matchesName = option.name.toLowerCase().includes(searchTerm);
+            const matchesValue = String(option.value).toLowerCase().includes(searchTerm);
+            const matches = matchesName || matchesValue;
+            
+            element.style.display = matches ? '' : 'none';
+        });
+    };
+    
+    searchBar.onclick = (e) => {
+        e.stopPropagation();
+    };
+    
+    function toggleOption(option, optionEl, tickIcon, field) {
+        const currentSelections = chatState.data[field] || [];
+        const isCurrentlySelected = currentSelections.includes(option.value);
+        
+        console.log(`🎯 Toggle option: ${option.name}`, { isCurrentlySelected });
+        
+        if (isCurrentlySelected) {
+            chatState.data[field] = currentSelections.filter(v => v !== option.value);
+            optionEl.style.backgroundColor = '';
+            if (tickIcon) {
+                // ✅ FIX: Explicitly set to 'none'
+                tickIcon.style.display = 'none';
+            }
+            console.log(`  ❌ Deselected: ${option.name}`);
+        } else {
+            chatState.data[field] = [...currentSelections, option.value];
+            optionEl.style.backgroundColor = config.selectedBackground;
+            if (tickIcon) {
+                // ✅ FIX: Explicitly set to 'block'
+                tickIcon.style.display = 'block';
+            }
+            console.log(`  ✅ Selected: ${option.name}`);
+        }
+        
+        chatState.currentSelection = {
+            field,
+            value: chatState.data[field],
+            name: chatState.data[field].map(v => {
+                const opt = options.find(o => o.value === v);
+                return opt ? opt.name : v;
+            }).join(', ')
+        };
+        
+        console.log(`  📊 Current selections:`, chatState.data[field]);
+        
+        renderTags(field, options, tagsContainer, tagTemplateClone, optionsContainer);
+        
+        if (chatState.data[field].length > 0) {
+            enableNextButton();
+        } else {
+            // ✅ FIX: Check if input is required before disabling
+            const currentStep = flowData.flow[chatState.step];
+            const inputRequired = currentStep.inputRequired === true;
+            
+            if (inputRequired) {
+                disableNextButton();
+            } else {
+                enableNextButton();
+            }
+        }
+    }
+    
+    function renderTags(field, options, tagsContainer, tagTemplate, optionsContainer) {
+        const existingTags = tagsContainer.querySelectorAll('[data-chat-input-element="tag-wrapper"]');
+        existingTags.forEach(tag => {
+            if (tag.style.display !== 'none') {
+                tag.remove();
+            }
+        });
+        
+        const selections = chatState.data[field] || [];
+        console.log(`🏷️ Rendering ${selections.length} tags`);
+        
+        selections.forEach(value => {
+            const option = options.find(o => o.value === value);
+            if (!option) return;
+            
+            const tagEl = tagTemplate.cloneNode(true);
+            tagEl.style.display = '';
+            tagEl.setAttribute('data-value', JSON.stringify(value));
+            
+            const textEl = tagEl.querySelector('[data-chat-input-element="tag-text"]');
+            const crossIcon = tagEl.querySelector('[data-chat-input-element="tag-cross-icon"]');
+            
+            if (textEl) {
+                textEl.textContent = option.name;
+            }
+            
+            if (crossIcon) {
+                crossIcon.style.display = 'block';
+                console.log(`  ✅ Cross icon visible for: ${option.name}`);
+                
+                crossIcon.onclick = (e) => {
+                    e.stopPropagation();
+                    console.log(`🗑️ Removing tag: ${option.name}`);
+                    
+                    chatState.data[field] = chatState.data[field].filter(v => v !== value);
+                    
+                    const optionEl = optionsContainer.querySelector(`[data-value='${JSON.stringify(value)}']`);
+                    if (optionEl) {
+                        optionEl.style.backgroundColor = '';
+                        const tickIcon = optionEl.querySelector('[data-chat-input-element="dropdown-option-tick-icon"]');
+                        if (tickIcon) {
+                            // ✅ FIX: Explicitly set to 'none'
+                            tickIcon.style.display = 'none';
+                        }
+                    }
+                    
+                    tagEl.remove();
+                    
+                    chatState.currentSelection = {
+                        field,
+                        value: chatState.data[field],
+                        name: chatState.data[field].map(v => {
+                            const opt = options.find(o => o.value === v);
+                            return opt ? opt.name : v;
+                        }).join(', ')
+                    };
+                    
+                    console.log(`  📊 Remaining selections:`, chatState.data[field]);
+                    
+                    if (chatState.data[field].length === 0) {
+                        // ✅ FIX: Check if input is required before disabling
+                        const currentStep = flowData.flow[chatState.step];
+                        const inputRequired = currentStep.inputRequired === true;
+                        
+                        if (inputRequired) {
+                            disableNextButton();
+                        } else {
+                            enableNextButton();
+                        }
+                    }
+                };
+            }
+            
+            tagsContainer.appendChild(tagEl);
+        });
+    }
+    
+    // ✅ Initial tag render if pre-filled (edit mode)
+    if (selectedValues.size > 0) {
+        renderTags(field, options, tagsContainer, tagTemplateClone, optionsContainer);
+        console.log(`  ✅ Pre-filled ${selectedValues.size} selections, Next button enabled`);
+    }
+    
+    elements.messages.appendChild(clone);
+    scrollToBottom();
+    
+    console.log(`✅ Multi-select dropdown rendered for ${field}`);
+}
+
 // =============================================================================
 // OPTIONS RENDERING WITH CUSTOM ATTRIBUTES
 // =============================================================================
@@ -264,10 +519,7 @@ function updateEditIcons() {
 function renderOptions(options, field, isSingleSelect = true) {
     if (!elements.messages) return;
 
-    // Determine input type attribute value
     const inputTypeAttr = isSingleSelect ? 'single-select-input' : 'multi-select-input';
-
-    // Find existing option element in HTML by data-chat-element
     const optionSelector = `[data-chat-element="${inputTypeAttr}"]`;
     const existingOption = document.querySelector(optionSelector);
     
@@ -276,44 +528,34 @@ function renderOptions(options, field, isSingleSelect = true) {
         return;
     }
 
-    // Get existing data for this field (for pre-filling when editing)
     const existingData = chatState.data[field];
     console.log(`📝 Pre-filling ${field}:`, existingData);
 
-    // Create wrapper to hold all options
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
     optionsWrapper.style.display = 'flex';
     optionsWrapper.style.flexDirection = 'column';
-    optionsWrapper.style.alignItems = 'flex-start'; // Don't stretch options
+    optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
 
-    // Clone and fill option element for each option
     options.forEach((option, index) => {
         const optionName = option.name || option;
         const optionValue = option.value !== undefined ? option.value : option;
         const valueStr = typeof optionValue === 'object' ? 
             JSON.stringify(optionValue) : String(optionValue);
 
-        // Clone existing option element
         const clone = existingOption.cloneNode(true);
-
-        // Make clone visible (remove display:none from template)
         clone.style.display = '';
 
-        // Check if this option should be pre-selected
         let shouldBeChecked = false;
         if (isSingleSelect) {
-            // For single-select, check if value matches existing data
             shouldBeChecked = existingData !== undefined && 
                 JSON.stringify(existingData) === JSON.stringify(optionValue);
         } else {
-            // For multi-select, check if value is in array
             shouldBeChecked = Array.isArray(existingData) && 
                 existingData.some(v => JSON.stringify(v) === JSON.stringify(optionValue));
         }
 
-        // Set checked state
         if (shouldBeChecked) {
             clone.classList.add('cf-checked');
             clone.style.backgroundColor = config.selectedBackground;
@@ -323,56 +565,46 @@ function renderOptions(options, field, isSingleSelect = true) {
             clone.style.backgroundColor = 'transparent';
         }
 
-        // Set data attributes on container
         clone.setAttribute('data-chat-element', inputTypeAttr);
         clone.setAttribute('data-field', field);
         clone.setAttribute('data-value', valueStr);
         clone.setAttribute('data-name', optionName);
         clone.setAttribute('data-index', index);
 
-        // Find and set input
         const input = clone.querySelector('[data-chat-input-element="input"]');
         if (input) {
             input.setAttribute('data-chat-element', inputTypeAttr);
             input.name = field;
             input.value = valueStr;
-            input.checked = shouldBeChecked; // Pre-check if needed
-            input.onclick = (e) => e.stopPropagation(); // Prevent click bubbling
+            input.checked = shouldBeChecked;
+            input.onclick = (e) => e.stopPropagation();
         }
 
-        // Find and set tick icon visibility
         const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
         if (tickIcon) {
             tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
         }
 
-        // Find and set text
         const textElement = clone.querySelector('[data-chat-input-element="text"]');
         if (textElement) {
             textElement.textContent = optionName;
-            textElement.style.display = ''; // Make sure text is visible
+            textElement.style.display = '';
         } else {
             console.error('Text element not found in option');
         }
 
-        // Append to wrapper
         optionsWrapper.appendChild(clone);
     });
 
-    // Append wrapper to messages
     elements.messages.appendChild(optionsWrapper);
     scrollToBottom();
 
-    // Add click handlers with proper event handling
     const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
     optionElements.forEach(el => {
-        // Clear any existing onclick
         el.onclick = null;
-        
-        // Add new click handler with stopPropagation
         el.onclick = (e) => {
-            e.stopPropagation(); // Prevent bubbling
-            e.preventDefault(); // Prevent default behavior
+            e.stopPropagation();
+            e.preventDefault();
             handleOptionClick(el, field, isSingleSelect);
         };
     });
@@ -385,7 +617,6 @@ function renderOptions(options, field, isSingleSelect = true) {
 function renderColorOptions(options, field) {
     if (!elements.messages) return;
 
-    // Find existing color option element in HTML by data-chat-element
     const optionSelector = '[data-chat-element="multi-select-color"]';
     const existingOption = document.querySelector(optionSelector);
     
@@ -394,37 +625,29 @@ function renderColorOptions(options, field) {
         return;
     }
 
-    // Get existing data for this field (for pre-filling when editing)
     const existingData = chatState.data[field];
     console.log(`📝 Pre-filling ${field} (color):`, existingData);
 
-    // Create wrapper to hold all options
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
     optionsWrapper.style.display = 'flex';
     optionsWrapper.style.flexDirection = 'column';
-    optionsWrapper.style.alignItems = 'flex-start'; // Don't stretch options
+    optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
 
-    // Clone and fill option element for each option
     options.forEach((option, index) => {
         const optionName = option.name || option;
         const optionValue = option.value !== undefined ? option.value : option;
-        const optionColor = option.color || '#cccccc'; // Default gray if no color
+        const optionColor = option.color || '#cccccc';
         const valueStr = typeof optionValue === 'object' ? 
             JSON.stringify(optionValue) : String(optionValue);
 
-        // Clone existing option element
         const clone = existingOption.cloneNode(true);
-
-        // Make clone visible (remove display:none from template)
         clone.style.display = '';
 
-        // Check if this option should be pre-selected (multi-select behavior)
         const shouldBeChecked = Array.isArray(existingData) && 
             existingData.some(v => JSON.stringify(v) === JSON.stringify(optionValue));
 
-        // Set checked state
         if (shouldBeChecked) {
             clone.classList.add('cf-checked');
             clone.style.backgroundColor = config.selectedBackground;
@@ -434,7 +657,6 @@ function renderColorOptions(options, field) {
             clone.style.backgroundColor = 'transparent';
         }
 
-        // Set data attributes on container
         clone.setAttribute('data-chat-element', 'multi-select-color');
         clone.setAttribute('data-field', field);
         clone.setAttribute('data-value', valueStr);
@@ -442,59 +664,48 @@ function renderColorOptions(options, field) {
         clone.setAttribute('data-index', index);
         clone.setAttribute('data-color', optionColor);
 
-        // Find and set input
         const input = clone.querySelector('[data-chat-input-element="input"]');
         if (input) {
             input.setAttribute('data-chat-element', 'multi-select-color');
             input.name = field;
             input.value = valueStr;
-            input.checked = shouldBeChecked; // Pre-check if needed
-            input.onclick = (e) => e.stopPropagation(); // Prevent click bubbling
+            input.checked = shouldBeChecked;
+            input.onclick = (e) => e.stopPropagation();
         }
 
-        // Find and set tick icon visibility
         const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
         if (tickIcon) {
             tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
         }
 
-        // Find and set color block
         const colorBlock = clone.querySelector('[data-chat-input-element="color-block"]');
         if (colorBlock) {
             colorBlock.style.backgroundColor = optionColor;
-            colorBlock.style.display = ''; // Make sure it's visible
+            colorBlock.style.display = '';
         } else {
             console.warn('Color block element not found in multi-select-color template');
         }
 
-        // Find and set text
         const textElement = clone.querySelector('[data-chat-input-element="text"]');
         if (textElement) {
             textElement.textContent = optionName;
-            textElement.style.display = ''; // Make sure text is visible
+            textElement.style.display = '';
         } else {
             console.error('Text element not found in option');
         }
 
-        // Append to wrapper
         optionsWrapper.appendChild(clone);
     });
 
-    // Append wrapper to messages
     elements.messages.appendChild(optionsWrapper);
     scrollToBottom();
 
-    // Add click handlers with proper event handling
     const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
     optionElements.forEach(el => {
-        // Clear any existing onclick
         el.onclick = null;
-        
-        // Add new click handler with stopPropagation
         el.onclick = (e) => {
-            e.stopPropagation(); // Prevent bubbling
-            e.preventDefault(); // Prevent default behavior
-            // Use multi-select behavior (isSingleSelect = false)
+            e.stopPropagation();
+            e.preventDefault();
             handleOptionClick(el, field, false);
         };
     });
@@ -507,7 +718,6 @@ function renderColorOptions(options, field) {
 function renderCustomSelectOptions(options, field, customConfig) {
     if (!elements.messages) return;
 
-    // Find existing single-select option element
     const optionSelector = '[data-chat-element="single-select-input"]';
     const existingOption = document.querySelector(optionSelector);
     
@@ -516,19 +726,16 @@ function renderCustomSelectOptions(options, field, customConfig) {
         return;
     }
 
-    // Get existing data for pre-filling
     const existingData = chatState.data[field];
     console.log(`📝 Pre-filling ${field} (custom):`, existingData);
 
-    // Create wrapper to hold all options
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
     optionsWrapper.style.display = 'flex';
     optionsWrapper.style.flexDirection = 'column';
-    optionsWrapper.style.alignItems = 'flex-start'; // Don't stretch options
+    optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
 
-    // Render regular options
     options.forEach((option, index) => {
         const optionName = option.name || option;
         const optionValue = option.value !== undefined ? option.value : option;
@@ -538,9 +745,8 @@ function renderCustomSelectOptions(options, field, customConfig) {
         const clone = existingOption.cloneNode(true);
         clone.style.display = '';
 
-        // Check if this option should be pre-selected
         const shouldBeChecked = existingData !== undefined && 
-            !Array.isArray(existingData) &&  // Exclude array (custom range)
+            !Array.isArray(existingData) &&
             JSON.stringify(existingData) === JSON.stringify(optionValue);
 
         if (shouldBeChecked) {
@@ -579,12 +785,10 @@ function renderCustomSelectOptions(options, field, customConfig) {
         optionsWrapper.appendChild(clone);
     });
 
-    // Render custom option
     if (customConfig) {
         const customClone = existingOption.cloneNode(true);
         customClone.style.display = '';
         
-        // Check if custom was selected before (data is array [min, max])
         const isCustomSelected = existingData !== undefined && 
             Array.isArray(existingData) && 
             existingData.length === 2;
@@ -624,15 +828,10 @@ function renderCustomSelectOptions(options, field, customConfig) {
         optionsWrapper.appendChild(customClone);
     }
 
-    // Append wrapper to messages
     elements.messages.appendChild(optionsWrapper);
-
-    // Render min/max inputs
     renderMinMaxInputs(field, customConfig, existingData);
-
     scrollToBottom();
 
-    // Add click handlers for regular and custom options
     const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
     optionElements.forEach(el => {
         el.onclick = (e) => {
@@ -646,7 +845,6 @@ function renderCustomSelectOptions(options, field, customConfig) {
 function renderMinMaxInputs(field, customConfig, existingData) {
     if (!elements.messages || !customConfig) return;
 
-    // Find min/max input templates
     const minSelector = '[data-chat-element="single-select-custom-min"]';
     const maxSelector = '[data-chat-element="single-select-custom-max"]';
     const minTemplate = document.querySelector(minSelector);
@@ -657,37 +855,32 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         return;
     }
 
-    // Remove existing rangeWrapper if it exists (for edit flow)
     const existingRangeWrapper = elements.messages.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
     if (existingRangeWrapper) {
         console.log('  🗑️ Removing existing rangeWrapper for re-render');
         existingRangeWrapper.remove();
     }
 
-    // Create wrapper for min/max
     const rangeWrapper = document.createElement('div');
     rangeWrapper.setAttribute('data-chat-element', 'range-wrapper');
     rangeWrapper.setAttribute('data-field', field);
-    rangeWrapper.style.marginBottom = '16px'; // Add space below wrapper
+    rangeWrapper.style.marginBottom = '16px';
     rangeWrapper.style.display = 'flex';
-    rangeWrapper.style.gap = '16px'; // Gap between min and max
+    rangeWrapper.style.gap = '16px';
     rangeWrapper.style.flexWrap = 'wrap';
 
-    // Check if should show min/max (custom option selected)
-    // Data is stored as array [min, max]
     const showMinMax = existingData !== undefined && 
         Array.isArray(existingData) && 
         existingData.length === 2;
 
-    rangeWrapper.style.display = showMinMax ? 'flex' : 'none'; // Keep flex when visible!
+    rangeWrapper.style.display = showMinMax ? 'flex' : 'none';
 
-    // Clone and setup min input
     const minClone = minTemplate.cloneNode(true);
     minClone.style.display = '';
-    minClone.style.marginRight = '16px'; // Horizontal gap
-    minClone.style.marginBottom = '12px'; // Bottom margin if wraps
-    minClone.style.width = 'auto'; // Don't stretch
-    minClone.style.flex = 'none'; // Don't grow or shrink
+    minClone.style.marginRight = '16px';
+    minClone.style.marginBottom = '12px';
+    minClone.style.width = 'auto';
+    minClone.style.flex = 'none';
     minClone.setAttribute('data-field', field);
     
     const minInput = minClone.querySelector('[data-chat-input-element="input"]');
@@ -698,19 +891,17 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         minInput.min = customConfig.min !== undefined ? customConfig.min : 0;
         minInput.max = customConfig.max !== undefined ? customConfig.max : 100;
         minInput.value = showMinMax && existingData[0] !== undefined ? existingData[0] : '';
-        // Removed placeholder
         
         if (showMinMax) {
             console.log(`  ✅ Pre-filled min: ${existingData[0]}`);
         }
     }
 
-    // Clone and setup max input
     const maxClone = maxTemplate.cloneNode(true);
     maxClone.style.display = '';
-    maxClone.style.marginBottom = '12px'; // Bottom margin if wraps
-    maxClone.style.width = 'auto'; // Don't stretch
-    maxClone.style.flex = 'none'; // Don't grow or shrink
+    maxClone.style.marginBottom = '12px';
+    maxClone.style.width = 'auto';
+    maxClone.style.flex = 'none';
     maxClone.setAttribute('data-field', field);
     
     const maxInput = maxClone.querySelector('[data-chat-input-element="input"]');
@@ -721,7 +912,6 @@ function renderMinMaxInputs(field, customConfig, existingData) {
         maxInput.min = customConfig.min !== undefined ? customConfig.min : 0;
         maxInput.max = customConfig.max !== undefined ? customConfig.max : 100;
         maxInput.value = showMinMax && existingData[1] !== undefined ? existingData[1] : '';
-        // Removed placeholder
         
         if (showMinMax) {
             console.log(`  ✅ Pre-filled max: ${existingData[1]}`);
@@ -731,7 +921,6 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     rangeWrapper.appendChild(minClone);
     rangeWrapper.appendChild(maxClone);
     
-    // Add error message display
     const errorDiv = document.createElement('div');
     errorDiv.setAttribute('data-chat-element', 'range-error');
     errorDiv.setAttribute('data-field', field);
@@ -743,18 +932,15 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     
     elements.messages.appendChild(rangeWrapper);
 
-    // Add handlers for both inputs
     if (minInput && maxInput) {
         const updateVisualFeedback = () => {
             const minFilled = minInput.value.trim() !== '';
             const maxFilled = maxInput.value.trim() !== '';
             const anyFilled = minFilled || maxFilled;
             
-            // Get tick icons
             const minTick = minClone.querySelector('[data-chat-input-element="tick-icon"]');
             const maxTick = maxClone.querySelector('[data-chat-input-element="tick-icon"]');
             
-            // Update background and tick for BOTH inputs
             if (anyFilled) {
                 minClone.style.backgroundColor = config.selectedBackground;
                 maxClone.style.backgroundColor = config.selectedBackground;
@@ -768,10 +954,8 @@ function renderMinMaxInputs(field, customConfig, existingData) {
             }
         };
         
-        // Apply visual feedback immediately if pre-filled
         if (showMinMax) {
             updateVisualFeedback();
-            // Also run validation to set currentSelection
             validateMinMax(field, customConfig);
             console.log('  ✅ Applied visual feedback for pre-filled values');
         }
@@ -797,18 +981,15 @@ function renderMinMaxInputs(field, customConfig, existingData) {
 }
 
 function selectCustomOption(field) {
-    // Deselect all regular options
     const allOptions = document.querySelectorAll(`[data-field="${field}"][data-chat-element="single-select-input"]`);
     allOptions.forEach(opt => {
         const isCustom = opt.getAttribute('data-is-custom') === 'true';
         if (isCustom) {
-            // Select custom option
             opt.classList.add('cf-checked');
             opt.style.setProperty('background-color', config.selectedBackground, 'important');
             const tickIcon = opt.querySelector('[data-chat-input-element="tick-icon"]');
             if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
         } else {
-            // Deselect regular options
             opt.classList.remove('cf-checked');
             opt.style.setProperty('background-color', 'transparent', 'important');
             const tickIcon = opt.querySelector('[data-chat-input-element="tick-icon"]');
@@ -816,10 +997,9 @@ function selectCustomOption(field) {
         }
     });
 
-    // Show min/max inputs
     const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
     if (rangeWrapper) {
-        rangeWrapper.style.display = 'flex'; // Keep flex!
+        rangeWrapper.style.display = 'flex';
     }
 }
 
@@ -830,7 +1010,6 @@ function handleCustomSelectClick(element, field, customConfig) {
 
     console.log(`Custom-select clicked:`, { field, name: optionName, isCustom });
 
-    // Deselect all options first
     const allOptions = document.querySelectorAll(`[data-field="${field}"][data-chat-element="single-select-input"]`);
     allOptions.forEach(opt => {
         opt.classList.remove('cf-checked');
@@ -839,37 +1018,25 @@ function handleCustomSelectClick(element, field, customConfig) {
         if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
     });
 
-    // Select this option
     element.classList.add('cf-checked');
     element.style.setProperty('background-color', config.selectedBackground, 'important');
     const tickIcon = element.querySelector('[data-chat-input-element="tick-icon"]');
     if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
 
     if (isCustom) {
-        // Show min/max inputs
         const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
-        console.log('  📦 Looking for rangeWrapper:', `[data-chat-element="range-wrapper"][data-field="${field}"]`);
-        console.log('  📦 Found rangeWrapper:', rangeWrapper);
         
         if (rangeWrapper) {
-            console.log('  📦 Current display:', rangeWrapper.style.display);
-            rangeWrapper.style.display = 'flex'; // Keep flex!
-            console.log('  ✅ Set rangeWrapper display to flex');
-            console.log('  📦 New display:', rangeWrapper.style.display);
-        } else {
-            console.log('  ❌ rangeWrapper not found!');
+            rangeWrapper.style.display = 'flex';
         }
         
-        // Don't save data yet - wait for validation
         chatState.currentSelection = null;
         console.log('  ℹ️ Custom selected - waiting for min/max input');
     } else {
-        // Hide min/max inputs and clear them
         const rangeWrapper = document.querySelector(`[data-chat-element="range-wrapper"][data-field="${field}"]`);
         if (rangeWrapper) {
             rangeWrapper.style.display = 'none';
             
-            // Clear input values - fixed selectors
             const minInput = document.querySelector(`[data-field="${field}"][data-input-type="min"][data-chat-input-element="input"]`);
             const maxInput = document.querySelector(`[data-field="${field}"][data-input-type="max"][data-chat-input-element="input"]`);
             
@@ -882,7 +1049,6 @@ function handleCustomSelectClick(element, field, customConfig) {
                 console.log('  🧹 Cleared max input');
             }
             
-            // Reset visual feedback (background and ticks)
             const minContainer = rangeWrapper.querySelector('[data-chat-element="single-select-custom-min"]');
             const maxContainer = rangeWrapper.querySelector('[data-chat-element="single-select-custom-max"]');
             
@@ -898,14 +1064,12 @@ function handleCustomSelectClick(element, field, customConfig) {
                 if (maxTick) maxTick.style.display = 'none';
             }
             
-            // Hide error message
             const errorDiv = rangeWrapper.querySelector('[data-chat-element="range-error"]');
             if (errorDiv) errorDiv.style.display = 'none';
             
             console.log('  🧹 Min/max inputs cleared and hidden');
         }
 
-        // Parse and save regular value
         let value;
         try {
             value = JSON.parse(valueStr);
@@ -923,21 +1087,14 @@ function handleCustomSelectClick(element, field, customConfig) {
 function validateMinMax(field, customConfig) {
     console.log(`\n🔍 === VALIDATING MIN/MAX for field: ${field} ===`);
     
-    // Always use global config errors
     const errors = config.customRangeErrors;
     
-    // Fixed selectors - input has all attributes on it directly
     const minInput = document.querySelector(`[data-field="${field}"][data-input-type="min"][data-chat-input-element="input"]`);
     const maxInput = document.querySelector(`[data-field="${field}"][data-input-type="max"][data-chat-input-element="input"]`);
     const errorDiv = document.querySelector(`[data-chat-element="range-error"][data-field="${field}"]`);
 
     if (!minInput || !maxInput) {
         console.log('❌ Min or Max input not found');
-        console.log('  Tried selectors:');
-        console.log(`  Min: [data-field="${field}"][data-input-type="min"][data-chat-input-element="input"]`);
-        console.log(`  Max: [data-field="${field}"][data-input-type="max"][data-chat-input-element="input"]`);
-        console.log('  Found min:', minInput);
-        console.log('  Found max:', maxInput);
         return { valid: false, error: null };
     }
 
@@ -957,28 +1114,22 @@ function validateMinMax(field, customConfig) {
   Min constraint: >= ${minConstraint}
   Max constraint: <= ${maxConstraint}`);
 
-    // Helper to show error in div and clear data
     const showErrorDiv = (message) => {
         if (errorDiv) {
             errorDiv.textContent = message;
             errorDiv.style.display = 'block';
         }
-        // Clear the data when validation fails
         delete chatState.data[field];
         chatState.currentSelection = null;
         console.log(`🗑️ Data cleared for field: ${field}`);
     };
 
-    // Helper to hide error div
     const hideErrorDiv = () => {
         if (errorDiv) {
             errorDiv.style.display = 'none';
         }
     };
-
-    // Validation rules - return error message if invalid
     
-    // 1. Check if only one is filled
     if (minFilled && !maxFilled) {
         const error = errors.maxRequired;
         showErrorDiv(error);
@@ -995,7 +1146,6 @@ function validateMinMax(field, customConfig) {
         return { valid: false, error };
     }
     
-    // 2. Check if both are empty
     if (!minFilled && !maxFilled) {
         hideErrorDiv();
         delete chatState.data[field];
@@ -1005,7 +1155,6 @@ function validateMinMax(field, customConfig) {
         return { valid: false, error: null };
     }
 
-    // 3. Check if values are valid numbers
     if (isNaN(minValue) || isNaN(maxValue)) {
         const error = errors.bothRequired;
         showErrorDiv(error);
@@ -1014,7 +1163,6 @@ function validateMinMax(field, customConfig) {
         return { valid: false, error };
     }
 
-    // 4. Check min constraint
     console.log(`🔍 Checking: ${minValue} < ${minConstraint}?`);
     if (minValue < minConstraint) {
         const error = errors.minBelowConstraint.replace('{min}', minConstraint);
@@ -1025,7 +1173,6 @@ function validateMinMax(field, customConfig) {
     }
     console.log(`✅ PASS: Min (${minValue}) >= constraint (${minConstraint})`);
 
-    // 5. Check max constraint
     console.log(`🔍 Checking: ${maxValue} > ${maxConstraint}?`);
     if (maxValue > maxConstraint) {
         const error = errors.maxAboveConstraint.replace('{max}', maxConstraint);
@@ -1036,7 +1183,6 @@ function validateMinMax(field, customConfig) {
     }
     console.log(`✅ PASS: Max (${maxValue}) <= constraint (${maxConstraint})`);
 
-    // 6. Check min < max
     console.log(`🔍 Checking: ${minValue} >= ${maxValue}?`);
     if (minValue >= maxValue) {
         const error = errors.minGreaterThanMax;
@@ -1047,20 +1193,16 @@ function validateMinMax(field, customConfig) {
     }
     console.log(`✅ PASS: Min (${minValue}) < Max (${maxValue})`);
 
-    // All valid! Hide error and save data as array
     hideErrorDiv();
     
-    // Store as array [min, max]
     chatState.data[field] = [minValue, maxValue];
     
-    // Get the current step's input config for formatting
     const currentStep = flowData.flow[chatState.step];
     const inputConfig = currentStep?.input || {};
     const valueType = inputConfig.selectedInputValueType;
     const prefix = inputConfig.selectedInputPrefix || '';
     const suffix = inputConfig.selectedInputSuffix || '';
     
-    // Format display name
     let displayName = `${minValue}-${maxValue}`;
     if (valueType === 'arrayRange') {
         const formattedMin = minValue.toLocaleString();
@@ -1068,7 +1210,6 @@ function validateMinMax(field, customConfig) {
         displayName = `${formattedMin} - ${formattedMax}`;
     }
     
-    // Add prefix and suffix with spaces
     if (prefix) displayName = `${prefix} ${displayName}`;
     if (suffix) displayName = `${displayName} ${suffix}`;
     
@@ -1094,10 +1235,7 @@ function validateMinMax(field, customConfig) {
 function renderTextInput(field, inputType = 'text', inputConfig = {}) {
     if (!elements.messages) return;
 
-    // Determine input type attribute value
     const inputTypeAttr = inputType === 'number' ? 'number-input' : 'text-input';
-
-    // Find existing input element in HTML by data-chat-element
     const inputSelector = `[data-chat-element="${inputTypeAttr}"]`;
     const existingInput = document.querySelector(inputSelector);
     
@@ -1106,11 +1244,9 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
         return;
     }
 
-    // Get existing data for this field (for pre-filling when editing)
     const existingValue = chatState.data[field];
     console.log(`📝 Pre-filling ${field}:`, existingValue);
     
-    // Check if validation should be applied (only if input has min/max defined)
     const hasValidation = inputType === 'number' && 
         (inputConfig.min !== undefined || inputConfig.max !== undefined);
     
@@ -1121,22 +1257,15 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
         });
     }
 
-    // Clone existing input element
     const clone = existingInput.cloneNode(true);
-
-    // Make clone visible
     clone.style.display = '';
-
-    // Set data attributes
     clone.setAttribute('data-field', field);
 
-    // Find the actual input element
     const inputElement = clone.querySelector('[data-chat-input-element="input"]');
     if (inputElement) {
         inputElement.setAttribute('data-field', field);
         inputElement.name = field;
         
-        // Set min/max attributes if validation enabled
         if (hasValidation) {
             if (inputConfig.min !== undefined) {
                 inputElement.min = inputConfig.min;
@@ -1146,12 +1275,10 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
             }
         }
         
-        // Pre-fill value if it exists
         if (existingValue !== undefined && existingValue !== null) {
             inputElement.value = existingValue;
             console.log(`  ✅ Pre-filled with: ${existingValue}`);
             
-            // If validation enabled, validate the pre-filled value
             if (hasValidation) {
                 const value = parseFloat(existingValue);
                 const min = inputConfig.min;
@@ -1175,20 +1302,16 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
         
         inputElement.type = inputType === 'number' ? 'number' : 'text';
         
-        // Add input event handler
         inputElement.oninput = (e) => {
             const value = inputType === 'number' ? parseFloat(e.target.value) : e.target.value;
             
-            // Save value
             chatState.data[field] = value;
             chatState.currentSelection = { field, value, name: value };
             
-            // Apply validation ONLY if min/max defined at input level
             if (hasValidation) {
                 const min = inputConfig.min;
                 const max = inputConfig.max;
                 
-                // Check if value is valid
                 let isValid = true;
                 let errorMessage = '';
                 
@@ -1211,17 +1334,14 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
                     console.log(`  ❌ Number input invalid: ${errorMessage}`);
                 }
             } else {
-                // No validation - just log
                 console.log(`  📝 Input updated: ${value} (no validation)`);
             }
         };
     }
 
-    // Append to messages
     elements.messages.appendChild(clone);
     scrollToBottom();
 
-    // Focus the input
     if (inputElement) {
         setTimeout(() => inputElement.focus(), 100);
     }
@@ -1232,7 +1352,6 @@ function renderTextInput(field, inputType = 'text', inputConfig = {}) {
 // =============================================================================
 
 function handleOptionClick(element, field, isSingleSelect) {
-    // Prevent rapid double-clicks
     const now = Date.now();
     const lastClick = element.getAttribute('data-last-click');
     if (lastClick && (now - parseInt(lastClick)) < 300) {
@@ -1241,7 +1360,6 @@ function handleOptionClick(element, field, isSingleSelect) {
     }
     element.setAttribute('data-last-click', now.toString());
 
-    // Find elements using custom attributes
     const tickIcon = element.querySelector('[data-chat-input-element="tick-icon"]');
     const input = element.querySelector('[data-chat-input-element="input"]');
     const textElement = element.querySelector('[data-chat-input-element="text"]');
@@ -1257,7 +1375,6 @@ function handleOptionClick(element, field, isSingleSelect) {
         name: optionName
     });
     
-    // Parse value
     let value;
     try {
         value = JSON.parse(valueStr);
@@ -1266,7 +1383,6 @@ function handleOptionClick(element, field, isSingleSelect) {
     }
 
     if (isSingleSelect) {
-        // Uncheck all others with same field and input type
         const selector = `[data-field="${field}"][data-chat-element="${inputType}"]`;
         const allOptions = document.querySelectorAll(selector);
         
@@ -1281,18 +1397,15 @@ function handleOptionClick(element, field, isSingleSelect) {
             if (otherInput) otherInput.checked = false;
         });
 
-        // Check this one
         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;
 
-        // Save value
         chatState.data[field] = value;
         chatState.currentSelection = { field, value, name: optionName };
 
     } else {
-        // Multi-select
         const isChecked = !element.classList.contains('cf-checked');
         
         if (isChecked) {
@@ -1303,7 +1416,6 @@ function handleOptionClick(element, field, isSingleSelect) {
             }
             if (input) input.checked = true;
 
-            // Add to array
             if (!Array.isArray(chatState.data[field])) {
                 chatState.data[field] = [];
             }
@@ -1322,7 +1434,6 @@ function handleOptionClick(element, field, isSingleSelect) {
             if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
             if (input) input.checked = false;
 
-            // Remove from array
             if (Array.isArray(chatState.data[field])) {
                 chatState.data[field] = chatState.data[field].filter(v => 
                     JSON.stringify(v) !== JSON.stringify(value)
@@ -1332,7 +1443,6 @@ function handleOptionClick(element, field, isSingleSelect) {
             console.log(`❌ Removed "${optionName}" - Total selected:`, chatState.data[field]);
         }
 
-        // Get all selected names using custom attribute
         const selector = `[data-field="${field}"][data-chat-element="${inputType}"].cf-checked`;
         const selectedOptions = document.querySelectorAll(selector);
         const selectedNames = Array.from(selectedOptions).map(opt => 
@@ -1346,7 +1456,6 @@ function handleOptionClick(element, field, isSingleSelect) {
         };
     }
 
-    // Enable Next button
     enableNextButton();
 }
 
@@ -1357,7 +1466,6 @@ function handleOptionClick(element, field, isSingleSelect) {
 async function handleNext() {
     const currentStep = flowData.flow[chatState.step];
     
-    // Check if input is required (default false)
     const inputRequired = currentStep.inputRequired === true;
     
     if (inputRequired && !chatState.currentSelection) {
@@ -1365,7 +1473,6 @@ async function handleNext() {
         return;
     }
 
-    // VALIDATION: Check for single-select-custom validation before proceeding
     if (currentStep.inputType === 'single-select-custom' && currentStep.input) {
         const field = currentStep.input.field;
         const customConfig = currentStep.input.custom;
@@ -1374,8 +1481,6 @@ async function handleNext() {
         console.log(`Field: ${field}`);
         console.log(`Custom config:`, customConfig);
         
-        // Check if the CUSTOM OPTION is actually selected (not just if value is array)
-        // Regular options can also have array values!
         const customOptionElement = document.querySelector(
             `[data-field="${field}"][data-is-custom="true"][data-chat-element="single-select-input"]`
         );
@@ -1387,7 +1492,6 @@ async function handleNext() {
         console.log(`Is custom option selected? ${isCustomOptionSelected}`);
         
         if (isCustomOptionSelected && customConfig) {
-            // Validate the custom range one more time before proceeding
             console.log(`🔄 Running final validation before proceeding...`);
             
             const validation = validateMinMax(field, customConfig);
@@ -1395,11 +1499,9 @@ async function handleNext() {
             console.log(`Validation result:`, validation);
             
             if (!validation.valid) {
-                // If there's an error message, show it
                 if (validation.error) {
                     console.log('  ⚠️ Validation failed in handleNext, showing error message');
                     
-                    // Hide current inputs (options and range wrapper)
                     const optionsWrapper = document.querySelector('[data-chat-element="options-wrapper"]');
                     if (optionsWrapper) {
                         optionsWrapper.style.display = 'none';
@@ -1410,28 +1512,22 @@ async function handleNext() {
                         rangeWrapper.style.display = 'none';
                     }
                     
-                    // Add error message as bot message
                     addMessage(validation.error, 'bot', false, null);
-                    
-                    // Re-display the same step with fresh inputs
                     await showNextStep();
                 } else {
-                    // No error message, just incomplete data - do nothing
                     console.log('  ⚠️ Validation incomplete, waiting for user input');
                 }
                 
-                return; // Stop here, don't proceed
+                return;
             }
             
             console.log('✅ Validation passed, proceeding to next step');
         } else if (customConfig && chatState.currentSelection && chatState.currentSelection.value === customConfig.value) {
-            // User selected the custom option but hasn't entered valid min/max yet
             console.log('  ⚠️ Custom option selected but no valid range entered');
-            return; // Stop here
+            return;
         }
     }
 
-    // Call onNext validation if exists
     if (currentStep.onNext) {
         try {
             disableNextButton();
@@ -1452,9 +1548,7 @@ async function handleNext() {
         }
     }
 
-    // Add user message (only if selection was made)
     if (chatState.currentSelection) {
-        // Get the step's input config
         const inputConfig = currentStep.input || {};
         const valueType = inputConfig.selectedInputValueType;
         const prefix = inputConfig.selectedInputPrefix || '';
@@ -1462,7 +1556,6 @@ async function handleNext() {
         
         let displayName = chatState.currentSelection.name;
         
-        // Format based on valueType
         if (valueType === 'arrayRange' && Array.isArray(chatState.currentSelection.value)) {
             const [min, max] = chatState.currentSelection.value;
             const formattedMin = min.toLocaleString();
@@ -1470,13 +1563,11 @@ async function handleNext() {
             displayName = `${formattedMin} - ${formattedMax}`;
         }
         
-        // Add prefix and suffix with spaces
         if (prefix) displayName = `${prefix} ${displayName}`;
         if (suffix) displayName = `${displayName} ${suffix}`;
         
         addMessage(displayName, 'user', false, chatState.step);
 
-        // Save to history
         chatState.history.push({
             step: chatState.step,
             field: chatState.currentSelection.field,
@@ -1485,32 +1576,25 @@ async function handleNext() {
         });
     }
 
-    // Reset selection
     chatState.currentSelection = null;
     disableNextButton();
 
-    // Check if we should return to a saved step (after editing)
     if (chatState.returnToStep !== null) {
         const targetStep = chatState.returnToStep;
         console.log(`\n🔙 Returning to saved step ${targetStep} (edited step complete)`);
-        chatState.returnToStep = null;  // Clear the return step
+        chatState.returnToStep = null;
         
-        // Check if target step is valid
         if (targetStep >= 0 && targetStep < flowData.flow.length) {
             chatState.step = targetStep;
             console.log(`   ✅ Jumped to step ${targetStep}`);
             
-            // Hide all range-wrappers
             const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
             allRangeWrappers.forEach(wrapper => {
                 wrapper.style.display = 'none';
             });
             console.log('  🙈 Hidden all range-wrappers');
             
-            // Update edit icons for the new position
             updateEditIcons();
-            
-            // Show the step we returned to
             await showNextStep();
             return;
         } else {
@@ -1518,33 +1602,27 @@ async function handleNext() {
         }
     }
 
-    // Normal flow: Move to next step
     chatState.step++;
     
-    // Hide all range-wrappers (custom min/max inputs)
     const allRangeWrappers = document.querySelectorAll('[data-chat-element="range-wrapper"]');
     allRangeWrappers.forEach(wrapper => {
         wrapper.style.display = 'none';
     });
     console.log('  🙈 Hidden all range-wrappers');
     
-    // Update edit icons for all previous steps
     updateEditIcons();
 
-    // Check if finished
     if (chatState.step >= flowData.flow.length) {
         handleCompletion();
         return;
     }
 
-    // Show next step
     await showNextStep();
 }
 
 async function showNextStep() {
     const nextStep = flowData.flow[chatState.step];
 
-    // Call onStart if exists
     if (nextStep.onStart) {
         try {
             const canStart = await nextStep.onStart(chatState.data);
@@ -1558,87 +1636,81 @@ async function showNextStep() {
         }
     }
 
-    // Hide previous inputs (options, text inputs, number inputs)
     const previousInputs = elements.messages.querySelectorAll(
         '[data-chat-element="options-wrapper"], ' +
         '[data-chat-element="text-input"]:not([style*="display: none"]), ' +
-        '[data-chat-element="number-input"]:not([style*="display: none"])'
+        '[data-chat-element="number-input"]:not([style*="display: none"]), ' +
+        '[data-chat-element="multi-select-dropdown"]:not([style*="display: none"])'
     );
     previousInputs.forEach(input => {
         input.style.display = 'none';
     });
 
-    // Add bot message with edit icon if has input
     const hasInput = !!nextStep.input;
     addMessage(nextStep.message, 'bot', hasInput, chatState.step);
 
-    // Check if input is required (default false)
     const inputRequired = nextStep.inputRequired === true;
 
-    // Add options if input exists
     if (nextStep.input) {
-        const inputType = nextStep.inputType || 'single-select'; // Default to single-select
+        const inputType = nextStep.inputType || 'single-select';
         
         if (inputType === 'text' || inputType === 'number') {
-            // Render text or number input
             renderTextInput(nextStep.input.field, inputType, nextStep.input);
             
-            // Check if validation is enabled (number input with min/max defined)
             const hasValidation = inputType === 'number' && 
                 (nextStep.input.min !== undefined || nextStep.input.max !== undefined);
             
-            // Initial Next button state
             if (inputRequired || hasValidation) {
-                // Disable if input is required OR has validation rules
                 disableNextButton();
                 console.log('  🔒 Next button disabled initially (input required or validation enabled)');
             } else {
-                // Enable if optional and no validation
                 enableNextButton();
                 console.log('  🔓 Next button enabled (optional input, no validation)');
             }
         } else if (inputType === 'multi-select-color') {
-            // Render color options with color blocks
             renderColorOptions(nextStep.input.options, nextStep.input.field);
             
-            // Enable Next button if input not required (default behavior)
             if (!inputRequired) {
                 enableNextButton();
             }
         } else if (inputType === 'single-select-custom') {
-            // Render single-select with custom min/max option
             renderCustomSelectOptions(
                 nextStep.input.options, 
                 nextStep.input.field,
                 nextStep.input.custom
             );
             
-            // Disable Next button initially (wait for selection/validation)
             if (inputRequired) {
                 disableNextButton();
             } else {
                 enableNextButton();
             }
+        } else if (inputType === 'multi-select-dropdown') {
+            // ✅ Render multi-select dropdown
+            renderMultiSelectDropdown(nextStep.input.options, nextStep.input.field);
+            
+            // ✅ FIX: Enable Next button initially if NOT required
+            if (inputRequired) {
+                disableNextButton();
+                console.log('  🔒 Next button disabled initially (input required)');
+            } else {
+                enableNextButton();
+                console.log('  🔓 Next button enabled (input NOT required)');
+            }
         } else {
-            // Render options (single-select or multi-select)
             const isSingleSelect = inputType === 'single-select';
             renderOptions(nextStep.input.options, nextStep.input.field, isSingleSelect);
             
-            // Enable Next button if input not required (default behavior)
             if (!inputRequired) {
                 enableNextButton();
             }
         }
     } else {
-        // No input - always auto-advance (nextButtonDisplay only controls button visibility)
-        // Use step-level autoAdvanceDelay if provided, otherwise use global config
         const delay = nextStep.autoAdvanceDelay !== undefined ? nextStep.autoAdvanceDelay : config.autoAdvanceDelay;
         console.log(`  ⏱️ Auto-advance delay: ${delay}ms ${nextStep.autoAdvanceDelay !== undefined ? '(step-level)' : '(global)'}`);
         
         setTimeout(() => {
             chatState.step++;
-            
-            // Update edit icons after auto-advance
             updateEditIcons();
             
             if (chatState.step < flowData.flow.length) {
@@ -1649,7 +1721,6 @@ async function showNextStep() {
         }, delay);
     }
     
-    // Handle nextButtonDisplay - default is true
     const showNextButton = nextStep.nextButtonDisplay !== false;
     if (elements.nextBtn) {
         if (showNextButton) {
@@ -1661,7 +1732,6 @@ async function showNextStep() {
         }
     }
     
-    // Handle nextButtonText - update button text if specified at step level
     if (elements.nextBtn) {
         const nextBtnTextElement = elements.nextBtn.querySelector('[data-chat-element="next-button-text"]');
         
@@ -1670,19 +1740,15 @@ async function showNextStep() {
                 nextBtnTextElement.textContent = nextStep.nextButtonText;
                 console.log(`  📝 Next button text: "${nextStep.nextButtonText}" (step-level)`);
             } else {
-                // Restore original text
                 nextBtnTextElement.textContent = elements.originalNextBtnText;
                 console.log(`  📝 Next button text: "${elements.originalNextBtnText}" (original)`);
             }
         } else if (nextStep.nextButtonText) {
-            // Fallback: warn user if they're trying to set custom text but element doesn't exist
             console.warn(`  ⚠️ nextButtonText specified ("${nextStep.nextButtonText}") but next-button-text element not found`);
             console.warn('     Add <span data-chat-element="next-button-text">Next</span> inside your next-button');
         }
     }
     
-    // Always update edit icons at the end to ensure correct state
-    // Use setTimeout to ensure it runs after any DOM updates
     setTimeout(() => {
         updateEditIcons();
     }, 10);
@@ -1691,19 +1757,15 @@ async function showNextStep() {
 function handleCompletion() {
     console.log('✅ Flow completed. Data:', chatState.data);
 
-    // Mark flow as completed
     chatState.completed = true;
     console.log('   🏁 Flow marked as completed');
     
-    // Hide all edit icons
     updateEditIcons();
 
-    // Hide Next button
     if (elements.nextBtn) {
         elements.nextBtn.style.display = 'none';
     }
 
-    // Trigger event
     if (typeof window !== 'undefined') {
         const event = new CustomEvent('conversationalFlowComplete', {
             detail: { 
@@ -1714,7 +1776,6 @@ function handleCompletion() {
         window.dispatchEvent(event);
     }
 
-    // Call onComplete if provided
     if (flowData.onComplete && typeof flowData.onComplete === 'function') {
         flowData.onComplete(chatState.data);
     }
@@ -1725,7 +1786,6 @@ function handleCompletion() {
 // =============================================================================
 
 function init(flowName, flowConfig, options = {}) {
-    // Find container by data-chat-element="chat-wrapper"
     elements.container = document.querySelector('[data-chat-element="chat-wrapper"]');
     
     if (!elements.container) {
@@ -1734,19 +1794,15 @@ function init(flowName, flowConfig, options = {}) {
         return null;
     }
 
-    // Merge config
     if (flowConfig.config) {
         Object.assign(config, flowConfig.config);
     }
     
-    // Merge customRangeErrors - priority: options param > flow object > defaults
-    // 1. First, try flow object customRangeErrors
     if (flowConfig.customRangeErrors) {
         console.log('✅ Using custom range errors from flow object');
         Object.assign(config.customRangeErrors, flowConfig.customRangeErrors);
     }
     
-    // 2. Then, options parameter (overrides flow object if both provided)
     if (options.customRangeErrors) {
         console.log('✅ Using custom range errors from options parameter');
         Object.assign(config.customRangeErrors, options.customRangeErrors);
@@ -1759,20 +1815,16 @@ function init(flowName, flowConfig, options = {}) {
         customRangeErrors: config.customRangeErrors
     });
 
-    // Store flow data
     flowData = flowConfig;
 
-    // Initialize state
     chatState.step = 0;
     chatState.data = flowConfig.initialData || {};
     chatState.history = [];
     chatState.currentSelection = null;
 
-    // Find existing elements (don't create new ones)
     elements.messages = elements.container.querySelector('[data-chat-element="messages-container"]');
     elements.nextBtn = elements.container.querySelector('[data-chat-element="next-button"]');
 
-    // Validate required elements exist
     if (!elements.messages) {
         console.error('messages-container not found. Please add <div data-chat-element="messages-container"></div>');
         return null;
@@ -1783,10 +1835,8 @@ function init(flowName, flowConfig, options = {}) {
         return null;
     }
     
-    // Find the text element inside the button
     const nextBtnTextElement = elements.nextBtn.querySelector('[data-chat-element="next-button-text"]');
     if (nextBtnTextElement) {
-        // Store original button text from the text element
         elements.originalNextBtnText = nextBtnTextElement.textContent || nextBtnTextElement.innerText || 'Next';
         console.log(`💾 Stored original button text: "${elements.originalNextBtnText}" (from next-button-text element)`);
     } else {
@@ -1795,23 +1845,18 @@ function init(flowName, flowConfig, options = {}) {
         elements.originalNextBtnText = 'Next';
     }
 
-    // Clear ONLY messages container (not entire chat-wrapper)
     elements.messages.innerHTML = '';
 
-    // Reset button state
     elements.nextBtn.disabled = true;
     elements.nextBtn.style.opacity = '0.5';
     elements.nextBtn.style.cursor = 'not-allowed';
 
-    // Add event listener
     elements.nextBtn.onclick = handleNext;
 
-    // Expose editStep globally for onclick handlers
     if (typeof window !== 'undefined') {
         window.editStep = editStep;
     }
 
-    // Start
     showNextStep();
 
     console.log(`✅ Flow "${flowName}" initialized`);
@@ -1863,8 +1908,6 @@ function goToStep(stepNumber) {
     chatState.step = stepNumber;
     chatState.currentSelection = null;
     
-    // DON'T clear messages - keep chat history visible!
-    // User can see their previous answers
     console.log(`   Keeping messages visible (not clearing)...`);
 
     console.log(`   Disabling next button and calling showNextStep()...`);
@@ -1881,27 +1924,21 @@ function editStep(stepNumber) {
         return;
     }
 
-    // Save where we are now so we can return after editing
     chatState.returnToStep = chatState.step;
     console.log(`   💾 Saved return step: ${chatState.returnToStep}`);
     
-    // Reset completed flag since we're editing
     if (chatState.completed) {
         chatState.completed = false;
         console.log(`   🔓 Flow unmarked as completed (editing)`);
     }
 
     console.log(`   Clearing history from step ${stepNumber} forward...`);
-    // Clear history from this step forward
     chatState.history = chatState.history.filter(h => h.step < stepNumber);
     
     console.log(`   ✅ Keeping ALL data intact for editing (no data deleted)`);
     console.log(`   Current data:`, chatState.data);
-    // Don't delete any data - keep everything for pre-filling
-    // Data will be replaced when user submits the edited step
 
     console.log(`   Calling goToStep(${stepNumber})...`);
-    // Go to that step
     goToStep(stepNumber);
 }
 
@@ -1914,7 +1951,6 @@ function injectStyles() {
     const style = document.createElement('style');
     style.id = styleId;
     style.textContent = `
-        /* User message spacing and alignment */
         [data-chat-element="user-message-wrapper"] {
             margin-bottom: 16px;
             display: inline-flex;
@@ -1922,21 +1958,18 @@ function injectStyles() {
             align-self: flex-end;
         }
 
-        /* User message natural width from right */
         [data-chat-element="user-message-text"] {
             width: auto;
             display: inline-block;
             text-align: left;
         }
 
-        /* Messages container as flex column */
         [data-chat-element="messages-container"] {
             padding: 20px;
             display: flex;
             flex-direction: column;
         }
 
-        /* Options wrapper spacing and gap */
         [data-chat-element="options-wrapper"] {
             margin-bottom: 20px;
             display: flex;
@@ -1944,17 +1977,14 @@ function injectStyles() {
             gap: 12px;
         }
 
-        /* Text input spacing */
         [data-chat-element="text-input"] {
             margin-bottom: 20px;
         }
 
-        /* Number input spacing */
         [data-chat-element="number-input"] {
             margin-bottom: 20px;
         }
 
-        /* Bot edit icon styling */
         [data-chat-element="bot-edit-icon"] {
             display: none;
             margin-left: 8px !important;
@@ -1971,7 +2001,6 @@ function injectStyles() {
     document.head.appendChild(style);
 }
 
-// Auto-inject styles when imported
 if (typeof document !== 'undefined') {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', injectStyles);