lisichatbot 1.2.0 → 1.2.3

package/package.json

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

package/src/index.js

@@ -15,7 +15,9 @@ let chatState = {
     step: 0,
     data: {},
     history: [],
-    currentSelection: null
+    currentSelection: null,
+    returnToStep: null,  // Track where to return after editing
+    completed: false     // Track if flow is completed
 };
 
 let elements = {
@@ -88,6 +90,17 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
     // Add step number if provided
     if (stepNumber !== null) {
         clone.setAttribute('data-chat-step', stepNumber);
+        
+        // Mark all previous instances of this step as NOT latest
+        const previousInstances = elements.messages.querySelectorAll(
+            `[data-chat-element="${type}-message-wrapper"][data-chat-step="${stepNumber}"]`
+        );
+        previousInstances.forEach(prev => {
+            prev.removeAttribute('data-chat-latest');
+        });
+        
+        // Mark this as the latest instance of this step
+        clone.setAttribute('data-chat-latest', 'true');
     }
 
     // Find text element in clone and set content
@@ -110,18 +123,28 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             editIcon.style.setProperty('display', 'none', 'important');
             console.log('  ✓ Edit icon hidden (display: none !important)');
             
-            // Only show if this step has input AND it's a PREVIOUS step (not current)
-            if (hasInput && stepNumber !== null && stepNumber < chatState.step) {
+            // Check if this is the latest instance (it should be since we just marked it)
+            const isLatest = clone.hasAttribute('data-chat-latest');
+            
+            // Only show if this step has input AND it's a PREVIOUS step AND it's the latest instance
+            if (hasInput && stepNumber !== null && stepNumber < chatState.step && isLatest) {
                 editIcon.setAttribute('data-chat-step', stepNumber);
                 editIcon.onclick = (e) => {
                     e.stopPropagation();
+                    e.preventDefault();
+                    console.log(`\n🖱️ EDIT ICON CLICKED - Step ${stepNumber}`);
+                    console.log(`   Current step: ${chatState.step}`);
+                    console.log(`   Calling editStep(${stepNumber})...`);
                     editStep(stepNumber);
                 };
                 editIcon.style.setProperty('display', 'block', 'important');
                 editIcon.style.setProperty('margin-left', '8px', 'important');
-                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} is previous step with input)`);
+                editIcon.style.setProperty('cursor', 'pointer', 'important');
+                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} is latest previous step with input)`);
             } else if (hasInput && stepNumber === chatState.step) {
                 console.log(`  ⏸️ Edit icon HIDDEN (step ${stepNumber} is CURRENT step)`);
+            } else if (!isLatest && hasInput && stepNumber < chatState.step) {
+                console.log(`  📜 Edit icon HIDDEN (step ${stepNumber} is OLD instance)`);
             } else {
                 console.log(`  ⚪ Edit icon HIDDEN (step ${stepNumber || 'N/A'} has no input)`);
             }
@@ -149,8 +172,10 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
             editIconAfterAppend.style.setProperty('display', 'none', 'important');
             editIconAfterAppend.style.setProperty('margin-left', '8px', 'important');
             
