lisichatbot 1.1.1 → 1.1.2

package/package.json

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

package/src/index.js

@@ -202,6 +202,69 @@ function renderOptions(options, field, isSingleSelect = true) {
     });
 }
 
+// =============================================================================
+// 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
 // =============================================================================
@@ -225,7 +288,8 @@ 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:`, {
+    const mode = isSingleSelect ? 'Single-select' : 'Multi-select';
+    console.log(`${mode} clicked:`, {
         field,
         value: valueStr,
         name: optionName
@@ -415,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