chore: tools query

web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx

@@ -2,7 +2,7 @@ import { useModelList } from '@/app/components/header/account-setting/model-prov
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useProviderContext } from '@/context/provider-context'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
+import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders, useInvalidateApoNodes } from '@/service/use-tools'
 import { useInvalidateStrategyProviders } from '@/service/use-strategy'
 import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
 import { PluginType } from '../../types'
@@ -16,6 +16,7 @@ const useRefreshPluginList = () => {
 
   const invalidateAllToolProviders = useInvalidateAllToolProviders()
   const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools()
+  const invalidateApoNodes = useInvalidateApoNodes()
 
   const invalidateStrategyProviders = useInvalidateStrategyProviders()
   return {
@@ -27,6 +28,7 @@ const useRefreshPluginList = () => {
       if ((manifest && PluginType.tool.includes(manifest.category)) || refreshAllType) {
         invalidateAllToolProviders()
         invalidateAllBuiltInTools()
+        invalidateApoNodes()
         // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins
       }
 

web/app/components/workflow/apo/tool-preview/apo-tools-preview.tsx

@@ -26,7 +26,7 @@ const ApoToolsPreview = ({ onSelect, apoToolType, hidePopover }: ApoToolsPreview
   const [provider, setProvider] = useState()
   const [searchText, setSearchText] = useState<string>()
   const getAllTools = async () => {
-    const tools = await fetchApoTools(apoToolType, searchText)
+    const tools = await fetchApoTools(apoToolType, searchText, language)
     // setSearchText('')
     setProvider(tools[0])
     setTools(tools[0]?.tools)

web/app/components/workflow/block-selector/apoTools.tsx

@@ -1,87 +1,58 @@
+import type { ToolWithProvider } from '../types'
 import { BlockEnum } from '../types'
 import cn from '@/utils/classnames'
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import type { ToolDefaultValue } from './types'
 import { Popover } from 'antd'
 import ApoToolsPreview from '../apo/tool-preview/apo-tools-preview'
 import type { ApoToolTypeInfo } from '../apo/types'
-import { fetchApoNode } from '@/service/tools'
 import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../block-icon'
+
 type APOToolsProps = {
   searchText: string;
-  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void;
+  apoNodes?: ToolWithProvider[]
 }
-const APOTools = ({ searchText, onSelect }: APOToolsProps) => {
+
+const APOTools = ({ searchText, onSelect, apoNodes = [] }: APOToolsProps) => {
   const language = useGetLanguage()
-  const [openKey, setOpenKey] = useState({
+  const [openKey, setOpenKey] = useState<Record<string, boolean>>({})
-    apo_select: false,
+
-    apo_analysis: false,
+  const filteredApoNodes = useMemo(() => {
-    apo_rule: false,
+    const lowerCaseSearch = searchText.toLowerCase()
-  })
+    return apoNodes.filter(node => node.label[language]?.toLowerCase().includes(lowerCaseSearch))
-  const [apoNodes, setApoNodes] = useState([])
+  }, [searchText, apoNodes, language])
-  const hide = (key: ApoToolTypeInfo) => {
-    setOpenKey(prev => ({
-      ...prev,
-      [key]: false,
-    }))
-  }
 
   const handleOpenChange = (key: ApoToolTypeInfo, newOpen: boolean) => {
-    setOpenKey(prev => ({
+    setOpenKey(prev => ({ ...prev, [key]: newOpen }))
-      ...prev,
-      [key]: newOpen,
-    }))
   }
 
-  const getApoNodes = async () => {
+  const hide = (key: ApoToolTypeInfo) => {
-    const data = await fetchApoNode()
+    setOpenKey(prev => ({ ...prev, [key]: false }))
-    setApoNodes(data)
   }
-  useEffect(() => {
+
-    getApoNodes()
-  }, [])
   return (
-    <>
+    <div className="mb-1 last-of-type:mb-0">
-      <div className="mb-1 last-of-type:mb-0">
+      {filteredApoNodes.map(node => (
-        {apoNodes?.map(node => (
+        <Popover
-          <Popover
+          key={node.id}
-            key={node.id}
+          placement='rightTop'
-            placement='rightTop'
+          trigger={['click']}
-            trigger={['click']}
+          open={openKey[node.id]}
-            open={openKey[node.id]}
+          onOpenChange={newOpen => handleOpenChange(node.id, newOpen)}
-            onOpenChange={newOpen => handleOpenChange(node.id, newOpen)}
+          content={
-            content={
+            <ApoToolsPreview onSelect={onSelect} apoToolType={node.name} hidePopover={() => hide(node.name)} />
-              <ApoToolsPreview onSelect={onSelect} apoToolType={node.name} hidePopover={() => hide(node.name)}/>
+          }
-            }
+        >
-          >
+          <div className="flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer">
-            <div
+            <BlockIcon size="md" className="mr-2 shrink-0" type={BlockEnum.Tool} toolIcon={node.icon} />
-              key={node.id}
+            <div className={cn('grow text-sm text-gray-900 truncate')}>{node.label[language]}</div>
-              className="flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer"
+          </div>
-            >
+        </Popover>
-              <BlockIcon
+      ))}
-                size="md"
+    </div>
-                className="mr-2 shrink-0"
-                type={BlockEnum.Tool}
-                toolIcon={node.icon}
-              />
-              <div className={cn('grow text-sm text-gray-900 truncate')}>
-                {node?.label[language]}
-              </div>
-            </div>
-          </Popover>
-        ))}
-      </div>
-      {/* <AINodeRecommend
-        onSelect={handleSelect}
-        apoToolType={apoToolType}
-        showRecommendModal={showRecommendModal}
-        closeModal={() => {
-          setApoToolType(null)
-          setShowRecommendModal(false)
-        }}
-      /> */}
-    </>
   )
 }
+
 export default APOTools

web/app/components/workflow/block-selector/tabs.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools, useApoNodes } from '@/service/use-tools'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
@@ -32,7 +32,7 @@ const Tabs: FC<TabsProps> = ({
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
-
+  const { data: apoNodes } = useApoNodes()
   return (
     <div onClick={e => e.stopPropagation()} className='h-full flex flex-col min-h-[80vh]'>
       {
@@ -59,7 +59,7 @@ const Tabs: FC<TabsProps> = ({
       }
       {
         activeTab === TabsEnum.Blocks && !noBlocks && (
-          <div className='h-0 grow overflow-y-auto'><APOTools onSelect={onSelect} searchText={searchText}/>
+          <div className='h-0 grow overflow-y-auto'><APOTools apoNodes={apoNodes} onSelect={onSelect} searchText={searchText}/>
             <Blocks
               searchText={searchText}
               onSelect={onSelect}

web/service/tools.ts

@@ -159,11 +159,12 @@ export const deleteWorkflowTool = (toolID: string) => {
   })
 }
 
-export const fetchApoTools = (apoToolType: string, queryText: string) => {
+export const fetchApoTools = (apoToolType: string, queryText: string, language: string) => {
   return get('/workspaces/current/tools/apo', {
     params: {
       tool_type: apoToolType,
       query: queryText,
+      language,
     },
   })
 }

web/service/use-tools.ts

@@ -119,3 +119,14 @@ export const useRemoveProviderCredentials = ({
     onSuccess,
   })
 }
+
+const useApoNodesKey = [NAME_SPACE, 'apoNodes']
+export const useApoNodes = () => {
+  return useQuery<ToolWithProvider[]>({
+    queryKey: useApoNodesKey,
+    queryFn: () => get<ToolWithProvider[]>('/workspaces/current/tools/apo/list'),
+  })
+}
+export const useInvalidateApoNodes = () => {
+  return useInvalid(useApoNodesKey)
+}