lisichatbot 1.1.8 → 1.2.0

package/package.json

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

package/src/index.js

@@ -110,15 +110,18 @@ 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
-            if (hasInput && stepNumber !== null) {
+            // Only show if this step has input AND it's a PREVIOUS step (not current)
+            if (hasInput && stepNumber !== null && stepNumber < chatState.step) {
                 editIcon.setAttribute('data-chat-step', stepNumber);
                 editIcon.onclick = (e) => {
                     e.stopPropagation();
                     editStep(stepNumber);
                 };
                 editIcon.style.setProperty('display', 'block', 'important');
-                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} has input)`);
+                editIcon.style.setProperty('margin-left', '8px', 'important');
+                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} is previous step with input)`);
+            } else if (hasInput && stepNumber === chatState.step) {
+                console.log(`  ⏸️ Edit icon HIDDEN (step ${stepNumber} is CURRENT step)`);
             } else {
                 console.log(`  ⚪ Edit icon HIDDEN (step ${stepNumber || 'N/A'} has no input)`);
             }
@@ -146,15 +149,15 @@ 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
-            if (hasInput && stepNumber !== null) {
-                editIconAfterAppend.style.setProperty('display', 'inline', 'important');
+            // Only show if has input AND it's a previous step
+            if (hasInput && stepNumber !== null && stepNumber < chatState.step) {
+                editIconAfterAppend.style.setProperty('display', 'block', 'important');
                 
                 // Debug: Check spacing
                 setTimeout(() => {
                     const computedMargin = window.getComputedStyle(editIconAfterAppend).marginLeft;
-                    const computedGap = window.getComputedStyle(clone).gap;
-                    console.log(`  📏 Spacing check - Margin: ${computedMargin}, Gap: ${computedGap}`);
+                    const computedDisplay = window.getComputedStyle(editIconAfterAppend).display;
+                    console.log(`  📏 Edit icon - Display: ${computedDisplay}, Margin: ${computedMargin}`);
                 }, 100);
             }
         }
@@ -163,6 +166,41 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
     scrollToBottom();
 }
 
+// =============================================================================
+// UPDATE EDIT ICONS FOR PREVIOUS STEPS
+// =============================================================================
+
+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}`);
+    
+    allBotMessages.forEach(wrapper => {
+        const stepNumber = parseInt(wrapper.getAttribute('data-chat-step'));
+        const editIcon = wrapper.querySelector('[data-chat-element="bot-edit-icon"]');
+        
+        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) {
+                editIcon.style.setProperty('display', 'block', 'important');
+                console.log(`  ✏️ Step ${stepNumber}: Icon SHOWN (previous step)`);
+            } else {
+                editIcon.style.setProperty('display', 'none', 'important');
+                if (stepNumber === chatState.step) {
+                    console.log(`  ⏸️ Step ${stepNumber}: Icon HIDDEN (current step)`);
+                } else if (!hasInput) {
+                    console.log(`  ⚪ Step ${stepNumber}: Icon HIDDEN (no input)`);
+                }
+            }
+        }
+    });
+}
+
 // =============================================================================
 // OPTIONS RENDERING WITH CUSTOM ATTRIBUTES
 // =============================================================================
@@ -499,6 +537,9 @@ async function handleNext() {
 
     // Move to next step
     chatState.step++;
+    
+    // Update edit icons for all previous steps
+    updateEditIcons();
 
     // Check if finished
     if (chatState.step >= flowData.flow.length) {
@@ -572,6 +613,10 @@ async function showNextStep() {
         // Auto-advance for steps without input
         setTimeout(() => {
             chatState.step++;
+            
+            // Update edit icons after auto-advance
+            updateEditIcons();
+            
             if (chatState.step < flowData.flow.length) {
                 showNextStep();
             } else {
@@ -579,6 +624,12 @@ async function showNextStep() {
             }
         }, config.autoAdvanceDelay);
     }
+    
+    // Always update edit icons at the end to ensure correct state
+    // Use setTimeout to ensure it runs after any DOM updates
+    setTimeout(() => {
+        updateEditIcons();
+    }, 10);
 }
 
 function handleCompletion() {