AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-19 05:15:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: can support value

Browse Source
This commit is contained in:
Joel 2024-08-19 15:15:27 +08:00
parent b362031baf
commit 58a56add9c
7 changed files with 134 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/select/index.tsx
View File

@ -37,6 +37,7 @@ export type ISelectProps = {
bgClassName?: string
placeholder?: string
overlayClassName?: string
optionWrapClassName?: string
optionClassName?: string
renderOption?: ({
item,
@ -172,6 +173,7 @@ const SimpleSelect: FC<ISelectProps> = ({
disabled = false,
onSelect,
placeholder,
optionWrapClassName,
optionClassName,
renderOption,
}) => {
@ -231,7 +233,7 @@ const SimpleSelect: FC<ISelectProps> = ({
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
<Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
{items.map((item: Item) => (
<Listbox.Option
key={item.value}

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

@ -11,8 +11,10 @@ import type {
Condition,
HandleAddSubVariableCondition,
HandleRemoveCondition,
HandleToggleSubVariableConditionLogicalOperator,
HandleUpdateCondition,
HandleUpdateSubVariableCondition,
handleRemoveSubVariableCondition,
} from '../../types'
import {
ComparisonOperator,
@ -41,13 +43,15 @@ type ConditionItemProps = {
file?: { key: string }
isSubVariableKey?: boolean
subVariableKeyCaseId?: string
onRemoveCondition: HandleRemoveCondition
onUpdateCondition: HandleUpdateCondition
onRemoveCondition?: HandleRemoveCondition
onUpdateCondition?: HandleUpdateCondition
onAddSubVariableCondition?: HandleAddSubVariableCondition
onRemoveSubVariableCondition?: handleRemoveSubVariableCondition
onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
onToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
nodesOutputVars: NodeOutPutVar[]
availableNodes: Node[]
numberVariables: NodeOutPutVar[]
onAddSubVariableCondition?: HandleAddSubVariableCondition
}
const ConditionItem = ({
disabled,
@ -58,11 +62,13 @@ const ConditionItem = ({
isSubVariableKey,
onRemoveCondition,
onUpdateCondition,
onAddSubVariableCondition,
onRemoveSubVariableCondition,
onUpdateSubVariableCondition,
onToggleSubVariableConditionLogicalOperator,
nodesOutputVars,
availableNodes,
numberVariables,
onAddSubVariableCondition,
}: ConditionItemProps) => {
const { t } = useTranslation()
@ -72,7 +78,7 @@ const ConditionItem = ({
if (isSubVariableKey)
onUpdateSubVariableCondition?.(caseId, conditionId, condition.id, newCondition)
else
onUpdateCondition(caseId, condition.id, newCondition)
onUpdateCondition?.(caseId, condition.id, newCondition)
}, [caseId, condition, conditionId, isSubVariableKey, onUpdateCondition, onUpdateSubVariableCondition])
const handleUpdateConditionOperator = useCallback((value: ComparisonOperator) => {
@ -97,8 +103,8 @@ const ConditionItem = ({
numberVarType,
value: '',
}
onUpdateCondition(caseId, condition.id, newCondition)
}, [caseId, condition, onUpdateCondition])
doUpdateCondition(newCondition)
}, [condition, doUpdateCondition])
const isSelect = condition.comparison_operator && [ComparisonOperator.in, ComparisonOperator.notIn, ComparisonOperator.allOf].includes(condition.comparison_operator)
const selectOptions = useMemo(() => {
@ -136,6 +142,13 @@ const ConditionItem = ({
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])
return (
<div className='flex mb-1 last-of-type:mb-0'>
<div className={cn(
@ -149,6 +162,7 @@ const ConditionItem = ({
<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)}
@ -218,19 +232,11 @@ const ConditionItem = ({
caseId={caseId}
conditionId={conditionId}
readOnly={!!disabled}
nodeId=''
cases={condition.sub_variable_condition ? [condition.sub_variable_condition] : []}
handleAddSubVariableCondition={onAddSubVariableCondition}
handleRemoveCase={() => { }}
handleAddCondition={() => { }}
handleUpdateCondition={onUpdateCondition}
handleRemoveSubVariableCondition={onRemoveSubVariableCondition}
handleUpdateSubVariableCondition={onUpdateSubVariableCondition}
handleRemoveCondition={() => { }}
handleUpdateConditionLogicalOperator={() => { }}
nodesOutputVars={[]}
availableNodes={[]}
varsIsVarFileAttribute={{}}
filterVar={() => true}
handleToggleSubVariableConditionLogicalOperator={onToggleSubVariableConditionLogicalOperator}
/>
</div>
)
@ -240,7 +246,7 @@ const ConditionItem = ({
className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onClick={() => onRemoveCondition(caseId, condition.id)}
onClick={doRemoveCondition}
>
<RiDeleteBinLine className='w-4 h-4' />
</div>

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

@ -1,18 +1,21 @@
import { RiLoopLeftLine } from '@remixicon/react'
import { LogicalOperator } from '../../types'
import { useCallback } from 'react'
import type {
CaseItem,
HandleAddSubVariableCondition,
HandleRemoveCondition,
HandleToggleConditionLogicalOperator,
HandleToggleSubVariableConditionLogicalOperator,
HandleUpdateCondition,
HandleUpdateConditionLogicalOperator,
HandleUpdateSubVariableCondition,
handleRemoveSubVariableCondition,
} from '../../types'
import ConditionItem from './condition-item'
import type {
Node,
NodeOutPutVar,
} from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
type ConditionListProps = {
isSubVariable?: boolean
@ -20,15 +23,17 @@ type ConditionListProps = {
caseId: string
conditionId?: string
caseItem: CaseItem
onUpdateCondition: HandleUpdateCondition
onUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
onRemoveCondition: HandleRemoveCondition
onRemoveCondition?: HandleRemoveCondition
onUpdateCondition?: HandleUpdateCondition
onToggleConditionLogicalOperator?: HandleToggleConditionLogicalOperator
nodesOutputVars: NodeOutPutVar[]
availableNodes: Node[]
numberVariables: NodeOutPutVar[]
varsIsVarFileAttribute: Record<string, boolean>
onAddSubVariableCondition?: HandleAddSubVariableCondition
onRemoveSubVariableCondition?: handleRemoveSubVariableCondition
onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
onToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
}
const ConditionList = ({
isSubVariable,
@ -37,19 +42,28 @@ const ConditionList = ({
conditionId,
caseItem,
onUpdateCondition,
onUpdateConditionLogicalOperator,
onRemoveCondition,
onToggleConditionLogicalOperator,
onAddSubVariableCondition,
onRemoveSubVariableCondition,
onUpdateSubVariableCondition,
onToggleSubVariableConditionLogicalOperator,
nodesOutputVars,
availableNodes,
numberVariables,
varsIsVarFileAttribute,
onAddSubVariableCondition,
onUpdateSubVariableCondition,
}: ConditionListProps) => {
const { conditions, logical_operator } = caseItem
const doToggleConditionLogicalOperator = useCallback(() => {
if (isSubVariable)
onToggleSubVariableConditionLogicalOperator?.(caseId!, conditionId!)
else
onToggleConditionLogicalOperator?.(caseId)
}, [caseId, conditionId, isSubVariable, onToggleConditionLogicalOperator, onToggleSubVariableConditionLogicalOperator])
return (
<div className='relative pl-[60px]'>
<div className={cn('relative', !isSubVariable && 'pl-[60px]')}>
{
conditions.length > 1 && (
<div className='absolute top-0 bottom-0 left-0 w-[60px]'>
@ -57,9 +71,7 @@ const ConditionList = ({
<div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
<div
className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer'
onClick={() => {
onUpdateConditionLogicalOperator(caseItem.case_id, caseItem.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and)
}}
onClick={doToggleConditionLogicalOperator}
>
{logical_operator.toUpperCase()}
<RiLoopLeftLine className='ml-0.5 w-3 h-3' />
@ -77,13 +89,15 @@ const ConditionList = ({
condition={condition}
onUpdateCondition={onUpdateCondition}
onRemoveCondition={onRemoveCondition}
onAddSubVariableCondition={onAddSubVariableCondition}
onRemoveSubVariableCondition={onRemoveSubVariableCondition}
onUpdateSubVariableCondition={onUpdateSubVariableCondition}
onToggleSubVariableConditionLogicalOperator={onToggleSubVariableConditionLogicalOperator}
nodesOutputVars={nodesOutputVars}
availableNodes={availableNodes}
numberVariables={numberVariables}
file={varsIsVarFileAttribute[condition.id] ? { key: (condition.variable_selector || []).slice(-1)[0] } : undefined}
isSubVariableKey={isSubVariable}
onAddSubVariableCondition={onAddSubVariableCondition}
onUpdateSubVariableCondition={onUpdateSubVariableCondition}
/>
))
}

42
web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
View File

@ -8,7 +8,7 @@ import {
RiDeleteBinLine,
RiDraggable,
} from '@remixicon/react'
import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleUpdateCondition, HandleUpdateConditionLogicalOperator, HandleUpdateSubVariableCondition } from '../types'
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'
@ -21,28 +21,30 @@ type Props = {
isSubVariable?: boolean
caseId?: string
conditionId?: string
nodeId: string
cases: CaseItem[]
readOnly: boolean
handleSortCase?: (sortedCases: (CaseItem & { id: string })[]) => void
handleRemoveCase: (caseId: string) => void
handleRemoveCase?: (caseId: string) => void
handleAddCondition?: HandleAddCondition
handleRemoveCondition?: HandleRemoveCondition
handleUpdateCondition?: HandleUpdateCondition
handleToggleConditionLogicalOperator?: HandleToggleConditionLogicalOperator
handleAddSubVariableCondition?: HandleAddSubVariableCondition
handleRemoveSubVariableCondition?: handleRemoveSubVariableCondition
handleUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
handleUpdateCondition: HandleUpdateCondition
handleRemoveCondition: HandleRemoveCondition
handleUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
nodesOutputVars: NodeOutPutVar[]
availableNodes: Node[]
varsIsVarFileAttribute: Record<string, boolean>
filterVar: (varPayload: Var) => boolean
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,
nodeId: id = '',
cases = [],
readOnly,
handleSortCase = () => { },
@ -50,13 +52,15 @@ const ConditionWrap: FC<Props> = ({
handleUpdateCondition,
handleAddCondition,
handleRemoveCondition,
handleToggleConditionLogicalOperator,
handleAddSubVariableCondition,
handleRemoveSubVariableCondition,
handleUpdateSubVariableCondition,
handleUpdateConditionLogicalOperator,
nodesOutputVars,
availableNodes,
varsIsVarFileAttribute,
filterVar,
handleToggleSubVariableConditionLogicalOperator,
nodesOutputVars = [],
availableNodes = [],
varsIsVarFileAttribute = {},
filterVar = () => true,
}) => {
const { t } = useTranslation()
@ -122,13 +126,15 @@ const ConditionWrap: FC<Props> = ({
conditionId={conditionId}
onUpdateCondition={handleUpdateCondition}
onRemoveCondition={handleRemoveCondition}
onUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
onToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
nodesOutputVars={nodesOutputVars}
availableNodes={availableNodes}
numberVariables={getAvailableVars(id, '', filterNumberVar)}
varsIsVarFileAttribute={varsIsVarFileAttribute}
onAddSubVariableCondition={handleAddSubVariableCondition}
onRemoveSubVariableCondition={handleRemoveSubVariableCondition}
onUpdateSubVariableCondition={handleUpdateSubVariableCondition}
onToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
isSubVariable={isSubVariable}
/>
</div>
@ -168,7 +174,7 @@ const ConditionWrap: FC<Props> = ({
size='small'
variant='ghost'
disabled={readOnly}
onClick={() => handleRemoveCase(item.case_id)}
onClick={() => handleRemoveCase?.(item.case_id)}
onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
onMouseLeave={() => setWillDeleteCaseId('')}
>

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

@ -30,9 +30,11 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
handleAddCondition,
handleUpdateCondition,
handleRemoveCondition,
handleToggleConditionLogicalOperator,
handleAddSubVariableCondition,
handleRemoveSubVariableCondition,
handleUpdateSubVariableCondition,
handleUpdateConditionLogicalOperator,
handleToggleSubVariableConditionLogicalOperator,
nodesOutputVars,
availableNodes,
varsIsVarFileAttribute,
@ -48,11 +50,13 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
handleSortCase={handleSortCase}
handleRemoveCase={handleRemoveCase}
handleAddCondition={handleAddCondition}
handleUpdateCondition={handleUpdateCondition}
handleRemoveCondition={handleRemoveCondition}
handleUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
handleUpdateCondition={handleUpdateCondition}
handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
handleAddSubVariableCondition={handleAddSubVariableCondition}
handleRemoveSubVariableCondition={handleRemoveSubVariableCondition}
handleUpdateSubVariableCondition={handleUpdateSubVariableCondition}
handleToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
nodesOutputVars={nodesOutputVars}
availableNodes={availableNodes}
varsIsVarFileAttribute={varsIsVarFileAttribute}

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

@ -58,8 +58,11 @@ export type IfElseNodeType = CommonNodeType & {
}
export type HandleAddCondition = (caseId: string, valueSelector: ValueSelector, varItem: Var) => void
export type HandleAddSubVariableCondition = (caseId: string, conditionId: string) => 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) => 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 HandleUpdateConditionLogicalOperator = (caseId: string, value: LogicalOperator) => void
export type HandleToggleSubVariableConditionLogicalOperator = (caseId: string, conditionId: string) => void

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

@ -11,8 +11,9 @@ import type {
HandleAddCondition,
HandleAddSubVariableCondition,
HandleRemoveCondition,
HandleToggleConditionLogicalOperator,
HandleToggleSubVariableConditionLogicalOperator,
HandleUpdateCondition,
HandleUpdateConditionLogicalOperator,
HandleUpdateSubVariableCondition,
IfElseNodeType,
} from './types'
@ -166,26 +167,18 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
})
setInputs(newInputs)
}, [inputs, setInputs])
// console.log(inputs.cases)
const handleUpdateSubVariableCondition = useCallback<HandleUpdateSubVariableCondition>((caseId, conditionId, subConditionId, newSubCondition) => {
const handleToggleConditionLogicalOperator = useCallback<HandleToggleConditionLogicalOperator>((caseId) => {
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)
}
}
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) => {
const newInputs = produce(inputs, (draft) => {
// debugger
const condition = draft.cases?.find(item => item.case_id === caseId)?.conditions.find(item => item.id === conditionId)
if (!condition)
return
@ -213,11 +206,43 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
setInputs(newInputs)
}, [inputs, setInputs])
const handleUpdateConditionLogicalOperator = useCallback<HandleUpdateConditionLogicalOperator>((caseId, value) => {
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)
targetCase.logical_operator = value
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])
@ -233,9 +258,11 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
handleAddCondition,
handleRemoveCondition,
handleUpdateCondition,
handleToggleConditionLogicalOperator,
handleAddSubVariableCondition,
handleUpdateSubVariableCondition,
handleUpdateConditionLogicalOperator,
handleRemoveSubVariableCondition,
handleToggleSubVariableConditionLogicalOperator,
nodesOutputVars: availableVars,
availableNodes: availableNodesWithParent,
nodesOutputNumberVars: availableNumberVars,