feat: Implement autocomplete feature with enhanced UI and tooltip support

- Added AutoComplete class to handle input suggestions based on user input.
- Integrated TextAreaCaretHelper for accurate positioning of the dropdown.
- Enhanced dropdown styling with a new color scheme and custom scrollbar.
- Implemented dynamic loading of preview tooltips for selected items.
- Added keyboard navigation support for dropdown items.
- Included functionality to insert selected items into the input field with usage tips.
- Created a separate TextAreaCaretHelper module for managing caret position calculations.

web/comfyui/lora_stacker.js

@@ -5,7 +5,8 @@ import {
     collectActiveLorasFromChain,
     updateConnectedTriggerWords,
     chainCallback,
-    mergeLoras
+    mergeLoras,
+    setupInputWidgetWithAutocomplete
 } from "./utils.js";
 import { addLorasWidget } from "./loras_widget.js";
 
@@ -79,7 +80,8 @@ app.registerExtension({
                 const inputWidget = this.widgets[0];
                 inputWidget.options.getMaxHeight = () => 100;
                 this.inputWidget = inputWidget;
-                inputWidget.callback = (value) => {
+                // Wrap the callback with autocomplete setup
+                const originalCallback = (value) => {
                     if (isUpdating) return;
                     isUpdating = true;
                     
@@ -99,6 +101,7 @@ app.registerExtension({
                         isUpdating = false;
                     }
                 };
+                inputWidget.callback = setupInputWidgetWithAutocomplete(this, inputWidget, originalCallback);
 
                 // Register this node with the backend
                 this.registerNode = async () => {