lisichatbot 1.1.4 → 1.1.6

package/package.json

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

package/src/index.js

@@ -78,6 +78,12 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
 
     // Clone the existing wrapper
     const clone = existingWrapper.cloneNode(true);
+    
+    // Immediately hide any edit icons in the clone (regardless of template state)
+    const allEditIcons = clone.querySelectorAll('[data-chat-element="bot-edit-icon"]');
+    allEditIcons.forEach(icon => {
+        icon.style.setProperty('display', 'none', 'important');
+    });
 
     // Add step number if provided
     if (stepNumber !== null) {
@@ -94,10 +100,15 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
 
     // Handle edit icon for bot messages
     if (type === 'bot') {
+        console.log(`\n🔍 Processing bot message - Step ${stepNumber || 'N/A'}, hasInput: ${hasInput}`);
+        
         const editIcon = clone.querySelector('[data-chat-element="bot-edit-icon"]');
         if (editIcon) {
-            // Always hide first
-            editIcon.style.display = 'none';
+            console.log('  ✓ Edit icon element found');
+            
+            // ALWAYS hide first with !important to override any CSS
+            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) {
@@ -106,14 +117,21 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
                     e.stopPropagation();
                     editStep(stepNumber);
                 };
-                editIcon.style.display = 'inline';
-                console.log(`✏️ Edit icon shown for step ${stepNumber} (has input)`);
+                editIcon.style.setProperty('display', 'inline', 'important');
+                console.log(`  ✏️ Edit icon SHOWN (step ${stepNumber} has input)`);
             } else {
-                console.log(`⚪ Edit icon hidden for step ${stepNumber} (no input)`);
+                console.log(`  ⚪ Edit icon HIDDEN (step ${stepNumber || 'N/A'} has no input)`);
             }
         } else {
-            console.warn('⚠️ Edit icon element not found in bot-message-wrapper');
+            console.warn('  ⚠️ Edit icon element not found in bot-message-wrapper!');
+            console.warn('  → Make sure you have: <span data-chat-element="bot-edit-icon">✏️</span>');
         }
+        
+        // Ensure wrapper has correct flex properties for spacing
+        clone.style.setProperty('display', 'inline-flex', 'important');
+        clone.style.setProperty('align-items', 'center', 'important');
+        clone.style.setProperty('gap', '8px', 'important');
+        console.log('  ✓ Wrapper flex properties set (gap: 8px)');
     }
 
     // Make clone visible
@@ -121,6 +139,30 @@ function addMessage(content, type = 'bot', hasInput = false, stepNumber = null)
 
     // Append to messages container
     elements.messages.appendChild(clone);
+    
+    // IMPORTANT: Set edit icon display AFTER appending to DOM
+    // This ensures our styles override any CSS rules
+    if (type === 'bot') {
+        const editIconAfterAppend = clone.querySelector('[data-chat-element="bot-edit-icon"]');
+        if (editIconAfterAppend) {
+            // Force hide with !important AFTER append
+            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');
+                
+                // Debug: Check spacing
+                setTimeout(() => {
+                    const computedMargin = window.getComputedStyle(editIconAfterAppend).marginLeft;
+                    const computedGap = window.getComputedStyle(clone).gap;
+                    console.log(`  📏 Spacing check - Margin: ${computedMargin}, Gap: ${computedGap}`);
+                }, 100);
+            }
+        }
+    }
+    
     scrollToBottom();
 }
 
@@ -777,6 +819,7 @@ function injectStyles() {
         /* Bot edit icon styling */
         [data-chat-element="bot-edit-icon"] {
             display: none;
+            margin-left: 8px !important;
             cursor: pointer;
             opacity: 0.6;
             transition: opacity 0.2s ease;