From 8dcd82290cd7d997aa8a48b9fb58ee1b84f5553c Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Thu, 26 Dec 2024 10:16:52 +0800
Subject: [PATCH] feat: select strategy

---
 .../components/agent-strategy-selector.tsx    | 57 +++++++++++++++----
 .../nodes/_base/components/agent-strategy.tsx |  2 +-
 .../components/workflow/nodes/agent/node.tsx  |  4 +-
 .../components/workflow/nodes/agent/panel.tsx | 45 ++-------------
 .../workflow/nodes/agent/use-config.ts        | 10 +++-
 web/service/use-strategy.ts                   |  3 +-
 6 files changed, 65 insertions(+), 56 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index ed506c63f3..151e0db451 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/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}
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index 50bf260311..fbd9463582 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/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
 }
 
diff --git a/web/app/components/workflow/nodes/agent/node.tsx b/web/app/components/workflow/nodes/agent/node.tsx
index ea51cbb0ff..fca34623ec 100644
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@@ -17,10 +17,10 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
         label={t('workflow.nodes.agent.strategy.shortLabel')}
         status='error'
         tooltip={t('workflow.nodes.agent.strategyNotInstallTooltip', {
-          strategy: inputs.agent_strategy_name,
+          strategy: inputs.agent_strategy_label,
         })}
       >
-        {inputs.agent_strategy_name}
+        {inputs.agent_strategy_label}
       </SettingItem>
       : <SettingItem label={t('workflow.nodes.agent.strategyNotSet')} />}
     <Group
diff --git a/web/app/components/workflow/nodes/agent/panel.tsx b/web/app/components/workflow/nodes/agent/panel.tsx
index ed399a20d1..15a60ff0d7 100644
--- a/web/app/components/workflow/nodes/agent/panel.tsx
+++ b/web/app/components/workflow/nodes/agent/panel.tsx
@@ -7,48 +7,9 @@ import Slider from '@/app/components/base/slider'
 import { AgentStrategy } from '../_base/components/agent-strategy'
 import useConfig from './use-config'
 import { useTranslation } from 'react-i18next'
-import { type CredentialFormSchema, FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-
-// @ts-expect-error fuck
-const mockSchema = [
-  {
-    name: 'format',
-    label: {
-      en_US: 'Format',
-      zh_Hans: '格式',
-      pt_BR: 'Format',
-      ja_JP: 'Format',
-    },
-    placeholder: undefined,
-    scope: undefined,
-    required: false,
-    default: '%Y-%m-%d %H:%M:%S',
-    options: [],
-    type: 'text-input',
-    form: 'form',
-    llm_description: null,
-    variable: 'format',
-    _type: 'string',
-    show_on: [],
-    tooltip: {
-      en_US: 'Time format in strftime standard.',
-      zh_Hans: 'strftime 标准的时间格式。',
-    },
-  },
-  {
-    name: 'model',
-    type: FormTypeEnum.modelSelector,
-    label: {
-      en_US: 'Model',
-      zh_Hans: '模型',
-    },
-    variable: 'model',
-    scope: 'all',
-  },
-] as Array<CredentialFormSchema & { name: string }>
 
 const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
-  const { inputs, setInputs } = useConfig(props.id, props.data)
+  const { inputs, setInputs, currentStrategy } = useConfig(props.id, props.data)
   const { t } = useTranslation()
   const [iter, setIter] = [inputs.max_iterations, (value: number) => {
     setInputs({
@@ -63,6 +24,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
           agent_strategy_provider_name: inputs.agent_strategy_provider_name!,
           agent_strategy_name: inputs.agent_strategy_name!,
           agent_parameters: inputs.agent_parameters,
+          agent_strategy_label: inputs.agent_strategy_label!,
         } : undefined}
         onStrategyChange={(strategy) => {
           setInputs({
@@ -70,9 +32,10 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
             agent_strategy_provider_name: strategy?.agent_strategy_provider_name,
             agent_strategy_name: strategy?.agent_strategy_name,
             agent_parameters: strategy?.agent_parameters,
+            agent_strategy_label: strategy?.agent_strategy_label,
           })
         }}
-        formSchema={mockSchema as any}
+        formSchema={currentStrategy?.parameters as any || []}
         formValue={inputs.agent_parameters || {}}
         onFormValueChange={value => setInputs({
           ...inputs,
diff --git a/web/app/components/workflow/nodes/agent/use-config.ts b/web/app/components/workflow/nodes/agent/use-config.ts
index 078d2b1796..721bea9188 100644
--- a/web/app/components/workflow/nodes/agent/use-config.ts
+++ b/web/app/components/workflow/nodes/agent/use-config.ts
@@ -1,3 +1,4 @@
+import { useStrategyProviderDetail } from '@/service/use-strategy'
 import useNodeCrud from '../_base/hooks/use-node-crud'
 import useVarList from '../_base/hooks/use-var-list'
 import type { AgentNodeType } from './types'
@@ -13,13 +14,20 @@ const useConfig = (id: string, payload: AgentNodeType) => {
     inputs,
     setInputs,
   })
-
+  const strategies = useStrategyProviderDetail(
+    inputs.agent_strategy_provider_name || '',
+  )
+  const currentStrategy = strategies.data?.declaration.strategies.find(
+    str => str.identity.name === inputs.agent_strategy_name,
+  )
+  console.log('currentStrategy', currentStrategy, 'strategies', strategies, 'inputs', inputs)
   return {
     readOnly,
     inputs,
     setInputs,
     handleVarListChange,
     handleAddVariable,
+    currentStrategy,
   }
 }
 
diff --git a/web/service/use-strategy.ts b/web/service/use-strategy.ts
index 6ef11e15ee..e6f6c4b607 100644
--- a/web/service/use-strategy.ts
+++ b/web/service/use-strategy.ts
@@ -24,7 +24,8 @@ export const useInvalidateStrategyProviders = () => {
 export const useStrategyProviderDetail = (agentProvider: string) => {
   return useQuery<StrategyPluginDetail>({
     queryKey: [NAME_SPACE, 'detail', agentProvider],
-    queryFn: () => get<StrategyPluginDetail>(`/workspaces/current/agent-providers/${agentProvider}`),
+    queryFn: () => get<StrategyPluginDetail>(`/workspaces/current/agent-provider/${agentProvider}`),
+    enabled: !!agentProvider,
   })
 }