lisichatbot 1.2.1 → 1.2.4

package/package.json

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

package/src/index.js

@@ -16,7 +16,8 @@ let chatState = {
     data: {},
     history: [],
     currentSelection: null,
-    returnToStep: null  // Track where to return after editing
+    returnToStep: null,  // Track where to return after editing
+    completed: false     // Track if flow is completed
 };
 
 let elements = {
@@ -89,6 +90,17 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
     // 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}"]`
+        );
+        previousInstances.forEach(prev => {
+            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
@@ -111,8 +123,11 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             editIcon.style.setProperty('display', 'none', 'important');
             console.log('  ✓ Edit icon hidden (display: none !important)');
             
-            // Only show if this step has input AND it's a PREVIOUS step (not current)
-            if (hasInput && stepNumber !== null && stepNumber < chatState.step) {
+            // 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) => {
                     e.stopPropagation();
@@ -125,9 +140,11 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
                 editIcon.style.setProperty('display', 'block', 'important');
                 editIcon.style.setProperty('margin-left', '8px', 'important');
                 editIcon.style.setProperty('cursor', 'pointer', 'important');
-                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} is previous step with input)`);
+                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} is latest previous step with input)`);
             } else if (hasInput && stepNumber === chatState.step) {
                 console.log(`  ⏸️ Edit icon HIDDEN (step ${stepNumber} is CURRENT step)`);
+            } else if (!isLatest && hasInput && stepNumber < chatState.step) {
+                console.log(`  📜 Edit icon HIDDEN (step ${stepNumber} is OLD instance)`);
             } else {
                 console.log(`  ⚪ Edit icon HIDDEN (step ${stepNumber || 'N/A'} has no input)`);
             }
@@ -155,8 +172,10 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             editIconAfterAppend.style.setProperty('display', 'none', 'important');
             editIconAfterAppend.style.setProperty('margin-left', '8px', 'important');
             
-            // Only show if has input AND it's a previous step
-            if (hasInput && stepNumber !== null && stepNumber < chatState.step) {
+            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', 'block', 'important');
                 
                 // Debug: Check spacing
@@ -180,19 +199,27 @@ 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}`);
+    console.log(`\n🔄 Updating edit icons - Current step: ${chatState.step}, Completed: ${chatState.completed}`);
     
     allBotMessages.forEach(wrapper => {
         const stepNumber = parseInt(wrapper.getAttribute('data-chat-step'));
         const editIcon = wrapper.querySelector('[data-chat-element="bot-edit-icon"]');
+        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;
             
-            // Show icon if: has input AND is previous step
-            if (hasInput && stepNumber < chatState.step) {
+            // 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();
@@ -206,10 +233,12 @@ function updateEditIcons() {
                 editIcon.style.setProperty('display', 'block', 'important');
                 editIcon.style.setProperty('cursor', 'pointer', 'important');
                 editIcon.style.setProperty('margin-left', '8px', 'important');
-                console.log(`  ✏️ Step ${stepNumber}: Icon SHOWN (previous step)`);
+                console.log(`  ✏️ Step ${stepNumber}: Icon SHOWN (latest previous step)`);
             } else {
                 editIcon.style.setProperty('display', 'none', 'important');
-                if (stepNumber === chatState.step) {
+                if (!isLatest && hasInput && stepNumber < chatState.step) {
+                    console.log(`  📜 Step ${stepNumber}: Icon HIDDEN (old instance)`);
+                } else if (stepNumber === chatState.step) {
                     console.log(`  ⏸️ Step ${stepNumber}: Icon HIDDEN (current step)`);
                 } else if (!hasInput) {
                     console.log(`  ⚪ Step ${stepNumber}: Icon HIDDEN (no input)`);
@@ -238,6 +267,10 @@ 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');
@@ -255,9 +288,27 @@ function renderOptions(options, field, isSingleSelect = true) {
         // Make clone visible (remove display:none from template)
         clone.style.display = '';
 
-        // Reset to unchecked state
-        clone.classList.remove('cf-checked');
-        clone.style.backgroundColor = 'transparent';
+        // 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;
+            console.log(`  ✅ Pre-selected: ${optionName}`);
+        } else {
+            clone.classList.remove('cf-checked');
+            clone.style.backgroundColor = 'transparent';
+        }
 
         // Set data attributes on container
         clone.setAttribute('data-chat-element', inputTypeAttr);
@@ -272,14 +323,14 @@ function renderOptions(options, field, isSingleSelect = true) {
             input.setAttribute('data-chat-element', inputTypeAttr);
             input.name = field;
             input.value = valueStr;
-            input.checked = false; // Ensure unchecked initially
+            input.checked = shouldBeChecked; // Pre-check if needed
             input.onclick = (e) => e.stopPropagation(); // Prevent click bubbling
         }
 
-        // Find and ensure tick icon is hidden initially
+        // Find and set tick icon visibility
         const tickIcon = clone.querySelector('[data-chat-input-element="tick-icon"]');
         if (tickIcon) {
-            tickIcon.style.display = 'none';
+            tickIcon.style.display = shouldBeChecked ? 'block' : 'none';
         }
 
         // Find and set text
@@ -314,6 +365,124 @@ function renderOptions(options, field, isSingleSelect = true) {
     });
 }
 
+// =============================================================================
+// MULTI-SELECT-COLOR OPTIONS RENDERING
+// =============================================================================
+
+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);
+    
+    if (!existingOption) {
+        console.error(`Element with ${optionSelector} not found in HTML. Please add it to your HTML.`);
+        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');
+
+    // 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 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;
+            console.log(`  ✅ Pre-selected color: ${optionName}`);
+        } else {
+            clone.classList.remove('cf-checked');
+            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);
+        clone.setAttribute('data-name', optionName);
+        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
+        }
+
+        // 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
+        } 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
+        } 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)
+            handleOptionClick(el, field, false);
+        };
+    });
+}
+
 // =============================================================================
 // TEXT/NUMBER INPUT RENDERING
 // =============================================================================
@@ -333,6 +502,10 @@ function renderTextInput(field, inputType = 'text') {
         return;
     }
 
+    // Get existing data for this field (for pre-filling when editing)
+    const existingValue = chatState.data[field];
+    console.log(`📝 Pre-filling ${field}:`, existingValue);
+
     // Clone existing input element
     const clone = existingInput.cloneNode(true);
 
@@ -347,7 +520,15 @@ function renderTextInput(field, inputType = 'text') {
     if (inputElement) {
         inputElement.setAttribute('data-field', field);
         inputElement.name = field;
-        inputElement.value = '';
+        
+        // Pre-fill value if it exists
+        if (existingValue !== undefined && existingValue !== null) {
+            inputElement.value = existingValue;
+            console.log(`  ✅ Pre-filled with: ${existingValue}`);
+        } else {
+            inputElement.value = '';
+        }
+        
         inputElement.type = inputType === 'number' ? 'number' : 'text';
         
         // Add input event to enable Next button when user types
@@ -639,6 +820,14 @@ async function showNextStep() {
             } else {
                 enableNextButton();
             }
+        } 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 {
             // Render options (single-select or multi-select)
             const isSingleSelect = inputType === 'single-select';
@@ -675,6 +864,13 @@ 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';
@@ -814,10 +1010,9 @@ function goToStep(stepNumber) {
     chatState.step = stepNumber;
     chatState.currentSelection = null;
     
-    console.log(`   Clearing messages container...`);
-    if (elements.messages) {
-        elements.messages.innerHTML = '';
-    }
+    // 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()...`);
     disableNextButton();
@@ -836,6 +1031,12 @@ function editStep(stepNumber) {
     // 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