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

feat: add adn update condition

This commit is contained in:
Joel 2024-02-27 15:20:04 +08:00
parent 4519c6ab29
commit 0fb47fed9e
8 changed files with 216 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/components/workflow/nodes/_base/components/add-button.tsx Normal file
View File

@ -0,0 +1,28 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
type Props = {
className?: string
text: string
onClick: () => void
}
const AddButton: FC<Props> = ({
className,
text,
onClick,
}) => {
return (
<div
className={cn(className, 'flex items-center h-7 justify-center bg-gray-100 rounded-lg cursor-pointer text-xs font-medium text-gray-700 space-x-1')}
onClick={onClick}
>
<Plus className='w-3.5 h-3.5' />
{text}
</div>
)
}
export default React.memo(AddButton)

4
web/app/components/workflow/nodes/_base/components/field.tsx
View File

@ -22,8 +22,8 @@ const Filed: FC<Props> = ({
return (
<div className={cn(inline && 'flex justify-between items-center')}>
<div className='flex justify-between items-center'>
<div className='flex items-center'>
<div className='h-6 text-xs font-medium text-gray-500 uppercase'>{title}</div>
<div className='flex items-center h-6'>
<div className='text-xs font-medium text-gray-700 uppercase'>{title}</div>
{tooltip && (
<TooltipPlus popupContent='tooltip'>
<HelpCircle className='w-3.5 h-3.5 ml-0.5 text-gray-400' />

113
web/app/components/workflow/nodes/if-else/components/condition-item.tsx Normal file
View File

@ -0,0 +1,113 @@
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
import { LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
import type { ValueSelector } from '@/app/components/workflow/types'
import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
const i18nPrefix = 'workflow.nodes.ifElse'
const Line = (
<svg xmlns="http://www.w3.org/2000/svg" width="163" height="2" viewBox="0 0 163 2" fill="none">
<path d="M0 1H162.5" stroke="url(#paint0_linear_641_36452)" />
<defs>
<linearGradient id="paint0_linear_641_36452" x1="162.5" y1="9.99584" x2="6.6086e-06" y2="9.94317" gradientUnits="userSpaceOnUse">
<stop stopColor="#F3F4F6" />
<stop offset="1" stopColor="#F3F4F6" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
)
type ItemProps = {
readonly: boolean
payload: Condition
onChange: (newItem: Condition) => void
canRemove: boolean
onRemove?: () => void
isShowLogicalOperator?: boolean
logicalOperator: LogicalOperator
onLogicalOperatorToggle: () => void
}
const Item: FC<ItemProps> = ({
readonly,
payload,
onChange,
canRemove,
onRemove = () => { },
isShowLogicalOperator,
logicalOperator,
onLogicalOperatorToggle,
}) => {
const { t } = useTranslation()
const handleVarReferenceChange = useCallback((value: ValueSelector) => {
onChange({
...payload,
variable_selector: value,
})
}, [onChange, payload])
const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
onChange({
...payload,
value: e.target.value,
})
}, [onChange, payload])
return (
<div className='space-y-2'>
{isShowLogicalOperator && (
<div className='flex items-center select-none'>
<div className='flex items-center '>
{Line}
<div
className='shrink-0 mx-1 flex items-center h-[22px] pl-2 pr-1.5 border border-gray-200 rounded-lg bg-white shadow-xs space-x-0.5 text-primary-600 cursor-pointer'
onClick={onLogicalOperatorToggle}
>
<div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.${logicalOperator === LogicalOperator.and ? 'and' : 'or'}`)}</div>
<RefreshCw05 className='w-3 h-3' />
</div>
<div className=' rotate-180'>
{Line}
</div>
</div>
</div>
)
}
<div className='flex items-center space-x-1'>
<VarReferencePicker
readonly={readonly}
isShowNodeName
className='grow'
value={payload.variable_selector}
onChange={handleVarReferenceChange}
/>
<input
readOnly={readonly}
value={payload.value}
onChange={handleValueChange}
placeholder={t(`${i18nPrefix}.enterValue`)!}
className='w-[144px] 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'
/>
<div
className={cn(canRemove ? 'text-gray-500 bg-gray-100 hover:bg-gray-200 cursor-pointer' : 'bg-gray-25 text-gray-300', 'p-2 rounded-lg ')}
onClick={canRemove ? onRemove : () => { }}
>
<Trash03 className='w-4 h-4 ' />
</div>
</div>
</div >
)
}
export default React.memo(Item)

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

@ -2,84 +2,26 @@
import type { FC } from 'react'
import React, { useCallback } from 'react'
import produce from 'immer'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
import type { ValueSelector } from '@/app/components/workflow/types'
import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
const i18nPrefix = 'workflow.nodes.ifElse'
import Item from './condition-item'
import type { Condition, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
type Props = {
className?: string
readonly: boolean
list: Condition[]
onChange: (newList: Condition[]) => void
}
type ItemProps = {
readonly: boolean
payload: Condition
onChange: (newItem: Condition) => void
canRemove: boolean
onRemove?: () => void
}
const Item: FC<ItemProps> = ({
readonly,
payload,
onChange,
canRemove,
onRemove = () => { },
}) => {
const { t } = useTranslation()
const handleVarReferenceChange = useCallback((value: ValueSelector) => {
onChange({
...payload,
variable_selector: value,
})
}, [onChange, payload])
const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
onChange({
...payload,
value: e.target.value,
})
}, [onChange, payload])
return (
<div className='flex items-center space-x-1'>
<VarReferencePicker
readonly={readonly}
isShowNodeName
className='grow'
value={payload.variable_selector}
onChange={handleVarReferenceChange}
/>
<input
readOnly={readonly}
value={payload.value}
onChange={handleValueChange}
placeholder={t(`${i18nPrefix}.enterValue`)!}
className='w-[144px] 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'
/>
<div
className={cn(canRemove ? 'text-gray-500 bg-gray-100 hover:bg-gray-200 cursor-pointer' : 'bg-gray-25 text-gray-300', 'p-2 rounded-lg ')}
onClick={onRemove}
>
<Trash03 className='w-4 h-4 ' />
</div>
</div>
)
logicalOperator: LogicalOperator
onLogicalOperatorToggle: () => void
}
const ConditionList: FC<Props> = ({
className,
readonly,
list,
onChange,
logicalOperator,
onLogicalOperatorToggle,
}) => {
const handleItemChange = useCallback((index: number) => {
return (newItem: Condition) => {
@ -99,37 +41,37 @@ const ConditionList: FC<Props> = ({
}
}, [list, onChange])
const canRemove = list.length > 1
if (list.length === 0)
return null
return (
<div>
<div className={cn(className, 'space-y-2')}>
<Item
readonly={readonly}
payload={list[0]}
onChange={handleItemChange(0)}
canRemove={false}
canRemove={canRemove}
onRemove={handleItemRemove(0)}
logicalOperator={logicalOperator}
onLogicalOperatorToggle={onLogicalOperatorToggle}
/>
{
list.length > 1 && (
<>
<div className='flex items-center justify-center h-6 text-gray-500'>
AND
</div>
{
list.slice(1).map((item, i) => (
<Item
key={item.id}
readonly={readonly}
payload={item}
onChange={handleItemChange(i + 1)}
canRemove
onRemove={handleItemRemove(i + 1)}
/>
))
}
</>)
list.slice(1).map((item, i) => (
<Item
key={item.id}
readonly={readonly}
payload={item}
onChange={handleItemChange(i + 1)}
canRemove={canRemove}
onRemove={handleItemRemove(i + 1)}
isShowLogicalOperator
logicalOperator={logicalOperator}
onLogicalOperatorToggle={onLogicalOperatorToggle}
/>
)))
}
</div>
)

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

@ -1,5 +1,7 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Split from '../_base/components/split'
import AddButton from '../_base/components/add-button'
import useConfig from './use-config'
import { mockData } from './mock'
import ConditionList from './components/condition-list'
@ -14,18 +16,35 @@ const Panel: FC = () => {
inputs,
handleConditionsChange,
handleAddCondition,
handleLogicalOperatorToggle,
} = useConfig(mockData)
return (
<div className='mt-2'>
<div className='px-4 pb-4 space-y-4'>
<Field
title={t(`${i18nPrefix}.conditions`)}
title={t(`${i18nPrefix}.if`)}
>
<ConditionList
readonly={readOnly}
list={inputs.conditions}
onChange={handleConditionsChange}
/>
<>
<ConditionList
className='mt-2'
readonly={readOnly}
list={inputs.conditions}
onChange={handleConditionsChange}
logicalOperator={inputs.logical_operator}
onLogicalOperatorToggle={handleLogicalOperatorToggle}
/>
<AddButton
className='mt-3'
text={t(`${i18nPrefix}.addCondition`)}
onClick={handleAddCondition}
/>
</>
</Field>
<Split />
<Field
title={t(`${i18nPrefix}.else`)}
>
<div className='leading-[18px] text-xs font-normal text-gray-400'>{t(`${i18nPrefix}.elseDescription`)}</div>
</Field>
</div>
</div>

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

@ -1,6 +1,7 @@
import { useCallback, useState } from 'react'
import produce from 'immer'
import type { Condition, IfElseNodeType, LogicalOperator } from './types'
import { ComparisonOperator, LogicalOperator } from './types'
import type { Condition, IfElseNodeType } from './types'
const useConfig = (initInputs: IfElseNodeType) => {
const [inputs, setInputs] = useState<IfElseNodeType>(initInputs)
@ -14,16 +15,21 @@ const useConfig = (initInputs: IfElseNodeType) => {
})
}, [])
const handleAddCondition = useCallback((condition: Condition) => {
const handleAddCondition = useCallback(() => {
const newInputs = produce(inputs, (draft) => {
draft.conditions.push(condition)
draft.conditions.push({
id: `${Date.now()}`,
variable_selector: [],
comparison_operator: ComparisonOperator.equal,
value: '',
})
})
setInputs(newInputs)
}, [inputs])
const handleLogicalOperatorChange = useCallback((newOperator: LogicalOperator) => {
const handleLogicalOperatorToggle = useCallback(() => {
const newInputs = produce(inputs, (draft) => {
draft.logical_operator = newOperator
draft.logical_operator = draft.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and
})
setInputs(newInputs)
}, [inputs])
@ -32,7 +38,7 @@ const useConfig = (initInputs: IfElseNodeType) => {
inputs,
handleConditionsChange,
handleAddCondition,
handleLogicalOperatorChange,
handleLogicalOperatorToggle,
}
}

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

@ -72,6 +72,9 @@ const translation = {
},
ifElse: {
conditions: 'Conditions',
if: 'If',
else: 'Else',
elseDescription: 'Used to define the logic that should be executed when the if condition is not met.',
and: 'and',
or: 'or',
comparisonOperator: {
@ -87,6 +90,7 @@ const translation = {
'not null': 'is not null',
},
enterValue: 'Enter value',
addCondition: 'Add Condition',
},
variableAssigner: {
title: 'Assign variables',

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

@ -71,6 +71,9 @@ const translation = {
},
ifElse: {
conditions: '条件',
if: 'If',
else: 'Else',
elseDescription: '用于定义当 if 条件不满足时应执行的逻辑。',
and: 'and',
or: 'or',
comparisonOperator: {
@ -86,6 +89,7 @@ const translation = {
'not null': '不为空',
},
enterValue: '输入值',
addCondition: '添加条件',
},
variableAssigner: {
title: '变量赋值',