lisichatbot 1.3.7 → 1.3.8

package/package.json

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

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 + MULTI-SELECT-DROPDOWN
+ * 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) => {
@@ -163,13 +152,9 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
         }
     }
 
-    // Make clone visible
     clone.style.display = '';
-
-    // Append to messages container
     elements.messages.appendChild(clone);
     
-    // IMPORTANT: Set edit icon display AFTER appending to DOM
     if (type === 'bot') {
         const editIconAfterAppend = clone.querySelector('[data-chat-element="bot-edit-icon"]');
         if (editIconAfterAppend) {
@@ -246,206 +231,7 @@ function updateEditIcons() {
 }
 
 // =============================================================================
-// OPTIONS RENDERING WITH CUSTOM ATTRIBUTES
-// =============================================================================
-
-function renderOptions(options, field, isSingleSelect = true) {
-    if (!elements.messages) return;
-
-    const inputTypeAttr = isSingleSelect ? 'single-select-input' : 'multi-select-input';
-    const optionSelector = `[data-chat-element="${inputTypeAttr}"]`;
-    const existingOption = document.querySelector(optionSelector);
-    
-    if (!existingOption) {
-        console.error(`Element with ${optionSelector} not found in HTML. Please add it to your HTML.`);
-        return;
-    }
-
-    const existingData = chatState.data[field];
-    console.log(`📝 Pre-filling ${field}:`, existingData);
-
-    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';
-    optionsWrapper.style.gap = '8px';
-
-    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);
-
-        const clone = existingOption.cloneNode(true);
-        clone.style.display = '';
-
-        let shouldBeChecked = false;
-        if (isSingleSelect) {
-            shouldBeChecked = existingData !== undefined && 
-                JSON.stringify(existingData) === JSON.stringify(optionValue);
-        } else {
-            shouldBeChecked = Array.isArray(existingData) && 
-                existingData.some(v => JSON.stringify(v) === JSON.stringify(optionValue));
-        }
-
-        if (shouldBeChecked) {
-            clone.classList.add('cf-checked');
-            clone.style.backgroundColor = config.selectedBackground;
-            console.log(`  ✅ Pre-selected: ${optionName}`);
-        } else {
-            clone.classList.remove('cf-checked');
-            clone.style.backgroundColor = 'transparent';
-        }
-
-        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);
-
-        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;
-            input.onclick = (e) => e.stopPropagation();
-        }
-
-        const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
-        if (tickIcon) {
-            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
-        }
-
-        const textElement = clone.querySelector('[data-chat-input-element="text"]');
-        if (textElement) {
-            textElement.textContent = optionName;
-            textElement.style.display = '';
-        } else {
-            console.error('Text element not found in option');
-        }
-
-        optionsWrapper.appendChild(clone);
-    });
-
-    elements.messages.appendChild(optionsWrapper);
-    scrollToBottom();
-
-    const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
-    optionElements.forEach(el => {
-        el.onclick = null;
-        el.onclick = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            handleOptionClick(el, field, isSingleSelect);
-        };
-    });
-}
-
-// =============================================================================
-// MULTI-SELECT-COLOR OPTIONS RENDERING
-// =============================================================================
-
-function renderColorOptions(options, field) {
-    if (!elements.messages) return;
-
-    const optionSelector = '[data-chat-element="multi-select-color"]';
-    const existingOption = document.querySelector(optionSelector);
-    
-    if (!existingOption) {
-        console.error(`Element with ${optionSelector} not found in HTML. Please add it to your HTML.`);
-        return;
-    }
-
-    const existingData = chatState.data[field];
-    console.log(`📝 Pre-filling ${field} (color):`, existingData);
-
-    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';
-    optionsWrapper.style.gap = '8px';
-
-    options.forEach((option, index) => {
-        const optionName = option.name || option;
-        const optionValue = option.value !== undefined ? option.value : option;
-        const optionColor = option.color || '#cccccc';
-        const valueStr = typeof optionValue === 'object' ? 
-            JSON.stringify(optionValue) : String(optionValue);
-
-        const clone = existingOption.cloneNode(true);
-        clone.style.display = '';
-
-        const shouldBeChecked = Array.isArray(existingData) && 
-            existingData.some(v => JSON.stringify(v) === JSON.stringify(optionValue));
-
-        if (shouldBeChecked) {
-            clone.classList.add('cf-checked');
-            clone.style.backgroundColor = config.selectedBackground;
-            console.log(`  ✅ Pre-selected color: ${optionName}`);
-        } else {
-            clone.classList.remove('cf-checked');
-            clone.style.backgroundColor = 'transparent';
-        }
-
-        clone.setAttribute('data-chat-element', 'multi-select-color');
-        clone.setAttribute('data-field', field);
-        clone.setAttribute('data-value', valueStr);
-        clone.setAttribute('data-name', optionName);
-        clone.setAttribute('data-index', index);
-        clone.setAttribute('data-color', optionColor);
-
-        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;
-            input.onclick = (e) => e.stopPropagation();
-        }
-
-        const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
-        if (tickIcon) {
-            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
-        }
-
-        const colorBlock = clone.querySelector('[data-chat-input-element="color-block"]');
-        if (colorBlock) {
-            colorBlock.style.backgroundColor = optionColor;
-            colorBlock.style.display = '';
-        } else {
-            console.warn('Color block element not found in multi-select-color template');
-        }
-
-        const textElement = clone.querySelector('[data-chat-input-element="text"]');
-        if (textElement) {
-            textElement.textContent = optionName;
-            textElement.style.display = '';
-        } else {
-            console.error('Text element not found in option');
-        }
-
-        optionsWrapper.appendChild(clone);
-    });
-
-    elements.messages.appendChild(optionsWrapper);
-    scrollToBottom();
-
-    const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
-    optionElements.forEach(el => {
-        el.onclick = null;
-        el.onclick = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            handleOptionClick(el, field, false);
-        };
-    });
-}
-
-// =============================================================================
-// MULTI-SELECT DROPDOWN RENDERING
+// MULTI-SELECT DROPDOWN RENDERING - COMPLETE FIXED VERSION
 // =============================================================================
 
 function renderMultiSelectDropdown(options, field) {
@@ -454,44 +240,48 @@ function renderMultiSelectDropdown(options, field) {
     console.log(`\n🎨 renderMultiSelectDropdown for field: ${field}`);
     console.log(`Options:`, options);
     
-    // Find template
     const template = document.querySelector('[data-chat-element="multi-select-dropdown"]');
     if (!template) {
         console.error('multi-select-dropdown template not found');
         return;
     }
     
-    // Clone template
     const clone = template.cloneNode(true);
     clone.style.display = '';
     clone.setAttribute('data-field', field);
     
-    // Get all elements
     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('[data-chat-input-element="dropdown-options-container"]');
+    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;
     }
     
-    // Store original template option and tag, then remove from DOM
     const optionTemplateClone = optionTemplate.cloneNode(true);
     const tagTemplateClone = tagTemplate.cloneNode(true);
     optionTemplate.remove();
     tagTemplate.remove();
     
-    // Get existing selections for pre-filling
+    // ✅ Get existing data for pre-filling (edit mode)
     const existingData = chatState.data[field] || [];
     const selectedValues = new Set(existingData);
-    console.log(`📝 Pre-filling selections:`, Array.from(selectedValues));
+    console.log(`📝 Pre-filling selections for ${field}:`, Array.from(selectedValues));
     
-    // Store all options for filtering
     const allOptions = [];
     
     // Render options
@@ -506,15 +296,21 @@ function renderMultiSelectDropdown(options, field) {
         
         if (nameEl) nameEl.textContent = option.name;
         
-        // Check if pre-selected
+        // ✅ Check if pre-selected (for edit mode)
         const isSelected = selectedValues.has(option.value);
         if (isSelected) {
             optionEl.style.backgroundColor = config.selectedBackground;
-            if (tickIcon) tickIcon.style.display = '';
+            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';
+            }
         }
         
-        // Click handler - prevents dropdown from closing
         optionEl.onclick = (e) => {
             e.stopPropagation();
             toggleOption(option, optionEl, tickIcon, field);
@@ -524,7 +320,6 @@ function renderMultiSelectDropdown(options, field) {
         allOptions.push({ element: optionEl, option });
     });
     
-    // Toggle dropdown visibility - click to open/close
     dropdown.onclick = (e) => {
         e.stopPropagation();
         const isVisible = optionsWrapper.style.display !== 'none';
@@ -547,7 +342,6 @@ function renderMultiSelectDropdown(options, field) {
         }
     };
     
-    // Close dropdown when clicking outside
     const closeDropdownHandler = (e) => {
         if (!clone.contains(e.target)) {
             if (optionsWrapper.style.display !== 'none') {
@@ -560,7 +354,6 @@ function renderMultiSelectDropdown(options, field) {
     document.addEventListener('click', closeDropdownHandler);
     clone.dataset.closeHandler = 'attached';
     
-    // Search functionality - filters options by name or value
     searchBar.oninput = (e) => {
         const searchTerm = e.target.value.toLowerCase();
         console.log(`🔍 Searching for: "${searchTerm}"`);
@@ -574,12 +367,10 @@ function renderMultiSelectDropdown(options, field) {
         });
     };
     
-    // Prevent search bar clicks from closing dropdown
     searchBar.onclick = (e) => {
         e.stopPropagation();
     };
     
-    // Toggle option selection
     function toggleOption(option, optionEl, tickIcon, field) {
         const currentSelections = chatState.data[field] || [];
         const isCurrentlySelected = currentSelections.includes(option.value);
@@ -587,20 +378,23 @@ function renderMultiSelectDropdown(options, field) {
         console.log(`🎯 Toggle option: ${option.name}`, { isCurrentlySelected });
         
         if (isCurrentlySelected) {
-            // Deselect
             chatState.data[field] = currentSelections.filter(v => v !== option.value);
             optionEl.style.backgroundColor = '';
-            if (tickIcon) tickIcon.style.display = 'none';
+            if (tickIcon) {
+                // ✅ FIX: Explicitly set to 'none'
+                tickIcon.style.display = 'none';
+            }
             console.log(`  ❌ Deselected: ${option.name}`);
         } else {
-            // Select
             chatState.data[field] = [...currentSelections, option.value];
             optionEl.style.backgroundColor = config.selectedBackground;
-            if (tickIcon) tickIcon.style.display = '';
+            if (tickIcon) {
+                // ✅ FIX: Explicitly set to 'block'
+                tickIcon.style.display = 'block';
+            }
             console.log(`  ✅ Selected: ${option.name}`);
         }
         
-        // Update current selection for handleNext
         chatState.currentSelection = {
             field,
             value: chatState.data[field],
@@ -612,20 +406,24 @@ function renderMultiSelectDropdown(options, field) {
         
         console.log(`  📊 Current selections:`, chatState.data[field]);
         
-        // Re-render tags
         renderTags(field, options, tagsContainer, tagTemplateClone, optionsContainer);
         
-        // Enable Next button if at least one selected
         if (chatState.data[field].length > 0) {
             enableNextButton();
         } else {
-            disableNextButton();
+            // ✅ FIX: Check if input is required before disabling
+            const currentStep = flowData.flow[chatState.step];
+            const inputRequired = currentStep.inputRequired === true;
+            
+            if (inputRequired) {
+                disableNextButton();
+            } else {
+                enableNextButton();
+            }
         }
     }
     
-    // Render tags - displays selected options as removable tags
     function renderTags(field, options, tagsContainer, tagTemplate, optionsContainer) {
-        // Clear existing tags (except template)
         const existingTags = tagsContainer.querySelectorAll('[data-chat-input-element="tag-wrapper"]');
         existingTags.forEach(tag => {
             if (tag.style.display !== 'none') {
@@ -651,32 +449,28 @@ function renderMultiSelectDropdown(options, field) {
                 textEl.textContent = option.name;
             }
             
-            // ✅ CRITICAL: Set cross icon display to BLOCK and handle click
             if (crossIcon) {
-                // Set display to block (as requested by user)
                 crossIcon.style.display = 'block';
                 console.log(`  ✅ Cross icon visible for: ${option.name}`);
                 
-                // Handle click to remove tag
                 crossIcon.onclick = (e) => {
                     e.stopPropagation();
                     console.log(`🗑️ Removing tag: ${option.name}`);
                     
-                    // Remove from selections array
                     chatState.data[field] = chatState.data[field].filter(v => v !== value);
                     
-                    // Update option UI in dropdown - remove background and tick
                     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) tickIcon.style.display = 'none';
+                        if (tickIcon) {
+                            // ✅ FIX: Explicitly set to 'none'
+                            tickIcon.style.display = 'none';
+                        }
                     }
                     
-                    // Remove tag from DOM
                     tagEl.remove();
                     
-                    // Update current selection
                     chatState.currentSelection = {
                         field,
                         value: chatState.data[field],
@@ -688,9 +482,16 @@ function renderMultiSelectDropdown(options, field) {
                     
                     console.log(`  📊 Remaining selections:`, chatState.data[field]);
                     
-                    // Disable Next button if no selections remain
                     if (chatState.data[field].length === 0) {
-                        disableNextButton();
+                        // ✅ FIX: Check if input is required before disabling
+                        const currentStep = flowData.flow[chatState.step];
+                        const inputRequired = currentStep.inputRequired === true;
+                        
+                        if (inputRequired) {
+                            disableNextButton();
+                        } else {
+                            enableNextButton();
+                        }
                     }
                 };
             }
@@ -699,19 +500,217 @@ function renderMultiSelectDropdown(options, field) {
         });
     }
     
-    // Initial tag render if pre-filled
+    // ✅ Initial tag render if pre-filled (edit mode)
     if (selectedValues.size > 0) {
         renderTags(field, options, tagsContainer, tagTemplateClone, optionsContainer);
-        enableNextButton();
+        console.log(`  ✅ Pre-filled ${selectedValues.size} selections, Next button enabled`);
     }
     
-    // Append to messages
     elements.messages.appendChild(clone);
     scrollToBottom();
     
     console.log(`✅ Multi-select dropdown rendered for ${field}`);
 }
 
+// =============================================================================
+// OPTIONS RENDERING WITH CUSTOM ATTRIBUTES
+// =============================================================================
+
+function renderOptions(options, field, isSingleSelect = true) {
+    if (!elements.messages) return;
+
+    const inputTypeAttr = isSingleSelect ? 'single-select-input' : 'multi-select-input';
+    const optionSelector = `[data-chat-element="${inputTypeAttr}"]`;
+    const existingOption = document.querySelector(optionSelector);
+    
+    if (!existingOption) {
+        console.error(`Element with ${optionSelector} not found in HTML. Please add it to your HTML.`);
+        return;
+    }
+
+    const existingData = chatState.data[field];
+    console.log(`📝 Pre-filling ${field}:`, existingData);
+
+    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';
+    optionsWrapper.style.gap = '8px';
+
+    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);
+
+        const clone = existingOption.cloneNode(true);
+        clone.style.display = '';
+
+        let shouldBeChecked = false;
+        if (isSingleSelect) {
+            shouldBeChecked = existingData !== undefined && 
+                JSON.stringify(existingData) === JSON.stringify(optionValue);
+        } else {
+            shouldBeChecked = Array.isArray(existingData) && 
+                existingData.some(v => JSON.stringify(v) === JSON.stringify(optionValue));
+        }
+
+        if (shouldBeChecked) {
+            clone.classList.add('cf-checked');
+            clone.style.backgroundColor = config.selectedBackground;
+            console.log(`  ✅ Pre-selected: ${optionName}`);
+        } else {
+            clone.classList.remove('cf-checked');
+            clone.style.backgroundColor = 'transparent';
+        }
+
+        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);
+
+        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;
+            input.onclick = (e) => e.stopPropagation();
+        }
+
+        const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
+        if (tickIcon) {
+            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
+        }
+
+        const textElement = clone.querySelector('[data-chat-input-element="text"]');
+        if (textElement) {
+            textElement.textContent = optionName;
+            textElement.style.display = '';
+        } else {
+            console.error('Text element not found in option');
+        }
+
+        optionsWrapper.appendChild(clone);
+    });
+
+    elements.messages.appendChild(optionsWrapper);
+    scrollToBottom();
+
+    const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
+    optionElements.forEach(el => {
+        el.onclick = null;
+        el.onclick = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleOptionClick(el, field, isSingleSelect);
+        };
+    });
+}
+
+// =============================================================================
+// MULTI-SELECT-COLOR OPTIONS RENDERING
+// =============================================================================
+
+function renderColorOptions(options, field) {
+    if (!elements.messages) return;
+
+    const optionSelector = '[data-chat-element="multi-select-color"]';
+    const existingOption = document.querySelector(optionSelector);
+    
+    if (!existingOption) {
+        console.error(`Element with ${optionSelector} not found in HTML. Please add it to your HTML.`);
+        return;
+    }
+
+    const existingData = chatState.data[field];
+    console.log(`📝 Pre-filling ${field} (color):`, existingData);
+
+    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';
+    optionsWrapper.style.gap = '8px';
+
+    options.forEach((option, index) => {
+        const optionName = option.name || option;
+        const optionValue = option.value !== undefined ? option.value : option;
+        const optionColor = option.color || '#cccccc';
+        const valueStr = typeof optionValue === 'object' ? 
+            JSON.stringify(optionValue) : String(optionValue);
+
+        const clone = existingOption.cloneNode(true);
+        clone.style.display = '';
+
+        const shouldBeChecked = Array.isArray(existingData) && 
+            existingData.some(v => JSON.stringify(v) === JSON.stringify(optionValue));
+
+        if (shouldBeChecked) {
+            clone.classList.add('cf-checked');
+            clone.style.backgroundColor = config.selectedBackground;
+            console.log(`  ✅ Pre-selected color: ${optionName}`);
+        } else {
+            clone.classList.remove('cf-checked');
+            clone.style.backgroundColor = 'transparent';
+        }
+
+        clone.setAttribute('data-chat-element', 'multi-select-color');
+        clone.setAttribute('data-field', field);
+        clone.setAttribute('data-value', valueStr);
+        clone.setAttribute('data-name', optionName);
+        clone.setAttribute('data-index', index);
+        clone.setAttribute('data-color', optionColor);
+
+        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;
+            input.onclick = (e) => e.stopPropagation();
+        }
+
+        const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
+        if (tickIcon) {
+            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
+        }
+
+        const colorBlock = clone.querySelector('[data-chat-input-element="color-block"]');
+        if (colorBlock) {
+            colorBlock.style.backgroundColor = optionColor;
+            colorBlock.style.display = '';
+        } else {
+            console.warn('Color block element not found in multi-select-color template');
+        }
+
+        const textElement = clone.querySelector('[data-chat-input-element="text"]');
+        if (textElement) {
+            textElement.textContent = optionName;
+            textElement.style.display = '';
+        } else {
+            console.error('Text element not found in option');
+        }
+
+        optionsWrapper.appendChild(clone);
+    });
+
+    elements.messages.appendChild(optionsWrapper);
+    scrollToBottom();
+
+    const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
+    optionElements.forEach(el => {
+        el.onclick = null;
+        el.onclick = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleOptionClick(el, field, false);
+        };
+    });
+}
+
 // =============================================================================
 // SINGLE-SELECT-CUSTOM (WITH MIN/MAX RANGE)
 // =============================================================================
@@ -737,7 +736,6 @@ function renderCustomSelectOptions(options, field, customConfig) {
     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;
@@ -787,7 +785,6 @@ function renderCustomSelectOptions(options, field, customConfig) {
         optionsWrapper.appendChild(clone);
     });
 
-    // Render custom option
     if (customConfig) {
         const customClone = existingOption.cloneNode(true);
         customClone.style.display = '';
@@ -1476,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;
@@ -1690,14 +1686,16 @@ async function showNextStep() {
                 enableNextButton();
             }
         } else if (inputType === 'multi-select-dropdown') {
-            // Render multi-select dropdown
+            // ✅ Render multi-select dropdown
             renderMultiSelectDropdown(nextStep.input.options, nextStep.input.field);
             
-            // Disable Next button initially if required
+            // ✅ 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 {
             const isSingleSelect = inputType === 'single-select';