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>
2025-07-10 14:14:02 +08:00
parent 535fff62f3
commit 5375d9bb27
152 changed files with 6340 additions and 695 deletions
--- a/web/app/components/workflow/nodes/tool/components/copy-id.tsx
+++ b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
@@ -0,0 +1,51 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiFileCopyLine } from '@remixicon/react'
+import copy from 'copy-to-clipboard'
+import { debounce } from 'lodash-es'
+import Tooltip from '@/app/components/base/tooltip'
+
+type Props = {
+  content: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
+
+const CopyFeedbackNew = ({ content }: Props) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const onClickCopy = debounce(() => {
+    copy(content)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
+  return (
+    <div className='inline-flex pb-0.5' onClick={e => e.stopPropagation()} onMouseLeave={onMouseLeave}>
+      <Tooltip
+        popupContent={
+          (isCopied
+            ? t(`${prefixEmbedded}.copied`)
+            : t(`${prefixEmbedded}.copy`)) || ''
+        }
+      >
+        <div
+          className='group/copy flex items-center gap-0.5 '
+          onClick={onClickCopy}
+        >
+          <div
+            className='system-2xs-regular cursor-pointer text-text-quaternary group-hover:text-text-tertiary'
+          >{content}</div>
+          <RiFileCopyLine className='h-3 w-3 text-text-tertiary opacity-0 group-hover/copy:opacity-100' />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default CopyFeedbackNew
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
@@ -0,0 +1,62 @@
+import {
+  memo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import Placeholder from './placeholder'
+import type {
+  Node,
+  NodeOutPutVar,
+} from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type MixedVariableTextInputProps = {
+  readOnly?: boolean
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  value?: string
+  onChange?: (text: string) => void
+}
+const MixedVariableTextInput = ({
+  readOnly = false,
+  nodesOutputVars,
+  availableNodes = [],
+  value = '',
+  onChange,
+}: MixedVariableTextInputProps) => {
+  const { t } = useTranslation()
+  return (
+    <PromptEditor
+      wrapperClassName={cn(
+        'w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
+        'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+        'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
+      )}
+      className='caret:text-text-accent'
+      editable={!readOnly}
+      value={value}
+      workflowVariableBlock={{
+        show: true,
+        variables: nodesOutputVars || [],
+        workflowNodesMap: availableNodes.reduce((acc, node) => {
+          acc[node.id] = {
+            title: node.data.title,
+            type: node.data.type,
+          }
+          if (node.data.type === BlockEnum.Start) {
+            acc.sys = {
+              title: t('workflow.blocks.start'),
+              type: BlockEnum.Start,
+            }
+          }
+          return acc
+        }, {} as any),
+      }}
+      placeholder={<Placeholder />}
+      onChange={onChange}
+    />
+  )
+}
+
+export default memo(MixedVariableTextInput)
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
@@ -0,0 +1,51 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { FOCUS_COMMAND } from 'lexical'
+import { $insertNodes } from 'lexical'
+import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
+import Badge from '@/app/components/base/badge'
+
+const Placeholder = () => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+
+  const handleInsert = useCallback((text: string) => {
+    editor.update(() => {
+      const textNode = new CustomTextNode(text)
+      $insertNodes([textNode])
+    })
+    editor.dispatchCommand(FOCUS_COMMAND, undefined as any)
+  }, [editor])
+
+  return (
+    <div
+      className='pointer-events-auto flex h-full w-full cursor-text items-center px-2'
+      onClick={(e) => {
+        e.stopPropagation()
+        handleInsert('')
+      }}
+    >
+      <div className='flex grow items-center'>
+        {t('workflow.nodes.tool.insertPlaceholder1')}
+        <div className='system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder'>/</div>
+        <div
+          className='system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary'
+          onClick={((e) => {
+            e.stopPropagation()
+            handleInsert('/')
+          })}
+        >
+          {t('workflow.nodes.tool.insertPlaceholder2')}
+        </div>
+      </div>
+      <Badge
+        className='shrink-0'
+        text='String'
+        uppercase={false}
+      />
+    </div>
+  )
+}
+
+export default Placeholder
--- a/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+import type { FC } from 'react'
+import type { ToolVarInputs } from '../../types'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import ToolFormItem from './item'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { Tool } from '@/app/components/tools/types'
+
+type Props = {
+  readOnly: boolean
+  nodeId: string
+  schema: CredentialFormSchema[]
+  value: ToolVarInputs
+  onChange: (value: ToolVarInputs) => void
+  onOpen?: (index: number) => void
+  inPanel?: boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
+}
+
+const ToolForm: FC<Props> = ({
+  readOnly,
+  nodeId,
+  schema,
+  value,
+  onChange,
+  inPanel,
+  currentTool,
+  currentProvider,
+}) => {
+  return (
+    <div className='space-y-1'>
+      {
+        schema.map((schema, index) => (
+          <ToolFormItem
+            key={index}
+            readOnly={readOnly}
+            nodeId={nodeId}
+            schema={schema}
+            value={value}
+            onChange={onChange}
+            inPanel={inPanel}
+            currentTool={currentTool}
+            currentProvider={currentProvider}
+          />
+        ))
+      }
+    </div>
+  )
+}
+export default ToolForm
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -0,0 +1,105 @@
+'use client'
+import type { FC } from 'react'
+import {
+  RiBracesLine,
+} from '@remixicon/react'
+import type { ToolVarInputs } from '../../types'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import Button from '@/app/components/base/button'
+import Tooltip from '@/app/components/base/tooltip'
+import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
+import { useBoolean } from 'ahooks'
+import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { Tool } from '@/app/components/tools/types'
+
+type Props = {
+  readOnly: boolean
+  nodeId: string
+  schema: CredentialFormSchema
+  value: ToolVarInputs
+  onChange: (value: ToolVarInputs) => void
+  inPanel?: boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
+}
+
+const ToolFormItem: FC<Props> = ({
+  readOnly,
+  nodeId,
+  schema,
+  value,
+  onChange,
+  inPanel,
+  currentTool,
+  currentProvider,
+}) => {
+  const language = useLanguage()
+  const { name, label, type, required, tooltip, input_schema } = schema
+  const showSchemaButton = type === FormTypeEnum.object || type === FormTypeEnum.array
+  const showDescription = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
+  const [isShowSchema, {
+    setTrue: showSchema,
+    setFalse: hideSchema,
+  }] = useBoolean(false)
+  return (
+    <div className='space-y-0.5 py-1'>
+      <div>
+        <div className='flex h-6 items-center'>
+          <div className='system-sm-medium text-text-secondary'>{label[language] || label.en_US}</div>
+          {required && (
+            <div className='system-xs-regular ml-1 text-text-destructive-secondary'>*</div>
+          )}
+          {!showDescription && tooltip && (
+            <Tooltip
+              popupContent={<div className='w-[200px]'>
+                {tooltip[language] || tooltip.en_US}
+              </div>}
+              triggerClassName='ml-1 w-4 h-4'
+              asChild={false}
+            />
+          )}
+          {showSchemaButton && (
+            <>
+              <div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
+              <Button
+                variant='ghost'
+                size='small'
+                onClick={showSchema}
+                className='system-xs-regular px-1 text-text-tertiary'
+              >
+                <RiBracesLine className='mr-1 size-3.5' />
+                <span>JSON Schema</span>
+              </Button>
+            </>
+          )}
+        </div>
+        {showDescription && tooltip && (
+          <div className='body-xs-regular pb-0.5 text-text-tertiary'>{tooltip[language] || tooltip.en_US}</div>
+        )}
+      </div>
+      <FormInputItem
+        readOnly={readOnly}
+        nodeId={nodeId}
+        schema={schema}
+        value={value}
+        onChange={onChange}
+        inPanel={inPanel}
+        currentTool={currentTool}
+        currentProvider={currentProvider}
+      />
+
+      {isShowSchema && (
+        <SchemaModal
+          isShow
+          onClose={hideSchema}
+          rootName={name}
+          schema={input_schema!}
+        />
+      )}
+    </div>
+  )
+}
+export default ToolFormItem
--- a/web/app/components/workflow/nodes/tool/default.ts
+++ b/web/app/components/workflow/nodes/tool/default.ts
@@ -10,6 +10,7 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
  defaultValue: {
    tool_parameters: {},
    tool_configurations: {},
+    version: '2',
  },
  getAvailablePrevNodes(isChatMode: boolean) {
    const nodes = isChatMode
@@ -55,6 +56,8 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
        const value = payload.tool_configurations[field.variable]
        if (!errorMessages && (value === undefined || value === null || value === ''))
          errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
+        if (!errorMessages && typeof value === 'object' && !!value.type && (value.value === undefined || value.value === null || value.value === '' || (Array.isArray(value.value) && value.value.length === 0)))
+          errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
      })
    }

--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -21,14 +21,14 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
            <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary'>
              {key}
            </div>
-            {typeof tool_configurations[key] === 'string' && (
+            {typeof tool_configurations[key].value === 'string' && (
              <div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
-                {paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key]}
+                {paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key].value}
              </div>
            )}
-            {typeof tool_configurations[key] === 'number' && (
+            {typeof tool_configurations[key].value === 'number' && (
              <div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
-                {tool_configurations[key]}
+                {tool_configurations[key].value}
              </div>
            )}
            {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && (
@@ -36,11 +36,6 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
                {tool_configurations[key].model}
              </div>
            )}
-            {/* {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.appSelector && (
-              <div title={tool_configurations[key].app_id} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
-                {tool_configurations[key].app_id}
-              </div>
-            )} */}
          </div>

        ))}
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/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
--- a/web/app/components/workflow/nodes/tool/types.ts
+++ b/web/app/components/workflow/nodes/tool/types.ts
@@ -22,4 +22,5 @@ export type ToolNodeType = CommonNodeType & {
  tool_configurations: Record<string, any>
  output_schema: Record<string, any>
  paramSchemas?: Record<string, any>[]
+  version?: string
 }
--- a/web/app/components/workflow/nodes/tool/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/use-config.ts
@@ -8,10 +8,12 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import { CollectionType } from '@/app/components/tools/types'
 import { updateBuiltInToolCredential } from '@/service/tools'
-import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import {
+  getConfiguredValue,
+  toolParametersToFormSchemas,
+} from '@/app/components/tools/utils/to-form-schema'
 import Toast from '@/app/components/base/toast'
-import { VarType as VarVarType } from '@/app/components/workflow/types'
-import type { InputVar, Var } from '@/app/components/workflow/types'
+import type { InputVar } from '@/app/components/workflow/types'
 import {
  useFetchToolsData,
  useNodesReadOnly,
@@ -26,17 +28,18 @@ const useConfig = (id: string, payload: ToolNodeType) => {
  const language = useLanguage()
  const { inputs, setInputs: doSetInputs } = useNodeCrud<ToolNodeType>(id, payload)
  /*
-  * tool_configurations: tool setting, not dynamic setting
-  * tool_parameters: tool dynamic setting(by user)
+  * tool_configurations: tool setting, not dynamic setting (form type = form)
+  * tool_parameters: tool dynamic setting(form type = llm)
  * output_schema: tool dynamic output
  */
-  const { provider_id, provider_type, tool_name, tool_configurations, output_schema } = inputs
+  const { provider_id, provider_type, tool_name, tool_configurations, output_schema, tool_parameters } = inputs
  const isBuiltIn = provider_type === CollectionType.builtIn
  const buildInTools = useStore(s => s.buildInTools)
  const customTools = useStore(s => s.customTools)
  const workflowTools = useStore(s => s.workflowTools)
+  const mcpTools = useStore(s => s.mcpTools)

-  const currentTools = (() => {
+  const currentTools = useMemo(() => {
    switch (provider_type) {
      case CollectionType.builtIn:
        return buildInTools
@@ -44,10 +47,12 @@ const useConfig = (id: string, payload: ToolNodeType) => {
        return customTools
      case CollectionType.workflow:
        return workflowTools
+      case CollectionType.mcp:
+        return mcpTools
      default:
        return []
    }
-  })()
+  }, [buildInTools, customTools, mcpTools, provider_type, workflowTools])
  const currCollection = currentTools.find(item => canFindTool(item.id, provider_id))

  // Auth
@@ -91,10 +96,10 @@ const useConfig = (id: string, payload: ToolNodeType) => {
        const value = newConfig[key]
        if (schema?.type === 'boolean') {
          if (typeof value === 'string')
-            newConfig[key] = Number.parseInt(value, 10)
+            newConfig[key] = value === 'true' || value === '1'

-          if (typeof value === 'boolean')
-            newConfig[key] = value ? 1 : 0
+          if (typeof value === 'number')
+            newConfig[key] = value === 1
        }

        if (schema?.type === 'number-input') {
@@ -107,12 +112,11 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    doSetInputs(newInputs)
  }, [doSetInputs, formSchemas, hasShouldTransferTypeSettingInput])
  const [notSetDefaultValue, setNotSetDefaultValue] = useState(false)
-  const toolSettingValue = (() => {
+  const toolSettingValue = useMemo(() => {
    if (notSetDefaultValue)
      return tool_configurations
-
-    return addDefaultValue(tool_configurations, toolSettingSchema)
-  })()
+    return getConfiguredValue(tool_configurations, toolSettingSchema)
+  }, [notSetDefaultValue, toolSettingSchema, tool_configurations])
  const setToolSettingValue = useCallback((value: Record<string, any>) => {
    setNotSetDefaultValue(true)
    setInputs({
@@ -121,16 +125,20 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    })
  }, [inputs, setInputs])

+  const formattingParameters = () => {
+    const inputsWithDefaultValue = produce(inputs, (draft) => {
+      if (!draft.tool_configurations || Object.keys(draft.tool_configurations).length === 0)
+        draft.tool_configurations = getConfiguredValue(tool_configurations, toolSettingSchema)
+      if (!draft.tool_parameters || Object.keys(draft.tool_parameters).length === 0)
+        draft.tool_parameters = getConfiguredValue(tool_parameters, toolInputVarSchema)
+    })
+    return inputsWithDefaultValue
+  }
+
  useEffect(() => {
    if (!currTool)
      return
-    const inputsWithDefaultValue = produce(inputs, (draft) => {
-      if (!draft.tool_configurations || Object.keys(draft.tool_configurations).length === 0)
-        draft.tool_configurations = addDefaultValue(tool_configurations, toolSettingSchema)
-
-      if (!draft.tool_parameters)
-        draft.tool_parameters = {}
-    })
+    const inputsWithDefaultValue = formattingParameters()
    setInputs(inputsWithDefaultValue)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currTool])
@@ -143,19 +151,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    })
  }, [inputs, setInputs])

