lisichatbot 1.0.1 → 1.0.3

package/package.json

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

package/src/index.js

@@ -67,35 +67,43 @@ function disableNextButton() {
 function addMessage(content, type = 'bot', isEditable = false, stepNumber = null) {
     if (!elements.messages) return;
 
-    const messageDiv = document.createElement('div');
-    messageDiv.className = `cf-message cf-${type}`;
-    messageDiv.setAttribute('data-chat-element', `${type}-message-wrapper`);
+    // Find the wrapper element directly by data-chat-element
+    const wrapperSelector = `[data-chat-element="${type}-message-wrapper"]`;
+    const existingWrapper = document.querySelector(wrapperSelector);
     
+    if (!existingWrapper) {
+        console.error(`Element with ${wrapperSelector} not found in HTML. Please add it to your HTML.`);
+        return;
+    }
+
+    // Clone the existing wrapper
+    const clone = existingWrapper.cloneNode(true);
+
+    // Add step number if provided
     if (stepNumber !== null) {
-        messageDiv.setAttribute('data-chat-step', stepNumber);
+        clone.setAttribute('data-chat-step', stepNumber);
     }
-    
-    let editIcon = '';
-    if (isEditable && type === 'user') {
-        editIcon = `
-            <button class="cf-edit-icon" 
-                    data-chat-element="edit-button"
-                    data-chat-step="${stepNumber}"
-                    onclick="editStep(${stepNumber})"
-                    title="Edit this response">
-                ✏️
-            </button>
-        `;
+
+    // Find text element in clone and set content
+    const textElement = clone.querySelector(`[data-chat-element="${type}-message-text"]`);
+    if (textElement) {
+        textElement.textContent = content;
+    } else {
+        console.error(`Element with data-chat-element="${type}-message-text" not found in wrapper`);
     }
-    
-    messageDiv.innerHTML = `
-        <div class="cf-message-content" data-chat-element="${type}-message-text">
-            ${content}
-        </div>
-        ${editIcon}
-    `;
-    
-    elements.messages.appendChild(messageDiv);
+
+    // Handle edit button for user messages
+    if (isEditable && type === 'user' && stepNumber !== null) {
+        const editButton = clone.querySelector('[data-chat-element="edit-button"]');
+        if (editButton) {
+            editButton.setAttribute('data-chat-step', stepNumber);
+            editButton.onclick = () => editStep(stepNumber);
+            editButton.style.display = 'inline-block';
+        }
+    }
+
+    // Append to messages container
+    elements.messages.appendChild(clone);
     scrollToBottom();
 }
 
@@ -106,56 +114,63 @@ function addMessage(content, type = 'bot', isEditable = false, stepNumber = null
 function renderOptions(options, field, isSingleSelect = true) {
     if (!elements.messages) return;
 
-    const messageDiv = document.createElement('div');
-    messageDiv.className = 'cf-message cf-bot';
-    messageDiv.setAttribute('data-chat-message', 'bot');
-    
     // Determine input type attribute value
     const inputTypeAttr = isSingleSelect ? 'single-select-input' : 'multi-select-input';
+
+    // Find existing option element in HTML by data-chat-element
+    const optionSelector = `[data-chat-element="${inputTypeAttr}"]`;
+    const existingOption = document.querySelector(optionSelector);
     
-    const optionsHtml = options.map((option, index) => {
+    if (!existingOption) {
+        console.error(`Element with ${optionSelector} not found in HTML. Please add it to your HTML.`);
+        return;
+    }
+
+    // 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 valueStr = typeof optionValue === 'object' ? 
             JSON.stringify(optionValue) : String(optionValue);
 
-        return `
-            <label class="cf-option ${isSingleSelect ? 'cf-single' : 'cf-multi'}" 
-                   data-chat-input-element="container"
-                   data-chat-element="${inputTypeAttr}"
-                   data-field="${field}"
-                   data-value='${valueStr}'
-                   data-name="${optionName}"
-                   data-index="${index}">
-                
-                <div class="cf-tick" 
-                     data-chat-input-element="tick-icon"
-                     style="display: none;">✓</div>
-                
-                <input type="${isSingleSelect ? 'radio' : 'checkbox'}" 
-                       name="${field}" 
-                       value="${valueStr}"
-                       data-chat-input-element="input"
-                       data-chat-element="${inputTypeAttr}"
-                       style="display: none;">
-                
-                <span class="cf-option-text"
-                      data-chat-input-element="text">${optionName}</span>
-            </label>
-        `;
-    }).join('');
-
-    messageDiv.innerHTML = `
-        <div class="cf-message-content" data-chat-element="bot-message-text">
-            <div class="cf-options" data-chat-element="options-wrapper">${optionsHtml}</div>
-        </div>
-    `;
-    
-    elements.messages.appendChild(messageDiv);
+        // Clone existing option element
+        const clone = existingOption.cloneNode(true);
+
+        // Set data attributes on container
+        clone.setAttribute('data-chat-element', inputTypeAttr);
+        clone.setAttribute('data-field', field);
+        clone.setAttribute('data-value', valueStr);
+        clone.setAttribute('data-name', optionName);
+        clone.setAttribute('data-index', index);
+
+        // Find and set input
+        const input = clone.querySelector('[data-chat-input-element="input"]');
+        if (input) {
+            input.setAttribute('data-chat-element', inputTypeAttr);
+            input.name = field;
+            input.value = valueStr;
+        }
+
+        // Find and set text
+        const textElement = clone.querySelector('[data-chat-input-element="text"]');
+        if (textElement) {
+            textElement.textContent = optionName;
+        }
+
+        // Append to wrapper
+        optionsWrapper.appendChild(clone);
+    });
+
+    // Append wrapper to messages
+    elements.messages.appendChild(optionsWrapper);
     scrollToBottom();
 
-    // Add click handlers using custom attribute selector
-    const optionElements = messageDiv.querySelectorAll('[data-chat-input-element="container"]');
+    // Add click handlers
+    const optionElements = optionsWrapper.querySelectorAll('[data-chat-input-element="container"]');
     optionElements.forEach(el => {
         el.onclick = () => handleOptionClick(el, field, isSingleSelect);
     });
@@ -388,11 +403,13 @@ function handleCompletion() {
 // INITIALIZATION
 // =============================================================================
 
-function init(containerId, flowConfig) {
-    // Get container
-    elements.container = document.getElementById(containerId);
+function init(flowName, flowConfig) {
+    // Find container by data-chat-element="chat-wrapper"
+    elements.container = document.querySelector('[data-chat-element="chat-wrapper"]');
+    
     if (!elements.container) {
-        console.error('Container not found:', containerId);
+        console.error('Container with data-chat-element="chat-wrapper" not found');
+        console.error('Please add <div data-chat-element="chat-wrapper"></div> to your HTML');
         return null;
     }
 
@@ -410,34 +427,32 @@ function init(containerId, flowConfig) {
     chatState.history = [];
     chatState.currentSelection = null;
 
-    // Create UI with data-chat-element attributes
-    elements.container.innerHTML = `
-        <div class="cf-wrapper" data-chat-element="chat-wrapper">
-            <div class="cf-messages" 
-                 id="cfMessages" 
-                 data-chat-element="messages-container"></div>
-            <div class="cf-bottom" 
-                 data-chat-element="navigation-bottom">
-                <button id="cfNextBtn" 
-                        class="cf-next-btn" 
-                        data-chat-element="next-button"
-                        style="opacity: 0.5; cursor: not-allowed;" 
-                        disabled>
-                    Next →
-                </button>
-            </div>
-        </div>
-    `;
+    // Find existing elements (don't create new ones)
+    elements.messages = elements.container.querySelector('[data-chat-element="messages-container"]');
+    elements.nextBtn = elements.container.querySelector('[data-chat-element="next-button"]');
 
-    // Get elements
-    elements.messages = document.getElementById('cfMessages');
-    elements.nextBtn = document.getElementById('cfNextBtn');
+    // Validate required elements exist
+    if (!elements.messages) {
+        console.error('messages-container not found. Please add <div data-chat-element="messages-container"></div>');
+        return null;
+    }
 
-    // Add event listener
-    if (elements.nextBtn) {
-        elements.nextBtn.onclick = handleNext;
+    if (!elements.nextBtn) {
+        console.error('next-button not found. Please add <button data-chat-element="next-button"></button>');
+        return null;
     }
 
+    // Clear ONLY messages container (not entire chat-wrapper)
+    elements.messages.innerHTML = '';
+
+    // Reset button state
+    elements.nextBtn.disabled = true;
+    elements.nextBtn.style.opacity = '0.5';
+    elements.nextBtn.style.cursor = 'not-allowed';
+
+    // Add event listener
+    elements.nextBtn.onclick = handleNext;
+
     // Expose editStep globally for onclick handlers
     if (typeof window !== 'undefined') {
         window.editStep = editStep;
@@ -446,12 +461,13 @@ function init(containerId, flowConfig) {
     // Start
     showNextStep();
 
-    console.log('✅ Conversational Flow Builder initialized with custom attributes');
+    console.log(`✅ Flow "${flowName}" initialized`);
 
     return {
         getState,
         reset,
-        goToStep
+        goToStep,
+        editStep
     };
 }