FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/workflow/nodes/tool/components/input-var-list.tsx

@@ -0,0 +1,161 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import produce from 'immer'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import type { ToolVarInputs } from '../types'
+import { VarType as VarKindType } from '../types'
+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'
+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 = () => { },
+  isSupportConstantValue,
+  filterVar,
+}) => {
+  const language = useLanguage()
+
+  // const valueList = (() => {
+  //   const list = []
+  //   Object.keys(value).forEach((key) => {
+  //     list.push({
+  //       variable: key,
+  //       ...value[key],
+  //     })
+  //   })
+  // })()
+
+  const { t } = useTranslation()
+  const { availableVars, availableNodes } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number].includes(varPayload.type)
+    },
+  })
+
+  const handleNotMixedTypeChange = useCallback((variable: string) => {
+    return (varValue: ValueSelector | string, varKindType: VarKindType) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        const target = draft[variable]
+        if (target) {
+          if (!isSupportConstantValue || varKindType === VarKindType.variable) {
+            if (isSupportConstantValue)
+              target.type = VarKindType.variable
+
+            target.value = varValue as ValueSelector
+          }
+          else {
+            target.type = VarKindType.constant
+            target.value = varValue as string
+          }
+        }
+        else {
+          draft[variable] = {
+            type: varKindType,
+            value: varValue,
+          }
+        }
+      })
+      onChange(newValue)
+    }
+  }, [value, onChange, isSupportConstantValue])
+
+  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 [isFocus, setIsFocus] = useState(false)
+
+  const handleOpen = useCallback((index: number) => {
+    return () => onOpen(index)
+  }, [onOpen])
+  return (
+    <div className='space-y-3'>
+      {
+        schema.map(({
+          variable,
+          label,
+          type,
+          required,
+          tooltip,
+        }, index) => {
+          const varInput = value[variable]
+          const isString = type !== FormTypeEnum.textNumber
+          return (
+            <div key={variable} className='space-y-1'>
+              <div className='flex items-center h-[18px] space-x-2'>
+                <span className='text-[13px] font-medium text-gray-900'>{label[language] || label.en_US}</span>
+                <span className='text-xs font-normal text-gray-500'>{!isString ? 'Number' : 'String'}</span>
+                {required && <span className='leading-[18px] text-xs font-normal text-[#EC4A0A]'>Required</span>}
+              </div>
+              {isString
+                ? (<Input
+                  className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
+                  value={varInput?.value as string || ''}
+                  onChange={handleMixedTypeChange(variable)}
+                  readOnly={readOnly}
+                  nodesOutputVars={availableVars}
+                  availableNodes={availableNodes}
+                  onFocusChange={setIsFocus}
+                  placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
+                  placeholderClassName='!leading-[21px]'
+                />)
+                : (
+                  <VarReferencePicker
+                    readonly={readOnly}
+                    isShowNodeName
+                    nodeId={nodeId}
+                    value={varInput?.type === VarKindType.constant ? (varInput?.value || '') : (varInput?.value || [])}
+                    onChange={handleNotMixedTypeChange(variable)}
+                    onOpen={handleOpen(index)}
+                    isSupportConstantValue={isSupportConstantValue}
+                    defaultVarKindType={varInput?.type}
+                    filterVar={filterVar}
+                  />
+                )}
+
+              {tooltip && <div className='leading-[18px] text-xs font-normal text-gray-600'>{tooltip[language] || tooltip.en_US}</div>}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+export default React.memo(InputVarList)

web/app/components/workflow/nodes/tool/default.ts

@@ -0,0 +1,68 @@
+import { BlockEnum } from '../../types'
+import type { NodeDefault } from '../../types'
+import type { ToolNodeType } from './types'
+import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
+
+const i18nPrefix = 'workflow.errorMsg'
+
+const nodeDefault: NodeDefault<ToolNodeType> = {
+  defaultValue: {
+    tool_parameters: {},
+    tool_configurations: {},
+  },
+  getAvailablePrevNodes(isChatMode: boolean) {
+    const nodes = isChatMode
+      ? ALL_CHAT_AVAILABLE_BLOCKS
+      : ALL_COMPLETION_AVAILABLE_BLOCKS.filter(type => type !== BlockEnum.End)
+    return nodes
+  },
+  getAvailableNextNodes(isChatMode: boolean) {
+    const nodes = isChatMode ? ALL_CHAT_AVAILABLE_BLOCKS : ALL_COMPLETION_AVAILABLE_BLOCKS
+    return nodes
+  },
+  checkValid(payload: ToolNodeType, t: any, moreDataForCheckValid: any) {
+    const { toolInputsSchema, toolSettingSchema, language, notAuthed } = moreDataForCheckValid
+    let errorMessages = ''
+    if (notAuthed)
+      errorMessages = t(`${i18nPrefix}.authRequired`)
+
+    if (!errorMessages) {
+      toolInputsSchema.filter((field: any) => {
+        return field.required
+      }).forEach((field: any) => {
+        const targetVar = payload.tool_parameters[field.variable]
+        if (!targetVar) {
+          errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label })
+          return
+        }
+        const { type: variable_type, value } = targetVar
+        if (variable_type === VarKindType.variable) {
+          if (!errorMessages && (!value || value.length === 0))
+            errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label })
+        }
+        else {
+          if (!errorMessages && (value === undefined || value === null || value === ''))
+            errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label })
+        }
+      })
+    }
+
+    if (!errorMessages) {
+      toolSettingSchema.filter((field: any) => {
+        return field.required
+      }).forEach((field: any) => {
+        const value = payload.tool_configurations[field.variable]
+        if (!errorMessages && (value === undefined || value === null || value === ''))
+          errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
+      })
+    }
+
+    return {
+      isValid: !errorMessages,
+      errorMessage: errorMessages,
+    }
+  },
+}
+
+export default nodeDefault

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

