feat(composer): improve quick panel search aliases (#16730)

Co-authored-by: fullex <106392080+0xfullex@users.noreply.github.com>
Signed-off-by: ousugo <dkzyxh@gmail.com>

Author: ousugo

src/renderer/components/QuickPanel/__tests__/defaultStrategies.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+
+import { defaultFilterFn } from '../defaultStrategies'
+import type { QuickPanelListItem } from '../types'
+
+const fuzzyRegex = /unused/i
+
+function matches(item: QuickPanelListItem, searchText: string) {
+  return defaultFilterFn(item, searchText, fuzzyRegex, new WeakMap())
+}
+
+describe('default QuickPanel filtering', () => {
+  it('keeps filterText additive with label, description, and search aliases', () => {
+    const item: QuickPanelListItem = {
+      label: 'Visible label',
+      description: 'Readable description',
+      filterText: 'explicit-field',
+      searchAliases: ['Hidden alias'],
+      icon: 'icon'
+    }
+
+    expect(matches(item, 'explicit')).toBe(true)
+    expect(matches(item, 'visible')).toBe(true)
+    expect(matches(item, 'readable')).toBe(true)
+    expect(matches(item, 'hidden')).toBe(true)
+  })
+})

src/renderer/components/QuickPanel/defaultStrategies.ts

@@ -2,21 +2,28 @@ import * as tinyPinyin from 'tiny-pinyin'
 
 import type { QuickPanelFilterFn, QuickPanelListItem, QuickPanelSortFn } from './types'
 
+/**
+ * Concatenates all textual search fields into a single haystack for substring /
+ * pinyin matching. `filterText` is additive here so the shared QuickPanel
+ * strategy keeps matching the visible label and description by default.
+ */
+function buildItemHaystack(item: QuickPanelListItem): string {
+  const parts: string[] = []
+  if (item.filterText) parts.push(item.filterText)
+  if (typeof item.label === 'string') parts.push(item.label)
+  if (typeof item.description === 'string') parts.push(item.description)
+  if (item.searchAliases) parts.push(...item.searchAliases)
+  return parts.join(' ')
+}
+
 /**
  * Default filter function
  * Implements standard filtering logic with pinyin support
  */
 export const defaultFilterFn: QuickPanelFilterFn = (item, searchText, fuzzyRegex, pinyinCache) => {
   if (!searchText) return true
 
-  let filterText = item.filterText || ''
-  if (typeof item.label === 'string') {
-    filterText += item.label
-  }
-  if (typeof item.description === 'string') {
-    filterText += item.description
-  }
-
+  const filterText = buildItemHaystack(item)
   const lowerFilterText = filterText.toLowerCase()
   const lowerSearchText = searchText.toLowerCase()
 
@@ -47,14 +54,7 @@ export const defaultFilterFn: QuickPanelFilterFn = (item, searchText, fuzzyRegex
  * Higher score = better match
  */
 const calculateMatchScore = (item: QuickPanelListItem, searchText: string): number => {
-  let filterText = item.filterText || ''
-  if (typeof item.label === 'string') {
-    filterText += item.label
-  }
-  if (typeof item.description === 'string') {
-    filterText += item.description
-  }
-
+  const filterText = buildItemHaystack(item)
   const lowerFilterText = filterText.toLowerCase()
   const lowerSearchText = searchText.toLowerCase()
 

src/renderer/components/QuickPanel/types.ts

@@ -101,10 +101,14 @@ export type QuickPanelListItem = {
   label: React.ReactNode | string
   description?: React.ReactNode | string
   /**
-   * Since title and description can be ReactNode values, provide separate text
-   * for search filtering. This can combine the title and description strings.
+   * Extra searchable text for items whose visible label/description are not
+   * enough or are not plain strings. The default filter treats this as additive
+   * with string labels and descriptions; custom filters may choose narrower
+   * semantics.
    */
   filterText?: string
+  /** Extra searchable aliases that are not rendered in the panel. */
+  searchAliases?: readonly string[]
   icon: React.ReactNode | string
   suffix?: React.ReactNode | string
   isSelected?: boolean

src/renderer/components/composer/quickPanel/__tests__/unifiedPanel.test.ts

@@ -129,30 +129,54 @@ describe('createUnifiedQuickPanelOpenOptions', () => {
     expect(options.sortFn!(reversedItems, '')).toEqual(reversedItems)
   })
 
-  it('filters by filterText substring and pinyin, without loose fuzzy subsequence', () => {
-    const options = createUnifiedQuickPanelOpenOptions([], {
-      quickPanel,
-      additionalItems: [
-        { id: 'skill:pdf', label: 'pdf', description: 'Read and analyze PDFs', filterText: 'pdf', icon: 'skill' }
+  it('filters by explicit text, search aliases, pinyin, and pinyin initials without loose fuzzy subsequence', () => {
+    const options = createUnifiedQuickPanelOpenOptions(
+      [
+        {
+          id: 'web-search',
+          kind: 'command',
+          label: '网络搜索',
+          icon: 'search',
+          sources: ['root-panel'],
+          searchAliases: ['Web Search', 'Online Search']
+        }
       ],
-      resourceItems: [{ id: 'quick-phrases', label: '提示词管理', icon: 'phrase' }]
-    })
+      {
+        quickPanel,
+        additionalItems: [
+          {
+            id: 'skill:pdf',
+            label: 'pdf',
+            description: 'Read and analyze PDFs',
+            filterText: 'pdf',
+            icon: 'skill'
+          }
+        ],
+        resourceItems: [{ id: 'quick-phrases', label: '提示词管理', icon: 'phrase' }]
+      }
+    )
 
     const filterFn = options.filterFn!
     const fuzzyRegex = /s.*l/i
     const pinyinCache = new WeakMap<QuickPanelListItem, string>()
     const skill = options.list.find((item) => item.label === 'pdf')!
     const quickPhrases = options.list.find((item) => item.label === '提示词管理')!
+    const webSearch = options.list.find((item) => item.label === '网络搜索')!
 
-    // Skill matches its name...
+    // Skills keep their explicit root-panel search field and do not match descriptions.
     expect(filterFn(skill, 'pdf', fuzzyRegex, pinyinCache)).toBe(true)
-    // ...but not its description (name-only).
     expect(filterFn(skill, 'analyze', fuzzyRegex, pinyinCache)).toBe(false)
 
-    // Chinese row matches by substring and pinyin substring...
+    // Chinese row matches by substring, pinyin substring, and pinyin initial substring...
     expect(filterFn(quickPhrases, '提示词', fuzzyRegex, pinyinCache)).toBe(true)
     expect(filterFn(quickPhrases, 'tishi', fuzzyRegex, pinyinCache)).toBe(true)
-    // ...but not by a loose fuzzy subsequence of its pinyin (tiShiCiGuanLi).
+    expect(filterFn(quickPhrases, 'tscgl', fuzzyRegex, pinyinCache)).toBe(true)
+
+    // Launcher rows with filterText still match hidden English aliases and visible Chinese labels by initials.
+    expect(filterFn(webSearch, 'web', fuzzyRegex, pinyinCache)).toBe(true)
+    expect(filterFn(webSearch, 'online', fuzzyRegex, pinyinCache)).toBe(true)
+    expect(filterFn(webSearch, 'wlss', fuzzyRegex, pinyinCache)).toBe(true)
+    // ...but not by a loose fuzzy subsequence of its pinyin or initials.
     expect(filterFn(quickPhrases, 'sl', fuzzyRegex, pinyinCache)).toBe(false)
   })
 

src/renderer/components/composer/quickPanel/bridge.ts

@@ -84,6 +84,7 @@ export function createComposerSuggestionQuickPanelItem(
     icon: item.icon,
     suffix: item.suffix,
     filterText: item.filterText,
+    searchAliases: item.searchAliases,
     isSelected: item.selected,
     isMenu: item.isMenu,
     disabled: item.disabled,

src/renderer/components/composer/quickPanel/index.ts

@@ -9,6 +9,7 @@ export {
   hasComposerQuickPanelTriggerBoundary,
   ROOT_QUICK_PANEL_ALLOWED_PREFIXES
 } from './bridge'
+export { getQuickPanelSearchAliases } from './searchAliases'
 export {
   COMPOSER_SUPPRESS_SUGGESTION_META,
   type ComposerSuggestionActiveChangeOptions,

src/renderer/components/composer/quickPanel/searchAliases.ts

@@ -0,0 +1,15 @@
+import type { TFunction } from 'i18next'
+
+export function getQuickPanelSearchAliases(t: TFunction, key: string, extraAliases: readonly string[] = []): string[] {
+  const aliases = new Set<string>()
+  const englishText = t(key, { lng: 'en-US', defaultValue: '' })
+
+  for (const value of [englishText, ...extraAliases]) {
+    if (typeof value !== 'string') continue
+    const alias = value.trim()
+    if (!alias) continue
+    aliases.add(alias)
+  }
+
+  return Array.from(aliases)
+}

src/renderer/components/composer/quickPanel/suggestionExtension.ts

@@ -21,6 +21,7 @@ export interface ComposerSuggestionItem {
   isMenu?: boolean
   suffix?: ReactNode | string
   query?: string
+  searchAliases?: readonly string[]
   command: (options: { editor: Editor; range: Range; item: ComposerSuggestionItem; query: string }) => void
 }
 

src/renderer/components/composer/quickPanel/unifiedPanel.ts

@@ -142,20 +142,29 @@ const sortUnifiedQuickPanelItems: QuickPanelSortFn = (items, searchText) => {
 
 function getUnifiedQuickPanelMatchText(item: QuickPanelListItem) {
   // `filterText`, when set, is the authoritative search field for the item
-  // (e.g. skills set it to their name only). Otherwise fall back to the visible
-  // label + description so items without an explicit search field stay searchable.
-  if (item.filterText) return item.filterText
+  // (e.g. skills set it to their name only). Hidden aliases may still expand search.
+  if (item.filterText) {
+    return item.searchAliases ? `${item.filterText} ${item.searchAliases.join(' ')}` : item.filterText
+  }
 
   const parts: string[] = []
   if (typeof item.label === 'string') parts.push(item.label)
   if (typeof item.description === 'string') parts.push(item.description)
+  if (item.searchAliases) parts.push(...item.searchAliases)
   return parts.join(' ')
 }
 
+function getPinyinSearchText(matchText: string) {
+  const pinyinWords = tinyPinyin.convertToPinyin(matchText, ' ', true).toLowerCase().split(/\s+/).filter(Boolean)
+  const pinyinText = pinyinWords.join('')
+  const pinyinInitials = pinyinWords.map((word) => word[0] ?? '').join('')
+  return `${pinyinText} ${pinyinInitials}`
+}
+
 /**
- * Root panel filter: substring match, plus pinyin substring for Chinese text.
- * Intentionally avoids the default loose fuzzy subsequence matching so unrelated
- * rows (e.g. Quick Phrases) don't surface for a query typed for another item.
+ * Root panel filter: substring match, plus pinyin and pinyin-initial substring
+ * matching for Chinese text. Intentionally avoids loose fuzzy subsequence matching
+ * so unrelated rows (e.g. Quick Phrases) don't surface for another item's query.
  */
 const filterUnifiedQuickPanelItems: QuickPanelFilterFn = (item, searchText, _fuzzyRegex, pinyinCache) => {
   if (!searchText) return true
@@ -169,7 +178,7 @@ const filterUnifiedQuickPanelItems: QuickPanelFilterFn = (item, searchText, _fuz
   if (tinyPinyin.isSupported() && /[\u4e00-\u9fa5]/.test(matchText)) {
     let pinyinText = pinyinCache.get(item)
     if (pinyinText === undefined) {
-      pinyinText = tinyPinyin.convertToPinyin(matchText, '', true).toLowerCase()
+      pinyinText = getPinyinSearchText(matchText)
       pinyinCache.set(item, pinyinText)
     }
     return pinyinText.includes(query)
@@ -251,6 +260,7 @@ function createUnifiedPanelListItem(
     description: getLauncherDescription(launcher),
     icon: launcher.icon,
     suffix: launcher.suffix,
+    searchAliases: launcher.searchAliases,
     isSelected: launcher.active,
     isMenu: launcher.kind === 'panel' || launcher.kind === 'group' || children.length > 0,
     disabled: launcher.disabled,

src/renderer/components/composer/toolLauncher.ts

@@ -39,6 +39,7 @@ export interface ComposerToolLauncher {
   description?: ReactNode | string
   tooltip?: ReactNode | string
   disabledReason?: ReactNode | string
+  searchAliases?: readonly string[]
   icon: ReactNode | string
   suffix?: ReactNode | string
   active?: boolean