From df5fb6dca9f5a72089b593b19e1135be22929c4d Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 27 Dec 2024 13:30:39 +0800
Subject: [PATCH] feat: agent strategy max iter slider

---
 .../model-provider-page/model-modal/Form.tsx  | 40 ++++----
 .../nodes/_base/components/agent-strategy.tsx | 95 ++++++++++++++-----
 2 files changed, 89 insertions(+), 46 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index 6e54b939c3..4ea51d39b9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -44,7 +44,7 @@ type FormProps<
     props: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'>
   ) => ReactNode
   // If return falsy value, this field will fallback to default render
-  override?: [Array<FormTypeEnum>, (formSchema: CredentialFormSchema) => ReactNode]
+  override?: [Array<FormTypeEnum>, (formSchema: CredentialFormSchema, props: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'>) => ReactNode]
 }
 
 function Form<
@@ -69,6 +69,22 @@ function Form<
 }: FormProps<CustomFormSchema>) {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
+  const filteredProps: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'> = {
+    className,
+    itemClassName,
+    fieldLabelClassName,
+    value,
+    onChange,
+    formSchemas,
+    validating,
+    validatedSuccess,
+    showOnVariableMap,
+    isEditMode,
+    readonly,
+    inputClassName,
+    isShowDefaultValue,
+    fieldMoreInfo,
+  }
 
   const handleFormChange = (key: string, val: string | boolean) => {
     if (isEditMode && (key === '__model_type' || key === '__model_name'))
@@ -106,7 +122,7 @@ function Form<
     if (override) {
       const [overrideTypes, overrideRender] = override
       if (overrideTypes.includes(formSchema.type as FormTypeEnum)) {
-        const node = overrideRender(formSchema as CredentialFormSchema)
+        const node = overrideRender(formSchema as CredentialFormSchema, filteredProps)
         if (node)
           return node
       }
@@ -342,24 +358,8 @@ function Form<
     }
 
     // @ts-expect-error it work
-    if (!Object.values(FormTypeEnum).includes(formSchema.type)) {
-      return customRenderField?.(formSchema as CustomFormSchema, {
-        className,
-        itemClassName,
-        fieldLabelClassName,
-        value,
-        onChange,
-        formSchemas,
-        validating,
-        validatedSuccess,
-        showOnVariableMap,
-        isEditMode,
-        readonly,
-        inputClassName,
-        isShowDefaultValue,
-        fieldMoreInfo,
-      })
-    }
+    if (!Object.values(FormTypeEnum).includes(formSchema.type))
+      return customRenderField?.(formSchema as CustomFormSchema, filteredProps)
   }
 
   return (
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 81474b0a03..2fa582d70e 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -1,4 +1,5 @@
-import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { CredentialFormSchemaNumberInput } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { type CredentialFormSchema, FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { ToolVarInputs } from '../../tool/types'
 import ListEmpty from '@/app/components/base/list-empty'
 import { AgentStrategySelector } from './agent-strategy-selector'
@@ -11,6 +12,7 @@ import Slider from '@/app/components/base/slider'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import Field from './field'
 import type { ComponentProps } from 'react'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 export type Strategy = {
   agent_strategy_provider_name: string
@@ -29,11 +31,10 @@ export type AgentStrategyProps = {
 
 type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field
 
-type MaxIterFormSchema = CustomSchema<'max-iter'>
 type ToolSelectorSchema = CustomSchema<'tool-selector'>
 type MultipleToolSelectorSchema = CustomSchema<'array[tools]'>
 
-type CustomField = MaxIterFormSchema | ToolSelectorSchema | MultipleToolSelectorSchema
+type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema
 
 const devMockForm = [{
   name: 'model',
@@ -114,36 +115,77 @@ const devMockForm = [{
   max: null,
   options: [],
   type: 'string',
+},
+{
+  name: 'max iterations',
+  label: {
+    en_US: 'Max Iterations',
+    zh_Hans: '最大迭代次数',
+    pt_BR: 'Max Iterations',
+    ja_JP: 'Max Iterations',
+  },
+  placeholder: null,
+  scope: null,
+  auto_generate: null,
+  template: null,
+  required: true,
+  default: '1',
+  min: 1,
+  max: 10,
+  type: FormTypeEnum.textNumber,
+  tooltip: {
+    en_US: 'The maximum number of iterations to run',
+    zh_Hans: '运行的最大迭代次数',
+    pt_BR: 'The maximum number of iterations to run',
+    ja_JP: 'The maximum number of iterations to run',
+  },
 }]
 
 export const AgentStrategy = (props: AgentStrategyProps) => {
   const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange } = props
   const { t } = useTranslation()
+  const language = useLanguage()
+  const override: ComponentProps<typeof Form<CustomField>>['override'] = [
+    [FormTypeEnum.textNumber],
+    (schema, props) => {
+      switch (schema.type) {
+        case FormTypeEnum.textNumber: {
+          const def = schema as CredentialFormSchemaNumberInput
+          if (!def.max || !def.min)
+            return false
+
+          const defaultValue = schema.default ? Number.parseInt(schema.default) : 1
+          const value = props.value[schema.variable] || defaultValue
+          const onChange = (value: number) => {
+            props.onChange({ ...props.value, [schema.variable]: value })
+          }
+          return <Field title={def.label[language]} tooltip={def.tooltip?.[language]} inline>
+            <div className='flex w-[200px] items-center gap-3'>
+              <Slider
+                value={value}
+                onChange={onChange}
+                className='w-full'
+                min={def.min}
+                max={def.max}
+              />
+              <InputNumber
+                value={value}
+                // TODO: maybe empty, handle this
+                onChange={onChange as any}
+                defaultValue={defaultValue}
+                size='sm'
+                min={def.min}
+                max={def.max}
+                className='w-12'
+              />
+            </div>
+          </Field>
+        }
+      }
+    },
+  ]
   const renderField: ComponentProps<typeof Form<CustomField>>['customRenderField'] = (schema, props) => {
     switch (schema.type) {
-      case 'max-iter': {
-        const defaultValue = schema.default ? Number.parseInt(schema.default) : 1
-        const value = props.value[schema.variable] || defaultValue
-        const onChange = (value: number) => {
-          props.onChange({ ...props.value, [schema.variable]: value })
-        }
-        return <Field title={t('workflow.nodes.agent.maxIterations')} tooltip={'max iter'} inline>
-          <div className='flex w-[200px] items-center gap-3'>
-            <Slider value={value} onChange={onChange} className='w-full' min={1} max={10} />
-            <InputNumber
-              value={value}
-              // TODO: maybe empty, handle this
-              onChange={onChange as any}
-              defaultValue={defaultValue}
-              size='sm'
-              min={1}
-              max={10}
-              className='w-12'
-              placeholder=''
-            />
-          </div>
-        </Field>
-      }
       case 'tool-selector': {
         const value = props.value[schema.variable]
         const onChange = (value: any) => {
@@ -182,6 +224,7 @@ export const AgentStrategy = (props: AgentStrategyProps) => {
             isEditMode={true}
             fieldLabelClassName='uppercase'
             customRenderField={renderField}
+            override={override}
           />
         </div>
         : <ListEmpty