From 5ec91e85071602dcf6f7b54051550b1fea9d2a5b Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 23 Sep 2024 18:24:58 +0800 Subject: [PATCH] feat: if node render files sub vars --- .../components/condition-files-list-value.tsx | 112 ++++++++++++++++++ .../if-else/components/condition-value.tsx | 4 +- .../workflow/nodes/if-else/node.tsx | 64 +++++++--- 3 files changed, 163 insertions(+), 17 deletions(-) create mode 100644 web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx diff --git a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx new file mode 100644 index 0000000000..c5f0a2070c --- /dev/null +++ b/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 ( +
+
+ {!isEnvVar && !isChatVar && } + {isEnvVar && } + {isChatVar && } + +
+ {variableName} +
+
+ {operatorName} +
+ {/* { + !notHasValue && ( +
{isSelect ? selectName : formatValue}
+ ) + } */} +
+
+ { + sub_variable_condition?.conditions.map((c: Condition, index) => ( +
+
{c.key}
+
{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}
+ {c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) &&
{c.value}
} + {index !== sub_variable_condition.conditions.length - 1 && (
{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}
)} +
+ )) + } +
+
+ ) +} + +export default memo(ConditionValue) diff --git a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx index 31a2998099..f96cf01024 100644 --- a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx +++ b/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) diff --git a/web/app/components/workflow/nodes/if-else/node.tsx b/web/app/components/workflow/nodes/if-else/node.tsx index b1c0a4cc25..cf689d38b2 100644 --- a/web/app/components/workflow/nodes/if-else/node.tsx +++ b/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> = (props) => { @@ -13,6 +14,33 @@ const IfElseNode: FC> = (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 = (
+ {t(`${i18nPrefix}.conditionNotSetup`)} +
) return (
@@ -35,21 +63,25 @@ const IfElseNode: FC> = (props) => {
{caseItem.conditions.map((condition, i) => (
- {((condition.variable_selector && condition.variable_selector?.length > 0) && condition.comparison_operator && (isEmptyRelatedOperator(condition.comparison_operator!) ? true : !!condition.value)) - ? ( - - ) - : ( -
- {t(`${i18nPrefix}.conditionNotSetup`)} -
- )} + { + checkIsConditionSet(condition) + ? ( + (!isEmptyRelatedOperator(condition.comparison_operator!) && condition.sub_variable_condition) + ? ( + + ) + : ( + + ) + + ) + : conditionNotSet} {i !== caseItem.conditions.length - 1 && ( -
{t(`${i18nPrefix}.${caseItem.logical_operator}`)}
+
{t(`${i18nPrefix}.${caseItem.logical_operator}`)}
)}
))}