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/if-else/components/condition-item.tsx

@@ -0,0 +1,248 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
+import { isComparisonOperatorNeedTranslate } from '../utils'
+import { VarType } from '../../../types'
+import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
+import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
+import Selector from '@/app/components/workflow/nodes/_base/components/selector'
+import Toast from '@/app/components/base/toast'
+
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+const Line = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="163" height="2" viewBox="0 0 163 2" fill="none">
+    <path d="M0 1H162.5" stroke="url(#paint0_linear_641_36452)" />
+    <defs>
+      <linearGradient id="paint0_linear_641_36452" x1="162.5" y1="9.99584" x2="6.6086e-06" y2="9.94317" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#F3F4F6" />
+        <stop offset="1" stopColor="#F3F4F6" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+)
+
+const getOperators = (type?: VarType) => {
+  switch (type) {
+    case VarType.string:
+      return [
+        ComparisonOperator.contains,
+        ComparisonOperator.notContains,
+        ComparisonOperator.startWith,
+        ComparisonOperator.endWith,
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case VarType.number:
+      return [
+        ComparisonOperator.equal,
+        ComparisonOperator.notEqual,
+        ComparisonOperator.largerThan,
+        ComparisonOperator.lessThan,
+        ComparisonOperator.largerThanOrEqual,
+        ComparisonOperator.lessThanOrEqual,
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case VarType.arrayString:
+    case VarType.arrayNumber:
+      return [
+        ComparisonOperator.contains,
+        ComparisonOperator.notContains,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case VarType.array:
+    case VarType.arrayObject:
+      return [
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    default:
+      return [
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+  }
+}
+
+type ItemProps = {
+  readonly: boolean
+  nodeId: string
+  payload: Condition
+  varType?: VarType
+  onChange: (newItem: Condition) => void
+  canRemove: boolean
+  onRemove?: () => void
+  isShowLogicalOperator?: boolean
+  logicalOperator: LogicalOperator
+  onLogicalOperatorToggle: () => void
+  filterVar: (varPayload: Var) => boolean
+}
+
+const Item: FC<ItemProps> = ({
+  readonly,
+  nodeId,
+  payload,
+  varType,
+  onChange,
+  canRemove,
+  onRemove = () => { },
+  isShowLogicalOperator,
+  logicalOperator,
+  onLogicalOperatorToggle,
+  filterVar,
+}) => {
+  const { t } = useTranslation()
+  const isValueReadOnly = payload.comparison_operator ? [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull].includes(payload.comparison_operator) : false
+
+  const handleVarReferenceChange = useCallback((value: ValueSelector | string) => {
+    onChange({
+      ...payload,
+      variable_selector: value as ValueSelector,
+    })
+  }, [onChange, payload])
+
+  // change to default operator if the variable type is changed
+  useEffect(() => {
+    if (varType && payload.comparison_operator) {
+      if (!getOperators(varType).includes(payload.comparison_operator)) {
+        onChange({
+          ...payload,
+          comparison_operator: getOperators(varType)[0],
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [varType, payload])
+
+  const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      ...payload,
+      value: e.target.value,
+    })
+  }, [onChange, payload])
+
+  const handleComparisonOperatorChange = useCallback((v: ComparisonOperator) => {
+    onChange({
+      ...payload,
+      comparison_operator: v,
+    })
+  }, [onChange, payload])
+
+  return (
+    <div className='space-y-2'>
+      {isShowLogicalOperator && (
+        <div className='flex items-center select-none'>
+          <div className='flex items-center '>
+            {Line}
+            <div
+              className='shrink-0 mx-1 flex items-center h-[22px] pl-2 pr-1.5 border border-gray-200 rounded-lg bg-white shadow-xs space-x-0.5 text-primary-600 cursor-pointer'
+              onClick={onLogicalOperatorToggle}
+            >
+              <div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.${logicalOperator === LogicalOperator.and ? 'and' : 'or'}`)}</div>
+              <RefreshCw05 className='w-3 h-3' />
+            </div>
+            <div className=' rotate-180'>
+              {Line}
+            </div>
+          </div>
+        </div>
+      )
+      }
+
+      <div className='flex items-center space-x-1'>
+        <VarReferencePicker
+          nodeId={nodeId}
+          readonly={readonly}
+          isShowNodeName
+          className='w-[162px]'
+          value={payload.variable_selector}
+          onChange={handleVarReferenceChange}
+          filterVar={filterVar}
+        />
+
+        <Selector
+          popupClassName='top-[34px]'
+          itemClassName='capitalize'
+          trigger={
+            <div
+              onClick={(e) => {
+                if (readonly) {
+                  e.stopPropagation()
+                  return
+                }
+                if (!varType) {
+                  e.stopPropagation()
+                  Toast.notify({
+                    message: t(`${i18nPrefix}.notSetVariable`),
+                    type: 'error',
+                  })
+                }
+              }}
+              className={cn(!readonly && 'cursor-pointer', 'shrink-0 w-[100px] whitespace-nowrap flex items-center h-8 justify-between px-2.5 rounded-lg bg-gray-100 capitalize')}
+            >
+              {
+                !payload.comparison_operator
+                  ? <div className='text-[13px] font-normal text-gray-400'>{t(`${i18nPrefix}.operator`)}</div>
+                  : <div className='text-[13px] font-normal text-gray-900'>{isComparisonOperatorNeedTranslate(payload.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${payload.comparison_operator}`) : payload.comparison_operator}</div>
+              }
+
+            </div>
+          }
+          readonly={readonly}
+          value={payload.comparison_operator || ''}
+          options={getOperators(varType).map((o) => {
+            return {
+              label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
+              value: o,
+            }
+          })}
+          onChange={handleComparisonOperatorChange}
+        />
+
+        <input
+          readOnly={readonly || isValueReadOnly || !varType}
+          onClick={() => {
+            if (readonly)
+              return
+
+            if (!varType) {
+              Toast.notify({
+                message: t(`${i18nPrefix}.notSetVariable`),
+                type: 'error',
+              })
+            }
+          }}
+          value={!isValueReadOnly ? payload.value : ''}
+          onChange={handleValueChange}
+          placeholder={(!readonly && !isValueReadOnly) ? t(`${i18nPrefix}.enterValue`)! : ''}
+          className='w-[80px] h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+          type='text'
+        />
+        {!readonly && (
+          <div
+            className={cn(canRemove ? 'text-gray-500 bg-gray-100 hover:bg-gray-200  cursor-pointer' : 'bg-gray-25 text-gray-300', 'p-2 rounded-lg ')}
+            onClick={canRemove ? onRemove : () => { }}
+          >
+            <Trash03 className='w-4 h-4 ' />
+          </div>
+        )}
+      </div>
+    </div >
+
+  )
+}
+export default React.memo(Item)

web/app/components/workflow/nodes/if-else/components/condition-list.tsx

@@ -0,0 +1,91 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import cn from 'classnames'
+import type { Var, VarType } from '../../../types'
+import Item from './condition-item'
+import type { Condition, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
+
+type Props = {
+  nodeId: string
+  className?: string
+  readonly: boolean
+  list: Condition[]
+  varTypesList: (VarType | undefined)[]
+  onChange: (newList: Condition[]) => void
+  logicalOperator: LogicalOperator
+  onLogicalOperatorToggle: () => void
+  filterVar: (varPayload: Var) => boolean
+}
+
+const ConditionList: FC<Props> = ({
+  className,
+  readonly,
+  nodeId,
+  list,
+  varTypesList,
+  onChange,
+  logicalOperator,
+  onLogicalOperatorToggle,
+  filterVar,
+}) => {
+  const handleItemChange = useCallback((index: number) => {
+    return (newItem: Condition) => {
+      const newList = produce(list, (draft) => {
+        draft[index] = newItem
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleItemRemove = useCallback((index: number) => {
+    return () => {
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const canRemove = list.length > 1
+
+  if (list.length === 0)
+    return null
+  return (
+    <div className={cn(className, 'space-y-2')}>
+      <Item
+        readonly={readonly}
+        nodeId={nodeId}
+        payload={list[0]}
+        varType={varTypesList[0]}
+        onChange={handleItemChange(0)}
+        canRemove={canRemove}
+        onRemove={handleItemRemove(0)}
+        logicalOperator={logicalOperator}
+        onLogicalOperatorToggle={onLogicalOperatorToggle}
+        filterVar={filterVar}
+      />
+      {
+        list.length > 1 && (
+          list.slice(1).map((item, i) => (
+            <Item
+              key={item.id}
+              readonly={readonly}
+              nodeId={nodeId}
+              payload={item}
+              varType={varTypesList[i + 1]}
+              onChange={handleItemChange(i + 1)}
+              canRemove={canRemove}
+              onRemove={handleItemRemove(i + 1)}
+              isShowLogicalOperator
+              logicalOperator={logicalOperator}
+              onLogicalOperatorToggle={onLogicalOperatorToggle}
+              filterVar={filterVar}
+            />
+          )))
+      }
+    </div>
+  )
+}
+export default React.memo(ConditionList)

web/app/components/workflow/nodes/if-else/default.ts

@@ -0,0 +1,53 @@
+import { BlockEnum, type NodeDefault } from '../../types'
+import { type IfElseNodeType, LogicalOperator } from './types'
+import { isEmptyRelatedOperator } from './utils'
+import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
+const i18nPrefix = 'workflow.errorMsg'
+
+const nodeDefault: NodeDefault<IfElseNodeType> = {
+  defaultValue: {
+    _targetBranches: [
+      {
+        id: 'true',
+        name: 'IS TRUE',
+      },
+      {
+        id: 'false',
+        name: 'IS FALSE',
+      },
+    ],
+    logical_operator: LogicalOperator.and,
+    conditions: [],
+  },
+  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.filter(type => type !== BlockEnum.VariableAssigner)
+  },
+  checkValid(payload: IfElseNodeType, t: any) {
+    let errorMessages = ''
+    const { conditions } = payload
+    if (!conditions || conditions.length === 0)
+      errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: 'IF' })
+
+    conditions.forEach((condition) => {
+      if (!errorMessages && (!condition.variable_selector || condition.variable_selector.length === 0))
+        errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variable`) })
+      if (!errorMessages && !condition.comparison_operator)
+        errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.ifElse.operator') })
+      if (!errorMessages && !isEmptyRelatedOperator(condition.comparison_operator!) && !condition.value)
+        errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variableValue`) })
+    })
+    return {
+      isValid: !errorMessages,
+      errorMessage: errorMessages,
+    }
+  },
+}
+
+export default nodeDefault

web/app/components/workflow/nodes/if-else/node.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import type { NodeProps } from 'reactflow'
+import { NodeSourceHandle } from '../_base/components/node-handle'
+import { isComparisonOperatorNeedTranslate, isEmptyRelatedOperator } from './utils'
+import type { IfElseNodeType } from './types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
+  const { data } = props
+  const { t } = useTranslation()
+  const { conditions, logical_operator } = data
+
+  return (
+    <div className='px-3'>
+      <div className='relative flex items-center h-6 px-1'>
+        <div className='w-full text-xs font-semibold text-right text-gray-700'>IF</div>
+        <NodeSourceHandle
+          {...props}
+          handleId='true'
+          handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
+        />
+      </div>
+      <div className='space-y-0.5'>
+        {conditions.map((condition, i) => (
+          <div key={condition.id} className='relative'>
+            {(condition.variable_selector?.length > 0 && condition.comparison_operator && (isEmptyRelatedOperator(condition.comparison_operator!) ? true : !!condition.value))
+              ? (
+                <div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-gray-700 bg-gray-100 rounded-md'>
+                  <Variable02 className='w-3.5 h-3.5 text-primary-500' />
+                  <span>{condition.variable_selector.slice(-1)[0]}</span>
+                  <span className='text-gray-500'>{isComparisonOperatorNeedTranslate(condition.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`) : condition.comparison_operator}</span>
+                  {!isEmptyRelatedOperator(condition.comparison_operator!) && <span>{condition.value}</span>}
+                </div>
+              )
+              : (
+                <div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-gray-500 bg-gray-100 rounded-md'>
+                  {t(`${i18nPrefix}.conditionNotSetup`)}
+                </div>
+              )}
+            {i !== conditions.length - 1 && (
+              <div className='absolute z-10 right-0 bottom-[-10px] leading-4 text-[10px] font-medium text-primary-600 uppercase'>{t(`${i18nPrefix}.${logical_operator}`)}</div>
+            )}
+          </div>
+        ))}
+      </div>
+      <div className='relative flex items-center h-6 px-1'>
+        <div className='w-full text-xs font-semibold text-right text-gray-700'>ELSE</div>
+        <NodeSourceHandle
+          {...props}
+          handleId='false'
+          handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(IfElseNode)

web/app/components/workflow/nodes/if-else/panel.tsx

@@ -0,0 +1,66 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Split from '../_base/components/split'
+import AddButton from '../_base/components/add-button'
+import useConfig from './use-config'
+import ConditionList from './components/condition-list'
+import type { IfElseNodeType } from './types'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import type { NodePanelProps } from '@/app/components/workflow/types'
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
+  id,
+  data,
+}) => {
+  const { t } = useTranslation()
+
+  const {
+    readOnly,
+    inputs,
+    handleConditionsChange,
+    handleAddCondition,
+    handleLogicalOperatorToggle,
+    varTypesList,
+    filterVar,
+  } = useConfig(id, data)
+  return (
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.if`)}
+        >
+          <>
+            <ConditionList
+              className='mt-2'
+              readonly={readOnly}
+              nodeId={id}
+              list={inputs.conditions}
+              onChange={handleConditionsChange}
+              logicalOperator={inputs.logical_operator}
+              onLogicalOperatorToggle={handleLogicalOperatorToggle}
+              varTypesList={varTypesList}
+              filterVar={filterVar}
+            />
+            {!readOnly && (
+              <AddButton
+                className='mt-3'
+                text={t(`${i18nPrefix}.addCondition`)}
+                onClick={handleAddCondition}
+              />
+            )}
+          </>
+        </Field>
+        <Split />
+        <Field
+          title={t(`${i18nPrefix}.else`)}
+        >
+          <div className='leading-[18px] text-xs font-normal text-gray-400'>{t(`${i18nPrefix}.elseDescription`)}</div>
+        </Field>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Panel)

web/app/components/workflow/nodes/if-else/types.ts

@@ -0,0 +1,37 @@
+import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
+
+export enum LogicalOperator {
+  and = 'and',
+  or = 'or',
+}
+
+export enum ComparisonOperator {
+  contains = 'contains',
+  notContains = 'not contains',
+  startWith = 'start with',
+  endWith = 'end with',
+  is = 'is',
+  isNot = 'is not',
+  empty = 'empty',
+  notEmpty = 'not empty',
+  equal = '=',
+  notEqual = '≠',
+  largerThan = '>',
+  lessThan = '<',
+  largerThanOrEqual = '≥',
+  lessThanOrEqual = '≤',
+  isNull = 'is null',
+  isNotNull = 'is not null',
+}
+
+export type Condition = {
+  id: string
+  variable_selector: ValueSelector
+  comparison_operator?: ComparisonOperator
+  value: string
+}
+
+export type IfElseNodeType = CommonNodeType & {
+  logical_operator: LogicalOperator
+  conditions: Condition[]
+}

web/app/components/workflow/nodes/if-else/use-config.ts

@@ -0,0 +1,68 @@
+import { useCallback } from 'react'
+import produce from 'immer'
+import type { Var } from '../../types'
+import { VarType } from '../../types'
+import { getVarType } from '../_base/components/variable/utils'
+import { LogicalOperator } from './types'
+import type { Condition, IfElseNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import {
+  useIsChatMode,
+  useNodesReadOnly,
+  useWorkflow,
+} from '@/app/components/workflow/hooks'
+
+const useConfig = (id: string, payload: IfElseNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const { getBeforeNodesInSameBranch } = useWorkflow()
+  const isChatMode = useIsChatMode()
+  const availableNodes = getBeforeNodesInSameBranch(id)
+
+  const { inputs, setInputs } = useNodeCrud<IfElseNodeType>(id, payload)
+
+  const handleConditionsChange = useCallback((newConditions: Condition[]) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.conditions = newConditions
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAddCondition = useCallback(() => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.conditions.push({
+        id: `${Date.now()}`,
+        variable_selector: [],
+        comparison_operator: undefined,
+        value: '',
+      })
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleLogicalOperatorToggle = useCallback(() => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.logical_operator = draft.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const filterVar = useCallback((varPayload: Var) => {
+    return varPayload.type !== VarType.arrayFile
+  }, [])
+
+  const varTypesList = (inputs.conditions || []).map((condition) => {
+    return getVarType(condition.variable_selector, availableNodes, isChatMode)
+  })
+
+  return {
+    readOnly,
+    inputs,
+    handleConditionsChange,
+    handleAddCondition,
+    handleLogicalOperatorToggle,
+    varTypesList,
+    filterVar,
+  }
+}
+
+export default useConfig

web/app/components/workflow/nodes/if-else/utils.ts

@@ -0,0 +1,17 @@
+import { ComparisonOperator } from './types'
+
+export const isEmptyRelatedOperator = (operator: ComparisonOperator) => {
+  return [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull].includes(operator)
+}
+
+const notTranslateKey = [
+  ComparisonOperator.equal, ComparisonOperator.notEqual,
+  ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
+  ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
+]
+
+export const isComparisonOperatorNeedTranslate = (operator?: ComparisonOperator) => {
+  if (!operator)
+    return false
+  return !notTranslateKey.includes(operator)
+}