feat: select strategy

web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx

@@ -3,7 +3,6 @@ import { useMemo, useState } from 'react'
 import type { Strategy } from './agent-strategy'
 import classNames from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightUpLine, RiErrorWarningFill } from '@remixicon/react'
-import { useAllBuiltInTools } from '@/service/use-tools'
 import Tooltip from '@/app/components/base/tooltip'
 import Link from 'next/link'
 import { InstallPluginButton } from './install-plugin-button'
@@ -12,6 +11,10 @@ import SearchInput from '@/app/components/base/search-input'
 import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Tools from '../../../block-selector/tools'
 import { useTranslation } from 'react-i18next'
+import { useStrategyProviders } from '@/service/use-strategy'
+import type { StrategyPluginDetail } from '@/app/components/plugins/types'
+import type { ToolWithProvider } from '../../../types'
+import { CollectionType } from '@/app/components/tools/types'
 
 const ExternalNotInstallWarn = () => {
   const { t } = useTranslation()
@@ -31,6 +34,36 @@ const ExternalNotInstallWarn = () => {
   </Tooltip>
 }
 
+function formatStrategy(input: StrategyPluginDetail[]): ToolWithProvider[] {
+  return input.map((item) => {
+    const res: ToolWithProvider = {
+      id: item.provider,
+      // TODO: replace this
+      author: item.declaration.identity.author,
+      name: item.declaration.identity.name,
+      description: item.declaration.identity.description as any,
+      plugin_id: item.plugin_id,
+      icon: item.declaration.identity.icon,
+      label: item.declaration.identity.label as any,
+      type: CollectionType.all,
+      tools: item.declaration.strategies.map(strategy => ({
+        name: strategy.identity.name,
+        author: strategy.identity.author,
+        label: strategy.identity.label as any,
+        description: strategy.description,
+        parameters: strategy.parameters as any,
+        output_schema: strategy.output_schema,
+        labels: [],
+      })),
+      team_credentials: {},
+      is_team_authorization: true,
+      allow_delete: false,
+      labels: [],
+    }
+    return res
+  })
+}
+
 export type AgentStrategySelectorProps = {
   value?: Strategy,
   onChange: (value?: Strategy) => void,
@@ -39,13 +72,15 @@ export type AgentStrategySelectorProps = {
 export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
   const { value, onChange } = props
   const [open, setOpen] = useState(false)
-  const list = useAllBuiltInTools()
   const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
   const [query, setQuery] = useState('')
+  const stra = useStrategyProviders()
+  const list = stra.data ? formatStrategy(stra.data) : undefined
+  console.log('list', list, 'stra', stra)
   const filteredTools = useMemo(() => {
-    if (!list.data) return []
-    return list.data.filter(tool => tool.name.toLowerCase().includes(query.toLowerCase()))
-  }, [query, list.data])
+    if (!list) return []
+    return list.filter(tool => tool.name.toLowerCase().includes(query.toLowerCase()))
+  }, [query, list])
   // TODO: should be replaced by real data
   const isExternalInstalled = true
   const { t } = useTranslation()
@@ -53,9 +88,9 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
     <PortalToFollowElemTrigger className='w-full'>
       <div className='py-2 pl-3 pr-2 flex items-center rounded-lg bg-components-input-bg-normal w-full hover:bg-state-base-hover-alt select-none' onClick={() => setOpen(o => !o)}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        {list.data && value && <img
-          src={list.data.find(
-            coll => coll,
+        {list && value && <img
+          src={list.find(
+            coll => coll.tools?.find(tool => tool.name === value.agent_strategy_name),
           )?.icon as string}
           width={20}
           height={20}
@@ -65,7 +100,7 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
         <p
           className={classNames(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'text-xs px-1')}
         >
-          {value?.agent_strategy_name || t('workflow.nodes.agent.strategy.selectTip')}
+          {value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
         </p>
         {value && <div className='ml-auto flex items-center gap-1'>
           <InstallPluginButton onClick={e => e.stopPropagation()} size={'small'} />
@@ -85,10 +120,12 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
             viewType={viewType}
             onSelect={(_, tool) => {
               onChange({
-                agent_strategy_name: tool!.title,
+                agent_strategy_name: tool!.tool_name,
                 agent_strategy_provider_name: tool!.provider_name,
                 agent_parameters: tool!.params,
+                agent_strategy_label: tool!.tool_label,
               })
+              console.log(tool, 'tool')
               setOpen(false)
             }}
             hasSearchText={false}

web/app/components/workflow/nodes/_base/components/agent-strategy.tsx

@@ -10,7 +10,7 @@ import { Agent } from '@/app/components/base/icons/src/vender/workflow'
 export type Strategy = {
   agent_strategy_provider_name: string
   agent_strategy_name: string
-  agent_strategy_label?: string
+  agent_strategy_label: string
   agent_parameters?: ToolVarInputs
 }