-  const [currVarIndex, setCurrVarIndex] = useState(-1)
-  const currVarType = toolInputVarSchema[currVarIndex]?._type
-  const handleOnVarOpen = useCallback((index: number) => {
-    setCurrVarIndex(index)
-  }, [])
-
-  const filterVar = useCallback((varPayload: Var) => {
-    if (currVarType)
-      return varPayload.type === currVarType
-
-    return varPayload.type !== VarVarType.arrayFile
-  }, [currVarType])
-
  const isLoading = currTool && (isBuiltIn ? !currCollection : false)

  const getMoreDataForCheckValid = () => {
@@ -220,8 +215,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    setToolSettingValue,
    toolInputVarSchema,
    setInputVar,
-    handleOnVarOpen,
-    filterVar,
    currCollection,
    isShowAuthBtn,
    showSetAuth,
--- a/web/app/components/workflow/nodes/tool/use-single-run-form-params.ts
+++ b/web/app/components/workflow/nodes/tool/use-single-run-form-params.ts
@@ -34,7 +34,12 @@ const useSingleRunFormParams = ({
  const hadVarParams = Object.keys(inputs.tool_parameters)
    .filter(key => inputs.tool_parameters[key].type !== VarType.constant)
    .map(k => inputs.tool_parameters[k])
-  const varInputs = getInputVars(hadVarParams.map((p) => {
+
+  const hadVarSettings = Object.keys(inputs.tool_configurations)
+    .filter(key => typeof inputs.tool_configurations[key] === 'object' && inputs.tool_configurations[key].type && inputs.tool_configurations[key].type !== VarType.constant)
+    .map(k => inputs.tool_configurations[k])
+
+  const varInputs = getInputVars([...hadVarParams, ...hadVarSettings].map((p) => {
    if (p.type === VarType.variable) {
      // handle the old wrong value not crash the page
      if (!(p.value as any).join)
@@ -55,8 +60,11 @@ const useSingleRunFormParams = ({
    const res = produce(inputVarValues, (draft) => {
      Object.keys(inputs.tool_parameters).forEach((key: string) => {
        const { type, value } = inputs.tool_parameters[key]
-        if (type === VarType.constant && (value === undefined || value === null))
+        if (type === VarType.constant && (value === undefined || value === null)) {
+            if(!draft.tool_parameters || !draft.tool_parameters[key])
+            return
          draft[key] = value
+        }
      })
    })
    return res