lisichatbot 1.0.0 → 1.0.2

package/package.json

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

package/src/index.js

@@ -1,3 +1,15 @@
+/**
+ * Conversational Flow Builder
+ * A simple, flexible conversational flow builder for multi-step chat interfaces
+ * @version 1.0.0
+ * WITH CUSTOM DATA ATTRIBUTES
+ */
+
+'use strict';
+
+// =============================================================================
+// STATE MANAGEMENT
+// =============================================================================
 
 let chatState = {
     step: 0,
@@ -52,19 +64,43 @@ function disableNextButton() {
 // MESSAGE FUNCTIONS
 // =============================================================================
 
-function addMessage(content, type = 'bot') {
+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.innerHTML = `<div class="cf-message-content">${content}</div>`;
+    messageDiv.setAttribute('data-chat-element', `${type}-message-wrapper`);
+    
+    if (stepNumber !== null) {
+        messageDiv.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>
+        `;
+    }
+    
+    messageDiv.innerHTML = `
+        <div class="cf-message-content" data-chat-element="${type}-message-text">
+            ${content}
+        </div>
+        ${editIcon}
+    `;
     
     elements.messages.appendChild(messageDiv);
     scrollToBottom();
 }
 
 // =============================================================================
-// OPTIONS RENDERING
+// OPTIONS RENDERING WITH CUSTOM ATTRIBUTES
 // =============================================================================
 
 function renderOptions(options, field, isSingleSelect = true) {
@@ -72,6 +108,10 @@ function renderOptions(options, field, isSingleSelect = true) {
 
     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';
     
     const optionsHtml = options.map((option, index) => {
         const optionName = option.name || option;
@@ -81,45 +121,59 @@ function renderOptions(options, field, isSingleSelect = true) {
 
         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" style="display: none;">✓</div>
+                
+                <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">${optionName}</span>
+                
+                <span class="cf-option-text"
+                      data-chat-input-element="text">${optionName}</span>
             </label>
         `;
     }).join('');
 
     messageDiv.innerHTML = `
-        <div class="cf-message-content">
-            <div class="cf-options">${optionsHtml}</div>
+        <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);
     scrollToBottom();
 
-    // Add click handlers
-    const optionElements = messageDiv.querySelectorAll('.cf-option');
+    // Add click handlers using custom attribute selector
+    const optionElements = messageDiv.querySelectorAll('[data-chat-input-element="container"]');
     optionElements.forEach(el => {
         el.onclick = () => handleOptionClick(el, field, isSingleSelect);
     });
 }
 
 // =============================================================================
-// OPTION CLICK HANDLER
+// OPTION CLICK HANDLER USING CUSTOM ATTRIBUTES
 // =============================================================================
 
 function handleOptionClick(element, field, isSingleSelect) {
-    const tickIcon = element.querySelector('.cf-tick');
-    const input = element.querySelector('input');
+    // Find elements using custom attributes
+    const tickIcon = element.querySelector('[data-chat-input-element="tick-icon"]');
+    const input = element.querySelector('[data-chat-input-element="input"]');
+    const textElement = element.querySelector('[data-chat-input-element="text"]');
+    
     const valueStr = element.getAttribute('data-value');
     const optionName = element.getAttribute('data-name');
+    const inputType = element.getAttribute('data-chat-element');
     
     // Parse value
     let value;
@@ -130,20 +184,26 @@ function handleOptionClick(element, field, isSingleSelect) {
     }
 
     if (isSingleSelect) {
-        // Uncheck all others
-        const allOptions = document.querySelectorAll(`[data-field="${field}"]`);
+        // Uncheck all others with same field and input type
+        const selector = `[data-field="${field}"][data-chat-element="${inputType}"]`;
+        const allOptions = document.querySelectorAll(selector);
+        
         allOptions.forEach(opt => {
             opt.classList.remove('cf-checked');
             opt.style.backgroundColor = 'transparent';
-            opt.querySelector('.cf-tick').style.display = 'none';
-            opt.querySelector('input').checked = false;
+            
+            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 (otherInput) otherInput.checked = false;
         });
 
         // Check this one
         element.classList.add('cf-checked');
         element.style.backgroundColor = config.selectedBackground;
-        tickIcon.style.display = 'block';
-        input.checked = true;
+        if (tickIcon) tickIcon.style.display = 'block';
+        if (input) input.checked = true;
 
         // Save value
         chatState.data[field] = value;
@@ -156,8 +216,8 @@ function handleOptionClick(element, field, isSingleSelect) {
         if (isChecked) {
             element.classList.add('cf-checked');
             element.style.backgroundColor = config.selectedBackground;
-            tickIcon.style.display = 'block';
-            input.checked = true;
+            if (tickIcon) tickIcon.style.display = 'block';
+            if (input) input.checked = true;
 
             // Add to array
             if (!Array.isArray(chatState.data[field])) {
@@ -173,8 +233,8 @@ function handleOptionClick(element, field, isSingleSelect) {
         } else {
             element.classList.remove('cf-checked');
             element.style.backgroundColor = 'transparent';
-            tickIcon.style.display = 'none';
-            input.checked = false;
+            if (tickIcon) tickIcon.style.display = 'none';
+            if (input) input.checked = false;
 
             // Remove from array
             if (Array.isArray(chatState.data[field])) {
@@ -184,8 +244,9 @@ function handleOptionClick(element, field, isSingleSelect) {
             }
         }
 
-        // Get all selected names
-        const selectedOptions = document.querySelectorAll(`[data-field="${field}"].cf-checked`);
+        // Get all selected names using custom attribute
+        const selector = `[data-field="${field}"][data-chat-element="${inputType}"].cf-checked`;
+        const selectedOptions = document.querySelectorAll(selector);
         const selectedNames = Array.from(selectedOptions).map(opt => 
             opt.getAttribute('data-name')
         ).join(', ');
@@ -231,8 +292,8 @@ async function handleNext() {
         }
     }
 
-    // Add user message
-    addMessage(chatState.currentSelection.name, 'user');
+    // Add user message with edit capability
+    addMessage(chatState.currentSelection.name, 'user', true, chatState.step);
 
     // Save to history
     chatState.history.push({
@@ -327,11 +388,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;
     }
 
@@ -349,36 +412,42 @@ function init(containerId, flowConfig) {
     chatState.history = [];
     chatState.currentSelection = null;
 
-    // Create UI
+    // Clear existing content and create structure
     elements.container.innerHTML = `
-        <div class="cf-wrapper">
-            <div class="cf-messages" id="cfMessages"></div>
-            <div class="cf-bottom">
-                <button id="cfNextBtn" class="cf-next-btn" style="opacity: 0.5; cursor: not-allowed;" disabled>
-                    Next →
-                </button>
-            </div>
+        <div data-chat-element="messages-container"></div>
+        <div data-chat-element="navigation-bottom">
+            <button data-chat-element="next-button"
+                    style="opacity: 0.5; cursor: not-allowed;" 
+                    disabled>
+                Next →
+            </button>
         </div>
     `;
 
-    // Get elements
-    elements.messages = document.getElementById('cfMessages');
-    elements.nextBtn = document.getElementById('cfNextBtn');
+    // Get elements by data-chat-element
+    elements.messages = elements.container.querySelector('[data-chat-element="messages-container"]');
+    elements.nextBtn = elements.container.querySelector('[data-chat-element="next-button"]');
 
     // Add event listener
     if (elements.nextBtn) {
         elements.nextBtn.onclick = handleNext;
     }
 
+    // Expose editStep globally for onclick handlers
+    if (typeof window !== 'undefined') {
+        window.editStep = editStep;
+    }
+
     // Start
     showNextStep();
 
-    console.log('✅ Conversational Flow Builder initialized');
+    console.log(`✅ Flow "${flowName}" initialized`);
 
     return {
         getState,
         reset,
-        goToStep
+        goToStep,
+        editStep
     };
 }
 
@@ -425,6 +494,27 @@ function goToStep(stepNumber) {
     showNextStep();
 }
 
+function editStep(stepNumber) {
+    if (stepNumber < 0 || stepNumber >= flowData.flow.length) {
+        console.error('Invalid step number:', stepNumber);
+        return;
+    }
+
+    // Clear history from this step forward
+    chatState.history = chatState.history.filter(h => h.step < stepNumber);
+    
+    // Reset data for this field and beyond
+    const stepsToReset = flowData.flow.slice(stepNumber);
+    stepsToReset.forEach(step => {
+        if (step.input && step.input.field) {
+            delete chatState.data[step.input.field];
+        }
+    });
+
+    // Go to that step
+    goToStep(stepNumber);
+}
+
 function injectStyles() {
     if (typeof document === 'undefined') return;
     
@@ -454,6 +544,7 @@ function injectStyles() {
         .cf-message {
             margin-bottom: 15px;
             animation: cfSlideIn 0.3s ease;
+            position: relative;
         }
 
         @keyframes cfSlideIn {
@@ -469,6 +560,28 @@ function injectStyles() {
             text-align: right;
         }
 
+        .cf-edit-icon {
+            position: absolute;
+            right: -30px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 16px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            padding: 4px 8px;
+        }
+
+        .cf-message:hover .cf-edit-icon {
+            opacity: 1;
+        }
+
+        .cf-edit-icon:hover {
+            transform: translateY(-50%) scale(1.2);
+        }
+
         .cf-message-content {
             display: inline-block;
             padding: 12px 16px;
@@ -579,5 +692,6 @@ module.exports = {
     init,
     getState,
     reset,
-    goToStep
+    goToStep,
+    editStep
 };