feat: tool params

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

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