feat: if node render files sub vars

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

@@ -0,0 +1,112 @@
+import {
+  memo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Condition } from '../types'
+import {
+  comparisonOperatorNotRequireValue,
+  isComparisonOperatorNeedTranslate,
+  isEmptyRelatedOperator,
+} from '../utils'
+import type { ValueSelector } from '../../../types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
+import cn from '@/utils/classnames'
+import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+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 variableName = (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 isEnvVar = isENV(variableSelector)
+  const isChatVar = isConversationVar(variableSelector)
+  // const formatValue = useMemo(() => {
+  //   if (notHasValue)
+  //     return ''
+
+  //   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 === 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='rounded-md bg-workflow-block-parma-bg'>
+      <div className='flex items-center px-1 h-6 '>
+        {!isEnvVar && !isChatVar && <Variable02 className='shrink-0 mr-1 w-3.5 h-3.5 text-text-accent' />}
+        {isEnvVar && <Env className='shrink-0 mr-1 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
+        {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+
+        <div
+          className={cn(
+            'shrink-0  truncate text-xs font-medium text-text-accent',
+            !notHasValue && 'max-w-[70px]',
+          )}
+          title={variableName}
+        >
+          {variableName}
+        </div>
+        <div
+          className='shrink-0 mx-1 text-xs font-medium text-text-primary'
+          title={operatorName}
+        >
+          {operatorName}
+        </div>
+        {/* {
+        !notHasValue && (
+          <div className='truncate text-xs text-text-secondary' title={formatValue}>{isSelect ? selectName : formatValue}</div>
+        )
+      } */}
+      </div>
+      <div className='ml-[10px] pl-[10px] border-l border-divider-regular'>
+        {
+          sub_variable_condition?.conditions.map((c: Condition, index) => (
+            <div className='relative flex items-center h-6 space-x-1' key={c.id}>
+              <div className='text-text-accent system-xs-medium'>{c.key}</div>
+              <div className='text-text-primary system-xs-medium'>{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='text-text-secondary system-xs-regular'>{c.value}</div>}
+              {index !== sub_variable_condition.conditions.length - 1 && (<div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(ConditionValue)

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

@@ -16,16 +16,18 @@ import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow
 
 type ConditionValueProps = {
   variableSelector: string[]
+  labelName?: string
   operator: ComparisonOperator
   value: string
 }
 const ConditionValue = ({
   variableSelector,
+  labelName,
   operator,
   value,
 }: ConditionValueProps) => {
   const { t } = useTranslation()
-  const variableName = isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.')
+  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 isEnvVar = isENV(variableSelector)

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

@@ -1,11 +1,12 @@
 import type { FC } from 'react'
-import React 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 { IfElseNodeType } from './types'
+import type { Condition, IfElseNodeType } from './types'
 import ConditionValue from './components/condition-value'
+import ConditionFilesListValue from './components/condition-files-list-value'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
@@ -13,6 +14,33 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
   const { t } = useTranslation()
   const { cases } = data
   const casesLength = cases.length
+  console.log(cases)
+  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
+
+        if (isEmptyRelatedOperator(c.comparison_operator!))
+          return true
+
+        return !!c.value
+      })
+      return isSet
+    }
+    else {
+      if (isEmptyRelatedOperator(condition.comparison_operator!))
+        return true
+
+      return !!condition.value
+    }
+  }, [])
+  const conditionNotSet = (<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-text-secondary bg-workflow-block-parma-bg rounded-md'>
+    {t(`${i18nPrefix}.conditionNotSetup`)}
+  </div>)
 
   return (
     <div className='px-3'>
@@ -35,21 +63,25 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
             <div className='space-y-0.5'>
               {caseItem.conditions.map((condition, i) => (
                 <div key={condition.id} className='relative'>
-                  {((condition.variable_selector && condition.variable_selector?.length > 0) && condition.comparison_operator && (isEmptyRelatedOperator(condition.comparison_operator!) ? true : !!condition.value))
+                  {
-                    ? (
+                    checkIsConditionSet(condition)
-                      <ConditionValue
+                      ? (
-                        variableSelector={condition.variable_selector!}
+                        (!isEmptyRelatedOperator(condition.comparison_operator!) && condition.sub_variable_condition)
-                        operator={condition.comparison_operator}
+                          ? (
-                        value={condition.value}
+                            <ConditionFilesListValue condition={condition} />
-                      />
+                          )
-                    )
+                          : (
-                    : (
+                            <ConditionValue
-                      <div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-text-secondary bg-workflow-block-parma-bg rounded-md'>
+                              variableSelector={condition.variable_selector!}
-                        {t(`${i18nPrefix}.conditionNotSetup`)}
+                              operator={condition.comparison_operator!}
-                      </div>
+                              value={condition.value}
-                    )}
+                            />
+                          )
+
+                      )
+                      : conditionNotSet}
                   {i !== caseItem.conditions.length - 1 && (
-                    <div className='absolute z-10 right-0 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
+                    <div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
                   )}
                 </div>
               ))}