lisichatbot 1.0.7 → 1.0.9

package/package.json

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

package/src/index.js

@@ -222,19 +222,19 @@ function handleOptionClick(element, field, isSingleSelect) {
         
         allOptions.forEach(opt => {
             opt.classList.remove('cf-checked');
-            opt.style.backgroundColor = 'transparent';
+            opt.style.setProperty('background-color', 'transparent', 'important');
             
             const otherTick = opt.querySelector('[data-chat-input-element="tick-icon"]');
             const otherInput = opt.querySelector('[data-chat-input-element="input"]');
             
-            if (otherTick) otherTick.style.display = 'none';
+            if (otherTick) otherTick.style.setProperty('display', 'none', 'important');
             if (otherInput) otherInput.checked = false;
         });
 
         // Check this one
         element.classList.add('cf-checked');
-        element.style.backgroundColor = config.selectedBackground;
-        if (tickIcon) tickIcon.style.display = 'block';
+        element.style.setProperty('background-color', config.selectedBackground, 'important');
+        if (tickIcon) tickIcon.style.setProperty('display', 'block', 'important');
         if (input) input.checked = true;
 
         // Save value
@@ -245,10 +245,20 @@ 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.backgroundColor = config.selectedBackground;
-            if (tickIcon) tickIcon.style.display = 'block';
+            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;
 
             // Add to array
@@ -262,10 +272,12 @@ function handleOptionClick(element, field, isSingleSelect) {
             if (!exists) {
                 chatState.data[field].push(value);
             }
+            
+            console.log('Selected:', chatState.data[field]);
         } else {
             element.classList.remove('cf-checked');
-            element.style.backgroundColor = 'transparent';
-            if (tickIcon) tickIcon.style.display = 'none';
+            element.style.setProperty('background-color', 'transparent', 'important');
+            if (tickIcon) tickIcon.style.setProperty('display', 'none', 'important');
             if (input) input.checked = false;
 
             // Remove from array
@@ -274,6 +286,8 @@ function handleOptionClick(element, field, isSingleSelect) {
                     JSON.stringify(v) !== JSON.stringify(value)
                 );
             }
+            
+            console.log('Unselected:', chatState.data[field]);
         }
 
         // Get all selected names using custom attribute
@@ -299,16 +313,22 @@ function handleOptionClick(element, field, isSingleSelect) {
 // =============================================================================
 
 async function handleNext() {
-    if (!chatState.currentSelection) return;
-
     const currentStep = flowData.flow[chatState.step];
+    
+    // Check if input is required (default false)
+    const inputRequired = currentStep.inputRequired === true;
+    
+    if (inputRequired && !chatState.currentSelection) {
+        console.log('Selection required but none made');
+        return;
+    }
 
     // Call onNext validation if exists
     if (currentStep.onNext) {
         try {
             disableNextButton();
             const canProceed = await currentStep.onNext(
-                chatState.currentSelection.value,
+                chatState.currentSelection ? chatState.currentSelection.value : null,
                 chatState.data
             );
             
@@ -324,16 +344,18 @@ async function handleNext() {
         }
     }
 
-    // Add user message with edit capability
-    addMessage(chatState.currentSelection.name, 'user', true, chatState.step);
+    // Add user message with edit capability (only if selection was made)
+    if (chatState.currentSelection) {
+        addMessage(chatState.currentSelection.name, 'user', true, chatState.step);
 
-    // Save to history
-    chatState.history.push({
-        step: chatState.step,
-        field: chatState.currentSelection.field,
-        value: chatState.currentSelection.value,
-        name: chatState.currentSelection.name
-    });
+        // Save to history
+        chatState.history.push({
+            step: chatState.step,
+            field: chatState.currentSelection.field,
+            value: chatState.currentSelection.value,
+            name: chatState.currentSelection.name
+        });
+    }
 
     // Reset selection
     chatState.currentSelection = null;
@@ -372,10 +394,18 @@ async function showNextStep() {
     // Add message
     addMessage(nextStep.message);
 
+    // Check if input is required (default false)
+    const inputRequired = nextStep.inputRequired === true;
+
     // Add options if input exists
     if (nextStep.input) {
         const isSingleSelect = nextStep.inputType !== 'multi';
         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
         setTimeout(() => {
@@ -390,8 +420,6 @@ async function showNextStep() {
 }
 
 function handleCompletion() {
-    addMessage('Thank you! All done.');
-    
     console.log('✅ Flow completed. Data:', chatState.data);
 
     // Hide Next button
@@ -434,6 +462,12 @@ function init(flowName, flowConfig) {
     if (flowConfig.config) {
         Object.assign(config, flowConfig.config);
     }
+    
+    console.log('✅ Flow initialized:', {
+        flowName,
+        selectedBackground: config.selectedBackground,
+        autoAdvanceDelay: config.autoAdvanceDelay
+    });
 
     // Store flow data
     flowData = flowConfig;
@@ -561,17 +595,38 @@ function injectStyles() {
     const style = document.createElement('style');
     style.id = styleId;
     style.textContent = `
-        /* Bot message spacing */
+        /* Bot message spacing and alignment */
         [data-chat-element="bot-message-wrapper"] {
             margin-bottom: 16px;
+            display: flex;
+            justify-content: flex-start;
+            width: 100%;
+        }
+
+        /* Bot message natural width from left */
+        [data-chat-element="bot-message-text"] {
+            max-width: 70%;
+            width: auto;
+            display: inline-block;
         }
 
-        /* User message spacing */
+        /* User message spacing and alignment */
         [data-chat-element="user-message-wrapper"] {
             margin-bottom: 16px;
+            display: flex;
+            justify-content: flex-end;
+            width: 100%;
+        }
+
+        /* User message natural width from right */
+        [data-chat-element="user-message-text"] {
+            max-width: 70%;
+            width: auto;
+            display: inline-block;
+            text-align: left;
         }
 
-        /* Options wrapper spacing */
+        /* Options wrapper spacing and gap */
         [data-chat-element="options-wrapper"] {
             margin-bottom: 20px;
             display: flex;
@@ -579,18 +634,6 @@ function injectStyles() {
             gap: 12px;
         }
 
-        /* Ensure checked state shows background color */
-        [data-chat-element="single-select-input"].cf-checked,
-        [data-chat-element="multi-select-input"].cf-checked {
-            background-color: var(--selected-bg, #667eea) !important;
-        }
-
-        /* Ensure tick icon shows when checked */
-        [data-chat-element="single-select-input"].cf-checked [data-chat-input-element="tick-icon"],
-        [data-chat-element="multi-select-input"].cf-checked [data-chat-input-element="tick-icon"] {
-            display: block !important;
-        }
-
         /* Messages container padding */
         [data-chat-element="messages-container"] {
             padding: 20px;