feat(autocomplete): support Tab accept and configurable suffix behavior (#863)

web/comfyui/autocomplete.js

@@ -1,7 +1,11 @@
 import { api } from "../../scripts/api.js";
 import { app } from "../../scripts/app.js";
 import { TextAreaCaretHelper } from "./textarea_caret_helper.js";
-import { getPromptTagAutocompletePreference, getTagSpaceReplacementPreference } from "./settings.js";
+import {
+    getAutocompleteAppendCommaPreference,
+    getPromptTagAutocompletePreference,
+    getTagSpaceReplacementPreference,
+} from "./settings.js";
 import { showToast } from "./utils.js";
 
 // Command definitions for category filtering
@@ -108,6 +112,24 @@ function parseSearchTokens(term = '') {
     return { include, exclude };
 }
 
+function formatAutocompleteInsertion(text = '') {
+    const trimmed = typeof text === 'string' ? text.trim() : '';
+    if (!trimmed) {
+        return '';
+    }
+
+    return getAutocompleteAppendCommaPreference() ? `${trimmed},` : `${trimmed} `;
+}
+
+const AUTOCOMPLETE_METADATA_VERSION = 1;
+
+function createAutocompleteMetadataBase(textWidgetName = 'text') {
+    return {
+        version: AUTOCOMPLETE_METADATA_VERSION,
+        textWidgetName,
+    };
+}
+
 function createDefaultBehavior(modelType) {
     return {
         enablePreview: false,
@@ -116,7 +138,7 @@ function createDefaultBehavior(modelType) {
             if (!trimmed) {
                 return '';
             }
-            return `${trimmed}, `;
+            return formatAutocompleteInsertion(trimmed);
         },
     };
 }
@@ -185,9 +207,9 @@ const MODEL_BEHAVIORS = {
             }
 
             if (clipStrength !== null) {
-                return `<lora:${fileName}:${strength}:${clipStrength}>, `;
+                return formatAutocompleteInsertion(`<lora:${fileName}:${strength}:${clipStrength}>`);
             }
-            return `<lora:${fileName}:${strength}>, `;
+            return formatAutocompleteInsertion(`<lora:${fileName}:${strength}>`);
         }
     },
     embeddings: {
@@ -202,13 +224,13 @@ const MODEL_BEHAVIORS = {
             const { directories, fileName } = splitRelativePath(relativePath);
             const trimmedName = removeGeneralExtension(fileName);
             const folder = directories.length ? `${directories.join('/')}/` : '';
-            return `embedding:${folder}${trimmedName}, `;
+            return formatAutocompleteInsertion(`embedding:${folder}${trimmedName}`);
         },
     },
     custom_words: {
         enablePreview: false,
         async getInsertText(_instance, relativePath) {
-            return `${relativePath}, `;
+            return formatAutocompleteInsertion(relativePath);
         },
     },
     prompt: {
@@ -245,7 +267,7 @@ const MODEL_BEHAVIORS = {
                 const { directories, fileName } = splitRelativePath(relativePath);
                 const trimmedName = removeGeneralExtension(fileName);
                 const folder = directories.length ? `${directories.join('/')}/` : '';
-                return `embedding:${folder}${trimmedName}, `;
+                return formatAutocompleteInsertion(`embedding:${folder}${trimmedName}`);
             } else {
                 let tagText = relativePath;
 
@@ -253,7 +275,7 @@ const MODEL_BEHAVIORS = {
                     tagText = tagText.replace(/_/g, ' ');
                 }
 
-                return `${tagText}, `;
+                return formatAutocompleteInsertion(tagText);
             }
         },
     },
