feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>

web/app/components/workflow/nodes/tool/panel.tsx

@@ -4,11 +4,10 @@ import { useTranslation } from 'react-i18next'
 import Split from '../_base/components/split'
 import type { ToolNodeType } from './types'
 import useConfig from './use-config'
-import InputVarList from './components/input-var-list'
+import ToolForm from './components/tool-form'
 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'
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import Loading from '@/app/components/base/loading'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -28,8 +27,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     inputs,
     toolInputVarSchema,
     setInputVar,
-    handleOnVarOpen,
-    filterVar,
     toolSettingSchema,
     toolSettingValue,
     setToolSettingValue,
@@ -45,6 +42,8 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     currTool,
   } = useConfig(id, data)
 
+  const [collapsed, setCollapsed] = React.useState(false)
+
   if (isLoading) {
     return <div className='flex h-[200px] items-center justify-center'>
       <Loading />
@@ -66,21 +65,19 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
           </div>
         </>
       )}
-      {!isShowAuthBtn && <>
-        <div className='space-y-4 px-4'>
+      {!isShowAuthBtn && (
+        <div className='relative'>
           {toolInputVarSchema.length > 0 && (
             <Field
+              className='px-4'
               title={t(`${i18nPrefix}.inputVars`)}
             >
-              <InputVarList
+              <ToolForm
                 readOnly={readOnly}
                 nodeId={id}
                 schema={toolInputVarSchema as any}
                 value={inputs.tool_parameters}
                 onChange={setInputVar}
-                filterVar={filterVar}
-                isSupportConstantValue
-                onOpen={handleOnVarOpen}
                 currentProvider={currCollection}
                 currentTool={currTool}
               />
@@ -88,24 +85,29 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
           )}
 
           {toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
-            <Split />
+            <Split className='mt-1' />
           )}
 
-          <Form
-            className='space-y-4'
-            itemClassName='!py-0'
-            fieldLabelClassName='!text-[13px] !font-semibold !text-text-secondary uppercase'
-            value={toolSettingValue}
-            onChange={setToolSettingValue}
-            formSchemas={toolSettingSchema as any}
-            isEditMode={false}
-            showOnVariableMap={{}}
-            validating={false}
-            // inputClassName='!bg-gray-50'
-            readonly={readOnly}
-          />
+          {toolSettingSchema.length > 0 && (
+            <>
+              <OutputVars
+                title={t(`${i18nPrefix}.settings`)}
+                collapsed={collapsed}
+                onCollapse={setCollapsed}
+              >
+                <ToolForm
+                  readOnly={readOnly}
+                  nodeId={id}
+                  schema={toolSettingSchema as any}
+                  value={toolSettingValue}
+                  onChange={setToolSettingValue}
+                />
+              </OutputVars>
+              <Split />
+            </>
+          )}
         </div>
-      </>}
+      )}
 
       {showSetAuth && (
         <ConfigCredential