lisichatbot 1.0.0

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "lisichatbot",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=14"
+  }
+}

package/src/index.js

@@ -0,0 +1,583 @@
+
+let chatState = {
+    step: 0,
+    data: {},
+    history: [],
+    currentSelection: null
+};
+
+let elements = {
+    container: null,
+    messages: null,
+    nextBtn: null
+};
+
+let config = {
+    selectedBackground: '#667eea',
+    autoAdvanceDelay: 2000,
+    enableAnimations: true
+};
+
+let flowData = null;
+
+// =============================================================================
+// UTILITY FUNCTIONS
+// =============================================================================
+
+function scrollToBottom() {
+    if (elements.messages) {
+        setTimeout(() => {
+            elements.messages.scrollTop = elements.messages.scrollHeight;
+        }, 100);
+    }
+}
+
+function enableNextButton() {
+    if (elements.nextBtn) {
+        elements.nextBtn.disabled = false;
+        elements.nextBtn.style.opacity = '1';
+        elements.nextBtn.style.cursor = 'pointer';
+    }
+}
+
+function disableNextButton() {
+    if (elements.nextBtn) {
+        elements.nextBtn.disabled = true;
+        elements.nextBtn.style.opacity = '0.5';
+        elements.nextBtn.style.cursor = 'not-allowed';
+    }
+}
+
+// =============================================================================
+// MESSAGE FUNCTIONS
+// =============================================================================
+
+function addMessage(content, type = 'bot') {
+    if (!elements.messages) return;
+
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `cf-message cf-${type}`;
+    messageDiv.innerHTML = `<div class="cf-message-content">${content}</div>`;
+    
+    elements.messages.appendChild(messageDiv);
+    scrollToBottom();
+}
+
+// =============================================================================
+// OPTIONS RENDERING
+// =============================================================================
+
+function renderOptions(options, field, isSingleSelect = true) {
+    if (!elements.messages) return;
+
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'cf-message cf-bot';
+    
+    const optionsHtml = options.map((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-field="${field}"
+                   data-value='${valueStr}'
+                   data-name="${optionName}"
+                   data-index="${index}">
+                <div class="cf-tick" style="display: none;">✓</div>
+                <input type="${isSingleSelect ? 'radio' : 'checkbox'}" 
+                       name="${field}" 
+                       value="${valueStr}"
+                       style="display: none;">
+                <span class="cf-option-text">${optionName}</span>
+            </label>
+        `;
+    }).join('');
+
+    messageDiv.innerHTML = `
+        <div class="cf-message-content">
+            <div class="cf-options">${optionsHtml}</div>
+        </div>
+    `;
+    
+    elements.messages.appendChild(messageDiv);
+    scrollToBottom();
+
+    // Add click handlers
+    const optionElements = messageDiv.querySelectorAll('.cf-option');
+    optionElements.forEach(el => {
+        el.onclick = () => handleOptionClick(el, field, isSingleSelect);
+    });
+}
+
+// =============================================================================
+// OPTION CLICK HANDLER
+// =============================================================================
+
+function handleOptionClick(element, field, isSingleSelect) {
+    const tickIcon = element.querySelector('.cf-tick');
+    const input = element.querySelector('input');
+    const valueStr = element.getAttribute('data-value');
+    const optionName = element.getAttribute('data-name');
+    
+    // Parse value
+    let value;
+    try {
+        value = JSON.parse(valueStr);
+    } catch (e) {
+        value = valueStr;
+    }
+
+    if (isSingleSelect) {
+        // Uncheck all others
+        const allOptions = document.querySelectorAll(`[data-field="${field}"]`);
+        allOptions.forEach(opt => {
+            opt.classList.remove('cf-checked');
+            opt.style.backgroundColor = 'transparent';
+            opt.querySelector('.cf-tick').style.display = 'none';
+            opt.querySelector('input').checked = false;
+        });
+
+        // Check this one
+        element.classList.add('cf-checked');
+        element.style.backgroundColor = config.selectedBackground;
+        tickIcon.style.display = 'block';
+        input.checked = true;
+
+        // Save value
+        chatState.data[field] = value;
+        chatState.currentSelection = { field, value, name: optionName };
+
+    } else {
+        // Multi-select
+        const isChecked = !element.classList.contains('cf-checked');
+        
+        if (isChecked) {
+            element.classList.add('cf-checked');
+            element.style.backgroundColor = config.selectedBackground;
+            tickIcon.style.display = 'block';
+            input.checked = true;
+
+            // Add to array
+            if (!Array.isArray(chatState.data[field])) {
+                chatState.data[field] = [];
+            }
+            
+            const exists = chatState.data[field].some(v => 
+                JSON.stringify(v) === JSON.stringify(value)
+            );
+            if (!exists) {
+                chatState.data[field].push(value);
+            }
+        } else {
+            element.classList.remove('cf-checked');
+            element.style.backgroundColor = 'transparent';
+            tickIcon.style.display = 'none';
+            input.checked = false;
+
+            // Remove from array
+            if (Array.isArray(chatState.data[field])) {
+                chatState.data[field] = chatState.data[field].filter(v => 
+                    JSON.stringify(v) !== JSON.stringify(value)
+                );
+            }
+        }
+
+        // Get all selected names
+        const selectedOptions = document.querySelectorAll(`[data-field="${field}"].cf-checked`);
+        const selectedNames = Array.from(selectedOptions).map(opt => 
+            opt.getAttribute('data-name')
+        ).join(', ');
+
+        chatState.currentSelection = { 
+            field, 
+            value: chatState.data[field], 
+            name: selectedNames || 'None selected'
+        };
+    }
+
+    // Enable Next button
+    enableNextButton();
+}
+
+// =============================================================================
+// NAVIGATION
+// =============================================================================
+
+async function handleNext() {
+    if (!chatState.currentSelection) return;
+
+    const currentStep = flowData.flow[chatState.step];
+
+    // Call onNext validation if exists
+    if (currentStep.onNext) {
+        try {
+            disableNextButton();
+            const canProceed = await currentStep.onNext(
+                chatState.currentSelection.value,
+                chatState.data
+            );
+            
+            if (!canProceed) {
+                enableNextButton();
+                return;
+            }
+        } catch (error) {
+            console.error('Validation error:', error);
+            alert('An error occurred. Please try again.');
+            enableNextButton();
+            return;
+        }
+    }
+
+    // Add user message
+    addMessage(chatState.currentSelection.name, 'user');
+
+    // 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;
+    disableNextButton();
+
+    // Move to next step
+    chatState.step++;
+
+    // Check if finished
+    if (chatState.step >= flowData.flow.length) {
+        handleCompletion();
+        return;
+    }
+
+    // Show next step
+    await showNextStep();
+}
+
+async function showNextStep() {
+    const nextStep = flowData.flow[chatState.step];
+
+    // Call onStart if exists
+    if (nextStep.onStart) {
+        try {
+            const canStart = await nextStep.onStart(chatState.data);
+            if (!canStart) {
+                console.log('Step blocked');
+                return;
+            }
+        } catch (error) {
+            console.error('Error in onStart:', error);
+            return;
+        }
+    }
+
+    // Add message
+    addMessage(nextStep.message);
+
+    // Add options if input exists
+    if (nextStep.input) {
+        const isSingleSelect = nextStep.inputType !== 'multi';
+        renderOptions(nextStep.input.options, nextStep.input.field, isSingleSelect);
+    } else {
+        // Auto-advance for steps without input
+        setTimeout(() => {
+            chatState.step++;
+            if (chatState.step < flowData.flow.length) {
+                showNextStep();
+            } else {
+                handleCompletion();
+            }
+        }, config.autoAdvanceDelay);
+    }
+}
+
+function handleCompletion() {
+    addMessage('Thank you! All done.');
+    
+    console.log('✅ Flow completed. Data:', chatState.data);
+
+    // Hide Next button
+    if (elements.nextBtn) {
+        elements.nextBtn.style.display = 'none';
+    }
+
+    // Trigger event
+    if (typeof window !== 'undefined') {
+        const event = new CustomEvent('conversationalFlowComplete', {
+            detail: { 
+                data: chatState.data,
+                history: chatState.history
+            }
+        });
+        window.dispatchEvent(event);
+    }
+
+    // Call onComplete if provided
+    if (flowData.onComplete && typeof flowData.onComplete === 'function') {
+        flowData.onComplete(chatState.data);
+    }
+}
+
+// =============================================================================
+// INITIALIZATION
+// =============================================================================
+
+function init(containerId, flowConfig) {
+    // Get container
+    elements.container = document.getElementById(containerId);
+    if (!elements.container) {
+        console.error('Container not found:', containerId);
+        return null;
+    }
+
+    // Merge config
+    if (flowConfig.config) {
+        Object.assign(config, flowConfig.config);
+    }
+
+    // Store flow data
+    flowData = flowConfig;
+
+    // Initialize state
+    chatState.step = 0;
+    chatState.data = flowConfig.initialData || {};
+    chatState.history = [];
+    chatState.currentSelection = null;
+
+    // Create UI
+    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>
+    `;
+
+    // Get elements
+    elements.messages = document.getElementById('cfMessages');
+    elements.nextBtn = document.getElementById('cfNextBtn');
+
+    // Add event listener
+    if (elements.nextBtn) {
+        elements.nextBtn.onclick = handleNext;
+    }
+
+    // Start
+    showNextStep();
+
+    console.log('✅ Conversational Flow Builder initialized');
+
+    return {
+        getState,
+        reset,
+        goToStep
+    };
+}
+
+function getState() {
+    return {
+        step: chatState.step,
+        data: { ...chatState.data },
+        history: [...chatState.history]
+    };
+}
+
+function reset() {
+    chatState.step = 0;
+    chatState.data = flowData.initialData || {};
+    chatState.history = [];
+    chatState.currentSelection = null;
+    
+    if (elements.messages) {
+        elements.messages.innerHTML = '';
+    }
+
+    if (elements.nextBtn) {
+        elements.nextBtn.style.display = 'flex';
+    }
+
+    disableNextButton();
+    showNextStep();
+}
+
+function goToStep(stepNumber) {
+    if (stepNumber < 0 || stepNumber >= flowData.flow.length) {
+        console.error('Invalid step number:', stepNumber);
+        return;
+    }
+
+    chatState.step = stepNumber;
+    chatState.currentSelection = null;
+    
+    if (elements.messages) {
+        elements.messages.innerHTML = '';
+    }
+
+    disableNextButton();
+    showNextStep();
+}
+
+function injectStyles() {
+    if (typeof document === 'undefined') return;
+    
+    const styleId = 'cf-styles';
+    if (document.getElementById(styleId)) return;
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+        .cf-wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            max-height: 600px;
+            border: 1px solid #e5e5e5;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #f9f9f9;
+        }
+
+        .cf-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+
+        .cf-message {
+            margin-bottom: 15px;
+            animation: cfSlideIn 0.3s ease;
+        }
+
+        @keyframes cfSlideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .cf-bot {
+            text-align: left;
+        }
+
+        .cf-user {
+            text-align: right;
+        }
+
+        .cf-message-content {
+            display: inline-block;
+            padding: 12px 16px;
+            border-radius: 8px;
+            max-width: 80%;
+        }
+
+        .cf-bot .cf-message-content {
+            background: white;
+            border: 1px solid #e5e5e5;
+        }
+
+        .cf-user .cf-message-content {
+            background: #667eea;
+            color: white;
+        }
+
+        .cf-options {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .cf-option {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 14px 16px;
+            background: white;
+            border: 2px solid #e5e5e5;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .cf-option:hover {
+            border-color: #667eea;
+            transform: translateX(4px);
+        }
+
+        .cf-option.cf-checked {
+            border-color: #667eea;
+            color: white;
+        }
+
+        .cf-tick {
+            font-weight: bold;
+            font-size: 18px;
+            min-width: 20px;
+        }
+
+        .cf-option-text {
+            flex: 1;
+        }
+
+        .cf-bottom {
+            padding: 16px;
+            background: white;
+            border-top: 1px solid #e5e5e5;
+        }
+
+        .cf-next-btn {
+            width: 100%;
+            padding: 14px 24px;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .cf-next-btn:not(:disabled):hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+
+        .cf-next-btn:disabled {
+            cursor: not-allowed;
+        }
+    `;
+    
+    document.head.appendChild(style);
+}
+
+// Auto-inject styles when imported
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', injectStyles);
+    } else {
+        injectStyles();
+    }
+}
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+module.exports = {
+    init,
+    getState,
+    reset,
+    goToStep
+};