lisichatbot 1.1.2 → 1.1.4

package/package.json

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

package/src/index.js

@@ -64,7 +64,7 @@ function disableNextButton() {
 // MESSAGE FUNCTIONS
 // =============================================================================
 
-function addMessage(content, type = 'bot', isEditable = false, stepNumber = null) {
+function addMessage(content, type = 'bot', hasInput = false, stepNumber = null) {
     if (!elements.messages) return;
 
     // Find the wrapper element directly by data-chat-element
@@ -92,16 +92,33 @@ function addMessage(content, type = 'bot', isEditable = false, stepNumber = null
         console.error(`Element with data-chat-element="${type}-message-text" not found in wrapper`);
     }
 
-    // Handle edit button for user messages
-    if (isEditable && type === 'user' && stepNumber !== null) {
-        const editButton = clone.querySelector('[data-chat-element="edit-button"]');
-        if (editButton) {
-            editButton.setAttribute('data-chat-step', stepNumber);
-            editButton.onclick = () => editStep(stepNumber);
-            editButton.style.display = 'inline-block';
+    // Handle edit icon for bot messages
+    if (type === 'bot') {
+        const editIcon = clone.querySelector('[data-chat-element="bot-edit-icon"]');
+        if (editIcon) {
+            // Always hide first
+            editIcon.style.display = 'none';
+            
+            // Only show if this step has input
+            if (hasInput && stepNumber !== null) {
+                editIcon.setAttribute('data-chat-step', stepNumber);
+                editIcon.onclick = (e) => {
+                    e.stopPropagation();
+                    editStep(stepNumber);
+                };
+                editIcon.style.display = 'inline';
+                console.log(`✏️ Edit icon shown for step ${stepNumber} (has input)`);
+            } else {
+                console.log(`⚪ Edit icon hidden for step ${stepNumber} (no input)`);
+            }
+        } else {
+            console.warn('⚠️ Edit icon element not found in bot-message-wrapper');
         }
     }
 
+    // Make clone visible
+    clone.style.display = '';
+
     // Append to messages container
     elements.messages.appendChild(clone);
     scrollToBottom();
@@ -424,9 +441,9 @@ async function handleNext() {
         }
     }
 
-    // Add user message with edit capability (only if selection was made)
+    // Add user message (only if selection was made)
     if (chatState.currentSelection) {
-        addMessage(chatState.currentSelection.name, 'user', true, chatState.step);
+        addMessage(chatState.currentSelection.name, 'user', false, chatState.step);
 
         // Save to history
         chatState.history.push({
@@ -471,8 +488,19 @@ async function showNextStep() {
         }
     }
 
-    // Add message
-    addMessage(nextStep.message);
+    // Hide previous inputs (options, text inputs, number inputs)
+    const previousInputs = elements.messages.querySelectorAll(
+        '[data-chat-element="options-wrapper"], ' +
+        '[data-chat-element="text-input"]:not([style*="display: none"]), ' +
+        '[data-chat-element="number-input"]:not([style*="display: none"])'
+    );
+    previousInputs.forEach(input => {
+        input.style.display = 'none';
+    });
+
+    // Add bot message with edit icon if has input
+    const hasInput = !!nextStep.input;
+    addMessage(nextStep.message, 'bot', hasInput, chatState.step);
 
     // Check if input is required (default false)
     const inputRequired = nextStep.inputRequired === true;
@@ -694,6 +722,8 @@ function injectStyles() {
         [data-chat-element="bot-message-wrapper"] {
             margin-bottom: 16px;
             display: inline-flex;
+            align-items: center;
+            gap: 8px;
             max-width: 70%;
             align-self: flex-start;
         }
@@ -733,6 +763,28 @@ function injectStyles() {
             flex-direction: column;
             gap: 12px;
         }
+
+        /* Text input spacing */
+        [data-chat-element="text-input"] {
+            margin-bottom: 20px;
+        }
+
+        /* Number input spacing */
+        [data-chat-element="number-input"] {
+            margin-bottom: 20px;
+        }
+
+        /* Bot edit icon styling */
+        [data-chat-element="bot-edit-icon"] {
+            display: none;
+            cursor: pointer;
+            opacity: 0.6;
+            transition: opacity 0.2s ease;
+        }
+
+        [data-chat-element="bot-edit-icon"]:hover {
+            opacity: 1;
+        }
     `;
     
     document.head.appendChild(style);