string

2026-05-05 18:08:07 +08:00 · 2025-06-09 22:00:24 +08:00
parent e9d196261b
commit c797e88e95
4 changed files with 51 additions and 52 deletions
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@ -1,5 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@ -7,15 +9,17 @@ import { FormTypeEnum } from '@/app/components/header/account-setting/model-prov
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { VarType } from '@/app/components/workflow/types'

-import type { ValueSelector } from '@/app/components/workflow/types'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import FormInputTypeSwitch from './form-input-type-switch'
+import MixedInput 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 Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
 import FormInputBoolean from './form-input-boolean'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
-// import cn from '@/utils/classnames'
+import cn from '@/utils/classnames'

 type Props = {
  readOnly: boolean
@ -23,7 +27,6 @@ type Props = {
  schema: CredentialFormSchema
  value: ToolVarInputs
  onChange: (value: any) => void
-  onOpen?: (index: number) => void
  hideTypeSwitch?: boolean
 }

@ -35,6 +38,9 @@ const FormInputItem: FC<Props> = ({
  onChange,
  hideTypeSwitch,
 }) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+
  const {
    placeholder,
    variable,
@ -43,7 +49,6 @@ const FormInputItem: FC<Props> = ({
    options,
    scope,
  } = schema as any
-  const language = useLanguage()
  const varInput = value[variable]
  const isString = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
  const isNumber = type === FormTypeEnum.textNumber
@ -54,9 +59,15 @@ const FormInputItem: FC<Props> = ({
  const isAppSelector = type === FormTypeEnum.appSelector
  const isModelSelector = type === FormTypeEnum.modelSelector
  const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
-
  const showTypeSwitch = isNumber || isObject || isArray

+  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    },
+  })
+
  const targetVarType = () => {
    if (isString)
      return VarType.string
@ -144,23 +155,48 @@ const FormInputItem: FC<Props> = ({
    })
  }

+  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
+  const handleInputFocus = useCallback((variable: string) => {
+    return (value: boolean) => {
+      setInputsIsFocus((prev) => {
+        return {
+          ...prev,
+          [variable]: value,
+        }
+      })
+    }
+  }, [])
+
  return (
    <div className='flex gap-1'>
      {showTypeSwitch && !hideTypeSwitch && (
-        <FormInputTypeSwitch value={varInput.type} onChange={handleTypeChange}/>
+        <FormInputTypeSwitch value={varInput?.type} onChange={handleTypeChange}/>
      )}
-      {isNumber && varInput.type === VarKindType.constant && (
+      {isString && (
+        <MixedInput
+          className={cn(inputsIsFocus[variable] ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'grow rounded-lg border px-3 py-[6px]')}
+          value={varInput?.value as string || ''}
+          onChange={handleValueChange}
+          readOnly={readOnly}
+          nodesOutputVars={availableVars}
+          availableNodes={availableNodesWithParent}
+          onFocusChange={handleInputFocus(variable)}
+          placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
+          placeholderClassName='!leading-[21px]'
+        />
+      )}
+      {isNumber && varInput?.type === VarKindType.constant && (
        <Input
          className='h-8 grow'
          type='number'
-          value={varInput.value || ''}
+          value={varInput?.value || ''}
          onChange={e => handleValueChange(e.target.value)}
          placeholder={placeholder?.[language] || placeholder?.en_US}
        />
      )}
      {isBoolean && (
        <FormInputBoolean
-          value={varInput.value as boolean}
+          value={varInput?.value as boolean}
          onChange={handleValueChange}
        />
      )}
@ -183,7 +219,7 @@ const FormInputItem: FC<Props> = ({
        <AppSelector
          disabled={readOnly}
          scope={scope || 'all'}
-          value={varInput.value as any}
+          value={varInput?.value as any}
          onSelect={handleValueChange}
        />
      )}
@ -192,13 +228,13 @@ const FormInputItem: FC<Props> = ({
          popupClassName='!w-[387px]'
          isAdvancedMode
          isInWorkflow
-          value={varInput.value as any}
+          value={varInput?.value as any}
          setModel={handleValueChange}
          readonly={readOnly}
          scope={scope}
        />
      )}
-      {varInput.type === VarKindType.variable && (
+      {varInput?.type === VarKindType.variable && (
        <VarReferencePicker
          className='h-8 grow'
          readonly={readOnly}
--- a/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
@ -1,9 +1,7 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
 import type { ToolVarInputs } from '../../types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { noop } from 'lodash-es'
 import ToolFormItem from './item'

 type Props = {
@ -21,11 +19,7 @@ const ToolForm: FC<Props> = ({
  schema,
  value,
  onChange,
-  onOpen = noop,
 }) => {
-  const handleOpen = useCallback((index: number) => {
-    return () => onOpen(index)
-  }, [onOpen])
  return (
    <div className='space-y-1'>
      {
@ -37,7 +31,6 @@ const ToolForm: FC<Props> = ({
            schema={schema}
            value={value}
            onChange={onChange}
-            onOpen={handleOpen(index)}
          />
        ))
      }
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@ -17,8 +17,6 @@ type Props = {
  schema: CredentialFormSchema
  value: ToolVarInputs
  onChange: (value: ToolVarInputs) => void
-  onOpen?: (index: number) => void
-  showDescription?: boolean
 }

 const ToolFormItem: FC<Props> = ({
@ -27,11 +25,11 @@ const ToolFormItem: FC<Props> = ({
  schema,
  value,
  onChange,
-  showDescription,
 }) => {
  const language = useLanguage()
  const { label, type, required, tooltip } = schema
  const showSchemaButton = type === FormTypeEnum.object || type === FormTypeEnum.array
+  const showDescription = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput

  return (
    <div className='space-y-0.5 py-1'>
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@ -4,12 +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 BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
@ -34,8 +32,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
    inputs,
    toolInputVarSchema,
    setInputVar,
-    handleOnVarOpen,
-    filterVar,
    toolSettingSchema,
    toolSettingValue,
    setToolSettingValue,
@ -94,29 +90,18 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
              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}
              />
-              {/* <ToolForm
-                readOnly={readOnly}
-                nodeId={id}
-                schema={toolInputVarSchema as any}
-                value={inputs.tool_parameters}
-                onChange={setInputVar}
-                onOpen={handleOnVarOpen}
-              /> */}
            </Field>
          )}

          {toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
-            <Split />
+            <Split className='mt-1' />
          )}

          {toolSettingSchema.length > 0 && (
@ -126,19 +111,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
                collapsed={collapsed}
                onCollapse={setCollapsed}
              >
-                {/* <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}
-                /> */}
                <ToolForm
                  readOnly={readOnly}
                  nodeId={id}