lisichatbot 2.0.0 → 2.0.2

package/package.json

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

package/src/index.js

@@ -213,16 +213,21 @@ function updateEditIcons() {
                 return;
             }
             
-            if (chatState.completed) {
+            // ✅ FIX: In edit mode, keep edit icons visible even after completion
+            if (chatState.completed && chatState.chatMode !== 'edit') {
                 editIcon.style.setProperty('display', 'none', 'important');
-                console.log(`  🏁 Step ${stepNumber}: Icon HIDDEN (flow completed)`);
+                console.log(`  🏁 Step ${stepNumber}: Icon HIDDEN (flow completed in create mode)`);
                 return;
             }
             
             // ✅ NEW: Check if edit icon should be forced to show (even without input)
             const forceShowEdit = stepData && stepData.showEditIcon === true;
             
-            if ((hasInput || forceShowEdit) && stepNumber < chatState.step && isLatest) {
+            // ✅ FIX: In edit mode, show edit icons for all completed steps (not just previous)
+            const shouldShowInEditMode = chatState.chatMode === 'edit' && chatState.completed && isLatest;
+            const shouldShowNormally = stepNumber < chatState.step && isLatest;
+            
+            if ((hasInput || forceShowEdit) && (shouldShowInEditMode || shouldShowNormally)) {
                 editIcon.onclick = (e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -284,6 +289,7 @@ function renderMultiSelectDropdown(options, field) {
     const optionTemplate = clone.querySelector('[data-chat-input-element="dropdown-option-wrapper"]');
     const tagsContainer = clone.querySelector('[data-chat-input-element="tags-container"]');
     const tagTemplate = clone.querySelector('[data-chat-input-element="tag-wrapper"]');
+    const dropdownInput = clone.querySelector('[data-chat-input-element="dropdown-input"]');  // ✅ NEW
     
     if (!dropdown || !optionsWrapper || !searchBar || !optionsContainer || !optionTemplate || !tagsContainer || !tagTemplate) {
         console.error('Multi-select dropdown: Missing required elements');
@@ -294,7 +300,8 @@ function renderMultiSelectDropdown(options, field) {
             optionsContainer: !!optionsContainer,
             optionTemplate: !!optionTemplate,
             tagsContainer: !!tagsContainer,
-            tagTemplate: !!tagTemplate
+            tagTemplate: !!tagTemplate,
+            dropdownInput: !!dropdownInput  // ✅ NEW
         });
         return;
     }
@@ -317,6 +324,17 @@ function renderMultiSelectDropdown(options, field) {
     const existingData = disablePrefill ? [] : (chatState.data[field] || []);
     const selectedValues = new Set(existingData);
     
+    // ✅ NEW: Set initial dropdown-input visibility based on pre-filled data
+    if (dropdownInput) {
+        if (existingData.length > 0) {
+            dropdownInput.style.display = 'none';
+            console.log(`  🙈 Dropdown input hidden initially (${existingData.length} pre-filled selection${existingData.length === 1 ? '' : 's'})`);
+        } else {
+            dropdownInput.style.display = '';
+            console.log(`  👁️ Dropdown input visible initially (no pre-filled selections)`);
+        }
+    }
+    
     if (disablePrefill) {
         console.log(`⏭️ Pre-fill disabled for ${field} - starting fresh`);
     } else {
@@ -538,11 +556,25 @@ function renderMultiSelectDropdown(options, field) {
                             enableNextButton();
                         }
                     }
+                    
+                    // ✅ NEW: Re-render tags to update dropdown-input visibility
+                    renderTags(field, options, tagsContainer, tagTemplate, optionsContainer);
                 };
             }
             
             tagsContainer.appendChild(tagEl);
         });
+        
+        // ✅ NEW: Show/hide dropdown-input based on tag count
+        if (dropdownInput) {
+            if (selections.length > 0) {
+                dropdownInput.style.display = 'none';
+                console.log(`  🙈 Dropdown input hidden (${selections.length} tag${selections.length === 1 ? '' : 's'} displayed)`);
+            } else {
+                dropdownInput.style.display = '';
+                console.log(`  👁️ Dropdown input visible (no tags)`);
+            }
+        }
     }
     
     // ✅ Initial tag render if pre-filled (edit mode)