opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: ifelse check and item choose var first

This commit is contained in:
Joel 2024-03-20 11:35:21 +08:00
parent 70698b553e
commit 67b3ee3776
9 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/workflow/nodes/_base/components/selector.tsx
View File

@ -15,6 +15,7 @@ type Props = {
noLeft?: boolean
options: Item[]
value: string
placeholder?: string
onChange: (value: any) => void
uppercase?: boolean
popupClassName?: string
@ -30,6 +31,7 @@ const TypeSelector: FC<Props> = ({
noLeft,
options: list,
value,
placeholder = '',
onChange,
uppercase,
triggerClassName,
@ -38,6 +40,7 @@ const TypeSelector: FC<Props> = ({
readonly,
showChecked,
}) => {
const noValue = value === '' || value === undefined || value === null
const item = list.find(item => item.value === value)
const [showOption, { setFalse: setHide, toggle: toggleShow }] = useBoolean(false)
const ref = React.useRef(null)
@ -58,7 +61,7 @@ const TypeSelector: FC<Props> = ({
<div
onClick={toggleShow}
className={cn(showOption && 'bg-black/5', 'flex items-center h-5 pl-1 pr-0.5 rounded-md text-xs font-semibold text-gray-700 cursor-pointer hover:bg-black/5')}>
<div className={cn(triggerClassName, 'text-sm font-semibold', uppercase && 'uppercase')}>{item?.label}</div>
<div className={cn(triggerClassName, 'text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-gray-400')}>{!noValue ? item?.label : placeholder}</div>
<DropDownIcon className='w-3 h-3 ' />
</div>
)}

25
web/app/components/workflow/nodes/if-else/components/condition-item.tsx
View File

@ -91,7 +91,7 @@ const Item: FC<ItemProps> = ({
filterVar,
}) => {
const { t } = useTranslation()
const isValueReadOnly = [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull].includes(payload.comparison_operator)
const isValueReadOnly = payload.comparison_operator ? [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull].includes(payload.comparison_operator) : false
const handleVarReferenceChange = useCallback((value: ValueSelector | string) => {
onChange({
@ -156,18 +156,23 @@ const Item: FC<ItemProps> = ({
if (!varType) {
e.stopPropagation()
Toast.notify({
message: 'please selector var first', // t(`${i18nPrefix}.selectVarType`)
message: t(`${i18nPrefix}.notSetVariable`),
type: 'error',
})
}
}}
className='shrink-0 w-[100px] whitespace-nowrap flex items-center h-8 justify-between px-2.5 rounded-lg bg-gray-100 capitalize cursor-pointer'
>
<div className='text-[13px] font-normal text-gray-900'>{isComparisonOperatorNeedTranslate(payload.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${payload.comparison_operator}`) : payload.comparison_operator}</div>
{
!payload.comparison_operator
? <div className='text-[13px] font-normal text-gray-400'>{t(`${i18nPrefix}.operator`)}</div>
: <div className='text-[13px] font-normal text-gray-900'>{isComparisonOperatorNeedTranslate(payload.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${payload.comparison_operator}`) : payload.comparison_operator}</div>
}
</div>
}
readonly={readonly}
value={payload.comparison_operator}
value={payload.comparison_operator || ''}
options={getOperators(varType).map((o) => {
return {
label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
@ -178,10 +183,18 @@ const Item: FC<ItemProps> = ({
/>
<input
readOnly={readonly || isValueReadOnly}
readOnly={readonly || isValueReadOnly || !varType}
onClick={() => {
if (!varType) {
Toast.notify({
message: t(`${i18nPrefix}.notSetVariable`),
type: 'error',
})
}
}}
value={!isValueReadOnly ? payload.value : ''}
onChange={handleValueChange}
placeholder={!isValueReadOnly ? t(`${i18nPrefix}.enterValue`)! : ''}
placeholder={(!readonly && !isValueReadOnly) ? t(`${i18nPrefix}.enterValue`)! : ''}
className='w-[80px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
type='text'
/>

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

@ -1,7 +1,7 @@
import { BlockEnum, type NodeDefault } from '../../types'
import { type IfElseNodeType, LogicalOperator } from './types'
import { isEmptyRelatedOperator } from './utils'
import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
const i18nPrefix = 'workflow.errorMsg'
const nodeDefault: NodeDefault<IfElseNodeType> = {
@ -38,7 +38,9 @@ const nodeDefault: NodeDefault<IfElseNodeType> = {
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.value)
if (!errorMessages && !condition.comparison_operator)
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.ifElse.operator') })
if (!errorMessages && !isEmptyRelatedOperator(condition.comparison_operator!) && !condition.value)
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variableValue`) })
})
return {

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

@ -25,13 +25,13 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
</div>
<div className='mb-0.5 leading-4 text-[10px] font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.conditions`)}</div>
<div className='space-y-0.5'>
{conditions.map((condition, i) => (
{conditions.filter(item => (item.variable_selector && item.variable_selector.length > 0 && item.comparison_operator && (isEmptyRelatedOperator(item.comparison_operator!) ? true : !!item.value))).map((condition, i) => (
<div key={condition.id} className='relative'>
<div className='flex items-center h-6 bg-gray-100 rounded-md px-1 space-x-1 text-xs font-normal text-gray-700'>
<Variable02 className='w-3.5 h-3.5 text-primary-500' />
<span>{condition.variable_selector.slice(-1)[0]}</span>
<span className='text-gray-500'>{isComparisonOperatorNeedTranslate(condition.comparison_operator) ? t(`${i18nPrefix}.comparisonOperator.${condition.comparison_operator}`) : condition.comparison_operator}</span>
{!isEmptyRelatedOperator(condition.comparison_operator) && <span>{condition.value}</span>}
{!isEmptyRelatedOperator(condition.comparison_operator!) && <span>{condition.value}</span>}
</div>
{i !== conditions.length - 1 && (
<div className='absolute z-10 right-0 bottom-[-10px] leading-4 text-[10px] font-medium text-primary-600 uppercase'>{t(`${i18nPrefix}.${logical_operator}`)}</div>

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

@ -27,7 +27,7 @@ export enum ComparisonOperator {
export type Condition = {
id: string
variable_selector: ValueSelector
comparison_operator: ComparisonOperator
comparison_operator?: ComparisonOperator
value: string
}

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

@ -3,7 +3,7 @@ import produce from 'immer'
import type { Var } from '../../types'
import { VarType } from '../../types'
import { getVarType } from '../_base/components/variable/utils'
import { ComparisonOperator, LogicalOperator } from './types'
import { LogicalOperator } from './types'
import type { Condition, IfElseNodeType } from './types'
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
import {
@ -30,7 +30,7 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
draft.conditions.push({
id: `${Date.now()}`,
variable_selector: [],
comparison_operator: ComparisonOperator.equal,
comparison_operator: undefined,
value: '',
})
})

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

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

2
web/i18n/en-US/workflow.ts
View File

@ -231,6 +231,8 @@ const translation = {
elseDescription: 'Used to define the logic that should be executed when the if condition is not met.',
and: 'and',
or: 'or',
operator: 'Operator',
notSetVariable: 'Please set variable first',
comparisonOperator: {
'contains': 'contains',
'not contains': 'not contains',

2
web/i18n/zh-Hans/workflow.ts
View File

@ -231,6 +231,8 @@ const translation = {
elseDescription: '用于定义当 if 条件不满足时应执行的逻辑。',
and: 'and',
or: 'or',
operator: '操作符',
notSetVariable: '请先设置变量',
comparisonOperator: {
'contains': '包含',
'not contains': '不包含',