@@ -0,0 +1,35 @@
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
+
+const Node: FC<NodeProps<ToolNodeType>> = ({
+  data,
+}) => {
+  const { tool_configurations } = data
+  const toolConfigs = Object.keys(tool_configurations || {})
+
+  if (!toolConfigs.length)
+    return null
+
+  return (
+    <div className='mb-1 px-3 py-1'>
+      <div className='space-y-0.5'>
+        {toolConfigs.map((key, index) => (
+          <div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
+            <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium text-gray-500 uppercase'>
+              {key}
+            </div>
+            <div title={tool_configurations[key]} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
+              {tool_configurations[key]}
+            </div>
+          </div>
+
+        ))}
+
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Node)

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

@@ -0,0 +1,153 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Split from '../_base/components/split'
+import type { ToolNodeType } from './types'
+import useConfig from './use-config'
+import InputVarList from './components/input-var-list'
+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'
+import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+import ResultPanel from '@/app/components/workflow/run/result-panel'
+
+const i18nPrefix = 'workflow.nodes.tool'
+
+const Panel: FC<NodePanelProps<ToolNodeType>> = ({
+  id,
+  data,
+}) => {
+  const { t } = useTranslation()
+
+  const {
+    readOnly,
+    inputs,
+    toolInputVarSchema,
+    setInputVar,
+    handleOnVarOpen,
+    filterVar,
+    toolSettingSchema,
+    toolSettingValue,
+    setToolSettingValue,
+    currCollection,
+    isShowAuthBtn,
+    showSetAuth,
+    showSetAuthModal,
+    hideSetAuthModal,
+    handleSaveAuth,
+    isLoading,
+    isShowSingleRun,
+    hideSingleRun,
+    singleRunForms,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runResult,
+  } = useConfig(id, data)
+
+  if (isLoading) {
+    return <div className='flex h-[200px] items-center justify-center'>
+      <Loading />
+    </div>
+  }
+
+  return (
+    <div className='mt-2'>
+      {!readOnly && isShowAuthBtn && (
+        <>
+          <div className='px-4 pb-3'>
+            <Button
+              type='primary'
+              className='w-full !h-8'
+              onClick={showSetAuthModal}
+            >
+              {t(`${i18nPrefix}.toAuthorize`)}
+            </Button>
+          </div>
+        </>
+      )}
+      {!isShowAuthBtn && <>
+        <div className='px-4 pb-4 space-y-4'>
+          {toolInputVarSchema.length > 0 && (
+            <Field
+              title={t(`${i18nPrefix}.inputVars`)}
+            >
+              <InputVarList
+                readOnly={readOnly}
+                nodeId={id}
+                schema={toolInputVarSchema as any}
+                value={inputs.tool_parameters}
+                onChange={setInputVar}
+                filterVar={filterVar}
+                isSupportConstantValue
+                onOpen={handleOnVarOpen}
+              />
+            </Field>
+          )}
+
+          {toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
+            <Split />
+          )}
+
+          <Form
+            className='space-y-4'
+            itemClassName='!py-0'
+            fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase'
+            value={toolSettingValue}
+            onChange={setToolSettingValue}
+            formSchemas={toolSettingSchema as any}
+            isEditMode={false}
+            showOnVariableMap={{}}
+            validating={false}
+            inputClassName='!bg-gray-50'
+            readonly={readOnly}
+          />
+        </div>
+      </>}
+
+      {showSetAuth && (
+        <ConfigCredential
+          collection={currCollection!}
+          onCancel={hideSetAuthModal}
+          onSaved={handleSaveAuth}
+          isHideRemoveBtn
+        />
+      )}
+
+      <div className='px-4 pt-4 pb-2'>
+        <OutputVars>
+          <>
+            <VarItem
+              name='text'
+              type='Array[Object]'
+              description={t(`${i18nPrefix}.outputVars.text`)}
+            />
+            <VarItem
+              name='files'
+              type='Array[File]'
+              description={t(`${i18nPrefix}.outputVars.files.title`)}
+            />
+          </>
+        </OutputVars>
+      </div>
+
+      {isShowSingleRun && (
+        <BeforeRunForm
+          nodeName={inputs.title}
+          onHide={hideSingleRun}
+          forms={singleRunForms}
+          runningStatus={runningStatus}
+          onRun={handleRun}
+          onStop={handleStop}
+          result={<ResultPanel {...runResult} showSteps={false} />}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(Panel)

web/app/components/workflow/nodes/tool/types.ts

@@ -0,0 +1,22 @@
+import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
+
+export enum VarType {
+  variable = 'variable',
+  constant = 'constant',
+  mixed = 'mixed',
+}
+
+export type ToolVarInputs = Record<string, {
+  type: VarType
+  value?: string | ValueSelector
+}>
+
+export type ToolNodeType = CommonNodeType & {
+  provider_id: string
+  provider_type: 'builtin'
+  provider_name: string
+  tool_name: string
+  tool_label: string
+  tool_parameters: ToolVarInputs
+  tool_configurations: Record<string, any>
+}

web/app/components/workflow/nodes/tool/use-config.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { useBoolean } from 'ahooks'
+import { useStore } from '../../store'
+import { type ToolNodeType, type ToolVarInputs, VarType } from './types'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+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 Toast from '@/app/components/base/toast'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
+import { VarType as VarVarType } from '@/app/components/workflow/types'
+import type { InputVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
+import {
+  useFetchToolsData,
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
+
+const useConfig = (id: string, payload: ToolNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const { handleFetchAllTools } = useFetchToolsData()
+  const { t } = useTranslation()
+
+  const language = useLanguage()
+  const { inputs, setInputs } = useNodeCrud<ToolNodeType>(id, payload)
+  /*
+  * tool_configurations: tool setting, not dynamic setting
+  * tool_parameters: tool dynamic setting(by user)
+  */
+  const { provider_id, provider_type, tool_name, tool_configurations } = inputs
+  const isBuiltIn = provider_type === CollectionType.builtIn
+  const buildInTools = useStore(s => s.buildInTools)
+  const customTools = useStore(s => s.customTools)
+  const currentTools = isBuiltIn ? buildInTools : customTools
+  const currCollection = currentTools.find(item => item.id === provider_id)
+
+  // Auth
+  const needAuth = !!currCollection?.allow_delete
+  const isAuthed = !!currCollection?.is_team_authorization
+  const isShowAuthBtn = isBuiltIn && needAuth && !isAuthed
+  const [showSetAuth, {
+    setTrue: showSetAuthModal,
+    setFalse: hideSetAuthModal,
+  }] = useBoolean(false)
+
+  const handleSaveAuth = useCallback(async (value: any) => {
+    await updateBuiltInToolCredential(currCollection?.name as string, value)
+
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    handleFetchAllTools(provider_type)
+    hideSetAuthModal()
+  }, [currCollection?.name, hideSetAuthModal, t, handleFetchAllTools, provider_type])
+
+  const currTool = currCollection?.tools.find(tool => tool.name === tool_name)
+  const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
+  const toolInputVarSchema = formSchemas.filter((item: any) => item.form === 'llm')
+  // use setting
+  const toolSettingSchema = formSchemas.filter((item: any) => item.form !== 'llm')
+  const [notSetDefaultValue, setNotSetDefaultValue] = useState(false)
+  const toolSettingValue = (() => {
+    if (notSetDefaultValue)
+      return tool_configurations
+
+    return addDefaultValue(tool_configurations, toolSettingSchema)
+  })()
+  const setToolSettingValue = useCallback((value: Record<string, any>) => {
+    setNotSetDefaultValue(true)
+    setInputs({
+      ...inputs,
+      tool_configurations: value,
+    })
+  }, [inputs, setInputs])
+
+  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 = {}
+    })
+    setInputs(inputsWithDefaultValue)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currTool])
+
+  // setting when call
+  const setInputVar = useCallback((value: ToolVarInputs) => {
+    setInputs({
+      ...inputs,
+      tool_parameters: value,
+    })
+  }, [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)
+
+  // single run
+  const [inputVarValues, doSetInputVarValues] = useState<Record<string, any>>({})
+  const setInputVarValues = (value: Record<string, any>) => {
+    doSetInputVarValues(value)
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    setRunInputData(value)
+  }
+  // fill single run form variable with constant value first time
+  const inputVarValuesWithConstantValue = () => {
+    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))
+          draft.tool_parameters[key].value = value
+      })
+    })
+    return res
+  }
+
+  const {
+    isShowSingleRun,
+    hideSingleRun,
+    getInputVars,
+    runningStatus,
+    setRunInputData,
+    handleRun: doHandleRun,
+    handleStop,
+    runResult,
+  } = useOneStepRun<ToolNodeType>({
+    id,
+    data: inputs,
+    defaultRunInputData: {},
+    moreDataForCheckValid: {
+      toolInputsSchema: (() => {
+        const formInputs: InputVar[] = []
+        toolInputVarSchema.forEach((item: any) => {
+          formInputs.push({
+            label: item.label[language] || item.label.en_US,
+            variable: item.variable,
+            type: item.type,
+            required: item.required,
+          })
+        })
+        return formInputs
+      })(),
+      notAuthed: isShowAuthBtn,
+      toolSettingSchema,
+      language,
+    },
+  })
+
+  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) => {
+    if (p.type === VarType.variable)
+      return `{{#${(p.value as ValueSelector).join('.')}#}}`
+
+    return p.value as string
+  }))
+
+  const singleRunForms = (() => {
+    const forms: FormProps[] = [{
+      inputs: varInputs,
+      values: inputVarValuesWithConstantValue(),
+      onChange: setInputVarValues,
+    }]
+    return forms
+  })()
+
+  const handleRun = (submitData: Record<string, any>) => {
+    const varTypeInputKeys = Object.keys(inputs.tool_parameters)
+      .filter(key => inputs.tool_parameters[key].type === VarType.variable)
+    const shouldAdd = varTypeInputKeys.length > 0
+    if (!shouldAdd) {
+      doHandleRun(submitData)
+      return
+    }
+    const addMissedVarData = { ...submitData }
+    Object.keys(submitData).forEach((key) => {
+      const value = submitData[key]
+      varTypeInputKeys.forEach((inputKey) => {
+        const inputValue = inputs.tool_parameters[inputKey].value as ValueSelector
+        if (`#${inputValue.join('.')}#` === key)
+          addMissedVarData[inputKey] = value
+      })
+    })
+    doHandleRun(addMissedVarData)
+  }
+
+  return {
+    readOnly,
+    inputs,
+    currTool,
+    toolSettingSchema,
+    toolSettingValue,
+    setToolSettingValue,
+    toolInputVarSchema,
+    setInputVar,
+    handleOnVarOpen,
+    filterVar,
+    currCollection,
+    isShowAuthBtn,
+    showSetAuth,
+    showSetAuthModal,
+    hideSetAuthModal,
+    handleSaveAuth,
+    isLoading,
+    isShowSingleRun,
+    hideSingleRun,
+    inputVarValues,
+    varInputs,
+    setInputVarValues,
+    singleRunForms,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runResult,
+  }
+}
+
+export default useConfig

web/app/components/workflow/nodes/tool/utils.ts

@@ -0,0 +1,5 @@
+import type { ToolNodeType } from './types'
+
+export const checkNodeValid = (payload: ToolNodeType) => {
+  return true
+}