From 12c47d80af325001333cbbc9f1ec4ef074135756 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 20 Dec 2024 12:46:07 +0800
Subject: [PATCH] support llm tool_parameters

---
 .../nodes/tool/components/input-var-list.tsx  | 80 ++++++++++++++++++-
 .../components/workflow/nodes/tool/types.ts   |  2 +-
 2 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index de3bb2d2fb..76a9b7677b 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -14,6 +14,9 @@ import VarReferencePicker from '@/app/components/workflow/nodes/_base/components
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
+import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+
 type Props = {
   readOnly: boolean
   nodeId: string
@@ -48,8 +51,12 @@ const InputVarList: FC<Props> = ({
       return 'Number'
     else if (type === FormTypeEnum.file || type === FormTypeEnum.files)
       return 'Files'
-    else if (type === FormTypeEnum.select)
-      return 'Options'
+    else if (type === FormTypeEnum.appSelector)
+      return 'AppSelector'
+    else if (type === FormTypeEnum.modelSelector)
+      return 'ModelSelector'
+    else if (type === FormTypeEnum.toolSelector)
+      return 'ToolSelector'
     else
       return 'String'
   }
@@ -71,7 +78,7 @@ const InputVarList: FC<Props> = ({
       })
       onChange(newValue)
     }
-  }, [value, onChange, isSupportConstantValue])
+  }, [value, onChange])
 
   const handleMixedTypeChange = useCallback((variable: string) => {
     return (itemValue: string) => {
@@ -103,6 +110,43 @@ const InputVarList: FC<Props> = ({
     }
   }, [value, onChange])
 
+  const handleAppChange = useCallback((variable: string) => {
+    return (app: {
+      app_id: string
+      inputs: Record<string, any>
+      files?: any[]
+    }) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable] = app as any
+      })
+      onChange(newValue)
+    }
+  }, [onChange, value])
+  const handleModelChange = useCallback((variable: string) => {
+    return (model: { provider: string; modelId: string; mode?: string }) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable] = {
+          ...draft[variable],
+          provider: model.provider,
+          model: model.modelId,
+          mode: model.mode,
+        } as any
+      })
+      onChange(newValue)
+    }
+  }, [onChange, value])
+  const handleModelParamsChange = useCallback((variable: string) => {
+    return (newParams: Record<string, any>) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable] = {
+          ...draft[variable],
+          completion_params: newParams,
+        } as any
+      })
+      onChange(newValue)
+    }
+  }, [onChange, value])
+
   const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
   const handleInputFocus = useCallback((variable: string) => {
     return (value: boolean) => {
@@ -127,12 +171,16 @@ const InputVarList: FC<Props> = ({
             type,
             required,
             tooltip,
+            scope,
           } = schema
           const varInput = value[variable]
           const isNumber = type === FormTypeEnum.textNumber
           const isSelect = type === FormTypeEnum.select
           const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
-          const isString = !isNumber && !isSelect && !isFile
+          const isAppSelector = type === FormTypeEnum.appSelector
+          const isModelSelector = type === FormTypeEnum.modelSelector
+          // const isToolSelector = type === FormTypeEnum.toolSelector
+          const isString = !isNumber && !isSelect && !isFile && !isAppSelector && !isModelSelector
 
           return (
             <div key={variable} className='space-y-1'>
@@ -181,6 +229,30 @@ const InputVarList: FC<Props> = ({
                   filterVar={(varPayload: Var) => varPayload.type === VarType.file || varPayload.type === VarType.arrayFile}
                 />
               )}
+              {isAppSelector && (
+                <AppSelector
+                  disabled={readOnly}
+                  scope={scope || 'all'}
+                  value={varInput as any}
+                  onSelect={handleAppChange(variable)}
+                />
+              )}
+              {isModelSelector && (
+                <ModelParameterModal
+                  popupClassName='!w-[387px]'
+                  isAdvancedMode
+                  isInWorkflow
+                  provider={(varInput as any).provider}
+                  modelId={(varInput as any).model}
+                  mode={(varInput as any).mode}
+                  completionParams={(varInput as any).completion_params}
+                  setModel={handleModelChange(variable)}
+                  onCompletionParamsChange={handleModelParamsChange(variable)}
+                  hideDebugWithMultipleModel
+                  debugWithMultipleModel={false}
+                  readonly={readOnly}
+                />
+              )}
               {tooltip && <div className='text-text-tertiary body-xs-regular'>{tooltip[language] || tooltip.en_US}</div>}
             </div>
           )
diff --git a/web/app/components/workflow/nodes/tool/types.ts b/web/app/components/workflow/nodes/tool/types.ts
index 1ed6f9c373..60b6157f6d 100644
--- a/web/app/components/workflow/nodes/tool/types.ts
+++ b/web/app/components/workflow/nodes/tool/types.ts
@@ -9,7 +9,7 @@ export enum VarType {
 
 export type ToolVarInputs = Record<string, {
   type: VarType
-  value?: string | ValueSelector
+  value?: string | ValueSelector | any
 }>
 
 export type ToolNodeType = CommonNodeType & {