Feat node search (#23685)

Co-authored-by: GuanMu <ballmanjq@gmail.com>
Co-authored-by: zhujiruo <zhujiruo@foxmail.com>
Co-authored-by: Matri Qi <matrixdom@126.com>
Co-authored-by: croatialu <wuli.croatia@foxmail.com>
Co-authored-by: HyaCinth <88471803+HyaCiovo@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>

web/app/components/goto-anything/actions/app.tsx

@@ -0,0 +1,53 @@
+import type { ActionItem, AppSearchResult } from './types'
+import type { App } from '@/types/app'
+import { fetchAppList } from '@/service/apps'
+import AppIcon from '../../base/app-icon'
+import { AppTypeIcon } from '../../app/type-selector'
+import { getRedirectionPath } from '@/utils/app-redirection'
+
+const parser = (apps: App[]): AppSearchResult[] => {
+  return apps.map(app => ({
+    id: app.id,
+    title: app.name,
+    description: app.description,
+    type: 'app' as const,
+    path: getRedirectionPath(true, {
+      id: app.id,
+      mode: app.mode,
+    }),
+    icon: (
+      <div className='relative shrink-0'>
+        <AppIcon
+          size='large'
+          iconType={app.icon_type}
+          icon={app.icon}
+          background={app.icon_background}
+          imageUrl={app.icon_url}
+        />
+        <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
+          className='h-3 w-3' type={app.mode} />
+      </div>
+    ),
+    data: app,
+  }))
+}
+
+export const appAction: ActionItem = {
+  key: '@app',
+  shortcut: '@app',
+  title: 'Search Applications',
+  description: 'Search and navigate to your applications',
+  // action,
+  search: async (_, searchTerm = '', locale) => {
+    const response = (await fetchAppList({
+      url: 'apps',
+      params: {
+        page: 1,
+        name: searchTerm,
+      },
+    }))
+    const apps = response.data || []
+
+    return parser(apps)
+  },
+}

web/app/components/goto-anything/actions/index.ts

@@ -0,0 +1,68 @@
+import { appAction } from './app'
+import { knowledgeAction } from './knowledge'
+import { pluginAction } from './plugin'
+import { workflowNodesAction } from './workflow-nodes'
+import type { ActionItem, SearchResult } from './types'
+
+export const Actions = {
+  app: appAction,
+  knowledge: knowledgeAction,
+  plugin: pluginAction,
+  node: workflowNodesAction,
+}
+
+export const searchAnything = async (
+  locale: string,
+  query: string,
+  actionItem?: ActionItem,
+): Promise<SearchResult[]> => {
+  if (actionItem) {
+    const searchTerm = query.replace(actionItem.key, '').replace(actionItem.shortcut, '').trim()
+    return await actionItem.search(query, searchTerm, locale)
+  }
+
+  if (query.startsWith('@'))
+    return []
+
+  // Use Promise.allSettled to handle partial failures gracefully
+  const searchPromises = Object.values(Actions).map(async (action) => {
+    try {
+      const results = await action.search(query, query, locale)
+      return { success: true, data: results, actionType: action.key }
+    }
+ catch (error) {
+      console.warn(`Search failed for ${action.key}:`, error)
+      return { success: false, data: [], actionType: action.key, error }
+    }
+  })
+
+  const settledResults = await Promise.allSettled(searchPromises)
+
+  const allResults: SearchResult[] = []
+  const failedActions: string[] = []
+
+  settledResults.forEach((result, index) => {
+    if (result.status === 'fulfilled' && result.value.success) {
+      allResults.push(...result.value.data)
+    }
+ else {
+      const actionKey = Object.values(Actions)[index]?.key || 'unknown'
+      failedActions.push(actionKey)
+    }
+  })
+
+  if (failedActions.length > 0)
+    console.warn(`Some search actions failed: ${failedActions.join(', ')}`)
+
+  return allResults
+}
+
+export const matchAction = (query: string, actions: Record<string, ActionItem>) => {
+  return Object.values(actions).find((action) => {
+    const reg = new RegExp(`^(${action.key}|${action.shortcut})(?:\\s|$)`)
+    return reg.test(query)
+  })
+}
+
+export * from './types'
+export { appAction, knowledgeAction, pluginAction, workflowNodesAction }

web/app/components/goto-anything/actions/knowledge.tsx

@@ -0,0 +1,50 @@
+import type { ActionItem, KnowledgeSearchResult } from './types'
+import type { DataSet } from '@/models/datasets'
+import { fetchDatasets } from '@/service/datasets'
+import { Folder } from '../../base/icons/src/vender/solid/files'
+import cn from '@/utils/classnames'
+
+const EXTERNAL_PROVIDER = 'external' as const
+const isExternalProvider = (provider: string): boolean => provider === EXTERNAL_PROVIDER
+
+const parser = (datasets: DataSet[]): KnowledgeSearchResult[] => {
+  return datasets.map((dataset) => {
+    const path = isExternalProvider(dataset.provider) ? `/datasets/${dataset.id}/hitTesting` : `/datasets/${dataset.id}/documents`
+    return {
+      id: dataset.id,
+      title: dataset.name,
+      description: dataset.description,
+      type: 'knowledge' as const,
+      path,
+      icon: (
+        <div className={cn(
+          'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
+          !dataset.embedding_available && 'opacity-50 hover:opacity-100',
+        )}>
+          <Folder className='h-5 w-5 text-[#444CE7]' />
+        </div>
+      ),
+      data: dataset,
+    }
+  })
+}
+
+export const knowledgeAction: ActionItem = {
+  key: '@knowledge',
+  shortcut: '@kb',
+  title: 'Search Knowledge Bases',
+  description: 'Search and navigate to your knowledge bases',
+  // action,
+  search: async (_, searchTerm = '', locale) => {
+    const response = await fetchDatasets({
+      url: '/datasets',
+      params: {
+        page: 1,
+        limit: 10,
+        keyword: searchTerm,
+      },
+    })
+
+    return parser(response.data)
+  },
+}

web/app/components/goto-anything/actions/plugin.tsx

@@ -0,0 +1,41 @@
+import type { ActionItem, PluginSearchResult } from './types'
+import { renderI18nObject } from '@/i18n-config'
+import Icon from '../../plugins/card/base/card-icon'
+import { postMarketplace } from '@/service/base'
+import type { Plugin, PluginsFromMarketplaceResponse } from '../../plugins/types'
+import { getPluginIconInMarketplace } from '../../plugins/marketplace/utils'
+
+const parser = (plugins: Plugin[], locale: string): PluginSearchResult[] => {
+  return plugins.map((plugin) => {
+    return {
+      id: plugin.name,
+      title: renderI18nObject(plugin.label, locale) || plugin.name,
+      description: renderI18nObject(plugin.brief, locale) || '',
+      type: 'plugin' as const,
+      icon: <Icon src={plugin.icon} />,
+      data: plugin,
+    }
+  })
+}
+
+export const pluginAction: ActionItem = {
+  key: '@plugin',
+  shortcut: '@plugin',
+  title: 'Search Plugins',
+  description: 'Search and navigate to your plugins',
+  search: async (_, searchTerm = '', locale) => {
+    const response = await postMarketplace<{ data: PluginsFromMarketplaceResponse }>('/plugins/search/advanced', {
+      body: {
+        page: 1,
+        page_size: 10,
+        query: searchTerm,
+        type: 'plugin',
+      },
+    })
+    const list = (response.data.plugins || []).map(plugin => ({
+      ...plugin,
+      icon: getPluginIconInMarketplace(plugin),
+    }))
+    return parser(list, locale!)
+  },
+}

web/app/components/goto-anything/actions/types.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react'
+import type { TypeWithI18N } from '../../base/form/types'
+import type { App } from '@/types/app'
+import type { Plugin } from '../../plugins/types'
+import type { DataSet } from '@/models/datasets'
+import type { CommonNodeType } from '../../workflow/types'
+
+export type SearchResultType = 'app' | 'knowledge' | 'plugin' | 'workflow-node'
+
+export type BaseSearchResult<T = any> = {
+  id: string
+  title: string
+  description?: string
+  type: SearchResultType
+  path?: string
+  icon?: ReactNode
+  data: T
+}
+
+export type AppSearchResult = {
+  type: 'app'
+} & BaseSearchResult<App>
+
+export type PluginSearchResult = {
+  type: 'plugin'
+} & BaseSearchResult<Plugin>
+
+export type KnowledgeSearchResult = {
+  type: 'knowledge'
+} & BaseSearchResult<DataSet>
+
+export type WorkflowNodeSearchResult = {
+  type: 'workflow-node'
+  metadata?: {
+    nodeId: string
+    nodeData: CommonNodeType
+  }
+} & BaseSearchResult<CommonNodeType>
+
+export type SearchResult = AppSearchResult | PluginSearchResult | KnowledgeSearchResult | WorkflowNodeSearchResult
+
+export type ActionItem = {
+  key: '@app' | '@knowledge' | '@plugin' | '@node'
+  shortcut: string
+  title: string | TypeWithI18N
+  description: string
+  action?: (data: SearchResult) => void
+  searchFn?: (searchTerm: string) => SearchResult[]
+  search: (
+    query: string,
+    searchTerm: string,
+    locale?: string,
+  ) => (Promise<SearchResult[]> | SearchResult[])
+}

web/app/components/goto-anything/actions/workflow-nodes.tsx

@@ -0,0 +1,44 @@
+import type { ActionItem } from './types'
+import { BoltIcon } from '@heroicons/react/24/outline'
+import i18n from 'i18next'
+
+// Create the workflow nodes action
+export const workflowNodesAction: ActionItem = {
+  key: '@node',
+  shortcut: '@node',
+  title: 'Search Workflow Nodes',
+  description: 'Find and jump to nodes in the current workflow by name or type',
+  searchFn: undefined, // Will be set by useWorkflowSearch hook
+  search: async (_, searchTerm = '', locale) => {
+    try {
+      // Use the searchFn if available (set by useWorkflowSearch hook)
+      if (workflowNodesAction.searchFn) {
+        // searchFn already returns SearchResult[] type, no need to use parser
+        return workflowNodesAction.searchFn(searchTerm)
+      }
+
+      // If not in workflow context or search function not registered
+      if (!searchTerm.trim()) {
+        return [{
+          id: 'help',
+          title: i18n.t('app.gotoAnything.actions.searchWorkflowNodes', { lng: locale }),
+          description: i18n.t('app.gotoAnything.actions.searchWorkflowNodesHelp', { lng: locale }),
+          type: 'workflow-node',
+          path: '#',
+          data: {} as any,
+          icon: (
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600">
+              <BoltIcon className="h-5 w-5" />
+            </div>
+          ),
+        }]
+      }
+
+      return []
+    }
+ catch (error) {
+      console.error('Error searching workflow nodes:', error)
+      return []
+    }
+  },
+}