lisichatbot 1.0.9 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "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,10 +187,18 @@ 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);
+        };
     });
 }
 
@@ -198,6 +207,15 @@ function renderOptions(options, field, isSingleSelect = true) {
 // =============================================================================
 
 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 +225,12 @@ function handleOptionClick(element, field, isSingleSelect) {
     const optionName = element.getAttribute('data-name');
     const inputType = element.getAttribute('data-chat-element');
     
+    console.log(`${isSingleSelect ? 'Single-select' : 'Multi-select'} mode:`, {
+        field,
+        value: valueStr,
+        name: optionName
+    });
+    
     // Parse value
     let value;
     try {
@@ -245,19 +269,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 +289,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 +303,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
@@ -598,14 +614,13 @@ function injectStyles() {
         /* Bot message spacing and alignment */
         [data-chat-element="bot-message-wrapper"] {
             margin-bottom: 16px;
-            display: flex;
-            justify-content: flex-start;
-            width: 100%;
+            display: inline-flex;
+            max-width: 70%;
+            align-self: flex-start;
         }
 
         /* Bot message natural width from left */
         [data-chat-element="bot-message-text"] {
-            max-width: 70%;
             width: auto;
             display: inline-block;
         }
@@ -613,19 +628,25 @@ function injectStyles() {
         /* User message spacing and alignment */
         [data-chat-element="user-message-wrapper"] {
             margin-bottom: 16px;
-            display: flex;
-            justify-content: flex-end;
-            width: 100%;
+            display: inline-flex;
+            max-width: 70%;
+            align-self: flex-end;
         }
 
         /* User message natural width from right */
         [data-chat-element="user-message-text"] {
-            max-width: 70%;
             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;
@@ -633,11 +654,6 @@ function injectStyles() {
             flex-direction: column;
             gap: 12px;
         }
-
-        /* Messages container padding */
-        [data-chat-element="messages-container"] {
-            padding: 20px;
-        }
     `;
     
     document.head.appendChild(style);