dify
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
RiArrowDownSLine,
|
||||
RiCheckLine,
|
||||
} from '@remixicon/react'
|
||||
import classNames from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { WriteMode } from '../types'
|
||||
import { getOperationItems } from '../utils'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { VarType } from '@/app/components/workflow/types'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type Item = {
|
||||
value: string | number
|
||||
name: string
|
||||
}
|
||||
|
||||
type OperationSelectorProps = {
|
||||
value: string | number
|
||||
onSelect: (value: Item) => void
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
popupClassName?: string
|
||||
assignedVarType?: VarType
|
||||
writeModeTypes?: WriteMode[]
|
||||
writeModeTypesArr?: WriteMode[]
|
||||
writeModeTypesNum?: WriteMode[]
|
||||
}
|
||||
|
||||
const i18nPrefix = 'workflow.nodes.assigner'
|
||||
|
||||
const OperationSelector: FC<OperationSelectorProps> = ({
|
||||
value,
|
||||
onSelect,
|
||||
disabled = false,
|
||||
className,
|
||||
popupClassName,
|
||||
assignedVarType,
|
||||
writeModeTypes,
|
||||
writeModeTypesArr,
|
||||
writeModeTypesNum,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const items = getOperationItems(assignedVarType, writeModeTypes, writeModeTypesArr, writeModeTypesNum)
|
||||
|
||||
const selectedItem = items.find(item => item.value === value)
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
offset={4}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
onClick={() => !disabled && setOpen(v => !v)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1',
|
||||
disabled ? 'cursor-not-allowed !bg-components-input-bg-disabled' : 'cursor-pointer hover:bg-state-base-hover-alt',
|
||||
open && 'bg-state-base-hover-alt',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center p-1'>
|
||||
<span
|
||||
className={`system-sm-regular overflow-hidden truncate text-ellipsis
|
||||
${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
|
||||
>
|
||||
{selectedItem?.name ? t(`${i18nPrefix}.operations.${selectedItem?.name}`) : t(`${i18nPrefix}.operations.title`)}
|
||||
</span>
|
||||
</div>
|
||||
<RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
|
||||
<PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
|
||||
<div className='flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||
<div className='flex flex-col items-start self-stretch p-1'>
|
||||
<div className='flex items-start self-stretch px-3 pb-0.5 pt-1'>
|
||||
<div className='system-xs-medium-uppercase flex grow text-text-tertiary'>{t(`${i18nPrefix}.operations.title`)}</div>
|
||||
</div>
|
||||
{items.map(item => (
|
||||
item.value === 'divider'
|
||||
? (
|
||||
<Divider key="divider" className="my-1" />
|
||||
)
|
||||
: (
|
||||
<div
|
||||
key={item.value}
|
||||
className={classNames(
|
||||
'flex items-center gap-1 self-stretch rounded-lg px-2 py-1',
|
||||
'cursor-pointer hover:bg-state-base-hover',
|
||||
)}
|
||||
onClick={() => {
|
||||
onSelect(item)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className='flex min-h-5 grow items-center gap-1 px-1'>
|
||||
<span className={'system-sm-medium flex grow text-text-secondary'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
|
||||
</div>
|
||||
{item.value === value && (
|
||||
<div className='flex items-center justify-center'>
|
||||
<RiCheckLine className='h-4 w-4 text-text-accent' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default OperationSelector
|
||||
@@ -0,0 +1,238 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import React, { useCallback } from 'react'
|
||||
import { produce } from 'immer'
|
||||
import { RiDeleteBinLine } from '@remixicon/react'
|
||||
import OperationSelector from '../operation-selector'
|
||||
import { AssignerNodeInputType, WriteMode } from '../../types'
|
||||
import type { AssignerNodeOperation } from '../../types'
|
||||
import ListNoDataPlaceholder from '@/app/components/workflow/nodes/_base/components/list-no-data-placeholder'
|
||||
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
|
||||
import type { ValueSelector, Var } from '@/app/components/workflow/types'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { noop } from 'lodash-es'
|
||||
import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
|
||||
|
||||
type Props = {
|
||||
readonly: boolean
|
||||
nodeId: string
|
||||
list: AssignerNodeOperation[]
|
||||
onChange: (list: AssignerNodeOperation[], value?: ValueSelector) => void
|
||||
onOpen?: (index: number) => void
|
||||
filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
|
||||
filterToAssignedVar?: (payload: Var, assignedVarType: VarType, write_mode: WriteMode) => boolean
|
||||
getAssignedVarType?: (valueSelector: ValueSelector) => VarType
|
||||
getToAssignedVarType?: (assignedVarType: VarType, write_mode: WriteMode) => VarType
|
||||
writeModeTypes?: WriteMode[]
|
||||
writeModeTypesArr?: WriteMode[]
|
||||
writeModeTypesNum?: WriteMode[]
|
||||
}
|
||||
|
||||
const VarList: FC<Props> = ({
|
||||
readonly,
|
||||
nodeId,
|
||||
list,
|
||||
onChange,
|
||||
onOpen = noop,
|
||||
filterVar,
|
||||
filterToAssignedVar,
|
||||
getAssignedVarType,
|
||||
getToAssignedVarType,
|
||||
writeModeTypes,
|
||||
writeModeTypesArr,
|
||||
writeModeTypesNum,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const handleAssignedVarChange = useCallback((index: number) => {
|
||||
return (value: ValueSelector | string) => {
|
||||
const newList = produce(list, (draft) => {
|
||||
draft[index].variable_selector = value as ValueSelector
|
||||
draft[index].operation = WriteMode.overwrite
|
||||
draft[index].input_type = AssignerNodeInputType.variable
|
||||
draft[index].value = undefined
|
||||
})
|
||||
onChange(newList, value as ValueSelector)
|
||||
}
|
||||
}, [list, onChange])
|
||||
|
||||
const handleOperationChange = useCallback((index: number, varType: VarType) => {
|
||||
return (item: { value: string | number }) => {
|
||||
const newList = produce(list, (draft) => {
|
||||
draft[index].operation = item.value as WriteMode
|
||||
draft[index].value = '' // Clear value when operation changes
|
||||
if (item.value === WriteMode.set || item.value === WriteMode.increment || item.value === WriteMode.decrement
|
||||
|| item.value === WriteMode.multiply || item.value === WriteMode.divide) {
|
||||
if (varType === VarType.boolean)
|
||||
draft[index].value = false
|
||||
draft[index].input_type = AssignerNodeInputType.constant
|
||||
}
|
||||
else {
|
||||
draft[index].input_type = AssignerNodeInputType.variable
|
||||
}
|
||||
})
|
||||
onChange(newList)
|
||||
}
|
||||
}, [list, onChange])
|
||||
|
||||
const handleToAssignedVarChange = useCallback((index: number) => {
|
||||
return (value: ValueSelector | string | number | boolean) => {
|
||||
const newList = produce(list, (draft) => {
|
||||
draft[index].value = value as ValueSelector
|
||||
})
|
||||
onChange(newList, value as ValueSelector)
|
||||
}
|
||||
}, [list, onChange])
|
||||
|
||||
const handleVarRemove = useCallback((index: number) => {
|
||||
return () => {
|
||||
const newList = produce(list, (draft) => {
|
||||
draft.splice(index, 1)
|
||||
})
|
||||
onChange(newList)
|
||||
}
|
||||
}, [list, onChange])
|
||||
|
||||
const handleOpen = useCallback((index: number) => {
|
||||
return () => onOpen(index)
|
||||
}, [onOpen])
|
||||
|
||||
const handleFilterToAssignedVar = useCallback((index: number) => {
|
||||
return (payload: Var) => {
|
||||
const { variable_selector, operation } = list[index]
|
||||
if (!variable_selector || !operation || !filterToAssignedVar) return true
|
||||
|
||||
const assignedVarType = getAssignedVarType?.(variable_selector)
|
||||
const isSameVariable = Array.isArray(variable_selector) && variable_selector.join('.') === `${payload.nodeId}.${payload.variable}`
|
||||
|
||||
return !isSameVariable && (!assignedVarType || filterToAssignedVar(payload, assignedVarType, operation))
|
||||
}
|
||||
}, [list, filterToAssignedVar, getAssignedVarType])
|
||||
|
||||
if (list.length === 0) {
|
||||
return (
|
||||
<ListNoDataPlaceholder>
|
||||
{t('workflow.nodes.assigner.noVarTip')}
|
||||
</ListNoDataPlaceholder>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-col items-start gap-4 self-stretch'>
|
||||
{list.map((item, index) => {
|
||||
const assignedVarType = item.variable_selector ? getAssignedVarType?.(item.variable_selector) : undefined
|
||||
const toAssignedVarType = (assignedVarType && item.operation && getToAssignedVarType)
|
||||
? getToAssignedVarType(assignedVarType, item.operation)
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<div className='flex items-start gap-1 self-stretch' key={index}>
|
||||
<div className='flex grow flex-col items-start gap-1'>
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<VarReferencePicker
|
||||
readonly={readonly}
|
||||
nodeId={nodeId}
|
||||
isShowNodeName
|
||||
value={item.variable_selector || []}
|
||||
onChange={handleAssignedVarChange(index)}
|
||||
onOpen={handleOpen(index)}
|
||||
filterVar={filterVar}
|
||||
placeholder={t('workflow.nodes.assigner.selectAssignedVariable') as string}
|
||||
minWidth={352}
|
||||
popupFor='assigned'
|
||||
className='w-full'
|
||||
/>
|
||||
<OperationSelector
|
||||
value={item.operation}
|
||||
placeholder='Operation'
|
||||
disabled={!item.variable_selector || item.variable_selector.length === 0}
|
||||
onSelect={handleOperationChange(index, assignedVarType!)}
|
||||
assignedVarType={assignedVarType}
|
||||
writeModeTypes={writeModeTypes}
|
||||
writeModeTypesArr={writeModeTypesArr}
|
||||
writeModeTypesNum={writeModeTypesNum}
|
||||
/>
|
||||
</div>
|
||||
{item.operation !== WriteMode.clear && item.operation !== WriteMode.set
|
||||
&& item.operation !== WriteMode.removeFirst && item.operation !== WriteMode.removeLast
|
||||
&& !writeModeTypesNum?.includes(item.operation)
|
||||
&& (
|
||||
<VarReferencePicker
|
||||
readonly={readonly || !item.variable_selector || !item.operation}
|
||||
nodeId={nodeId}
|
||||
isShowNodeName
|
||||
value={item.value}
|
||||
onChange={handleToAssignedVarChange(index)}
|
||||
filterVar={handleFilterToAssignedVar(index)}
|
||||
valueTypePlaceHolder={toAssignedVarType}
|
||||
placeholder={t('workflow.nodes.assigner.setParameter') as string}
|
||||
minWidth={352}
|
||||
popupFor='toAssigned'
|
||||
className='w-full'
|
||||
/>
|
||||
)
|
||||
}
|
||||
{item.operation === WriteMode.set && assignedVarType && (
|
||||
<>
|
||||
{assignedVarType === 'number' && (
|
||||
<Input
|
||||
type="number"
|
||||
value={item.value as number}
|
||||
onChange={e => handleToAssignedVarChange(index)(Number(e.target.value))}
|
||||
className='w-full'
|
||||
/>
|
||||
)}
|
||||
{assignedVarType === 'string' && (
|
||||
<Textarea
|
||||
value={item.value as string}
|
||||
onChange={e => handleToAssignedVarChange(index)(e.target.value)}
|
||||
className='w-full'
|
||||
/>
|
||||
)}
|
||||
{assignedVarType === 'boolean' && (
|
||||
<BoolValue
|
||||
value={item.value as boolean}
|
||||
onChange={value => handleToAssignedVarChange(index)(value)}
|
||||
/>
|
||||
)}
|
||||
{assignedVarType === 'object' && (
|
||||
<CodeEditor
|
||||
value={item.value as string}
|
||||
language={CodeLanguage.json}
|
||||
onChange={value => handleToAssignedVarChange(index)(value)}
|
||||
className='w-full'
|
||||
readOnly={readonly}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{writeModeTypesNum?.includes(item.operation)
|
||||
&& <Input
|
||||
type="number"
|
||||
value={item.value as number}
|
||||
onChange={e => handleToAssignedVarChange(index)(Number(e.target.value))}
|
||||
placeholder="Enter number value..."
|
||||
className='w-full'
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<ActionButton
|
||||
size='l'
|
||||
className='group shrink-0 hover:!bg-state-destructive-hover'
|
||||
onClick={handleVarRemove(index)}
|
||||
>
|
||||
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(VarList)
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useCallback } from 'react'
|
||||
import { produce } from 'immer'
|
||||
import type { AssignerNodeOperation, AssignerNodeType } from '../../types'
|
||||
import { AssignerNodeInputType, WriteMode } from '../../types'
|
||||
|
||||
type Params = {
|
||||
id: string
|
||||
inputs: AssignerNodeType
|
||||
setInputs: (newInputs: AssignerNodeType) => void
|
||||
}
|
||||
function useVarList({
|
||||
inputs,
|
||||
setInputs,
|
||||
}: Params) {
|
||||
const handleVarListChange = useCallback((newList: AssignerNodeOperation[]) => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.items = newList
|
||||
})
|
||||
setInputs(newInputs)
|
||||
}, [inputs, setInputs])
|
||||
|
||||
const handleAddVariable = useCallback(() => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.items.push({
|
||||
variable_selector: [],
|
||||
input_type: AssignerNodeInputType.constant,
|
||||
operation: WriteMode.overwrite,
|
||||
value: '',
|
||||
})
|
||||
})
|
||||
setInputs(newInputs)
|
||||
}, [inputs, setInputs])
|
||||
return {
|
||||
handleVarListChange,
|
||||
handleAddVariable,
|
||||
}
|
||||
}
|
||||
|
||||
export default useVarList
|
||||
Reference in New Issue
Block a user