From 7a07d8c2bc035ef72e7855443bf85a9d81b869f5 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 8 Mar 2024 14:29:55 +0800
Subject: [PATCH] feat: tool params

---
 .../model-provider-page/model-modal/Form.tsx  | 22 +++++----
 .../components/workflow/nodes/tool/panel.tsx  | 24 +++++++++-
 .../workflow/nodes/tool/use-config.ts         | 47 +++++++++++++++++++
 3 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/tool/use-config.ts

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 69f50f374e..77760b1526 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
@@ -19,6 +19,9 @@ import Tooltip from '@/app/components/base/tooltip-plus'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Radio from '@/app/components/base/radio'
 type FormProps = {
+  className?: string
+  itemClassName?: string
+  fieldLabelClassName?: string
   value: FormValue
   onChange: (val: FormValue) => void
   formSchemas: CredentialFormSchema[]
@@ -33,6 +36,9 @@ type FormProps = {
 }
 
 const Form: FC<FormProps> = ({
+  className,
+  itemClassName,
+  fieldLabelClassName,
   value,
   onChange,
   formSchemas,
@@ -89,8 +95,8 @@ const Form: FC<FormProps> = ({
 
       const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
-        <div key={variable} className='py-3'>
-          <div className='py-2 text-sm text-gray-900'>
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
             {label[language] || label.en_US}
             {
               required && (
@@ -130,8 +136,8 @@ const Form: FC<FormProps> = ({
       const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
 
       return (
-        <div key={variable} className='py-3'>
-          <div className='py-2 text-sm text-gray-900'>
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
             {label[language] || label.en_US}
             {
               required && (
@@ -186,8 +192,8 @@ const Form: FC<FormProps> = ({
         return null
 
       return (
-        <div key={variable} className='py-3'>
-          <div className='py-2 text-sm text-gray-900'>
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
             {label[language] || label.en_US}
 
             {
@@ -227,7 +233,7 @@ const Form: FC<FormProps> = ({
         return null
 
       return (
-        <div key={variable} className='py-3'>
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
           <div className='flex items-center justify-between py-2 text-sm text-gray-900'>
             <div className='flex items-center space-x-2'>
               <span>{label[language] || label.en_US}</span>
@@ -249,7 +255,7 @@ const Form: FC<FormProps> = ({
   }
 
   return (
-    <div>
+    <div className={className}>
       {
         formSchemas.map(formSchema => renderField(formSchema))
       }
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index 8f213c44fb..c828a1d71c 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -3,9 +3,11 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import Split from '../_base/components/split'
 import type { ToolNodeType } from './types'
+import useConfig from './use-config'
 import Button from '@/app/components/base/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 
 const i18nPrefix = 'workflow.nodes.tool'
 
@@ -16,6 +18,13 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
   const { t } = useTranslation()
   const readOnly = false
 
+  const {
+    inputs,
+    toolSettingSchema,
+    toolSettingValue,
+    setToolSettingValue,
+  } = useConfig(id, data)
+
   return (
     <div className='mt-2'>
       {!readOnly && (
@@ -37,8 +46,21 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
         >
           inputVars
         </Field>
+        <Split />
+        <Form
+          className='space-y-4'
+          itemClassName='!py-0'
+          fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase'
+          value={toolSettingValue}
+          onChange={setToolSettingValue}
+          formSchemas={toolSettingSchema as any}
+          isEditMode={false}
+          showOnVariableMap={{}}
+          validating={false}
+          inputClassName='!bg-gray-50'
+          readonly={readOnly}
+        />
       </div>
-      <Split />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/tool/use-config.ts b/web/app/components/workflow/nodes/tool/use-config.ts
new file mode 100644
index 0000000000..be1fe79811
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/use-config.ts
@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { ToolNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { fetchBuiltInToolList, fetchCustomToolList } from '@/service/tools'
+import type { Tool } from '@/app/components/tools/types'
+import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+
+import { CollectionType } from '@/app/components/tools/types'
+
+const useConfig = (id: string, payload: ToolNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<ToolNodeType>(id, payload)
+  const { provider_id, provider_type, tool_name, tool_parameters } = inputs
+  const isBuiltIn = provider_type === CollectionType.builtIn
+  const [currTool, setCurrTool] = useState<Tool | null>(null)
+  const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
+  // use setting
+  const toolSettingSchema = formSchemas.filter((item: any) => item.form !== 'llm')
+  const toolSettingValue = (() => {
+    return addDefaultValue(tool_parameters, toolSettingSchema)
+  })()
+  const setToolSettingValue = useCallback((value: Record<string, any>) => {
+    setInputs({
+      ...inputs,
+      tool_parameters: value,
+    })
+  }, [inputs, setInputs])
+
+  // setting when call
+  const toolInputSchema = formSchemas.filter((item: any) => item.form === 'llm')
+  useEffect(() => {
+    (async () => {
+      const list = isBuiltIn ? await fetchBuiltInToolList(provider_id) : await fetchCustomToolList(provider_id)
+      const currTool = list.find(tool => tool.name === tool_name)
+      if (currTool)
+        setCurrTool(currTool)
+    })()
+  }, [provider_id])
+  return {
+    inputs,
+    currTool,
+    toolSettingSchema,
+    toolSettingValue,
+    setToolSettingValue,
+  }
+}
+
+export default useConfig