feat: select strategy

2024-12-26 10:16:52 +08:00 · 2024-12-26 10:16:52 +08:00 · 8dcd82290c
commit 8dcd82290c
parent e1ea82475d
6 changed files with 65 additions and 56 deletions
--- 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}
--- 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
 }

--- 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
--- 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,
--- 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,
  }
 }

--- 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,
  })
 }