lisichatbot 1.1.0 → 1.1.2

package/package.json

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

package/src/index.js

@@ -161,6 +161,7 @@ function renderOptions(options, field, isSingleSelect = true) {
             input.name = field;
             input.value = valueStr;
             input.checked = false; // Ensure unchecked initially
+            input.onclick = (e) => e.stopPropagation(); // Prevent click bubbling
         }
 
         // Find and ensure tick icon is hidden initially
@@ -186,18 +187,98 @@ function renderOptions(options, field, isSingleSelect = true) {
     elements.messages.appendChild(optionsWrapper);
     scrollToBottom();
 
-    // Add click handlers
+    // Add click handlers with proper event handling
     const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
     optionElements.forEach(el => {
-        el.onclick = () => handleOptionClick(el, field, isSingleSelect);
+        // 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
+            handleOptionClick(el, field, isSingleSelect);
+        };
     });
 }
 
+// =============================================================================
+// TEXT/NUMBER INPUT RENDERING
+// =============================================================================
+
+function renderTextInput(field, inputType = 'text') {
+    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);
+    
+    if (!existingInput) {
+        console.error(`Element with ${inputSelector} not found in HTML. Please add it to your HTML.`);
+        return;
+    }
+
+    // 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;
+        inputElement.value = '';
+        inputElement.type = inputType === 'number' ? 'number' : 'text';
+        
+        // Add input event to enable Next button when user types
+        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 };
+            
+            // Enable Next button if there's a value
+            if (value !== '' && value !== null && !isNaN(value)) {
+                enableNextButton();
+            } else {
+                disableNextButton();
+            }
+        };
+    }
+
+    // Append to messages
+    elements.messages.appendChild(clone);
+    scrollToBottom();
+
+    // Focus the input
+    if (inputElement) {
+        setTimeout(() => inputElement.focus(), 100);
+    }
+}
+
 // =============================================================================
 // OPTION CLICK HANDLER USING CUSTOM ATTRIBUTES
 // =============================================================================
 
 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) {
+        console.log('Ignored double-click');
+        return;
+    }
+    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"]');
@@ -207,6 +288,13 @@ function handleOptionClick(element, field, isSingleSelect) {
     const optionName = element.getAttribute('data-name');
     const inputType = element.getAttribute('data-chat-element');
     
+    const mode = isSingleSelect ? 'Single-select' : 'Multi-select';
+    console.log(`${mode} clicked:`, {
+        field,
+        value: valueStr,
+        name: optionName
+    });
+    
     // Parse value
     let value;
     try {
@@ -245,19 +333,11 @@ function handleOptionClick(element, field, isSingleSelect) {
         // Multi-select
         const isChecked = !element.classList.contains('cf-checked');
         
-        console.log('Multi-select clicked:', {
-            field,
-            value,
-            isChecked,
-            selectedBackground: config.selectedBackground
-        });
-        
         if (isChecked) {
             element.classList.add('cf-checked');
             element.style.setProperty('background-color', config.selectedBackground, 'important');
             if (tickIcon) {
                 tickIcon.style.setProperty('display', 'block', 'important');
-                console.log('Tick icon shown for:', optionName);
             }
             if (input) input.checked = true;
 
@@ -273,7 +353,7 @@ function handleOptionClick(element, field, isSingleSelect) {
                 chatState.data[field].push(value);
             }
             
-            console.log('Selected:', chatState.data[field]);
+            console.log(`✅ Added "${optionName}" - Total selected:`, chatState.data[field]);
         } else {
             element.classList.remove('cf-checked');
             element.style.setProperty('background-color', 'transparent', 'important');
@@ -287,7 +367,7 @@ function handleOptionClick(element, field, isSingleSelect) {
                 );
             }
             
-            console.log('Unselected:', chatState.data[field]);
+            console.log(`❌ Removed "${optionName}" - Total selected:`, chatState.data[field]);
         }
 
         // Get all selected names using custom attribute
@@ -399,12 +479,27 @@ async function showNextStep() {
 
     // Add options if input exists
     if (nextStep.input) {
-        const isSingleSelect = nextStep.inputType !== 'multi';
-        renderOptions(nextStep.input.options, nextStep.input.field, isSingleSelect);
+        const inputType = nextStep.inputType || 'single-select'; // Default to single-select
         
-        // Enable Next button if input not required (default behavior)
-        if (!inputRequired) {
-            enableNextButton();
+        if (inputType === 'text' || inputType === 'number') {
+            // Render text or number input
+            renderTextInput(nextStep.input.field, inputType);
+            
+            // Disable Next button initially (enabled when user types)
+            if (inputRequired) {
+                disableNextButton();
+            } else {
+                enableNextButton();
+            }
+        } 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 {
         // Auto-advance for steps without input