-            // Only show if has input AND it's a previous step
-            if (hasInput && stepNumber !== null && stepNumber < chatState.step) {
+            const isLatest = clone.hasAttribute('data-chat-latest');
+            
+            // Only show if has input AND it's a previous step AND it's latest instance
+            if (hasInput && stepNumber !== null && stepNumber < chatState.step && isLatest) {
                 editIconAfterAppend.style.setProperty('display', 'block', 'important');
                 
                 // Debug: Check spacing
@@ -174,24 +199,46 @@ function updateEditIcons() {
     // Find all rendered bot message wrappers
     const allBotMessages = elements.messages.querySelectorAll('[data-chat-element="bot-message-wrapper"]');
     
-    console.log(`\n🔄 Updating edit icons - Current step: ${chatState.step}`);
+    console.log(`\n🔄 Updating edit icons - Current step: ${chatState.step}, Completed: ${chatState.completed}`);
     
     allBotMessages.forEach(wrapper => {
         const stepNumber = parseInt(wrapper.getAttribute('data-chat-step'));
         const editIcon = wrapper.querySelector('[data-chat-element="bot-edit-icon"]');
+        const isLatest = wrapper.hasAttribute('data-chat-latest');
         
         if (editIcon && !isNaN(stepNumber)) {
             // Check if this step has input by looking at the flow
             const stepData = flowData.flow[stepNumber];
             const hasInput = stepData && !!stepData.input;
             
-            // Show icon if: has input AND is previous step
-            if (hasInput && stepNumber < chatState.step) {
+            // Hide ALL icons if flow is completed
+            if (chatState.completed) {
+                editIcon.style.setProperty('display', 'none', 'important');
+                console.log(`  🏁 Step ${stepNumber}: Icon HIDDEN (flow completed)`);
+                return;
+            }
+            
+            // Only show icon if: has input AND is previous step AND is latest instance
+            if (hasInput && stepNumber < chatState.step && isLatest) {
+                // Set onclick handler
+                editIcon.onclick = (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    console.log(`\n🖱️ EDIT ICON CLICKED (from updateEditIcons) - Step ${stepNumber}`);
+                    console.log(`   Current step: ${chatState.step}`);
+                    console.log(`   Calling editStep(${stepNumber})...`);
+                    editStep(stepNumber);
+                };
+                editIcon.setAttribute('data-chat-step', stepNumber);
                 editIcon.style.setProperty('display', 'block', 'important');
-                console.log(`  ✏️ Step ${stepNumber}: Icon SHOWN (previous step)`);
+                editIcon.style.setProperty('cursor', 'pointer', 'important');
+                editIcon.style.setProperty('margin-left', '8px', 'important');
+                console.log(`  ✏️ Step ${stepNumber}: Icon SHOWN (latest previous step)`);
             } else {
                 editIcon.style.setProperty('display', 'none', 'important');
-                if (stepNumber === chatState.step) {
+                if (!isLatest && hasInput && stepNumber < chatState.step) {
+                    console.log(`  📜 Step ${stepNumber}: Icon HIDDEN (old instance)`);
+                } else if (stepNumber === chatState.step) {
                     console.log(`  ⏸️ Step ${stepNumber}: Icon HIDDEN (current step)`);
                 } else if (!hasInput) {
                     console.log(`  ⚪ Step ${stepNumber}: Icon HIDDEN (no input)`);
@@ -535,7 +582,29 @@ async function handleNext() {
     chatState.currentSelection = null;
     disableNextButton();
 
-    // Move to next step
+    // Check if we should return to a saved step (after editing)
+    if (chatState.returnToStep !== null) {
+        const targetStep = chatState.returnToStep;
+        console.log(`\n🔙 Returning to saved step ${targetStep} (edited step complete)`);
+        chatState.returnToStep = null;  // Clear the return step
+        
+        // Check if target step is valid
+        if (targetStep >= 0 && targetStep < flowData.flow.length) {
+            chatState.step = targetStep;
+            console.log(`   ✅ Jumped to step ${targetStep}`);
+            
+            // Update edit icons for the new position
+            updateEditIcons();
+            
+            // Show the step we returned to
+            await showNextStep();
+            return;
+        } else {
+            console.log(`   ⚠️ Invalid return step ${targetStep}, continuing normally`);
+        }
+    }
+
+    // Normal flow: Move to next step
     chatState.step++;
     
     // Update edit icons for all previous steps
@@ -635,6 +704,13 @@ async function showNextStep() {
 function handleCompletion() {
     console.log('✅ Flow completed. Data:', chatState.data);
 
+    // Mark flow as completed
+    chatState.completed = true;
+    console.log('   🏁 Flow marked as completed');
+    
+    // Hide all edit icons
+    updateEditIcons();
+
     // Hide Next button
     if (elements.nextBtn) {
         elements.nextBtn.style.display = 'none';
@@ -762,39 +838,61 @@ function reset() {
 }
 
 function goToStep(stepNumber) {
+    console.log(`\n🎯 goToStep() called with stepNumber: ${stepNumber}`);
+    console.log(`   Current step before: ${chatState.step}`);
+    
     if (stepNumber < 0 || stepNumber >= flowData.flow.length) {
         console.error('Invalid step number:', stepNumber);
         return;
     }
 
+    console.log(`   Setting chatState.step to ${stepNumber}`);
     chatState.step = stepNumber;
     chatState.currentSelection = null;
     
-    if (elements.messages) {
-        elements.messages.innerHTML = '';
-    }
+    // DON'T clear messages - keep chat history visible!
+    // User can see their previous answers
+    console.log(`   Keeping messages visible (not clearing)...`);
 
+    console.log(`   Disabling next button and calling showNextStep()...`);
     disableNextButton();
     showNextStep();
 }
 
 function editStep(stepNumber) {
+    console.log(`\n📝 editStep() called with stepNumber: ${stepNumber}`);
+    console.log(`   Current step before edit: ${chatState.step}`);
+    
     if (stepNumber < 0 || stepNumber >= flowData.flow.length) {
         console.error('Invalid step number:', stepNumber);
         return;
     }
 
+    // Save where we are now so we can return after editing
+    chatState.returnToStep = chatState.step;
+    console.log(`   💾 Saved return step: ${chatState.returnToStep}`);
+    
+    // Reset completed flag since we're editing
+    if (chatState.completed) {
+        chatState.completed = false;
+        console.log(`   🔓 Flow unmarked as completed (editing)`);
+    }
+
+    console.log(`   Clearing history from step ${stepNumber} forward...`);
     // Clear history from this step forward
     chatState.history = chatState.history.filter(h => h.step < stepNumber);
     
+    console.log(`   Resetting data for step ${stepNumber} and beyond...`);
     // Reset data for this field and beyond
     const stepsToReset = flowData.flow.slice(stepNumber);
     stepsToReset.forEach(step => {
         if (step.input && step.input.field) {
+            console.log(`     Deleting field: ${step.input.field}`);
             delete chatState.data[step.input.field];
         }
     });
 
+    console.log(`   Calling goToStep(${stepNumber})...`);
     // Go to that step
     goToStep(stepNumber);
 }