main

2026-05-05 18:08:07 +08:00 · 2025-06-23 14:54:30 +08:00
parent 6332627345 3537088135
commit 93cb98b1e5
1158 changed files with 37363 additions and 13240 deletions
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@ -19,11 +19,9 @@ import { useWorkflowStore } from '../../../store'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import type { NodeOutPutVar } from '../../../types'
 import type { Node } from 'reactflow'
-import { useContext } from 'use-context-selector'
-import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
 import type { PluginMeta } from '@/app/components/plugins/types'
 import { noop } from 'lodash'
+import { useDocLink } from '@/context/i18n'

 export type Strategy = {
  agent_strategy_provider_name: string
@ -56,7 +54,7 @@ type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema
 export const AgentStrategy = memo((props: AgentStrategyProps) => {
  const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId, canChooseMCPTool } = props
  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
  const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration)
  const renderI18nObject = useRenderI18nObject()
  const workflowStore = useWorkflowStore()
@ -71,6 +69,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
        case FormTypeEnum.textInput: {
          const def = schema as CredentialFormSchemaTextInput
          const value = props.value[schema.variable] || schema.default
+          const instanceId = schema.variable
          const onChange = (value: string) => {
            props.onChange({ ...props.value, [schema.variable]: value })
          }
@ -82,6 +81,8 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
            value={value}
            onChange={onChange}
            onGenerated={handleGenerated}
+            instanceId={instanceId}
+            key={instanceId}
            title={renderI18nObject(schema.label)}
            headerClassName='bg-transparent px-0 text-text-secondary system-sm-semibold-uppercase'
            containerBackgroundClassName='bg-transparent'
@ -122,6 +123,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
            title={<>
              {renderI18nObject(def.label)} {def.required && <span className='text-red-500'>*</span>}
            </>}
+            key={def.variable}
            tooltip={def.tooltip && renderI18nObject(def.tooltip)}
            inline
          >
@ -229,11 +231,11 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
          title={t('workflow.nodes.agent.strategy.configureTip')}
          description={<div className='text-xs text-text-tertiary'>
            {t('workflow.nodes.agent.strategy.configureTipDesc')} <br />
-            <Link href={
-              locale === LanguagesSupported[1]
-                ? 'https://docs.dify.ai/zh-hans/guides/workflow/node/agent#xuan-ze-agent-ce-le'
-                : 'https://docs.dify.ai/en/guides/workflow/node/agent#select-an-agent-strategy'
-            } className='text-text-accent-secondary' target='_blank'>
+            <Link href={docLink('/guides/workflow/node/agent#select-an-agent-strategy', {
+              'zh-Hans': '/guides/workflow/node/agent#选择-agent-策略',
+              'ja-JP': '/guides/workflow/node/agent#エージェント戦略の選択',
+            })}
+              className='text-text-accent-secondary' target='_blank'>
              {t('workflow.nodes.agent.learnMore')}
            </Link>
          </div>}
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@ -148,7 +148,7 @@ const CodeEditor: FC<Props> = ({
      {isShowVarPicker && (
        <div
          ref={popupRef}
-          className='w-[228px] space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg'
+          className='w-[228px] space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'
          style={{
            position: 'fixed',
            top: popupPosition.y,
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@ -12,9 +12,10 @@ import { Theme } from '@/types/app'
 import useTheme from '@/hooks/use-theme'
 import './style.css'
 import { noop } from 'lodash-es'
+import { basePath } from '@/utils/var'

 // load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
-loader.config({ paths: { vs: '/vs' } })
+loader.config({ paths: { vs: `${basePath}/vs` } })

 const CODE_EDITOR_LINE_HEIGHT = 18

@ -139,6 +140,7 @@ const CodeEditor: FC<Props> = ({
        language={languageMap[language] || 'javascript'}
        theme={isMounted ? theme : 'default-theme'} // sometimes not load the default theme
        value={outPutValue}
+        loading={<span className='text-text-primary'>Loading...</span>}
        onChange={handleEditorChange}
        // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
        options={{
--- a/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
@ -5,6 +5,7 @@ import Input from '@/app/components/base/input'
 import { VarType } from '@/app/components/workflow/types'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { useDocLink } from '@/context/i18n'

 type DefaultValueProps = {
  forms: DefaultValueForm[]
@ -15,6 +16,7 @@ const DefaultValue = ({
  onFormChange,
 }: DefaultValueProps) => {
  const { t } = useTranslation()
+  const docLink = useDocLink()
  const getFormChangeHandler = useCallback(({ key, type }: DefaultValueForm) => {
    return (payload: any) => {
      let value
@ -34,7 +36,9 @@ const DefaultValue = ({
        {t('workflow.nodes.common.errorHandle.defaultValue.desc')}
        &nbsp;
        <a
-          href='https://docs.dify.ai/en/guides/workflow/error-handling/README'
+          href={docLink('/guides/workflow/error-handling/README', {
+            'zh-Hans': '/guides/workflow/error-handling/readme',
+          })}
          target='_blank'
          className='text-text-accent'
        >
--- a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
@ -1,8 +1,10 @@
 import { RiMindMap } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'

 const FailBranchCard = () => {
  const { t } = useTranslation()
+  const docLink = useDocLink()

  return (
    <div className='px-4 pt-2'>
@ -17,7 +19,7 @@ const FailBranchCard = () => {
          {t('workflow.nodes.common.errorHandle.failBranch.customizeTip')}
          &nbsp;
          <a
-            href='https://docs.dify.ai/guides/workflow/error-handling'
+            href={docLink('/guides/workflow/error-handling/error-type')}
            target='_blank'
            className='text-text-accent'
          >
--- a/web/app/components/workflow/nodes/_base/components/help-link.tsx
+++ b/web/app/components/workflow/nodes/_base/components/help-link.tsx
@ -24,7 +24,7 @@ const HelpLink = ({
      <a
        href={link}
        target='_blank'
-        className='mr-1 flex h-6 w-6 items-center justify-center'
+        className='mr-1 flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-base-hover'
      >
        <RiBookOpenLine className='h-4 w-4 text-gray-500' />
      </a>
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@ -91,6 +91,9 @@ const Editor: FC<Props> = ({
              acc[node.id] = {
                title: node.data.title,
                type: node.data.type,
+                width: node.width,
+                height: node.height,
+                position: node.position,
              }
              if (node.data.type === BlockEnum.Start) {
                acc.sys = {
--- a/web/app/components/workflow/nodes/_base/components/node-position.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-position.tsx
@ -0,0 +1,54 @@
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiCrosshairLine } from '@remixicon/react'
+import type { XYPosition } from 'reactflow'
+import { useReactFlow, useStoreApi } from 'reactflow'
+import TooltipPlus from '@/app/components/base/tooltip'
+import { useNodesSyncDraft } from '@/app/components/workflow-app/hooks'
+
+type NodePositionProps = {
+  nodePosition: XYPosition,
+  nodeWidth?: number | null,
+  nodeHeight?: number | null,
+}
+const NodePosition = ({
+  nodePosition,
+  nodeWidth,
+  nodeHeight,
+}: NodePositionProps) => {
+  const { t } = useTranslation()
+  const reactflow = useReactFlow()
+  const store = useStoreApi()
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+
+  if (!nodePosition || !nodeWidth || !nodeHeight) return null
+
+  const workflowContainer = document.getElementById('workflow-container')
+  const { transform } = store.getState()
+  const zoom = transform[2]
+
+  const { clientWidth, clientHeight } = workflowContainer!
+  const { setViewport } = reactflow
+
+  return (
+    <TooltipPlus
+      popupContent={t('workflow.panel.moveToThisNode')}
+    >
+      <div
+        className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
+        onClick={() => {
+          setViewport({
+            x: (clientWidth - 400 - nodeWidth * zoom) / 2 - nodePosition.x * zoom,
+            y: (clientHeight - nodeHeight * zoom) / 2 - nodePosition.y * zoom,
+            zoom: transform[2],
+          })
+          doSyncWorkflowDraft()
+        }}
+      >
+        <RiCrosshairLine className='h-4 w-4 text-text-tertiary' />
+      </div>
+    </TooltipPlus>
+  )
+}
+
+export default memo(NodePosition)
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@ -259,6 +259,9 @@ const Editor: FC<Props> = ({
                        acc[node.id] = {
                          title: node.data.title,
                          type: node.data.type,
+                          width: node.width,
+                          height: node.height,
+                          position: node.position,
                        }
                        if (node.data.type === BlockEnum.Start) {
                          acc.sys = {
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@ -15,7 +15,7 @@ import { pluginManifestToCardPluginProps } from '@/app/components/plugins/instal
 import { Badge as Badge2, BadgeState } from '@/app/components/base/badge/index'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
-import { marketplaceUrlPrefix } from '@/config'
+import { MARKETPLACE_URL_PREFIX } from '@/config'

 export type SwitchPluginVersionProps = {
  uniqueIdentifier: string
@ -82,7 +82,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
        modalBottomLeft={
          <Link
            className='flex items-center justify-center gap-1'
-            href={`${marketplaceUrlPrefix}/plugins/${pluginDetail.declaration.author}/${pluginDetail.declaration.name}`}
+            href={`${MARKETPLACE_URL_PREFIX}/plugins/${pluginDetail.declaration.author}/${pluginDetail.declaration.name}`}
            target='_blank'
          >
            <span className='system-xs-regular text-xs text-text-accent'>
--- a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
@ -1,5 +1,5 @@
-import { useMemo } from 'react'
-import { useNodes } from 'reactflow'
+import { useCallback, useMemo } from 'react'
+import { useNodes, useReactFlow, useStoreApi } from 'reactflow'
 import { capitalize } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
 import { RiErrorWarningFill } from '@remixicon/react'
@ -48,12 +48,42 @@ const VariableTag = ({
  const variableName = isSystemVar(valueSelector) ? valueSelector.slice(0).join('.') : valueSelector.slice(1).join('.')
  const isException = isExceptionVariable(variableName, node?.data.type)

+  const reactflow = useReactFlow()
+  const store = useStoreApi()
+
+  const handleVariableJump = useCallback(() => {
+    const workflowContainer = document.getElementById('workflow-container')
+    const {
+      clientWidth,
+      clientHeight,
+    } = workflowContainer!
+
+    const {
+      setViewport,
+    } = reactflow
+    const { transform } = store.getState()
+    const zoom = transform[2]
+    const position = node.position
+    setViewport({
+      x: (clientWidth - 400 - node.width! * zoom) / 2 - position!.x * zoom,
+      y: (clientHeight - node.height! * zoom) / 2 - position!.y * zoom,
+      zoom: transform[2],
+    })
+  }, [node, reactflow, store])
+
  const { t } = useTranslation()
  return (
    <Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}>
      <div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-divider-subtle bg-components-badge-white-to-dark px-1.5 text-xs shadow-xs',
        !isValid && 'border-red-400 !bg-[#FEF3F2]',
-      )}>
+      )}
+        onClick={(e) => {
+          if (e.metaKey || e.ctrlKey) {
+            e.stopPropagation()
+            handleVariableJump()
+          }
+        }}
+      >
        {(!isEnv && !isChatVar && <>
          {node && (
            <>
--- a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
@ -50,7 +50,7 @@ const ConstantField: FC<Props> = ({
      {schema.type === FormTypeEnum.textNumber && (
        <input
          type='number'
-          className='h-8 w-full overflow-hidden rounded-lg bg-gray-100 p-2 text-[13px] font-normal leading-8 text-gray-900 placeholder:text-gray-400 focus:outline-none'
+          className='h-8 w-full overflow-hidden rounded-lg bg-workflow-block-parma-bg p-2 text-[13px] font-normal leading-8 text-text-secondary placeholder:text-gray-400 focus:outline-none'
          value={value}
          onChange={handleStaticChange}
          readOnly={readonly}
--- a/web/app/components/workflow/nodes/_base/components/variable/utils.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
@ -613,6 +613,7 @@ const getIterationItemType = ({
  const isSystem = isSystemVar(valueSelector)

  const targetVar = isSystem ? beforeNodesOutputVars.find(v => v.isStartNode) : beforeNodesOutputVars.find(v => v.nodeId === outputVarNodeId)
+
  if (!targetVar)
    return VarType.string

@ -623,9 +624,9 @@ const getIterationItemType = ({
    arrayType = curr.find((v: any) => v.variable === (valueSelector).join('.'))?.type
  }
  else {
-    for (let i = 1; i < valueSelector.length - 1; i++) {
+    for (let i = 1; i < valueSelector.length; i++) {
      const key = valueSelector[i]
-      const isLast = i === valueSelector.length - 2
+      const isLast = i === valueSelector.length - 1
      curr = Array.isArray(curr) ? curr.find(v => v.variable === key) : []

      if (isLast)
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@ -8,6 +8,8 @@ import VarReferencePicker from './var-reference-picker'
 import Input from '@/app/components/base/input'
 import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { checkKeys } from '@/utils/var'
+import Toast from '@/app/components/base/toast'

 type Props = {
  nodeId: string
@ -36,9 +38,27 @@ const VarList: FC<Props> = ({

  const handleVarNameChange = useCallback((index: number) => {
    return (e: React.ChangeEvent<HTMLInputElement>) => {
-      onVarNameChange?.(list[index].variable, e.target.value)
+      const newKey = e.target.value
+      const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
+      if (!isValid) {
+        Toast.notify({
+          type: 'error',
+          message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+        })
+        return
+      }
+
+      if (list.map(item => item.variable?.trim()).includes(newKey.trim())) {
+        Toast.notify({
+          type: 'error',
+          message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
+        })
+        return
+      }
+
+      onVarNameChange?.(list[index].variable, newKey)
      const newList = produce(list, (draft) => {
-        draft[index].variable = e.target.value
+        draft[index].variable = newKey
      })
      onChange(newList)
    }
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@ -9,7 +9,7 @@ import {
  RiMoreLine,
 } from '@remixicon/react'
 import produce from 'immer'
-import { useStoreApi } from 'reactflow'
+import { useReactFlow, useStoreApi } from 'reactflow'
 import RemoveButton from '../remove-button'
 import useAvailableVarList from '../../hooks/use-available-var-list'
 import VarReferencePopup from './var-reference-popup'
@ -111,6 +111,9 @@ const VarReferencePicker: FC<Props> = ({
    passedInAvailableNodes,
    filterVar,
  })
+
+  const reactflow = useReactFlow()
+
  const startNode = availableNodes.find((node: any) => {
    return node.data.type === BlockEnum.Start
  })
@ -172,7 +175,11 @@ const VarReferencePicker: FC<Props> = ({
    if (isSystemVar(value as ValueSelector))
      return startNode?.data

-    return getNodeInfoById(availableNodes, outputVarNodeId)?.data
+    const node = getNodeInfoById(availableNodes, outputVarNodeId)?.data
+    return {
+      ...node,
+      id: outputVarNodeId,
+    }
  }, [value, hasValue, isConstant, isIterationVar, iterationNode, availableNodes, outputVarNodeId, startNode, isLoopVar, loopNode])

  const isShowAPart = (value as ValueSelector).length > 2
@ -237,6 +244,28 @@ const VarReferencePicker: FC<Props> = ({
      onChange([], varKindType)
  }, [onChange, varKindType])

+  const handleVariableJump = useCallback((nodeId: string) => {
+    const currentNodeIndex = availableNodes.findIndex(node => node.id === nodeId)
+    const currentNode = availableNodes[currentNodeIndex]
+
+    const workflowContainer = document.getElementById('workflow-container')
+    const {
+      clientWidth,
+      clientHeight,
+    } = workflowContainer!
+    const {
+      setViewport,
+    } = reactflow
+    const { transform } = store.getState()
+    const zoom = transform[2]
+    const position = currentNode.position
+    setViewport({
+      x: (clientWidth - 400 - currentNode.width! * zoom) / 2 - position.x * zoom,
+      y: (clientHeight - currentNode.height! * zoom) / 2 - position.y * zoom,
+      zoom: transform[2],
+    })
+  }, [availableNodes, reactflow, store])
+
  const type = getCurrentVariableType({
    parentNode: isInIteration ? iterationNode : loopNode,
    valueSelector: value as ValueSelector,
@ -357,7 +386,12 @@ const VarReferencePicker: FC<Props> = ({
                              ? (
                                <>
                                  {isShowNodeName && !isEnv && !isChatVar && (
-                                    <div className='flex items-center'>
+                                    <div className='flex items-center' onClick={(e) => {
+                                      if (e.metaKey || e.ctrlKey) {
+                                        e.stopPropagation()
+                                        handleVariableJump(outputVarNode?.id)
+                                      }
+                                    }}>
                                      <div className='h-3 px-[1px]'>
                                        {outputVarNode?.type && <VarBlockIcon
                                          className='!text-text-primary'
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@ -2,12 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import VarReferenceVars from './var-reference-vars'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import ListEmpty from '@/app/components/base/list-empty'
-import { LanguagesSupported } from '@/i18n/language'
-import I18n from '@/context/i18n'
+import { useDocLink } from '@/context/i18n'

 type Props = {
  vars: NodeOutPutVar[]
@ -26,7 +24,7 @@ const VarReferencePopup: FC<Props> = ({
  zIndex,
 }) => {
  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
  // max-h-[300px] overflow-y-auto todo: use portal to handle long list
  return (
    <div className='space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg' style={{
@ -49,7 +47,12 @@ const VarReferencePopup: FC<Props> = ({
                {t('workflow.variableReference.assignedVarsDescription')}
                <a target='_blank' rel='noopener noreferrer'
                  className='text-text-accent-secondary'
-                  href={locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/guides/workflow/variables#conversation-variables' : `https://docs.dify.ai/${locale.toLowerCase()}/guides/workflow/variables#hui-hua-bian-liang`}>{t('workflow.variableReference.conversationVars')}</a>
+                  href={docLink('/guides/workflow/variables#conversation-variables', {
+                    'zh-Hans': '/guides/workflow/variables#会话变量',
+                    'ja-JP': '/guides/workflow/variables#会話変数',
+                  })}>
+                  {t('workflow.variableReference.conversationVars')}
+                </a>
              </div>}
            />
          ))
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@ -143,7 +143,7 @@ const Item: FC<ItemProps> = ({
          ref={itemRef}
          className={cn(
            (isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
-            isHovering && ((isObj || isStructureOutput) ? 'bg-primary-50' : 'bg-state-base-hover'),
+            isHovering && ((isObj || isStructureOutput) ? 'bg-components-panel-on-panel-item-bg-hover' : 'bg-state-base-hover'),
            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3')
          }
          onClick={handleChosen}
@ -263,6 +263,7 @@ type Props = {
  onClose?: () => void
  onBlur?: () => void
  zIndex?: number
+  autoFocus?: boolean
 }
 const VarReferenceVars: FC<Props> = ({
  hideSearch,
@ -275,6 +276,7 @@ const VarReferenceVars: FC<Props> = ({
  onClose,
  onBlur,
  zIndex,
+  autoFocus = true,
 }) => {
  const { t } = useTranslation()
  const [searchText, setSearchText] = useState('')
@ -327,7 +329,7 @@ const VarReferenceVars: FC<Props> = ({
                onKeyDown={handleKeyDown}
                onClear={() => setSearchText('')}
                onBlur={onBlur}
-                autoFocus
+                autoFocus={autoFocus}
              />
            </div>
            <div className='relative left-[-4px] h-[0.5px] bg-black/5' style={{
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@ -43,7 +43,7 @@ const VarReferencePicker: FC<Props> = ({
        offset={4}
      >
        <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
-          <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-button-secondary-bg px-2.5 text-[13px] text-text-primary'>
+          <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-[13px] text-text-primary'>
            <div className='w-0 grow truncate capitalize' title={value}>{value}</div>
            <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-text-secondary' />
          </div>
--- a/web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts
@ -1,14 +1,12 @@
 import { useMemo } from 'react'
-import { useGetLanguage } from '@/context/i18n'
+import { useDocLink, useGetLanguage } from '@/context/i18n'
 import { BlockEnum } from '@/app/components/workflow/types'

 export const useNodeHelpLink = (nodeType: BlockEnum) => {
  const language = useGetLanguage()
+  const docLink = useDocLink()
  const prefixLink = useMemo(() => {
-    if (language === 'zh_Hans')
-      return 'https://docs.dify.ai/zh-hans/guides/workflow/node/'
-
-    return 'https://docs.dify.ai/en/guides/workflow/node/'
+    return docLink('/guides/workflow/node/')
  }, [language])
  const linkMap = useMemo(() => {
    if (language === 'zh_Hans') {
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next'
 import NextStep from './components/next-step'
 import PanelOperator from './components/panel-operator'
 import HelpLink from './components/help-link'
+import NodePosition from './components/node-position'
 import {
  DescriptionInput,
  TitleInput,
@ -55,6 +56,9 @@ const BasePanel: FC<BasePanelProps> = ({
  id,
  data,
  children,
+  position,
+  width,
+  height,
 }) => {
  const { t } = useTranslation()
  const { showMessageLogModal } = useAppStore(useShallow(state => ({
@ -150,6 +154,7 @@ const BasePanel: FC<BasePanelProps> = ({
                  </Tooltip>
                )
              }
+              <NodePosition nodePosition={position} nodeWidth={width} nodeHeight={height}></NodePosition>
              <HelpLink nodeType={data.type} />
              <PanelOperator id={id} data={data} showHelpLink={false} />
              <div className='mx-3 h-3.5 w-[1px] bg-divider-regular' />
--- a/web/app/components/workflow/nodes/agent/default.ts
+++ b/web/app/components/workflow/nodes/agent/default.ts
@ -140,7 +140,7 @@ const nodeDefault: NodeDefault<AgentNodeType> = {
        }
      }
      // common params
-      if (param.required && !payload.agent_parameters?.[param.name]?.value) {
+      if (param.required && !(payload.agent_parameters?.[param.name]?.value || param.default)) {
        return {
          isValid: false,
          errorMessage: t('workflow.errorMsg.fieldRequired', { field: renderI18nObject(param.label, language) }),
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@ -54,9 +54,9 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
        const field = param.name
        const value = inputs.agent_parameters?.[field]?.value
        if (value) {
-          (value as unknown as any[]).forEach((item) => {
+          (value as unknown as any[]).forEach((item, idx) => {
            tools.push({
-              id: `${param.name}-${i}`,
+              id: `${param.name}-${idx}`,
              providerName: item.provider_name,
            })
          })
--- a/web/app/components/workflow/nodes/code/code-parser.spec.ts
+++ b/web/app/components/workflow/nodes/code/code-parser.spec.ts
@ -57,7 +57,7 @@ describe('extractFunctionParams', () => {
    })
  })

-  // JavaScriptのテストケース
+  // JavaScript のテストケース
  describe('JavaScript', () => {
    test('handles no parameters', () => {
      const result = extractFunctionParams(SAMPLE_CODES.javascript.noParams, CodeLanguage.javascript)
@ -180,7 +180,7 @@ function main(name, age, city) {
 }

 describe('extractReturnType', () => {
-  // Python3のテスト
+  // Python3 のテスト
  describe('Python3', () => {
    test('extracts single return value', () => {
      const result = extractReturnType(RETURN_TYPE_SAMPLES.python3.singleReturn, CodeLanguage.python3)
@ -247,7 +247,7 @@ describe('extractReturnType', () => {
    })
  })

-  // JavaScriptのテスト
+  // JavaScript のテスト
  describe('JavaScript', () => {
    test('extracts single return value', () => {
      const result = extractReturnType(RETURN_TYPE_SAMPLES.javascript.singleReturn, CodeLanguage.javascript)
--- a/web/app/components/workflow/nodes/code/code-parser.ts
+++ b/web/app/components/workflow/nodes/code/code-parser.ts
@ -31,7 +31,7 @@ export const extractReturnType = (code: string, language: CodeLanguage): OutputV
  if (returnIndex === -1)
    return {}

-  // returnから始まる部分文字列を取得
+  // return から始まる部分文字列を取得
  const codeAfterReturn = codeWithoutComments.slice(returnIndex)

  let bracketCount = 0
--- a/web/app/components/workflow/nodes/end/node.tsx
+++ b/web/app/components/workflow/nodes/end/node.tsx
@ -52,7 +52,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
          isChatMode,
        })
        return (
-          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-components-badge-white-to-dark px-1 text-xs font-normal text-text-secondary'>
+          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
            <div className='flex items-center text-xs font-medium text-text-tertiary'>
              {!isEnv && !isChatVar && (
                <>
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BodyType, type HttpNodeType, Method } from '../types'
+import { BodyPayloadValueType, BodyType, type HttpNodeType, Method } from '../types'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Textarea from '@/app/components/base/textarea'
@ -51,11 +51,16 @@ const parseCurl = (curlCommand: string): { node: HttpNodeType | null; error: str
      case '-d':
      case '--data':
      case '--data-raw':
-      case '--data-binary':
+      case '--data-binary': {
        if (i + 1 >= args.length)
          return { node: null, error: 'Missing data value after -d, --data, --data-raw, or --data-binary.' }
-        node.body = { type: BodyType.rawText, data: args[++i].replace(/^['"]|['"]$/g, '') }
+        const bodyPayload = [{
+          type: BodyPayloadValueType.text,
+          value: args[++i].replace(/^['"]|['"]$/g, ''),
+        }]
+        node.body = { type: BodyType.rawText, data: bodyPayload }
        break
+      }
      case '-F':
      case '--form': {
        if (i + 1 >= args.length)
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@ -42,6 +42,12 @@ const useConfig = (id: string, payload: HttpNodeType) => {
          data: transformToBodyPayload(bodyData, [BodyType.formData, BodyType.xWwwFormUrlencoded].includes(newInputs.body.type)),
        }
      }
+      else if (!bodyData) {
+        newInputs.body = {
+          ...newInputs.body,
+          data: [],
+        }
+      }

      setInputs(newInputs)
      setIsDataReady(true)
@ -151,7 +157,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
    inputs.url,
    inputs.headers,
    inputs.params,
-    typeof inputs.body.data === 'string' ? inputs.body.data : inputs.body.data.map(item => item.value).join(''),
+    typeof inputs.body.data === 'string' ? inputs.body.data : inputs.body.data?.map(item => item.value).join(''),
    fileVarInputs,
  ])

--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-input.tsx
@ -37,6 +37,9 @@ const ConditionInput = ({
          acc[node.id] = {
            title: node.data.title,
            type: node.data.type,
+            width: node.width,
+            height: node.height,
+            position: node.position,
          }
          if (node.data.type === BlockEnum.Start) {
            acc.sys = {
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@ -55,7 +55,7 @@ const DatasetItem: FC<Props> = ({
  }, [onRemove])

  return (
-    <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-xl
+    <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-lg
      border-[0.5px] border-components-panel-border-subtle px-2
      ${isDeleteHovered
      ? 'border-state-destructive-border bg-state-destructive-hover'
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx.tsx
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
@ -124,11 +124,11 @@ const ConditionItem = ({
      )}>
        <div className='flex items-center p-1'>
          <div className='w-0 grow'>
-            <div className='inline-flex h-6 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-1 pr-1.5 shadow-xs'>
+            <div className='flex h-6 min-w-0 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-1 pr-1.5 shadow-xs'>
              <div className='mr-0.5 p-[1px]'>
                <MetadataIcon type={currentMetadata?.type} className='h-3 w-3' />
              </div>
-              <div className='system-xs-medium mr-0.5 text-text-secondary'>{currentMetadata?.name}</div>
+              <div className='system-xs-medium mr-0.5 min-w-0 flex-1 truncate text-text-secondary'>{currentMetadata?.name}</div>
              <div className='system-xs-regular text-text-tertiary'>{currentMetadata?.type}</div>
            </div>
          </div>
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx
@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import ConditionValueMethod from './condition-value-method'
 import type { ConditionValueMethodProps } from './condition-value-method'
 import ConditionVariableSelector from './condition-variable-selector'
-import ConditionCommonVariableSelector from './condition-common-variable-selector.tsx'
+import ConditionCommonVariableSelector from './condition-common-variable-selector'
 import type {
  Node,
  NodeOutPutVar,
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx
@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import ConditionValueMethod from './condition-value-method'
 import type { ConditionValueMethodProps } from './condition-value-method'
 import ConditionVariableSelector from './condition-variable-selector'
-import ConditionCommonVariableSelector from './condition-common-variable-selector.tsx'
+import ConditionCommonVariableSelector from './condition-common-variable-selector'
 import type {
  Node,
  NodeOutPutVar,
--- a/web/app/components/workflow/nodes/list-operator/panel.tsx
+++ b/web/app/components/workflow/nodes/list-operator/panel.tsx
@ -97,16 +97,14 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
          {inputs.extract_by?.enabled
            ? (
              <div className='flex items-center justify-between'>
-                {hasSubVariable && (
-                  <div className='mr-2 grow'>
-                    <ExtractInput
-                      value={inputs.extract_by.serial as string}
-                      onChange={handleExtractsChange}
-                      readOnly={readOnly}
-                      nodeId={id}
-                    />
-                  </div>
-                )}
+                <div className='mr-2 grow'>
+                  <ExtractInput
+                    value={inputs.extract_by.serial as string}
+                    onChange={handleExtractsChange}
+                    readOnly={readOnly}
+                    nodeId={id}
+                  />
+                </div>
              </div>
            )
            : null}
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@ -28,6 +28,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
  const { theme } = useTheme()
  const monacoRef = useRef<any>(null)
  const editorRef = useRef<any>(null)
+  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (monacoRef.current) {
@ -74,6 +75,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
      onUpdate?.(value)
  }, [onUpdate])

+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      editorRef.current?.layout()
+    })
+
+    if (containerRef.current)
+      resizeObserver.observe(containerRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
  return (
    <div className={classNames('flex flex-col h-full bg-components-input-bg-normal overflow-hidden', className)}>
      <div className='flex items-center justify-between pl-2 pr-1 pt-1'>
@ -102,9 +116,11 @@ const CodeEditor: FC<CodeEditorProps> = ({
          </Tooltip>
        </div>
      </div>
-      <div className={classNames('relative', editorWrapperClassName)}>
+      <div
+        ref={containerRef}
+        className={classNames('relative overflow-hidden', editorWrapperClassName)}
+      >
        <Editor
-          height='100%'
          defaultLanguage='json'
          value={value}
          onChange={handleEditorChange}
@ -117,7 +133,6 @@ const CodeEditor: FC<CodeEditorProps> = ({
            scrollBeyondLastLine: false,
            wordWrap: 'on',
            wrappingIndent: 'same',
-            // Add these options
            overviewRulerBorder: false,
            hideCursorInOverviewRuler: true,
            renderLineHighlightOnlyWhenFocus: false,
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@ -21,8 +21,8 @@ import { MittProvider, VisualEditorContextProvider, useMittContext } from './vis
 import ErrorMessage from './error-message'
 import { useVisualEditorStore } from './visual-editor/store'
 import Toast from '@/app/components/base/toast'
-import { useGetLanguage } from '@/context/i18n'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
+import { useDocLink } from '@/context/i18n'

 type JsonSchemaConfigProps = {
  defaultSchema?: SchemaRoot
@ -47,21 +47,13 @@ const DEFAULT_SCHEMA: SchemaRoot = {
  additionalProperties: false,
 }

-const HELP_DOC_URL = {
-  zh_Hans: 'https://docs.dify.ai/zh-hans/guides/workflow/structured-outputs',
-  en_US: 'https://docs.dify.ai/en/guides/workflow/structured-outputs',
-  ja_JP: 'https://docs.dify.ai/ja-jp/guides/workflow/structured-outputs',
-}
-
-type LocaleKey = keyof typeof HELP_DOC_URL
-
 const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
  defaultSchema,
  onSave,
  onClose,
 }) => {
  const { t } = useTranslation()
-  const locale = useGetLanguage() as LocaleKey
+  const docLink = useDocLink()
  const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
  const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
  const [json, setJson] = useState(JSON.stringify(jsonSchema, null, 2))
@ -260,7 +252,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
      <div className='flex items-center gap-x-2 p-6 pt-5'>
        <a
          className='flex grow items-center gap-x-1 text-text-accent'
-          href={HELP_DOC_URL[locale]}
+          href={docLink('/guides/workflow/structured-outputs')}
          target='_blank'
          rel='noopener noreferrer'
        >
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@ -11,7 +11,6 @@ import { ModelModeType } from '@/types/app'
 import { Theme } from '@/types/app'
 import { SchemaGeneratorDark, SchemaGeneratorLight } from './assets'
 import cn from '@/utils/classnames'
-import type { ModelInfo } from './prompt-editor'
 import PromptEditor from './prompt-editor'
 import GeneratedResult from './generated-result'
 import { useGenerateStructuredOutputRules } from '@/service/use-common'
@ -19,7 +18,6 @@ import Toast from '@/app/components/base/toast'
 import { type FormValue, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useVisualEditorStore } from '../visual-editor/store'
-import { useTranslation } from 'react-i18next'
 import { useMittContext } from '../visual-editor/context'

 type JsonSchemaGeneratorProps = {
@ -36,10 +34,12 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
  onApply,
  crossAxisOffset,
 }) => {
-  const { t } = useTranslation()
+  const localModel = localStorage.getItem('auto-gen-model')
+    ? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model
+    : null
  const [open, setOpen] = useState(false)
  const [view, setView] = useState(GeneratorView.promptEditor)
-  const [model, setModel] = useState<Model>({
+  const [model, setModel] = useState<Model>(localModel || {
    name: '',
    provider: '',
    mode: ModelModeType.completion,
@ -58,11 +58,19 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({

  useEffect(() => {
    if (defaultModel) {
-      setModel(prev => ({
-        ...prev,
-        name: defaultModel.model,
-        provider: defaultModel.provider.provider,
-      }))
+      const localModel = localStorage.getItem('auto-gen-model')
+        ? JSON.parse(localStorage.getItem('auto-gen-model') || '')
+        : null
+      if (localModel) {
+        setModel(localModel)
+      }
+      else {
+        setModel(prev => ({
+          ...prev,
+          name: defaultModel.model,
+          provider: defaultModel.provider.provider,
+        }))
+      }
    }
  }, [defaultModel])

@ -77,22 +85,25 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
    setOpen(false)
  }, [])

-  const handleModelChange = useCallback((model: ModelInfo) => {
-    setModel(prev => ({
-      ...prev,
-      provider: model.provider,
-      name: model.modelId,
-      mode: model.mode as ModelModeType,
-    }))
-  }, [])
+  const handleModelChange = useCallback((newValue: { modelId: string; provider: string; mode?: string; features?: string[] }) => {
+    const newModel = {
+      ...model,
+      provider: newValue.provider,
+      name: newValue.modelId,
+      mode: newValue.mode as ModelModeType,
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])

  const handleCompletionParamsChange = useCallback((newParams: FormValue) => {
-    setModel(prev => ({
-      ...prev,
+    const newModel = {
+      ...model,
      completion_params: newParams as CompletionParams,
-    }),
-    )
-  }, [])
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])

  const { mutateAsync: generateStructuredOutputRules, isPending: isGenerating } = useGenerateStructuredOutputRules()

--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
@ -12,7 +12,7 @@ const SchemaEditor: FC<SchemaEditorProps> = ({
 }) => {
  return (
    <CodeEditor
-      className='rounded-xl'
+      className='grow rounded-xl'
      editorWrapperClassName='grow'
      value={schema}
      onUpdate={onUpdate}
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@ -9,7 +9,6 @@ import GetAutomaticResModal from '@/app/components/app/configuration/config/auto
 import { AppType } from '@/types/app'
 import type { AutomaticRes } from '@/service/debug'
 import type { ModelConfig } from '@/app/components/workflow/types'
-import type { Model } from '@/types/app'

 type Props = {
  className?: string
@ -20,7 +19,6 @@ type Props = {
 const PromptGeneratorBtn: FC<Props> = ({
  className,
  onGenerated,
-  modelConfig,
 }) => {
  const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
  const handleAutomaticRes = useCallback((res: AutomaticRes) => {
@ -40,7 +38,6 @@ const PromptGeneratorBtn: FC<Props> = ({
          isShow={showAutomatic}
          onClose={showAutomaticFalse}
          onFinished={handleAutomaticRes}
-          model={modelConfig as Model}
          isInLLMNode
        />
      )}
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@ -247,11 +247,11 @@ const useConfig = (id: string, payload: LLMNodeType) => {
  }, [inputs, setInputs])

  const handlePromptChange = useCallback((newPrompt: PromptItem[] | PromptItem) => {
-    const newInputs = produce(inputRef.current, (draft) => {
+    const newInputs = produce(inputs, (draft) => {
      draft.prompt_template = newPrompt
    })
    setInputs(newInputs)
-  }, [setInputs])
+  }, [inputs, setInputs])

  const handleMemoryChange = useCallback((newMemory?: Memory) => {
    const newInputs = produce(inputs, (draft) => {
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@ -0,0 +1,247 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import produce from 'immer'
+import { useTranslation } from 'react-i18next'
+import type { ToolVarInputs } from '../types'
+import { VarType as VarKindType } from '../types'
+import cn from '@/utils/classnames'
+import type { ValueSelector, Var } from '@/app/components/workflow/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 VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+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/plugins/plugin-detail-panel/model-selector'
+import { noop } from 'lodash-es'
+
+type Props = {
+  readOnly: boolean
+  nodeId: string
+  schema: CredentialFormSchema[]
+  value: ToolVarInputs
+  onChange: (value: ToolVarInputs) => void
+  onOpen?: (index: number) => void
+  isSupportConstantValue?: boolean
+  filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
+}
+
+const InputVarList: FC<Props> = ({
+  readOnly,
+  nodeId,
+  schema,
+  value,
+  onChange,
+  onOpen = noop,
+  isSupportConstantValue,
+  filterVar,
+}) => {
+  const language = useLanguage()
+  const { t } = useTranslation()
+  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    },
+  })
+  const paramType = (type: string) => {
+    if (type === FormTypeEnum.textNumber)
+      return 'Number'
+    else if (type === FormTypeEnum.file || type === FormTypeEnum.files)
+      return 'Files'
+    else if (type === FormTypeEnum.appSelector)
+      return 'AppSelector'
+    else if (type === FormTypeEnum.modelSelector)
+      return 'ModelSelector'
+    else if (type === FormTypeEnum.toolSelector)
+      return 'ToolSelector'
+    else
+      return 'String'
+  }
+
+  const handleNotMixedTypeChange = useCallback((variable: string) => {
+    return (varValue: ValueSelector | string, varKindType: VarKindType) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        const target = draft[variable]
+        if (target) {
+          target.type = varKindType
+          target.value = varValue
+        }
+        else {
+          draft[variable] = {
+            type: varKindType,
+            value: varValue,
+          }
+        }
+      })
+      onChange(newValue)
+    }
+  }, [value, onChange])
+
+  const handleMixedTypeChange = useCallback((variable: string) => {
+    return (itemValue: string) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        const target = draft[variable]
+        if (target) {
+          target.value = itemValue
+        }
+        else {
+          draft[variable] = {
+            type: VarKindType.mixed,
+            value: itemValue,
+          }
+        }
+      })
+      onChange(newValue)
+    }
+  }, [value, onChange])
+
+  const handleFileChange = useCallback((variable: string) => {
+    return (varValue: ValueSelector | string) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable] = {
+          type: VarKindType.variable,
+          value: varValue,
+        }
+      })
+      onChange(newValue)
+    }
+  }, [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: any) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable] = {
+          ...draft[variable],
+          ...model,
+        } as any
+      })
+      onChange(newValue)
+    }
+  }, [onChange, value])
+
+  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
+  const handleInputFocus = useCallback((variable: string) => {
+    return (value: boolean) => {
+      setInputsIsFocus((prev) => {
+        return {
+          ...prev,
+          [variable]: value,
+        }
+      })
+    }
+  }, [])
+  const handleOpen = useCallback((index: number) => {
+    return () => onOpen(index)
+  }, [onOpen])
+  return (
+    <div className='space-y-3'>
+      {
+        schema.map((schema, index) => {
+          const {
+            variable,
+            label,
+            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 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'>
+              <div className='flex h-[18px] items-center space-x-2'>
+                <span className='code-sm-semibold text-text-secondary'>{label[language] || label.en_US}</span>
+                <span className='system-xs-regular text-text-tertiary'>{paramType(type)}</span>
+                {required && <span className='system-xs-regular text-util-colors-orange-dark-orange-dark-600'>Required</span>}
+              </div>
+              {isString && (
+                <Input
+                  className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
+                  value={varInput?.value as string || ''}
+                  onChange={handleMixedTypeChange(variable)}
+                  readOnly={readOnly}
+                  nodesOutputVars={availableVars}
+                  availableNodes={availableNodesWithParent}
+                  onFocusChange={handleInputFocus(variable)}
+                  placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
+                  placeholderClassName='!leading-[21px]'
+                />
+              )}
+              {(isNumber || isSelect) && (
+                <VarReferencePicker
+                  readonly={readOnly}
+                  isShowNodeName
+                  nodeId={nodeId}
+                  value={varInput?.type === VarKindType.constant ? (varInput?.value ?? '') : (varInput?.value ?? [])}
+                  onChange={handleNotMixedTypeChange(variable)}
+                  onOpen={handleOpen(index)}
+                  defaultVarKindType={varInput?.type || (isNumber ? VarKindType.constant : VarKindType.variable)}
+                  isSupportConstantValue={isSupportConstantValue}
+                  filterVar={isNumber ? filterVar : undefined}
+                  availableVars={isSelect ? availableVars : undefined}
+                  schema={schema}
+                />
+              )}
+              {isFile && (
+                <VarReferencePicker
+                  readonly={readOnly}
+                  isShowNodeName
+                  nodeId={nodeId}
+                  value={varInput?.value || []}
+                  onChange={handleFileChange(variable)}
+                  onOpen={handleOpen(index)}
+                  defaultVarKindType={VarKindType.variable}
+                  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
+                  value={varInput as any}
+                  setModel={handleModelChange(variable)}
+                  readonly={readOnly}
+                  scope={scope}
+                />
+              )}
+              {tooltip && <div className='body-xs-regular text-text-tertiary'>{tooltip[language] || tooltip.en_US}</div>}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+export default React.memo(InputVarList)
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
              className='w-full'
              onClick={showSetAuthModal}
            >
-              {t(`${i18nPrefix}.toAuthorize`)}
+              {t(`${i18nPrefix}.authorize`)}
            </Button>
          </div>
        </>