dify

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

@@ -0,0 +1,76 @@
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import type { HandleAddCondition } from '../types'
+import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
+import type {
+  NodeOutPutVar,
+  ValueSelector,
+  Var,
+} from '@/app/components/workflow/types'
+
+type ConditionAddProps = {
+  className?: string
+  caseId: string
+  variables: NodeOutPutVar[]
+  onSelectVariable: HandleAddCondition
+  disabled?: boolean
+}
+const ConditionAdd = ({
+  className,
+  caseId,
+  variables,
+  onSelectVariable,
+  disabled,
+}: ConditionAddProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const handleSelectVariable = useCallback((valueSelector: ValueSelector, varItem: Var) => {
+    onSelectVariable(caseId, valueSelector, varItem)
+    setOpen(false)
+  }, [caseId, onSelectVariable, setOpen])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
+        <Button
+          size='small'
+          className={className}
+          disabled={disabled}
+        >
+          <RiAddLine className='mr-1 h-3.5 w-3.5' />
+          {t('workflow.nodes.ifElse.addCondition')}
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className='w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+          <VarReferenceVars
+            vars={variables}
+            isSupportFileVar
+            onChange={handleSelectVariable}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default ConditionAdd

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

@@ -0,0 +1,103 @@
+import {
+  memo,
+  useCallback,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { ComparisonOperator, type Condition } from '../types'
+import {
+  comparisonOperatorNotRequireValue,
+  isComparisonOperatorNeedTranslate,
+  isEmptyRelatedOperator,
+} from '../utils'
+import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from '../../constants'
+import type { ValueSelector } from '../../../types'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+type ConditionValueProps = {
+  condition: Condition
+}
+const ConditionValue = ({
+  condition,
+}: ConditionValueProps) => {
+  const { t } = useTranslation()
+  const {
+    variable_selector,
+    comparison_operator: operator,
+    sub_variable_condition,
+  } = condition
+
+  const variableSelector = variable_selector as ValueSelector
+
+  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
+  const formatValue = useCallback((c: Condition) => {
+    const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
+    if (notHasValue)
+      return ''
+
+    const value = c.value as string
+    return value.replace(/{{#([^#]*)#}}/g, (a, b) => {
+      const arr: string[] = b.split('.')
+      if (isSystemVar(arr))
+        return `{{${b}}}`
+
+      return `{{${arr.slice(1).join('.')}}}`
+    })
+  }, [])
+
+  const isSelect = useCallback((c: Condition) => {
+    return c.comparison_operator === ComparisonOperator.in || c.comparison_operator === ComparisonOperator.notIn
+  }, [])
+
+  const selectName = useCallback((c: Condition) => {
+    const isSelect = c.comparison_operator === ComparisonOperator.in || c.comparison_operator === ComparisonOperator.notIn
+    if (isSelect) {
+      const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(c.value) ? c.value[0] : c.value))[0]
+      return name
+        ? t(`workflow.nodes.ifElse.optionName.${name.i18nKey}`).replace(/{{#([^#]*)#}}/g, (a, b) => {
+          const arr: string[] = b.split('.')
+          if (isSystemVar(arr))
+            return `{{${b}}}`
+
+          return `{{${arr.slice(1).join('.')}}}`
+        })
+        : ''
+    }
+    return ''
+  }, [t])
+
+  return (
+    <div className='rounded-md bg-workflow-block-parma-bg'>
+      <div className='flex h-6 items-center px-1 '>
+        <VariableLabelInNode
+          className='w-0 grow'
+          variables={variableSelector}
+          notShowFullPath
+        />
+        <div
+          className='mx-1 shrink-0 text-xs font-medium text-text-primary'
+          title={operatorName}
+        >
+          {operatorName}
+        </div>
+      </div>
+      <div className='ml-[10px] border-l border-divider-regular pl-[10px]'>
+        {
+          sub_variable_condition?.conditions.map((c: Condition, index) => (
+            <div className='relative flex h-6 items-center space-x-1' key={c.id}>
+              <div className='system-xs-medium text-text-accent'>{c.key}</div>
+              <div className='system-xs-medium text-text-primary'>{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}</div>
+              {c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className='system-xs-regular text-text-secondary'>{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
+              {index !== sub_variable_condition.conditions.length - 1 && (<div className='absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent'>{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(ConditionValue)

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

@@ -0,0 +1,63 @@
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@/app/components/workflow/store'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type {
+  Node,
+  NodeOutPutVar,
+} from '@/app/components/workflow/types'
+
+type ConditionInputProps = {
+  disabled?: boolean
+  value: string
+  onChange: (value: string) => void
+  nodesOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+}
+const ConditionInput = ({
+  value,
+  onChange,
+  disabled,
+  nodesOutputVars,
+  availableNodes,
+}: ConditionInputProps) => {
+  const { t } = useTranslation()
+  const controlPromptEditorRerenderKey = useStore(s => s.controlPromptEditorRerenderKey)
+  const pipelineId = useStore(s => s.pipelineId)
+  const setShowInputFieldPanel = useStore(s => s.setShowInputFieldPanel)
+
+  return (
+    <PromptEditor
+      key={controlPromptEditorRerenderKey}
+      compact
+      value={value}
+      placeholder={t('workflow.nodes.ifElse.enterValue') || ''}
+      workflowVariableBlock={{
+        show: true,
+        variables: nodesOutputVars || [],
+        workflowNodesMap: availableNodes.reduce((acc, node) => {
+          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 = {
+              title: t('workflow.blocks.start'),
+              type: BlockEnum.Start,
+            }
+          }
+          return acc
+        }, {} as any),
+        showManageInputField: !!pipelineId,
+        onManageInputField: () => setShowInputFieldPanel?.(true),
+      }}
+      onChange={onChange}
+      editable={!disabled}
+    />
+  )
+}
+
+export default ConditionInput

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

@@ -0,0 +1,398 @@
+import {
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiDeleteBinLine } from '@remixicon/react'
+import { produce } from 'immer'
+import type { VarType as NumberVarType } from '../../../tool/types'
+import type {
+  Condition,
+  HandleAddSubVariableCondition,
+  HandleRemoveCondition,
+  HandleToggleSubVariableConditionLogicalOperator,
+  HandleUpdateCondition,
+  HandleUpdateSubVariableCondition,
+  handleRemoveSubVariableCondition,
+} from '../../types'
+import {
+  ComparisonOperator,
+} from '../../types'
+import { comparisonOperatorNotRequireValue, getOperators } from '../../utils'
+import ConditionNumberInput from '../condition-number-input'
+import { FILE_TYPE_OPTIONS, SUB_VARIABLES, TRANSFER_METHOD } from '../../../constants'
+import ConditionWrap from '../condition-wrap'
+import ConditionOperator from './condition-operator'
+import ConditionInput from './condition-input'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+import ConditionVarSelector from './condition-var-selector'
+import type {
+  Node,
+  NodeOutPutVar,
+  ValueSelector,
+  Var,
+} from '@/app/components/workflow/types'
+import { VarType } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+import { SimpleSelect as Select } from '@/app/components/base/select'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
+import { getVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { useIsChatMode } from '@/app/components/workflow/hooks/use-workflow'
+import useMatchSchemaType from '../../../_base/components/variable/use-match-schema-type'
+import {
+  useAllBuiltInTools,
+  useAllCustomTools,
+  useAllMCPTools,
+  useAllWorkflowTools,
+} from '@/service/use-tools'
+const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
+
+type ConditionItemProps = {
+  className?: string
+  disabled?: boolean
+  caseId: string
+  conditionId: string // in isSubVariableKey it's the value of the parent condition's id
+  condition: Condition // condition may the condition of case or condition of sub variable
+  file?: { key: string }
+  isSubVariableKey?: boolean
+  isValueFieldShort?: boolean
+  onRemoveCondition?: HandleRemoveCondition
+  onUpdateCondition?: HandleUpdateCondition
+  onAddSubVariableCondition?: HandleAddSubVariableCondition
+  onRemoveSubVariableCondition?: handleRemoveSubVariableCondition
+  onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
+  onToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
+  nodeId: string
+  nodesOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  numberVariables: NodeOutPutVar[]
+  filterVar: (varPayload: Var) => boolean
+}
+const ConditionItem = ({
+  className,
+  disabled,
+  caseId,
+  conditionId,
+  condition,
+  file,
+  isSubVariableKey,
+  isValueFieldShort,
+  onRemoveCondition,
+  onUpdateCondition,
+  onAddSubVariableCondition,
+  onRemoveSubVariableCondition,
+  onUpdateSubVariableCondition,
+  onToggleSubVariableConditionLogicalOperator,
+  nodeId,
+  nodesOutputVars,
+  availableNodes,
+  numberVariables,
+  filterVar,
+}: ConditionItemProps) => {
+  const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
+  const [isHovered, setIsHovered] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+
+  const workflowStore = useWorkflowStore()
+
+  const doUpdateCondition = useCallback((newCondition: Condition) => {
+    if (isSubVariableKey)
+      onUpdateSubVariableCondition?.(caseId, conditionId, condition.id, newCondition)
+    else
+      onUpdateCondition?.(caseId, condition.id, newCondition)
+  }, [caseId, condition, conditionId, isSubVariableKey, onUpdateCondition, onUpdateSubVariableCondition])
+
+  const canChooseOperator = useMemo(() => {
+    if (disabled)
+      return false
+
+    if (isSubVariableKey)
+      return !!condition.key
+
+    return true
+  }, [condition.key, disabled, isSubVariableKey])
+  const handleUpdateConditionOperator = useCallback((value: ComparisonOperator) => {
+    const newCondition = {
+      ...condition,
+      comparison_operator: value,
+    }
+    doUpdateCondition(newCondition)
+  }, [condition, doUpdateCondition])
+
+  const handleUpdateConditionNumberVarType = useCallback((numberVarType: NumberVarType) => {
+    const newCondition = {
+      ...condition,
+      numberVarType,
+      value: '',
+    }
+    doUpdateCondition(newCondition)
+  }, [condition, doUpdateCondition])
+
+  const isSubVariable = condition.varType === VarType.arrayFile && [ComparisonOperator.contains, ComparisonOperator.notContains, ComparisonOperator.allOf].includes(condition.comparison_operator!)
+
+  const fileAttr = useMemo(() => {
+    if (file)
+      return file
+    if (isSubVariableKey) {
+      return {
+        key: condition.key!,
+      }
+    }
+    return undefined
+  }, [condition.key, file, isSubVariableKey])
+
+  const isArrayValue = fileAttr?.key === 'transfer_method' || fileAttr?.key === 'type'
+
+  const handleUpdateConditionValue = useCallback((value: string | boolean) => {
+    if (value === condition.value || (isArrayValue && value === (condition.value as string[])?.[0]))
+      return
+    const newCondition = {
+      ...condition,
+      value: isArrayValue ? [value as string] : value,
+    }
+    doUpdateCondition(newCondition)
+  }, [condition, doUpdateCondition, isArrayValue])
+
+  const isSelect = condition.comparison_operator && [ComparisonOperator.in, ComparisonOperator.notIn].includes(condition.comparison_operator)
+  const selectOptions = useMemo(() => {
+    if (isSelect) {
+      if (fileAttr?.key === 'type' || condition.comparison_operator === ComparisonOperator.allOf) {
+        return FILE_TYPE_OPTIONS.map(item => ({
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          value: item.value,
+        }))
+      }
+      if (fileAttr?.key === 'transfer_method') {
+        return TRANSFER_METHOD.map(item => ({
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          value: item.value,
+        }))
+      }
+      return []
+    }
+    return []
+  }, [condition.comparison_operator, fileAttr?.key, isSelect, t])
+
+  const isNotInput = isSelect || isSubVariable
+
+  const isSubVarSelect = isSubVariableKey
+  const subVarOptions = SUB_VARIABLES.map(item => ({
+    name: item,
+    value: item,
+  }))
+
+  const handleSubVarKeyChange = useCallback((key: string) => {
+    const newCondition = produce(condition, (draft) => {
+      draft.key = key
+      if (key === 'size')
+        draft.varType = VarType.number
+      else
+        draft.varType = VarType.string
+
+      draft.value = ''
+      draft.comparison_operator = getOperators(undefined, { key })[0]
+    })
+
+    onUpdateSubVariableCondition?.(caseId, conditionId, condition.id, newCondition)
+  }, [caseId, condition, conditionId, onUpdateSubVariableCondition])
+
+  const doRemoveCondition = useCallback(() => {
+    if (isSubVariableKey)
+      onRemoveSubVariableCondition?.(caseId, conditionId, condition.id)
+    else
+      onRemoveCondition?.(caseId, condition.id)
+  }, [caseId, condition, conditionId, isSubVariableKey, onRemoveCondition, onRemoveSubVariableCondition])
+
+  const { schemaTypeDefinitions } = useMatchSchemaType()
+  const handleVarChange = useCallback((valueSelector: ValueSelector, _varItem: Var) => {
+    const {
+      conversationVariables,
+      setControlPromptEditorRerenderKey,
+      dataSourceList,
+    } = workflowStore.getState()
+    const resolvedVarType = getVarType({
+      valueSelector,
+      conversationVariables,
+      availableNodes,
+      isChatMode,
+      allPluginInfoList: {
+        buildInTools: buildInTools || [],
+        customTools: customTools || [],
+        mcpTools: mcpTools || [],
+        workflowTools: workflowTools || [],
+        dataSourceList: dataSourceList || [],
+      },
+      schemaTypeDefinitions,
+    })
+
+    const newCondition = produce(condition, (draft) => {
+      draft.variable_selector = valueSelector
+      draft.varType = resolvedVarType
+      draft.value = resolvedVarType === VarType.boolean ? false : ''
+      draft.comparison_operator = getOperators(resolvedVarType)[0]
+      delete draft.key
+      delete draft.sub_variable_condition
+      delete draft.numberVarType
+      setTimeout(() => setControlPromptEditorRerenderKey(Date.now()))
+    })
+    doUpdateCondition(newCondition)
+    setOpen(false)
+  }, [condition, doUpdateCondition, availableNodes, isChatMode, schemaTypeDefinitions, buildInTools, customTools, mcpTools, workflowTools])
+
+  const showBooleanInput = useMemo(() => {
+    if(condition.varType === VarType.boolean)
+      return true
+
+    if(condition.varType === VarType.arrayBoolean && [ComparisonOperator.contains, ComparisonOperator.notContains].includes(condition.comparison_operator!))
+      return true
+    return false
+  }, [condition])
+  return (
+    <div className={cn('mb-1 flex last-of-type:mb-0', className)}>
+      <div className={cn(
+        'grow rounded-lg bg-components-input-bg-normal',
+        isHovered && 'bg-state-destructive-hover',
+      )}>
+        <div className='flex items-center p-1'>
+          <div className='w-0 grow'>
+            {isSubVarSelect
+              ? (
+                <Select
+                  wrapperClassName='h-6'
+                  className='pl-0 text-xs'
+                  optionWrapClassName='w-[165px] max-h-none'
+                  defaultValue={condition.key}
+                  items={subVarOptions}
+                  onSelect={item => handleSubVarKeyChange(item.value as string)}
+                  renderTrigger={item => (
+                    item
+                      ? <div className='flex cursor-pointer justify-start'>
+                        <div className='inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs'>
+                          <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
+                          <div className='system-xs-medium ml-0.5 truncate'>{item?.name}</div>
+                        </div>
+                      </div>
+                      : <div className='system-sm-regular text-left text-components-input-text-placeholder'>{t('common.placeholder.select')}</div>
+                  )}
+                  hideChecked
+                />
+              )
+              : (
+                <ConditionVarSelector
+                  open={open}
+                  onOpenChange={setOpen}
+                  valueSelector={condition.variable_selector || []}
+                  varType={condition.varType}
+                  availableNodes={availableNodes}
+                  nodesOutputVars={nodesOutputVars}
+                  onChange={handleVarChange}
+                />
+              )}
+
+          </div>
+          <div className='mx-1 h-3 w-[1px] bg-divider-regular'></div>
+          <ConditionOperator
+            disabled={!canChooseOperator}
+            varType={condition.varType}
+            value={condition.comparison_operator}
+            onSelect={handleUpdateConditionOperator}
+            file={fileAttr}
+          />
+        </div>
+        {
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType !== VarType.number && !showBooleanInput && (
+            <div className='max-h-[100px] overflow-y-auto border-t border-t-divider-subtle px-2 py-1'>
+              <ConditionInput
+                disabled={disabled}
+                value={condition.value as string}
+                onChange={handleUpdateConditionValue}
+                nodesOutputVars={nodesOutputVars}
+                availableNodes={availableNodes}
+              />
+            </div>
+          )
+        }
+        {
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && showBooleanInput && (
+            <div className='p-1'>
+              <BoolValue
+                value={condition.value as boolean}
+                onChange={handleUpdateConditionValue}
+              />
+            </div>
+          )
+        }
+        {
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType === VarType.number && (
+            <div className='border-t border-t-divider-subtle px-2 py-1 pt-[3px]'>
+              <ConditionNumberInput
+                numberVarType={condition.numberVarType}
+                onNumberVarTypeChange={handleUpdateConditionNumberVarType}
+                value={condition.value as string}
+                onValueChange={handleUpdateConditionValue}
+                variables={numberVariables}
+                isShort={isValueFieldShort}
+                unit={fileAttr?.key === 'size' ? 'Byte' : undefined}
+              />
+            </div>
+          )
+        }
+        {
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && isSelect && (
+            <div className='border-t border-t-divider-subtle'>
+              <Select
+                wrapperClassName='h-8'
+                className='rounded-t-none px-2 text-xs'
+                defaultValue={isArrayValue ? (condition.value as string[])?.[0] : (condition.value as string)}
+                items={selectOptions}
+                onSelect={item => handleUpdateConditionValue(item.value as string)}
+                hideChecked
+                notClearable
+              />
+            </div>
+          )
+        }
+        {
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && isSubVariable && (
+            <div className='p-1'>
+              <ConditionWrap
+                isSubVariable
+                caseId={caseId}
+                conditionId={conditionId}
+                readOnly={!!disabled}
+                cases={condition.sub_variable_condition ? [condition.sub_variable_condition] : []}
+                handleAddSubVariableCondition={onAddSubVariableCondition}
+                handleRemoveSubVariableCondition={onRemoveSubVariableCondition}
+                handleUpdateSubVariableCondition={onUpdateSubVariableCondition}
+                handleToggleSubVariableConditionLogicalOperator={onToggleSubVariableConditionLogicalOperator}
+                nodeId={nodeId}
+                nodesOutputVars={nodesOutputVars}
+                availableNodes={availableNodes}
+                filterVar={filterVar}
+              />
+            </div>
+          )
+        }
+      </div>
+      <div
+        className='ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={doRemoveCondition}
+      >
+        <RiDeleteBinLine className='h-4 w-4' />
+      </div>
+    </div>
+  )
+}
+
+export default ConditionItem

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

@@ -0,0 +1,94 @@
+import {
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
+import type { ComparisonOperator } from '../../types'
+import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { VarType } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+type ConditionOperatorProps = {
+  className?: string
+  disabled?: boolean
+  varType: VarType
+  file?: { key: string }
+  value?: string
+  onSelect: (value: ComparisonOperator) => void
+}
+const ConditionOperator = ({
+  className,
+  disabled,
+  varType,
+  file,
+  value,
+  onSelect,
+}: ConditionOperatorProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const options = useMemo(() => {
+    return getOperators(varType, file).map((o) => {
+      return {
+        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
+        value: o,
+      }
+    })
+  }, [t, varType, file])
+  const selectedOption = options.find(o => Array.isArray(value) ? o.value === value[0] : o.value === value)
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <Button
+          className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
+          size='small'
+          variant='ghost'
+          disabled={disabled}
+        >
+          {
+            selectedOption
+              ? selectedOption.label
+              : t(`${i18nPrefix}.select`)
+          }
+          <RiArrowDownSLine className='ml-1 h-3.5 w-3.5' />
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <div className='rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+          {
+            options.map(option => (
+              <div
+                key={option.value}
+                className='flex h-7 cursor-pointer items-center rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover'
+                onClick={() => {
+                  onSelect(option.value)
+                  setOpen(false)
+                }}
+              >
+                {option.label}
+              </div>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default ConditionOperator

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

@@ -0,0 +1,58 @@
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import VariableTag from '@/app/components/workflow/nodes/_base/components/variable-tag'
+import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
+import type { Node, NodeOutPutVar, ValueSelector, Var, VarType } from '@/app/components/workflow/types'
+
+type ConditionVarSelectorProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  valueSelector: ValueSelector
+  varType: VarType
+  availableNodes: Node[]
+  nodesOutputVars: NodeOutPutVar[]
+  onChange: (valueSelector: ValueSelector, varItem: Var) => void
+}
+
+const ConditionVarSelector = ({
+  open,
+  onOpenChange,
+  valueSelector,
+  varType,
+  availableNodes,
+  nodesOutputVars,
+  onChange,
+}: ConditionVarSelectorProps) => {
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={onOpenChange}
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => onOpenChange(!open)}>
+        <div className="w-full cursor-pointer">
+          <VariableTag
+            valueSelector={valueSelector}
+            varType={varType}
+            availableNodes={availableNodes}
+            isShort
+          />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className='w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+          <VarReferenceVars
+            vars={nodesOutputVars}
+            isSupportFileVar
+            onChange={onChange}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default ConditionVarSelector

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

@@ -0,0 +1,136 @@
+import { RiLoopLeftLine } from '@remixicon/react'
+import { useCallback, useMemo } from 'react'
+import {
+  type CaseItem,
+  type HandleAddSubVariableCondition,
+  type HandleRemoveCondition,
+  type HandleToggleConditionLogicalOperator,
+  type HandleToggleSubVariableConditionLogicalOperator,
+  type HandleUpdateCondition,
+  type HandleUpdateSubVariableCondition,
+  LogicalOperator,
+  type handleRemoveSubVariableCondition,
+} from '../../types'
+import ConditionItem from './condition-item'
+import type {
+  Node,
+  NodeOutPutVar,
+  Var,
+} from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type ConditionListProps = {
+  isSubVariable?: boolean
+  disabled?: boolean
+  caseId: string
+  conditionId?: string
+  caseItem: CaseItem
+  onRemoveCondition?: HandleRemoveCondition
+  onUpdateCondition?: HandleUpdateCondition
+  onToggleConditionLogicalOperator?: HandleToggleConditionLogicalOperator
+  nodeId: string
+  nodesOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  numberVariables: NodeOutPutVar[]
+  filterVar: (varPayload: Var) => boolean
+  varsIsVarFileAttribute: Record<string, boolean>
+  onAddSubVariableCondition?: HandleAddSubVariableCondition
+  onRemoveSubVariableCondition?: handleRemoveSubVariableCondition
+  onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
+  onToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
+}
+const ConditionList = ({
+  isSubVariable,
+  disabled,
+  caseId,
+  conditionId,
+  caseItem,
+  onUpdateCondition,
+  onRemoveCondition,
+  onToggleConditionLogicalOperator,
+  onAddSubVariableCondition,
+  onRemoveSubVariableCondition,
+  onUpdateSubVariableCondition,
+  onToggleSubVariableConditionLogicalOperator,
+  nodeId,
+  nodesOutputVars,
+  availableNodes,
+  numberVariables,
+  varsIsVarFileAttribute,
+  filterVar,
+}: ConditionListProps) => {
+  const { conditions, logical_operator } = caseItem
+
+  const doToggleConditionLogicalOperator = useCallback(() => {
+    if (isSubVariable)
+      onToggleSubVariableConditionLogicalOperator?.(caseId!, conditionId!)
+    else
+      onToggleConditionLogicalOperator?.(caseId)
+  }, [caseId, conditionId, isSubVariable, onToggleConditionLogicalOperator, onToggleSubVariableConditionLogicalOperator])
+
+  const isValueFieldShort = useMemo(() => {
+    if (isSubVariable && conditions.length > 1)
+      return true
+
+    return false
+  }, [conditions.length, isSubVariable])
+  const conditionItemClassName = useMemo(() => {
+    if (!isSubVariable)
+      return ''
+    if (conditions.length < 2)
+      return ''
+    return logical_operator === LogicalOperator.and ? 'pl-[51px]' : 'pl-[42px]'
+  }, [conditions.length, isSubVariable, logical_operator])
+
+  return (
+    <div className={cn('relative', !isSubVariable && 'pl-[60px]')}>
+      {
+        conditions.length > 1 && (
+          <div className={cn(
+            'absolute bottom-0 left-0 top-0 w-[60px]',
+            isSubVariable && logical_operator === LogicalOperator.and && 'left-[-10px]',
+            isSubVariable && logical_operator === LogicalOperator.or && 'left-[-18px]',
+          )}>
+            <div className='absolute bottom-4 left-[46px] top-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep'></div>
+            <div className='absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg'></div>
+            <div
+              className='absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs'
+              onClick={doToggleConditionLogicalOperator}
+            >
+              {logical_operator.toUpperCase()}
+              <RiLoopLeftLine className='ml-0.5 h-3 w-3' />
+            </div>
+          </div>
+        )
+      }
+      {
+        caseItem.conditions.map(condition => (
+          <ConditionItem
+            key={condition.id}
+            className={conditionItemClassName}
+            disabled={disabled}
+            caseId={caseId}
+            conditionId={isSubVariable ? conditionId! : condition.id}
+            condition={condition}
+            isValueFieldShort={isValueFieldShort}
+            onUpdateCondition={onUpdateCondition}
+            onRemoveCondition={onRemoveCondition}
+            onAddSubVariableCondition={onAddSubVariableCondition}
+            onRemoveSubVariableCondition={onRemoveSubVariableCondition}
+            onUpdateSubVariableCondition={onUpdateSubVariableCondition}
+            onToggleSubVariableConditionLogicalOperator={onToggleSubVariableConditionLogicalOperator}
+            nodeId={nodeId}
+            nodesOutputVars={nodesOutputVars}
+            availableNodes={availableNodes}
+            filterVar={filterVar}
+            numberVariables={numberVariables}
+            file={varsIsVarFileAttribute[condition.id] ? { key: (condition.variable_selector || []).slice(-1)[0] } : undefined}
+            isSubVariableKey={isSubVariable}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default ConditionList

dify/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx

@@ -0,0 +1,168 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { capitalize } from 'lodash-es'
+import { useBoolean } from 'ahooks'
+import { VarType as NumberVarType } from '../../tool/types'
+import VariableTag from '../../_base/components/variable-tag'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import cn from '@/utils/classnames'
+import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
+import type {
+  NodeOutPutVar,
+  ValueSelector,
+} from '@/app/components/workflow/types'
+import { VarType } from '@/app/components/workflow/types'
+import { variableTransformer } from '@/app/components/workflow/utils'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+
+const options = [
+  NumberVarType.variable,
+  NumberVarType.constant,
+]
+
+type ConditionNumberInputProps = {
+  numberVarType?: NumberVarType
+  onNumberVarTypeChange: (v: NumberVarType) => void
+  value: string
+  onValueChange: (v: string) => void
+  variables: NodeOutPutVar[]
+  isShort?: boolean
+  unit?: string
+}
+const ConditionNumberInput = ({
+  numberVarType = NumberVarType.constant,
+  onNumberVarTypeChange,
+  value,
+  onValueChange,
+  variables,
+  isShort,
+  unit,
+}: ConditionNumberInputProps) => {
+  const { t } = useTranslation()
+  const [numberVarTypeVisible, setNumberVarTypeVisible] = useState(false)
+  const [variableSelectorVisible, setVariableSelectorVisible] = useState(false)
+  const [isFocus, {
+    setTrue: setFocus,
+    setFalse: setBlur,
+  }] = useBoolean()
+
+  const handleSelectVariable = useCallback((valueSelector: ValueSelector) => {
+    onValueChange(variableTransformer(valueSelector) as string)
+    setVariableSelectorVisible(false)
+  }, [onValueChange])
+
+  return (
+    <div className='flex cursor-pointer items-center'>
+      <PortalToFollowElem
+        open={numberVarTypeVisible}
+        onOpenChange={setNumberVarTypeVisible}
+        placement='bottom-start'
+        offset={{ mainAxis: 2, crossAxis: 0 }}
+      >
+        <PortalToFollowElemTrigger onClick={() => setNumberVarTypeVisible(v => !v)}>
+          <Button
+            className='shrink-0'
+            variant='ghost'
+            size='small'
+          >
+            {capitalize(numberVarType)}
+            <RiArrowDownSLine className='ml-[1px] h-3.5 w-3.5' />
+          </Button>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className='w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+            {
+              options.map(option => (
+                <div
+                  key={option}
+                  className={cn(
+                    'flex h-7 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover',
+                    'text-[13px] font-medium text-text-secondary',
+                    numberVarType === option && 'bg-state-base-hover',
+                  )}
+                  onClick={() => {
+                    onNumberVarTypeChange(option)
+                    setNumberVarTypeVisible(false)
+                  }}
+                >
+                  {capitalize(option)}
+                </div>
+              ))
+            }
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+      <div className='mx-1 h-4 w-[1px] bg-divider-regular'></div>
+      <div className='ml-0.5 w-0 grow'>
+        {
+          numberVarType === NumberVarType.variable && (
+            <PortalToFollowElem
+              open={variableSelectorVisible}
+              onOpenChange={setVariableSelectorVisible}
+              placement='bottom-start'
+              offset={{ mainAxis: 2, crossAxis: 0 }}
+            >
+              <PortalToFollowElemTrigger
+                className='w-full'
+                onClick={() => setVariableSelectorVisible(v => !v)}>
+                {
+                  value && (
+                    <VariableTag
+                      valueSelector={variableTransformer(value) as string[]}
+                      varType={VarType.number}
+                      isShort={isShort}
+                    />
+                  )
+                }
+                {
+                  !value && (
+                    <div className='flex h-6 items-center p-1 text-[13px] text-components-input-text-placeholder'>
+                      <Variable02 className='mr-1 h-4 w-4 shrink-0' />
+                      <div className='w-0 grow truncate'>{t('workflow.nodes.ifElse.selectVariable')}</div>
+                    </div>
+                  )
+                }
+              </PortalToFollowElemTrigger>
+              <PortalToFollowElemContent className='z-[1000]'>
+                <div className={cn('w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg', isShort && 'w-[200px]')}>
+                  <VarReferenceVars
+                    vars={variables}
+                    onChange={handleSelectVariable}
+                  />
+                </div>
+              </PortalToFollowElemContent>
+            </PortalToFollowElem>
+          )
+        }
+        {
+          numberVarType === NumberVarType.constant && (
+            <div className=' relative'>
+              <input
+                className={cn('block w-full appearance-none bg-transparent px-2 text-[13px] text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder', unit && 'pr-6')}
+                type='number'
+                value={value}
+                onChange={e => onValueChange(e.target.value)}
+                placeholder={t('workflow.nodes.ifElse.enterValue') || ''}
+                onFocus={setFocus}
+                onBlur={setBlur}
+              />
+              {!isFocus && unit && <div className='system-sm-regular absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary'>{unit}</div>}
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(ConditionNumberInput)

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

@@ -0,0 +1,103 @@
+import {
+  memo,
+  useMemo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { ComparisonOperator } from '../types'
+import {
+  comparisonOperatorNotRequireValue,
+  isComparisonOperatorNeedTranslate,
+} from '../utils'
+import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from '../../constants'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { isExceptionVariable } from '@/app/components/workflow/utils'
+import type {
+  CommonNodeType,
+  Node,
+} from '@/app/components/workflow/types'
+import {
+  VariableLabelInText,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
+
+type ConditionValueProps = {
+  variableSelector: string[]
+  labelName?: string
+  operator: ComparisonOperator
+  value: string | string[] | boolean
+}
+const ConditionValue = ({
+  variableSelector,
+  labelName,
+  operator,
+  value,
+}: ConditionValueProps) => {
+  const { t } = useTranslation()
+  const nodes = useNodes()
+  const variableName = labelName || (isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.'))
+  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
+  const notHasValue = comparisonOperatorNotRequireValue(operator)
+  const node: Node<CommonNodeType> | undefined = nodes.find(n => n.id === variableSelector[0]) as Node<CommonNodeType>
+  const isException = isExceptionVariable(variableName, node?.data.type)
+  const formatValue = useMemo(() => {
+    if (notHasValue)
+      return ''
+
+    if (Array.isArray(value)) // transfer method
+      return value[0]
+
+    if (value === true || value === false)
+      return value ? 'True' : 'False'
+
+    return value.replace(/{{#([^#]*)#}}/g, (a, b) => {
+      const arr: string[] = b.split('.')
+      if (isSystemVar(arr))
+        return `{{${b}}}`
+
+      return `{{${arr.slice(1).join('.')}}}`
+    })
+  }, [notHasValue, value])
+
+  const isSelect = operator === ComparisonOperator.in || operator === ComparisonOperator.notIn
+  const selectName = useMemo(() => {
+    if (isSelect) {
+      const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(value) ? value[0] : value))[0]
+      return name
+        ? t(`workflow.nodes.ifElse.optionName.${name.i18nKey}`).replace(/{{#([^#]*)#}}/g, (a, b) => {
+          const arr: string[] = b.split('.')
+          if (isSystemVar(arr))
+            return `{{${b}}}`
+
+          return `{{${arr.slice(1).join('.')}}}`
+        })
+        : ''
+    }
+    return ''
+  }, [isSelect, t, value])
+
+  return (
+    <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1'>
+      <VariableLabelInText
+        className='w-0 grow'
+        variables={variableSelector}
+        nodeTitle={node?.data.title}
+        nodeType={node?.data.type}
+        isExceptionVariable={isException}
+        notShowFullPath
+      />
+      <div
+        className='mx-1 shrink-0 text-xs font-medium text-text-primary'
+        title={operatorName}
+      >
+        {operatorName}
+      </div>
+      {
+        !notHasValue && (
+          <div className='shrink-[3] truncate text-xs text-text-secondary' title={formatValue}>{isSelect ? selectName : formatValue}</div>
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(ConditionValue)

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

@@ -0,0 +1,226 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ReactSortable } from 'react-sortablejs'
+import {
+  RiAddLine,
+  RiDeleteBinLine,
+  RiDraggable,
+} from '@remixicon/react'
+import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition, handleRemoveSubVariableCondition } from '../types'
+import type { Node, NodeOutPutVar, Var } from '../../../types'
+import { VarType } from '../../../types'
+import { useGetAvailableVars } from '../../variable-assigner/hooks'
+import { SUB_VARIABLES } from '../../constants'
+import ConditionList from './condition-list'
+import ConditionAdd from './condition-add'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+import { PortalSelect as Select } from '@/app/components/base/select'
+import { noop } from 'lodash-es'
+
+type Props = {
+  isSubVariable?: boolean
+  caseId?: string
+  conditionId?: string
+  cases: CaseItem[]
+  readOnly: boolean
+  handleSortCase?: (sortedCases: (CaseItem & { id: string })[]) => void
+  handleRemoveCase?: (caseId: string) => void
+  handleAddCondition?: HandleAddCondition
+  handleRemoveCondition?: HandleRemoveCondition
+  handleUpdateCondition?: HandleUpdateCondition
+  handleToggleConditionLogicalOperator?: HandleToggleConditionLogicalOperator
+  handleAddSubVariableCondition?: HandleAddSubVariableCondition
+  handleRemoveSubVariableCondition?: handleRemoveSubVariableCondition
+  handleUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
+  handleToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
+  nodeId: string
+  nodesOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  varsIsVarFileAttribute?: Record<string, boolean>
+  filterVar: (varPayload: Var) => boolean
+}
+
+const ConditionWrap: FC<Props> = ({
+  isSubVariable,
+  caseId,
+  conditionId,
+  nodeId: id = '',
+  cases = [],
+  readOnly,
+  handleSortCase = noop,
+  handleRemoveCase,
+  handleUpdateCondition,
+  handleAddCondition,
+  handleRemoveCondition,
+  handleToggleConditionLogicalOperator,
+  handleAddSubVariableCondition,
+  handleRemoveSubVariableCondition,
+  handleUpdateSubVariableCondition,
+  handleToggleSubVariableConditionLogicalOperator,
+  nodesOutputVars = [],
+  availableNodes = [],
+  varsIsVarFileAttribute = {},
+  filterVar = () => true,
+}) => {
+  const { t } = useTranslation()
+
+  const getAvailableVars = useGetAvailableVars()
+
+  const [willDeleteCaseId, setWillDeleteCaseId] = useState('')
+  const casesLength = cases.length
+
+  const filterNumberVar = useCallback((varPayload: Var) => {
+    return varPayload.type === VarType.number
+  }, [])
+
+  const subVarOptions = SUB_VARIABLES.map(item => ({
+    name: item,
+    value: item,
+  }))
+
+  return (
+    <>
+      <ReactSortable
+        list={cases.map(caseItem => ({ ...caseItem, id: caseItem.case_id }))}
+        setList={handleSortCase}
+        handle='.handle'
+        ghostClass='bg-components-panel-bg'
+        animation={150}
+        disabled={readOnly || isSubVariable}
+      >
+        {
+          cases.map((item, index) => (
+            <div key={item.case_id}>
+              <div
+                className={cn(
+                  'group relative rounded-[10px] bg-components-panel-bg',
+                  willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
+                  !isSubVariable && 'min-h-[40px] px-3 py-1 ',
+                  isSubVariable && 'px-1 py-2',
+                )}
+              >
+                {!isSubVariable && (
+                  <>
+                    <RiDraggable className={cn(
+                      'handle absolute left-1 top-2 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                      casesLength > 1 && 'group-hover:block',
+                    )} />
+                    <div className={cn(
+                      'absolute left-4 text-[13px] font-semibold leading-4 text-text-secondary',
+                      casesLength === 1 ? 'top-2.5' : 'top-1',
+                    )}>
+                      {
+                        index === 0 ? 'IF' : 'ELIF'
+                      }
+                      {
+                        casesLength > 1 && (
+                          <div className='text-[10px] font-medium text-text-tertiary'>CASE {index + 1}</div>
+                        )
+                      }
+                    </div>
+                  </>
+                )}
+
+                {
+                  !!item.conditions.length && (
+                    <div className='mb-2'>
+                      <ConditionList
+                        disabled={readOnly}
+                        caseItem={item}
+                        caseId={isSubVariable ? caseId! : item.case_id}
+                        conditionId={conditionId}
+                        onUpdateCondition={handleUpdateCondition}
+                        onRemoveCondition={handleRemoveCondition}
+                        onToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
+                        nodeId={id}
+                        nodesOutputVars={nodesOutputVars}
+                        availableNodes={availableNodes}
+                        filterVar={filterVar}
+                        numberVariables={getAvailableVars(id, '', filterNumberVar)}
+                        varsIsVarFileAttribute={varsIsVarFileAttribute}
+                        onAddSubVariableCondition={handleAddSubVariableCondition}
+                        onRemoveSubVariableCondition={handleRemoveSubVariableCondition}
+                        onUpdateSubVariableCondition={handleUpdateSubVariableCondition}
+                        onToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
+                        isSubVariable={isSubVariable}
+                      />
+                    </div>
+                  )
+                }
+
+                <div className={cn(
+                  'flex items-center justify-between pr-[30px]',
+                  !item.conditions.length && !isSubVariable && 'mt-1',
+                  !item.conditions.length && isSubVariable && 'mt-2',
+                  !isSubVariable && ' pl-[60px]',
+                )}>
+                  {isSubVariable
+                    ? (
+                      <Select
+                        popupInnerClassName='w-[165px] max-h-none'
+                        onSelect={value => handleAddSubVariableCondition?.(caseId!, conditionId!, value.value as string)}
+                        items={subVarOptions}
+                        value=''
+                        renderTrigger={() => (
+                          <Button
+                            size='small'
+                            disabled={readOnly}
+                          >
+                            <RiAddLine className='mr-1 h-3.5 w-3.5' />
+                            {t('workflow.nodes.ifElse.addSubVariable')}
+                          </Button>
+                        )}
+                        hideChecked
+                      />
+                    )
+                    : (
+                      <ConditionAdd
+                        disabled={readOnly}
+                        caseId={item.case_id}
+                        variables={getAvailableVars(id, '', filterVar)}
+                        onSelectVariable={handleAddCondition!}
+                      />
+                    )}
+
+                  {
+                    ((index === 0 && casesLength > 1) || (index > 0)) && (
+                      <Button
+                        className='hover:bg-components-button-destructive-ghost-bg-hover hover:text-components-button-destructive-ghost-text'
+                        size='small'
+                        variant='ghost'
+                        disabled={readOnly}
+                        onClick={() => handleRemoveCase?.(item.case_id)}
+                        onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
+                        onMouseLeave={() => setWillDeleteCaseId('')}
+                      >
+                        <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />
+                        {t('common.operation.remove')}
+                      </Button>
+                    )
+                  }
+                </div>
+              </div>
+              {!isSubVariable && (
+                <div className='mx-3 my-2 h-px bg-divider-subtle'></div>
+              )}
+            </div>
+          ))
+        }
+      </ReactSortable>
+      {(cases.length === 0) && (
+        <Button
+          size='small'
+          disabled={readOnly}
+          onClick={() => handleAddSubVariableCondition?.(caseId!, conditionId!)}
+        >
+          <RiAddLine className='mr-1 h-3.5 w-3.5' />
+          {t('workflow.nodes.ifElse.addSubVariable')}
+        </Button>
+      )}
+    </>
+  )
+}
+export default React.memo(ConditionWrap)

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

@@ -0,0 +1,79 @@
+import { type NodeDefault, VarType } from '../../types'
+import { type IfElseNodeType, LogicalOperator } from './types'
+import { isEmptyRelatedOperator } from './utils'
+import { genNodeMetaData } from '@/app/components/workflow/utils'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
+const i18nPrefix = 'workflow.errorMsg'
+
+const metaData = genNodeMetaData({
+  classification: BlockClassificationEnum.Logic,
+  sort: 1,
+  type: BlockEnum.IfElse,
+  helpLinkUri: 'ifelse',
+})
+const nodeDefault: NodeDefault<IfElseNodeType> = {
+  metaData,
+  defaultValue: {
+    _targetBranches: [
+      {
+        id: 'true',
+        name: 'IF',
+      },
+      {
+        id: 'false',
+        name: 'ELSE',
+      },
+    ],
+    cases: [
+      {
+        case_id: 'true',
+        logical_operator: LogicalOperator.and,
+        conditions: [],
+      },
+    ],
+  },
+  checkValid(payload: IfElseNodeType, t: any) {
+    let errorMessages = ''
+    const { cases } = payload
+    if (!cases || cases.length === 0)
+      errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: 'IF' })
+
+    cases.forEach((caseItem, index) => {
+      if (!caseItem.conditions.length)
+        errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: index === 0 ? 'IF' : 'ELIF' })
+
+      caseItem.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) {
+          if (condition.sub_variable_condition) {
+            const isSet = condition.sub_variable_condition.conditions.every((c) => {
+              if (!c.comparison_operator)
+                return false
+
+              if (isEmptyRelatedOperator(c.comparison_operator!))
+                return true
+
+              return (c.varType === VarType.boolean || c.varType === VarType.arrayBoolean) ? c.value === undefined : !!c.value
+            })
+            if (!isSet)
+              errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variableValue`) })
+          }
+          else {
+            if (!isEmptyRelatedOperator(condition.comparison_operator!) && ((condition.varType === VarType.boolean || condition.varType === VarType.arrayBoolean) ? condition.value === undefined : !condition.value))
+              errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variableValue`) })
+          }
+        }
+      })
+    })
+    return {
+      isValid: !errorMessages,
+      errorMessage: errorMessages,
+    }
+  },
+}
+
+export default nodeDefault

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

@@ -0,0 +1,100 @@
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { NodeProps } from 'reactflow'
+import { NodeSourceHandle } from '../_base/components/node-handle'
+import { isEmptyRelatedOperator } from './utils'
+import type { Condition, IfElseNodeType } from './types'
+import ConditionValue from './components/condition-value'
+import ConditionFilesListValue from './components/condition-files-list-value'
+import { VarType } from '../../types'
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
+  const { data } = props
+  const { t } = useTranslation()
+  const { cases } = data
+  const casesLength = cases.length
+  const checkIsConditionSet = useCallback((condition: Condition) => {
+    if (!condition.variable_selector || condition.variable_selector.length === 0)
+      return false
+
+    if (condition.sub_variable_condition) {
+      const isSet = condition.sub_variable_condition.conditions.every((c) => {
+        if (!c.comparison_operator)
+          return false
+
+        return (c.varType === VarType.boolean || c.varType === VarType.arrayBoolean) ? true : !!c.value
+      })
+      return isSet
+    }
+    else {
+      if (isEmptyRelatedOperator(condition.comparison_operator!))
+        return true
+      return (condition.varType === VarType.boolean || condition.varType === VarType.arrayBoolean) ? true : !!condition.value
+    }
+  }, [])
+  const conditionNotSet = (<div className='flex h-6 items-center space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
+    {t(`${i18nPrefix}.conditionNotSetup`)}
+  </div>)
+
+  return (
+    <div className='px-3'>
+      {
+        cases.map((caseItem, index) => (
+          <div key={caseItem.case_id}>
+            <div className='relative flex h-6 items-center px-1'>
+              <div className='flex w-full items-center justify-between'>
+                <div className='text-[10px] font-semibold text-text-tertiary'>
+                  {casesLength > 1 && `CASE ${index + 1}`}
+                </div>
+                <div className='text-[12px] font-semibold text-text-secondary'>{index === 0 ? 'IF' : 'ELIF'}</div>
+              </div>
+              <NodeSourceHandle
+                {...props}
+                handleId={caseItem.case_id}
+                handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
+              />
+            </div>
+            <div className='space-y-0.5'>
+              {caseItem.conditions.map((condition, i) => (
+                <div key={condition.id} className='relative'>
+                  {
+                    checkIsConditionSet(condition)
+                      ? (
+                        (!isEmptyRelatedOperator(condition.comparison_operator!) && condition.sub_variable_condition)
+                          ? (
+                            <ConditionFilesListValue condition={condition} />
+                          )
+                          : (
+                            <ConditionValue
+                              variableSelector={condition.variable_selector!}
+                              operator={condition.comparison_operator!}
+                              value={condition.varType === VarType.boolean ? (!condition.value ? 'False' : condition.value) : condition.value}
+                            />
+                          )
+
+                      )
+                      : conditionNotSet}
+                  {i !== caseItem.conditions.length - 1 && (
+                    <div className='absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      }
+      <div className='relative flex h-6 items-center px-1'>
+        <div className='w-full text-right text-xs font-semibold text-text-secondary'>ELSE</div>
+        <NodeSourceHandle
+          {...props}
+          handleId='false'
+          handleClassName='!top-1/2 !-right-[21px] !-translate-y-1/2'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(IfElseNode)

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

@@ -0,0 +1,87 @@
+import type { FC } from 'react'
+import {
+  memo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import useConfig from './use-config'
+import type { IfElseNodeType } from './types'
+import ConditionWrap from './components/condition-wrap'
+import Button from '@/app/components/base/button'
+import type { NodePanelProps } from '@/app/components/workflow/types'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+
+const i18nPrefix = 'workflow.nodes.ifElse'
+
+const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
+  id,
+  data,
+}) => {
+  const { t } = useTranslation()
+  const {
+    readOnly,
+    inputs,
+    filterVar,
+    handleAddCase,
+    handleRemoveCase,
+    handleSortCase,
+    handleAddCondition,
+    handleUpdateCondition,
+    handleRemoveCondition,
+    handleToggleConditionLogicalOperator,
+    handleAddSubVariableCondition,
+    handleRemoveSubVariableCondition,
+    handleUpdateSubVariableCondition,
+    handleToggleSubVariableConditionLogicalOperator,
+    nodesOutputVars,
+    availableNodes,
+    varsIsVarFileAttribute,
+  } = useConfig(id, data)
+  const cases = inputs.cases || []
+
+  return (
+    <div className='p-1'>
+      <ConditionWrap
+        nodeId={id}
+        cases={cases}
+        readOnly={readOnly}
+        handleSortCase={handleSortCase}
+        handleRemoveCase={handleRemoveCase}
+        handleAddCondition={handleAddCondition}
+        handleRemoveCondition={handleRemoveCondition}
+        handleUpdateCondition={handleUpdateCondition}
+        handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
+        handleAddSubVariableCondition={handleAddSubVariableCondition}
+        handleRemoveSubVariableCondition={handleRemoveSubVariableCondition}
+        handleUpdateSubVariableCondition={handleUpdateSubVariableCondition}
+        handleToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
+        nodesOutputVars={nodesOutputVars}
+        availableNodes={availableNodes}
+        varsIsVarFileAttribute={varsIsVarFileAttribute}
+        filterVar={filterVar}
+      />
+      <div className='px-4 py-2'>
+        <Button
+          className='w-full'
+          variant='tertiary'
+          onClick={() => handleAddCase()}
+          disabled={readOnly}
+        >
+          <RiAddLine className='mr-1 h-4 w-4' />
+          ELIF
+        </Button>
+      </div>
+      <div className='mx-3 my-2 h-px bg-divider-subtle'></div>
+      <Field
+        title={t(`${i18nPrefix}.else`)}
+        className='px-4 py-2'
+      >
+        <div className='text-xs font-normal leading-[18px] text-text-tertiary'>{t(`${i18nPrefix}.elseDescription`)}</div>
+      </Field>
+    </div>
+  )
+}
+
+export default memo(Panel)

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

@@ -0,0 +1,71 @@
+import type { VarType as NumberVarType } from '../tool/types'
+import type {
+  CommonNodeType,
+  ValueSelector,
+  Var,
+  VarType,
+} 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',
+  in = 'in',
+  notIn = 'not in',
+  allOf = 'all of',
+  exists = 'exists',
+  notExists = 'not exists',
+}
+
+export type Condition = {
+  id: string
+  varType: VarType
+  variable_selector?: ValueSelector
+  key?: string // sub variable key
+  comparison_operator?: ComparisonOperator
+  value: string | string[] | boolean
+  numberVarType?: NumberVarType
+  sub_variable_condition?: CaseItem
+}
+
+export type CaseItem = {
+  case_id: string
+  logical_operator: LogicalOperator
+  conditions: Condition[]
+}
+
+export type IfElseNodeType = CommonNodeType & {
+  logical_operator?: LogicalOperator
+  conditions?: Condition[]
+  cases: CaseItem[]
+  isInIteration: boolean
+  isInLoop: boolean
+}
+
+export type HandleAddCondition = (caseId: string, valueSelector: ValueSelector, varItem: Var) => void
+export type HandleRemoveCondition = (caseId: string, conditionId: string) => void
+export type HandleUpdateCondition = (caseId: string, conditionId: string, newCondition: Condition) => void
+export type HandleToggleConditionLogicalOperator = (caseId: string) => void
+
+export type HandleAddSubVariableCondition = (caseId: string, conditionId: string, key?: string) => void
+export type handleRemoveSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string) => void
+export type HandleUpdateSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string, newSubCondition: Condition) => void
+export type HandleToggleSubVariableConditionLogicalOperator = (caseId: string, conditionId: string) => void

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

@@ -0,0 +1,278 @@
+import { useCallback, useMemo } from 'react'
+import { produce } from 'immer'
+import { v4 as uuid4 } from 'uuid'
+import { useUpdateNodeInternals } from 'reactflow'
+import type {
+  Var,
+} from '../../types'
+import { VarType } from '../../types'
+import { LogicalOperator } from './types'
+import type {
+  CaseItem,
+  HandleAddCondition,
+  HandleAddSubVariableCondition,
+  HandleRemoveCondition,
+  HandleToggleConditionLogicalOperator,
+  HandleToggleSubVariableConditionLogicalOperator,
+  HandleUpdateCondition,
+  HandleUpdateSubVariableCondition,
+  IfElseNodeType,
+} from './types'
+import {
+  branchNameCorrect,
+  getOperators,
+} from './utils'
+import useIsVarFileAttribute from './use-is-var-file-attribute'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import {
+  useEdgesInteractions,
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+
+const useConfig = (id: string, payload: IfElseNodeType) => {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
+  const { inputs, setInputs } = useNodeCrud<IfElseNodeType>(id, payload)
+
+  const filterVar = useCallback(() => {
+    return true
+  }, [])
+
+  const {
+    availableVars,
+    availableNodesWithParent,
+  } = useAvailableVarList(id, {
+    onlyLeafNodeVar: false,
+    filterVar,
+  })
+
+  const filterNumberVar = useCallback((varPayload: Var) => {
+    return varPayload.type === VarType.number
+  }, [])
+
+  const {
+    getIsVarFileAttribute,
+  } = useIsVarFileAttribute({
+    nodeId: id,
+    isInIteration: payload.isInIteration,
+    isInLoop: payload.isInLoop,
+  })
+
+  const varsIsVarFileAttribute = useMemo(() => {
+    const conditions: Record<string, boolean> = {}
+    inputs.cases?.forEach((c) => {
+      c.conditions.forEach((condition) => {
+        conditions[condition.id] = getIsVarFileAttribute(condition.variable_selector!)
+      })
+    })
+    return conditions
+  }, [inputs.cases, getIsVarFileAttribute])
+
+  const {
+    availableVars: availableNumberVars,
+    availableNodesWithParent: availableNumberNodesWithParent,
+  } = useAvailableVarList(id, {
+    onlyLeafNodeVar: false,
+    filterVar: filterNumberVar,
+  })
+
+  const handleAddCase = useCallback(() => {
+    const newInputs = produce(inputs, (draft) => {
+      if (draft.cases) {
+        const case_id = uuid4()
+        draft.cases.push({
+          case_id,
+          logical_operator: LogicalOperator.and,
+          conditions: [],
+        })
+        if (draft._targetBranches) {
+          const elseCaseIndex = draft._targetBranches.findIndex(branch => branch.id === 'false')
+          if (elseCaseIndex > -1) {
+            draft._targetBranches = branchNameCorrect([
+              ...draft._targetBranches.slice(0, elseCaseIndex),
+              {
+                id: case_id,
+                name: '',
+              },
+              ...draft._targetBranches.slice(elseCaseIndex),
+            ])
+          }
+        }
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleRemoveCase = useCallback((caseId: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.cases = draft.cases?.filter(item => item.case_id !== caseId)
+
+      if (draft._targetBranches)
+        draft._targetBranches = branchNameCorrect(draft._targetBranches.filter(branch => branch.id !== caseId))
+
+      handleEdgeDeleteByDeleteBranch(id, caseId)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs, id, handleEdgeDeleteByDeleteBranch])
+
+  const handleSortCase = useCallback((newCases: (CaseItem & { id: string })[]) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.cases = newCases.filter(Boolean).map(item => ({
+        id: item.id,
+        case_id: item.case_id,
+        logical_operator: item.logical_operator,
+        conditions: item.conditions,
+      }))
+
+      draft._targetBranches = branchNameCorrect([
+        ...newCases.filter(Boolean).map(item => ({ id: item.case_id, name: '' })),
+        { id: 'false', name: '' },
+      ])
+    })
+    setInputs(newInputs)
+    updateNodeInternals(id)
+  }, [id, inputs, setInputs, updateNodeInternals])
+
+  const handleAddCondition = useCallback<HandleAddCondition>((caseId, valueSelector, varItem) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase) {
+        targetCase.conditions.push({
+          id: uuid4(),
+          varType: varItem.type,
+          variable_selector: valueSelector,
+          comparison_operator: getOperators(varItem.type, getIsVarFileAttribute(valueSelector) ? { key: valueSelector.slice(-1)[0] } : undefined)[0],
+          value: (varItem.type === VarType.boolean || varItem.type === VarType.arrayBoolean) ? false : '',
+        })
+      }
+    })
+    setInputs(newInputs)
+  }, [getIsVarFileAttribute, inputs, setInputs])
+
+  const handleRemoveCondition = useCallback<HandleRemoveCondition>((caseId, conditionId) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase)
+        targetCase.conditions = targetCase.conditions.filter(item => item.id !== conditionId)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleUpdateCondition = useCallback<HandleUpdateCondition>((caseId, conditionId, newCondition) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase) {
+        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
+        if (targetCondition)
+          Object.assign(targetCondition, newCondition)
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleToggleConditionLogicalOperator = useCallback<HandleToggleConditionLogicalOperator>((caseId) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase)
+        targetCase.logical_operator = targetCase.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAddSubVariableCondition = useCallback<HandleAddSubVariableCondition>((caseId: string, conditionId: string, key?: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      const condition = draft.cases?.find(item => item.case_id === caseId)?.conditions.find(item => item.id === conditionId)
+      if (!condition)
+        return
+      if (!condition?.sub_variable_condition) {
+        condition.sub_variable_condition = {
+          case_id: uuid4(),
+          logical_operator: LogicalOperator.and,
+          conditions: [],
+        }
+      }
+      const subVarCondition = condition.sub_variable_condition
+      if (subVarCondition) {
+        if (!subVarCondition.conditions)
+          subVarCondition.conditions = []
+
+        subVarCondition.conditions.push({
+          id: uuid4(),
+          key: key || '',
+          varType: VarType.string,
+          comparison_operator: undefined,
+          value: '',
+        })
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleRemoveSubVariableCondition = useCallback((caseId: string, conditionId: string, subConditionId: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      const condition = draft.cases?.find(item => item.case_id === caseId)?.conditions.find(item => item.id === conditionId)
+      if (!condition)
+        return
+      if (!condition?.sub_variable_condition)
+        return
+      const subVarCondition = condition.sub_variable_condition
+      if (subVarCondition)
+        subVarCondition.conditions = subVarCondition.conditions.filter(item => item.id !== subConditionId)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleUpdateSubVariableCondition = useCallback<HandleUpdateSubVariableCondition>((caseId, conditionId, subConditionId, newSubCondition) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase) {
+        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
+        if (targetCondition && targetCondition.sub_variable_condition) {
+          const targetSubCondition = targetCondition.sub_variable_condition.conditions.find(item => item.id === subConditionId)
+          if (targetSubCondition)
+            Object.assign(targetSubCondition, newSubCondition)
+        }
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleToggleSubVariableConditionLogicalOperator = useCallback<HandleToggleSubVariableConditionLogicalOperator>((caseId, conditionId) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase) {
+        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
+        if (targetCondition && targetCondition.sub_variable_condition)
+          targetCondition.sub_variable_condition.logical_operator = targetCondition.sub_variable_condition.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  return {
+    readOnly,
+    inputs,
+    filterVar,
+    filterNumberVar,
+    handleAddCase,
+    handleRemoveCase,
+    handleSortCase,
+    handleAddCondition,
+    handleRemoveCondition,
+    handleUpdateCondition,
+    handleToggleConditionLogicalOperator,
+    handleAddSubVariableCondition,
+    handleUpdateSubVariableCondition,
+    handleRemoveSubVariableCondition,
+    handleToggleSubVariableConditionLogicalOperator,
+    nodesOutputVars: availableVars,
+    availableNodes: availableNodesWithParent,
+    nodesOutputNumberVars: availableNumberVars,
+    availableNumberNodes: availableNumberNodesWithParent,
+    varsIsVarFileAttribute,
+  }
+}
+
+export default useConfig

dify/web/app/components/workflow/nodes/if-else/use-is-var-file-attribute.ts

@@ -0,0 +1,48 @@
+import { useStoreApi } from 'reactflow'
+import { useMemo } from 'react'
+import { useIsChatMode, useWorkflow, useWorkflowVariables } from '../../hooks'
+import type { ValueSelector } from '../../types'
+import { VarType } from '../../types'
+
+type Params = {
+  nodeId: string
+  isInIteration: boolean
+  isInLoop: boolean
+}
+const useIsVarFileAttribute = ({
+  nodeId,
+  isInIteration,
+  isInLoop,
+}: Params) => {
+  const isChatMode = useIsChatMode()
+  const store = useStoreApi()
+  const { getBeforeNodesInSameBranch } = useWorkflow()
+  const {
+    getNodes,
+  } = store.getState()
+  const currentNode = getNodes().find(n => n.id === nodeId)
+  const iterationNode = isInIteration ? getNodes().find(n => n.id === currentNode!.parentId) : null
+  const loopNode = isInLoop ? getNodes().find(n => n.id === currentNode!.parentId) : null
+  const availableNodes = useMemo(() => {
+    return getBeforeNodesInSameBranch(nodeId)
+  }, [getBeforeNodesInSameBranch, nodeId])
+  const { getCurrentVariableType } = useWorkflowVariables()
+  const getIsVarFileAttribute = (variable: ValueSelector) => {
+    if (variable.length !== 3)
+      return false
+    const parentVariable = variable.slice(0, 2)
+    const varType = getCurrentVariableType({
+      parentNode: isInIteration ? iterationNode : loopNode,
+      valueSelector: parentVariable,
+      availableNodes,
+      isChatMode,
+      isConstant: false,
+    })
+    return varType === VarType.file
+  }
+  return {
+    getIsVarFileAttribute,
+  }
+}
+
+export default useIsVarFileAttribute

dify/web/app/components/workflow/nodes/if-else/use-single-run-form-params.ts

@@ -0,0 +1,150 @@
+import type { RefObject } from 'react'
+import type { InputVar, ValueSelector, Variable } from '@/app/components/workflow/types'
+import { useCallback } from 'react'
+import type { CaseItem, Condition, IfElseNodeType } from './types'
+
+type Params = {
+  id: string,
+  payload: IfElseNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: RefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+  varSelectorsToVarInputs: (variables: ValueSelector[]) => InputVar[]
+}
+const useSingleRunFormParams = ({
+  payload,
+  runInputData,
+  setRunInputData,
+  getInputVars,
+  varSelectorsToVarInputs,
+}: Params) => {
+  const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
+    setRunInputData(newPayload)
+  }, [setRunInputData])
+  const inputVarValues = (() => {
+    const vars: Record<string, any> = {}
+    Object.keys(runInputData)
+      .forEach((key) => {
+        vars[key] = runInputData[key]
+      })
+    return vars
+  })()
+
+  const getVarSelectorsFromCase = (caseItem: CaseItem): ValueSelector[] => {
+    const vars: ValueSelector[] = []
+    if (caseItem.conditions && caseItem.conditions.length) {
+      caseItem.conditions.forEach((condition) => {
+        // eslint-disable-next-line ts/no-use-before-define
+        const conditionVars = getVarSelectorsFromCondition(condition)
+        vars.push(...conditionVars)
+      })
+    }
+    return vars
+  }
+
+  const getVarSelectorsFromCondition = (condition: Condition) => {
+    const vars: ValueSelector[] = []
+    if (condition.variable_selector)
+      vars.push(condition.variable_selector)
+
+    if (condition.sub_variable_condition && condition.sub_variable_condition.conditions?.length)
+      vars.push(...getVarSelectorsFromCase(condition.sub_variable_condition))
+    return vars
+  }
+
+  const getInputVarsFromCase = (caseItem: CaseItem): InputVar[] => {
+    const vars: InputVar[] = []
+    if (caseItem.conditions && caseItem.conditions.length) {
+      caseItem.conditions.forEach((condition) => {
+        // eslint-disable-next-line ts/no-use-before-define
+        const conditionVars = getInputVarsFromConditionValue(condition)
+        vars.push(...conditionVars)
+      })
+    }
+    return vars
+  }
+
+  const getInputVarsFromConditionValue = (condition: Condition): InputVar[] => {
+    const vars: InputVar[] = []
+    if (condition.value && typeof condition.value === 'string') {
+      const inputVars = getInputVars([condition.value])
+      vars.push(...inputVars)
+    }
+
+    if (condition.sub_variable_condition && condition.sub_variable_condition.conditions?.length)
+      vars.push(...getInputVarsFromCase(condition.sub_variable_condition))
+
+    return vars
+  }
+
+  const forms = (() => {
+    const allInputs: ValueSelector[] = []
+    const inputVarsFromValue: InputVar[] = []
+    if (payload.cases && payload.cases.length) {
+      payload.cases.forEach((caseItem) => {
+        const caseVars = getVarSelectorsFromCase(caseItem)
+        allInputs.push(...caseVars)
+        inputVarsFromValue.push(...getInputVarsFromCase(caseItem))
+      })
+    }
+    const varInputs = [...varSelectorsToVarInputs(allInputs), ...inputVarsFromValue]
+    // remove duplicate inputs
+    const existVarsKey: Record<string, boolean> = {}
+    const uniqueVarInputs: InputVar[] = []
+    varInputs.forEach((input) => {
+      if(!input)
+        return
+      if (!existVarsKey[input.variable]) {
+        existVarsKey[input.variable] = true
+        uniqueVarInputs.push(input)
+      }
+    })
+    return [
+      {
+        inputs: uniqueVarInputs,
+        values: inputVarValues,
+        onChange: setInputVarValues,
+      },
+    ]
+  })()
+
+  const getVarFromCaseItem = (caseItem: CaseItem): ValueSelector[] => {
+    const vars: ValueSelector[] = []
+    if (caseItem.conditions && caseItem.conditions.length) {
+      caseItem.conditions.forEach((condition) => {
+        // eslint-disable-next-line ts/no-use-before-define
+        const conditionVars = getVarFromCondition(condition)
+        vars.push(...conditionVars)
+      })
+    }
+    return vars
+  }
+  const getVarFromCondition = (condition: Condition): ValueSelector[] => {
+    const vars: ValueSelector[] = []
+    if (condition.variable_selector)
+      vars.push(condition.variable_selector)
+
+    if(condition.sub_variable_condition && condition.sub_variable_condition.conditions?.length)
+      vars.push(...getVarFromCaseItem(condition.sub_variable_condition))
+    return vars
+  }
+
+  const getDependentVars = () => {
+    const vars: ValueSelector[] = []
+    if (payload.cases && payload.cases.length) {
+      payload.cases.forEach((caseItem) => {
+        const caseVars = getVarFromCaseItem(caseItem)
+        vars.push(...caseVars)
+      })
+    }
+    return vars
+  }
+  return {
+    forms,
+    getDependentVars,
+  }
+}
+
+export default useSingleRunFormParams

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

@@ -0,0 +1,192 @@
+import { ComparisonOperator } from './types'
+import { VarType } from '@/app/components/workflow/types'
+import type { Branch } from '@/app/components/workflow/types'
+
+export const isEmptyRelatedOperator = (operator: ComparisonOperator) => {
+  return [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull, ComparisonOperator.exists, ComparisonOperator.notExists].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)
+}
+
+export const getOperators = (type?: VarType, file?: { key: string }) => {
+  const isFile = !!file
+  if (isFile) {
+    const { key } = file
+
+    switch (key) {
+      case 'name':
+        return [
+          ComparisonOperator.contains,
+          ComparisonOperator.notContains,
+          ComparisonOperator.startWith,
+          ComparisonOperator.endWith,
+          ComparisonOperator.is,
+          ComparisonOperator.isNot,
+          ComparisonOperator.empty,
+          ComparisonOperator.notEmpty,
+        ]
+      case 'type':
+        return [
+          ComparisonOperator.in,
+          ComparisonOperator.notIn,
+        ]
+      case 'size':
+        return [
+          ComparisonOperator.largerThan,
+          ComparisonOperator.largerThanOrEqual,
+          ComparisonOperator.lessThan,
+          ComparisonOperator.lessThanOrEqual,
+        ]
+      case 'extension':
+        return [
+          ComparisonOperator.is,
+          ComparisonOperator.isNot,
+          ComparisonOperator.contains,
+          ComparisonOperator.notContains,
+        ]
+      case 'mime_type':
+        return [
+          ComparisonOperator.contains,
+          ComparisonOperator.notContains,
+          ComparisonOperator.startWith,
+          ComparisonOperator.endWith,
+          ComparisonOperator.is,
+          ComparisonOperator.isNot,
+          ComparisonOperator.empty,
+          ComparisonOperator.notEmpty,
+        ]
+      case 'transfer_method':
+        return [
+          ComparisonOperator.in,
+          ComparisonOperator.notIn,
+        ]
+      case 'url':
+        return [
+          ComparisonOperator.contains,
+          ComparisonOperator.notContains,
+          ComparisonOperator.startWith,
+          ComparisonOperator.endWith,
+          ComparisonOperator.is,
+          ComparisonOperator.isNot,
+          ComparisonOperator.empty,
+          ComparisonOperator.notEmpty,
+        ]
+      case 'related_id':
+        return [
+          ComparisonOperator.is,
+          ComparisonOperator.isNot,
+          ComparisonOperator.contains,
+          ComparisonOperator.notContains,
+          ComparisonOperator.startWith,
+          ComparisonOperator.endWith,
+          ComparisonOperator.empty,
+          ComparisonOperator.notEmpty,
+        ]
+    }
+    return []
+  }
+  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:
+    case VarType.integer:
+      return [
+        ComparisonOperator.equal,
+        ComparisonOperator.notEqual,
+        ComparisonOperator.largerThan,
+        ComparisonOperator.lessThan,
+        ComparisonOperator.largerThanOrEqual,
+        ComparisonOperator.lessThanOrEqual,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case VarType.boolean:
+      return [
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+      ]
+    case VarType.file:
+      return [
+        ComparisonOperator.exists,
+        ComparisonOperator.notExists,
+      ]
+    case VarType.arrayString:
+    case VarType.arrayNumber:
+    case VarType.arrayBoolean:
+      return [
+        ComparisonOperator.contains,
+        ComparisonOperator.notContains,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case VarType.array:
+    case VarType.arrayObject:
+      return [
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    case VarType.arrayFile:
+      return [
+        ComparisonOperator.contains,
+        ComparisonOperator.notContains,
+        ComparisonOperator.allOf,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+    default:
+      return [
+        ComparisonOperator.is,
+        ComparisonOperator.isNot,
+        ComparisonOperator.empty,
+        ComparisonOperator.notEmpty,
+      ]
+  }
+}
+
+export const comparisonOperatorNotRequireValue = (operator?: ComparisonOperator) => {
+  if (!operator)
+    return false
+
+  return [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull, ComparisonOperator.exists, ComparisonOperator.notExists].includes(operator)
+}
+
+export const branchNameCorrect = (branches: Branch[]) => {
+  const branchLength = branches.length
+  if (branchLength < 2)
+    throw new Error('if-else node branch number must than 2')
+
+  if (branchLength === 2) {
+    return branches.map((branch) => {
+      return {
+        ...branch,
+        name: branch.id === 'false' ? 'ELSE' : 'IF',
+      }
+    })
+  }
+
+  return branches.map((branch, index) => {
+    return {
+      ...branch,
+      name: branch.id === 'false' ? 'ELSE' : `CASE ${index + 1}`,
+    }
+  })
+}