feat(ui): improve /activefilters discoverability on loras nodes

Mirror the /noautocomplete discoverability pattern for the loras\nactive-filters search toggle:\n\n- autocomplete.js: extend the slash-command-list footer and the\n one-time first-run hint to loras nodes, advertising\n /activefilters and /noactivefilters\n- lora_loader.js: add an 'Active Filters Search: ON/OFF' entry to the\n right-click menu of all loras-autocomplete node classes\n- settings.js: broadcast a 'lora-manager:setting-toggled' window event\n on every setLoraManagerSettingValue write\n- AutocompleteTextWidget.vue: add a persistent filter indicator chip\n (loras mode only) that reflects and toggles the setting and stays in\n sync via the setting-toggled event\n- tests: footer/hint/event coverage, context-menu tests for all four\n node classes, widget indicator tests; rebuild vue-widgets bundle
2026-09-20 18:51:26 -03:00 · 2026-09-03 22:42:45 +08:00
parent 03569c62df
commit 6ba64ebb3c
9 changed files with 860 additions and 69 deletions
@@ -10,7 +10,7 @@

 import { nextTick } from 'vue'
 import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it, vi, afterEach } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import AutocompleteTextWidget from '@/components/AutocompleteTextWidget.vue'

 function createMockWidget() {
@@ -134,3 +134,109 @@ describe('AutocompleteTextWidget clear button', () => {
    expect(widget.callback).toHaveBeenLastCalledWith('hello world')
  })
 })
+
+/**
+ * Tests for the active-filters search indicator (loras mode only).
+ *
+ * The small filter chip in the textarea corner mirrors the
+ * loramanager.lora_active_filters_autocomplete setting: it reflects the
+ * current state, can toggle it, and stays in sync with slash-command /
+ * context-menu toggles via the lora-manager:setting-toggled window event.
+ */
+
+const settingsMocks = vi.hoisted(() => ({
+  getPreference: vi.fn(),
+  setValue: vi.fn(),
+}))
+
+vi.mock('../../../web/comfyui/settings.js', () => ({
+  LORA_ACTIVE_FILTERS_AUTOCOMPLETE_SETTING_ID:
+    'loramanager.lora_active_filters_autocomplete',
+  SETTING_TOGGLED_EVENT_NAME: 'lora-manager:setting-toggled',
+  getLoraActiveFiltersAutocompletePreference: settingsMocks.getPreference,
+  setLoraManagerSettingValue: settingsMocks.setValue,
+}))
+
+const getActiveFiltersPreferenceMock = settingsMocks.getPreference
+const setSettingValueMock = settingsMocks.setValue
+
+function mountLorasWidget() {
+  const widget = createMockWidget()
+  const node = { id: 1 }
+  const wrapper = shallowMount(AutocompleteTextWidget, {
+    props: { widget, node, modelType: 'loras' },
+    attachTo: document.body,
+  })
+  return { wrapper, widget }
+}
+
+describe('AutocompleteTextWidget active-filters indicator', () => {
+  beforeEach(() => {
+    getActiveFiltersPreferenceMock.mockReset()
+    getActiveFiltersPreferenceMock.mockReturnValue(false)
+    setSettingValueMock.mockReset()
+    setSettingValueMock.mockResolvedValue(true)
+  })
+
+  it('renders only in loras mode', () => {
+    const loras = mountLorasWidget()
+    expect(loras.wrapper.find('.active-filters-toggle').exists()).toBe(true)
+
+    const widget = createMockWidget()
+    const prompt = shallowMount(AutocompleteTextWidget, {
+      props: { widget, node: { id: 2 }, modelType: 'prompt' },
+      attachTo: document.body,
+    })
+    expect(prompt.find('.active-filters-toggle').exists()).toBe(false)
+  })
+
+  it('reflects the current setting state', async () => {
+    const { wrapper } = mountLorasWidget()
+    await nextTick()
+    expect(wrapper.find('.active-filters-toggle').classes()).not.toContain('is-active')
+
+    getActiveFiltersPreferenceMock.mockReturnValue(true)
+    const wrapper2 = mountLorasWidget().wrapper
+    await nextTick()
+    expect(wrapper2.find('.active-filters-toggle').classes()).toContain('is-active')
+  })
+
+  it('toggles the setting when clicked', async () => {
+    const { wrapper } = mountLorasWidget()
+    await nextTick()
+
+    await wrapper.find('.active-filters-toggle').trigger('click')
+    expect(setSettingValueMock).toHaveBeenCalledWith(
+      'loramanager.lora_active_filters_autocomplete',
+      true
+    )
+    await nextTick()
+    expect(wrapper.find('.active-filters-toggle').classes()).toContain('is-active')
+  })
+
+  it('stays in sync with setting-toggled window events', async () => {
+    const { wrapper } = mountLorasWidget()
+    await nextTick()
+    expect(wrapper.find('.active-filters-toggle').classes()).not.toContain('is-active')
+
+    window.dispatchEvent(
+      new CustomEvent('lora-manager:setting-toggled', {
+        detail: {
+          settingId: 'loramanager.lora_active_filters_autocomplete',
+          value: true,
+        },
+      })
+    )
+    await nextTick()
+    expect(wrapper.find('.active-filters-toggle').classes()).toContain('is-active')
+
+    window.dispatchEvent(
+      new CustomEvent('lora-manager:setting-toggled', {
+        detail: { settingId: 'loramanager.some_other_setting', value: true },
+      })
+    )
+    await nextTick()
+    // Unrelated settings must not flip the indicator
+    expect(wrapper.find('.active-filters-toggle').classes()).toContain('is-active')
+  })
+})