@@ -620,18 +642,130 @@ class AutoComplete {
     }
     
     getSearchTerm(value) {
-        // Use helper to get text before cursor for more accurate positioning
-        const beforeCursor = this.helper.getBeforeCursor();
-        if (!beforeCursor) {
-            return '';
+        return this.getActiveSearchRange(value).text;
+    }
+
+    getActiveSearchRange(value = null) {
+        const currentValue = typeof value === 'string' ? value : this.inputElement.value;
+        const caretPos = this.getCaretPosition();
+        const beforeCursor = this.helper.getBeforeCursor() ?? currentValue.substring(0, caretPos);
+        let start = this._getHardBoundaryStart(beforeCursor);
+
+        if (!getAutocompleteAppendCommaPreference()) {
+            const persistedBoundaryEnd = this._getPersistedBoundaryEnd(currentValue, caretPos);
+            if (persistedBoundaryEnd !== null && persistedBoundaryEnd > start) {
+                start = persistedBoundaryEnd;
+            }
         }
 
-        // Split on comma and '>' delimiters only (do not split on spaces)
-        const segments = beforeCursor.split(/[,\>]+/);
+        const rawText = beforeCursor.substring(start);
+        const text = rawText.trim();
+        const leadingWhitespaceLength = rawText.length - rawText.trimStart().length;
+        const trimmedStart = start + leadingWhitespaceLength;
 
-        // Return the last non-empty segment as search term
-        const lastSegment = segments[segments.length - 1] || '';
-        return lastSegment.trim();
+        return {
+            start,
+            trimmedStart,
+            end: caretPos,
+            beforeCursor,
+            rawText,
+            text,
+        };
+    }
+
+    _getHardBoundaryStart(beforeCursor = '') {
+        const lastComma = beforeCursor.lastIndexOf(',');
+        const lastAngle = beforeCursor.lastIndexOf('>');
+        return Math.max(lastComma, lastAngle) + 1;
+    }
+
+    _getMetadataWidget() {
+        return this.inputElement?._autocompleteMetadataWidget
+            ?? this.inputElement?._autocompleteHostWidget?.metadataWidget
+            ?? null;
+    }
+
+    _getMetadataBase() {
+        return createAutocompleteMetadataBase(this.inputElement?._autocompleteTextWidgetName ?? 'text');
+    }
+
+    _getAutocompleteMetadata() {
+        const metadataWidget = this._getMetadataWidget();
+        const value = metadataWidget?.value;
+
+        if (!value || typeof value !== 'object' || Array.isArray(value)) {
+            return this._getMetadataBase();
+        }
+
+        return {
+            ...this._getMetadataBase(),
+            ...value,
+        };
+    }
+
+    _setAutocompleteMetadata(metadata = {}) {
+        const metadataWidget = this._getMetadataWidget();
+        if (!metadataWidget) {
+            return;
+        }
+
+        metadataWidget.value = {
+            ...this._getMetadataBase(),
+            ...metadata,
+        };
+    }
+
+    _clearLastAcceptedBoundary() {
+        const metadataWidget = this._getMetadataWidget();
+        if (!metadataWidget) {
+            return;
+        }
+
+        const metadata = this._getAutocompleteMetadata();
+        delete metadata.lastAccepted;
+        metadataWidget.value = metadata;
+    }
+
+    _storeLastAcceptedBoundary(boundary) {
+        this._setAutocompleteMetadata({ lastAccepted: boundary });
+    }
+
+    _getPersistedBoundaryEnd(currentValue, caretPos) {
+        const metadata = this._getAutocompleteMetadata();
+        const boundary = metadata?.lastAccepted;
+
+        if (!boundary || typeof boundary !== 'object') {
+            return null;
+        }
+
+        const { start, end, insertedText, textSnapshot } = boundary;
+
+        if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start) {
+            this._clearLastAcceptedBoundary();
+            return null;
+        }
+
+        if (end > currentValue.length || end > caretPos) {
+            this._clearLastAcceptedBoundary();
+            return null;
+        }
+
+        if (typeof insertedText !== 'string' || insertedText.length === 0) {
+            this._clearLastAcceptedBoundary();
+            return null;
+        }
+
+        if (currentValue.slice(start, end) !== insertedText) {
+            this._clearLastAcceptedBoundary();
+            return null;
+        }
+
+        if (typeof textSnapshot !== 'string' || currentValue.slice(0, end) !== textSnapshot) {
+            this._clearLastAcceptedBoundary();
+            return null;
+        }
+
+        return end;
     }
 
     /**
@@ -1017,25 +1151,12 @@ class AutoComplete {
      */
     _insertCommand(command) {
         const currentValue = this.inputElement.value;
-        const caretPos = this.getCaretPosition();
-
-        // Find the start of the current command being typed
-        const beforeCursor = currentValue.substring(0, caretPos);
-        const segments = beforeCursor.split(/[,\>]+/);
-        const lastSegment = segments[segments.length - 1] || '';
-        let commandStartPos = caretPos - lastSegment.length;
-
-        // Preserve leading space if the last segment starts with a space
-        // This handles cases like "1girl, /character" where we want to keep the space
-        // after the comma instead of replacing it
-        if (lastSegment.length > 0 && lastSegment[0] === ' ') {
-            // Move start position past the leading space to preserve it
-            commandStartPos = commandStartPos + 1;
-        }
+        const activeRange = this.getActiveSearchRange(currentValue);
+        const commandStartPos = activeRange.trimmedStart;
 
         // Insert command with trailing space
         const insertText = command + ' ';
-        const newValue = currentValue.substring(0, commandStartPos) + insertText + currentValue.substring(caretPos);
+        const newValue = currentValue.substring(0, commandStartPos) + insertText + currentValue.substring(activeRange.end);
         const newCaretPos = commandStartPos + insertText.length;
 
         this.inputElement.value = newValue;
@@ -1866,6 +1987,7 @@ class AutoComplete {
                 break;
                 
             case 'Enter':
+            case 'Tab':
                 e.preventDefault();
                 if (this.selectedIndex >= 0 && this.selectedIndex < this.items.length) {
                     if (this.showingCommands) {
@@ -1897,11 +2019,10 @@ class AutoComplete {
         }
 
         const currentValue = this.inputElement.value;
-        const caretPos = this.getCaretPosition();
-
-        // Use getSearchTerm to get the current search term before cursor
-        const beforeCursor = currentValue.substring(0, caretPos);
-        const fullSearchTerm = this.getSearchTerm(beforeCursor);
+        const activeRange = this.getActiveSearchRange(currentValue);
+        const caretPos = activeRange.end;
+        const fullSearchTerm = activeRange.text;
+        let replaceStartPos = activeRange.trimmedStart;
 
         // For regular tag autocomplete (no command), only replace the last space-separated token
         // This allows "hello 1gi" + selecting "1girl" to become "hello 1girl, "
@@ -1934,18 +2055,26 @@ class AutoComplete {
                 underscoreVersion === selectedTagLower
             )) {
                 searchTerm = fullSearchTerm;
+                replaceStartPos = activeRange.trimmedStart;
             } else {
                 searchTerm = this._getLastSpaceToken(fullSearchTerm);
+                replaceStartPos = searchTerm === fullSearchTerm
+                    ? activeRange.trimmedStart
+                    : caretPos - searchTerm.length;
             }
         }
 
-        const searchStartPos = caretPos - searchTerm.length;
-
         // Only replace the search term, not everything after the last comma
-        const newValue = currentValue.substring(0, searchStartPos) + insertText + currentValue.substring(caretPos);
-        const newCaretPos = searchStartPos + insertText.length;
+        const newValue = currentValue.substring(0, replaceStartPos) + insertText + currentValue.substring(caretPos);
+        const newCaretPos = replaceStartPos + insertText.length;
 
         this.inputElement.value = newValue;
+        this._storeLastAcceptedBoundary({
+            start: replaceStartPos,
+            end: newCaretPos,
+            insertedText: insertText,
+            textSnapshot: newValue.substring(0, newCaretPos),
+        });
 
         // Trigger input event to notify about the change
         const event = new Event('input', { bubbles: true });
@@ -1974,7 +2103,7 @@ class AutoComplete {
         if (!trimmed) {
             return '';
         }
-        return `${trimmed}, `;
+        return formatAutocompleteInsertion(trimmed);
     }
 
     /**
@@ -2053,12 +2182,9 @@ class AutoComplete {
      */
     _clearCurrentToken() {
         const currentValue = this.inputElement.value;
-        const caretPos = this.inputElement.selectionStart;
-
-        // Find the command text before cursor
-        const beforeCursor = currentValue.substring(0, caretPos);
-        const segments = beforeCursor.split(/[,\>]+/);
-        const lastSegment = segments[segments.length - 1] || '';
+        const activeRange = this.getActiveSearchRange(currentValue);
+        const caretPos = activeRange.end;
+        const lastSegment = activeRange.rawText;
         
         // Find the command start position, preserving leading spaces
         // lastSegment includes leading spaces (e.g., " /ac"), find where command actually starts
@@ -2067,7 +2193,7 @@ class AutoComplete {
             // commandMatch[1] is leading spaces, commandMatch[2] is the command
             const leadingSpaces = commandMatch[1].length;
             // Keep the spaces by starting after them
-            const commandStartPos = caretPos - lastSegment.length + leadingSpaces;
+            const commandStartPos = activeRange.start + leadingSpaces;
             
             // Skip trailing spaces when deleting
             let endPos = caretPos;
@@ -2089,7 +2215,7 @@ class AutoComplete {
             this.inputElement.setSelectionRange(newCaretPos, newCaretPos);
         } else {
             // Fallback: delete the whole last segment (original behavior)
-            const commandStartPos = caretPos - lastSegment.length;
+            const commandStartPos = activeRange.start;
             
             let endPos = caretPos;
             while (endPos < currentValue.length && currentValue[endPos] === ' ') {

web/comfyui/settings.js

@@ -13,6 +13,9 @@ const AUTO_PATH_CORRECTION_DEFAULT = true;
 const PROMPT_TAG_AUTOCOMPLETE_SETTING_ID = "loramanager.prompt_tag_autocomplete";
 const PROMPT_TAG_AUTOCOMPLETE_DEFAULT = true;
 
+const AUTOCOMPLETE_APPEND_COMMA_SETTING_ID = "loramanager.autocomplete_append_comma";
+const AUTOCOMPLETE_APPEND_COMMA_DEFAULT = true;
+
 const TAG_SPACE_REPLACEMENT_SETTING_ID = "loramanager.tag_space_replacement";
 const TAG_SPACE_REPLACEMENT_DEFAULT = false;
 
@@ -157,6 +160,32 @@ const getPromptTagAutocompletePreference = (() => {
     };
 })();
 
+const getAutocompleteAppendCommaPreference = (() => {
+    let settingsUnavailableLogged = false;
+
+    return () => {
+        const settingManager = app?.extensionManager?.setting;
+        if (!settingManager || typeof settingManager.get !== "function") {
+            if (!settingsUnavailableLogged) {
+                console.warn("LoRA Manager: settings API unavailable, using default append comma setting.");
+                settingsUnavailableLogged = true;
+            }
+            return AUTOCOMPLETE_APPEND_COMMA_DEFAULT;
+        }
+
+        try {
+            const value = settingManager.get(AUTOCOMPLETE_APPEND_COMMA_SETTING_ID);
+            return value ?? AUTOCOMPLETE_APPEND_COMMA_DEFAULT;
+        } catch (error) {
+            if (!settingsUnavailableLogged) {
+                console.warn("LoRA Manager: unable to read append comma setting, using default.", error);
+                settingsUnavailableLogged = true;
+            }
+            return AUTOCOMPLETE_APPEND_COMMA_DEFAULT;
+        }
+    };
+})();
+
 const getTagSpaceReplacementPreference = (() => {
     let settingsUnavailableLogged = false;
 
@@ -297,6 +326,14 @@ app.registerExtension({
             tooltip: "When enabled, typing will trigger tag autocomplete suggestions. Commands (e.g., /character, /artist) always work regardless of this setting.",
             category: ["LoRA Manager", "Autocomplete", "Prompt"],
         },
+        {
+            id: AUTOCOMPLETE_APPEND_COMMA_SETTING_ID,
+            name: "Append comma after autocomplete",
+            type: "boolean",
+            defaultValue: AUTOCOMPLETE_APPEND_COMMA_DEFAULT,
+            tooltip: "When enabled, accepted autocomplete suggestions append ', ' to the inserted text.",
+            category: ["LoRA Manager", "Autocomplete", "Behavior"],
+        },
         {
             id: TAG_SPACE_REPLACEMENT_SETTING_ID,
             name: "Replace underscores with spaces in tags",
@@ -413,6 +450,7 @@ app.registerExtension({
 export {
     getWheelSensitivity,
     getAutoPathCorrectionPreference,
+    getAutocompleteAppendCommaPreference,
     getPromptTagAutocompletePreference,
     getTagSpaceReplacementPreference,
     getUsageStatisticsPreference,

web/comfyui/vue-widgets/lora-manager-widgets.js

@@ -2118,14 +2118,14 @@ to { transform: rotate(360deg);
   padding: 20px 0;
 }
 
-.autocomplete-text-widget[data-v-b3b00fdd] {
+.autocomplete-text-widget[data-v-918e2bc5] {
   background: transparent;
   height: 100%;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 }
-.input-wrapper[data-v-b3b00fdd] {
+.input-wrapper[data-v-918e2bc5] {
   position: relative;
   flex: 1;
   display: flex;
@@ -2133,7 +2133,7 @@ to { transform: rotate(360deg);
 }
 
 /* Canvas mode styles (default) - matches built-in comfy-multiline-input */
-.text-input[data-v-b3b00fdd] {
+.text-input[data-v-918e2bc5] {
   flex: 1;
   width: 100%;
   background-color: var(--comfy-input-bg, #222);
@@ -2150,7 +2150,7 @@ to { transform: rotate(360deg);
 }
 
 /* Vue DOM mode styles - matches built-in p-textarea in Vue DOM mode */
-.text-input.vue-dom-mode[data-v-b3b00fdd] {
+.text-input.vue-dom-mode[data-v-918e2bc5] {
   background-color: var(--color-charcoal-400, #313235);
   color: #fff;
   padding: 8px 12px 30px 12px;  /* Reserve bottom space for clear button */
@@ -2159,12 +2159,12 @@ to { transform: rotate(360deg);
   font-size: 12px;
   font-family: inherit;
 }
-.text-input[data-v-b3b00fdd]:focus {
+.text-input[data-v-918e2bc5]:focus {
   outline: none;
 }
 
 /* Clear button styles */
-.clear-button[data-v-b3b00fdd] {
+.clear-button[data-v-918e2bc5] {
   position: absolute;
   right: 6px;
   bottom: 6px;  /* Changed from top to bottom */
@@ -2187,31 +2187,31 @@ to { transform: rotate(360deg);
 }
 
 /* Show clear button when hovering over input wrapper */
-.input-wrapper:hover .clear-button[data-v-b3b00fdd] {
+.input-wrapper:hover .clear-button[data-v-918e2bc5] {
   opacity: 0.7;
   pointer-events: auto;
 }
-.clear-button[data-v-b3b00fdd]:hover {
+.clear-button[data-v-918e2bc5]:hover {
   opacity: 1;
   background: rgba(255, 100, 100, 0.8);
 }
-.clear-button svg[data-v-b3b00fdd] {
+.clear-button svg[data-v-918e2bc5] {
   width: 12px;
   height: 12px;
 }
 
 /* Vue DOM mode adjustments for clear button */
-.text-input.vue-dom-mode ~ .clear-button[data-v-b3b00fdd] {
+.text-input.vue-dom-mode ~ .clear-button[data-v-918e2bc5] {
   right: 8px;
   bottom: 10px;  /* Changed from top to bottom, adjusted for Vue DOM padding */
   width: 20px;
   height: 20px;
   background: rgba(107, 114, 128, 0.6);
 }
-.text-input.vue-dom-mode ~ .clear-button[data-v-b3b00fdd]:hover {
+.text-input.vue-dom-mode ~ .clear-button[data-v-918e2bc5]:hover {
   background: oklch(62% 0.18 25);
 }
-.text-input.vue-dom-mode ~ .clear-button svg[data-v-b3b00fdd] {
+.text-input.vue-dom-mode ~ .clear-button svg[data-v-918e2bc5] {
   width: 14px;
   height: 14px;
 }`));
@@ -14679,6 +14679,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (textareaRef.value) {
         props.widget.inputEl = textareaRef.value;
+        textareaRef.value._autocompleteHostWidget = props.widget;
+        textareaRef.value._autocompleteMetadataWidget = props.widget.metadataWidget;
+        textareaRef.value._autocompleteTextWidgetName = props.widget.name ?? "text";
         const container = textareaRef.value.closest('[id^="autocomplete-text-widget-"]');
         if (container && container.__widgetInputEl) {
           container.__widgetInputEl.inputEl = textareaRef.value;
@@ -14697,6 +14700,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         props.widget.inputEl = void 0;
       }
       if (textareaRef.value) {
+        delete textareaRef.value._autocompleteHostWidget;
+        delete textareaRef.value._autocompleteMetadataWidget;
+        delete textareaRef.value._autocompleteTextWidgetName;
         textareaRef.value.removeEventListener("lora-manager:autocomplete-value-changed", onExternalValueChange);
       }
       if (props.widget) {
@@ -14748,7 +14754,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AutocompleteTextWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b3b00fdd"]]);
+const AutocompleteTextWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-918e2bc5"]]);
 const LORA_PROVIDER_NODE_TYPES$1 = [
   "Lora Stacker (LoraManager)",
   "Lora Randomizer (LoraManager)",
@@ -15325,6 +15331,7 @@ if ((_a = app$1.ui) == null ? void 0 : _a.settings) {
 }
 function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputOptions = {}) {
   var _a2, _b, _c;
+  const metadataWidgetName = `__lm_autocomplete_meta_${widgetName}`;
   const container = document.createElement("div");
   container.id = `autocomplete-text-widget-${node.id}-${widgetName}`;
   container.style.width = "100%";
@@ -15335,6 +15342,14 @@ function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputO
   forwardMiddleMouseToCanvas(container);
   const widgetElementRef = { inputEl: void 0 };
   container.__widgetInputEl = widgetElementRef;
+  const metadataWidget = node.addWidget("text", metadataWidgetName, {
+    version: 1,
+    textWidgetName: widgetName
+  });
+  metadataWidget.type = "LORA_MANAGER_AUTOCOMPLETE_METADATA";
+  metadataWidget.hidden = true;
+  metadataWidget.computeSize = () => [0, -4];
+  metadataWidget.serializeValue = () => metadataWidget.value;
   const widget = node.addDOMWidget(
     widgetName,
     `AUTOCOMPLETE_TEXT_${modelType.toUpperCase()}`,
@@ -15369,6 +15384,7 @@ function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputO
       }
     }
   );
+  widget.metadataWidget = metadataWidget;
   const spellcheck = ((_c = (_b = (_a2 = app$1.ui) == null ? void 0 : _a2.settings) == null ? void 0 : _b.getSettingValue) == null ? void 0 : _c.call(_b, "Comfy.TextareaWidget.Spellcheck")) ?? false;
   const vueApp = createApp(AutocompleteTextWidget, {
     widget,