mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-11 11:56:53 +08:00
Feat: upgrade variable assigner (#11285)
Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: -LAN- <laipz8200@outlook.com>
This commit is contained in:
Yi Xiao
@@ -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 px-2 py-1 gap-0.5 rounded-lg bg-components-input-bg-normal',
|
||||
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 p-1 items-center'>
|
||||
<span
|
||||
className={`truncate overflow-hidden text-ellipsis system-sm-regular
|
||||
${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 p-1 flex-col items-start self-stretch'>
|
||||
<div className='flex px-3 pt-1 pb-0.5 items-start self-stretch'>
|
||||
<div className='flex grow text-text-tertiary system-xs-medium-uppercase'>{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 px-2 py-1 gap-1 self-stretch rounded-lg',
|
||||
'cursor-pointer hover:bg-state-base-hover',
|
||||
)}
|
||||
onClick={() => {
|
||||
onSelect(item)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className='flex min-h-5 px-1 items-center gap-1 grow'>
|
||||
<span className={'flex flex-grow text-text-secondary system-sm-medium'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
|
||||
</div>
|
||||
{item.value === value && (
|
||||
<div className='flex justify-center items-center'>
|
||||
<RiCheckLine className='h-4 w-4 text-text-accent' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default OperationSelector
|
||||
@@ -0,0 +1,227 @@
|
||||
'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, 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'
|
||||
|
||||
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 = () => { },
|
||||
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].value = undefined
|
||||
})
|
||||
onChange(newList, value as ValueSelector)
|
||||
}
|
||||
}, [list, onChange])
|
||||
|
||||
const handleOperationChange = useCallback((index: number) => {
|
||||
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)
|
||||
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) => {
|
||||
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, valueSelector: ValueSelector) => {
|
||||
const item = list[index]
|
||||
const assignedVarType = item.variable_selector ? getAssignedVarType?.(item.variable_selector) : undefined
|
||||
|
||||
if (!filterToAssignedVar || !item.variable_selector || !assignedVarType || !item.operation)
|
||||
return true
|
||||
|
||||
return filterToAssignedVar(
|
||||
payload,
|
||||
assignedVarType,
|
||||
item.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 flex-col items-start gap-1 flex-grow'>
|
||||
<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}
|
||||
writeModeTypes={writeModeTypes}
|
||||
writeModeTypesArr={writeModeTypesArr}
|
||||
writeModeTypesNum={writeModeTypesNum}
|
||||
/>
|
||||
</div>
|
||||
{item.operation !== WriteMode.clear && item.operation !== WriteMode.set
|
||||
&& !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 === '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='flex-shrink-0 group hover:!bg-state-destructive-hover'
|
||||
onClick={handleVarRemove(index)}
|
||||
>
|
||||
<RiDeleteBinLine className='text-text-tertiary w-4 h-4 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
|
||||
@@ -6,9 +6,8 @@ const i18nPrefix = 'workflow.errorMsg'
|
||||
|
||||
const nodeDefault: NodeDefault<AssignerNodeType> = {
|
||||
defaultValue: {
|
||||
assigned_variable_selector: [],
|
||||
write_mode: WriteMode.Overwrite,
|
||||
input_variable_selector: [],
|
||||
version: '2',
|
||||
items: [],
|
||||
},
|
||||
getAvailablePrevNodes(isChatMode: boolean) {
|
||||
const nodes = isChatMode
|
||||
@@ -23,18 +22,23 @@ const nodeDefault: NodeDefault<AssignerNodeType> = {
|
||||
checkValid(payload: AssignerNodeType, t: any) {
|
||||
let errorMessages = ''
|
||||
const {
|
||||
assigned_variable_selector: assignedVarSelector,
|
||||
write_mode: writeMode,
|
||||
input_variable_selector: toAssignerVarSelector,
|
||||
items: operationItems,
|
||||
} = payload
|
||||
|
||||
if (!errorMessages && !assignedVarSelector?.length)
|
||||
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.assignedVariable') })
|
||||
operationItems?.forEach((value) => {
|
||||
if (!errorMessages && !value.variable_selector?.length)
|
||||
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.assignedVariable') })
|
||||
|
||||
if (!errorMessages && writeMode !== WriteMode.Clear) {
|
||||
if (!toAssignerVarSelector?.length)
|
||||
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.variable') })
|
||||
}
|
||||
if (!errorMessages && value.operation !== WriteMode.clear) {
|
||||
if (value.operation === WriteMode.set) {
|
||||
if (!value.value && typeof value.value !== 'number')
|
||||
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.variable') })
|
||||
}
|
||||
else if (!value.value?.length) {
|
||||
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.variable') })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
isValid: !errorMessages,
|
||||
|
||||
70
web/app/components/workflow/nodes/assigner/hooks.ts
Normal file
70
web/app/components/workflow/nodes/assigner/hooks.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { useCallback } from 'react'
|
||||
import {
|
||||
useNodes,
|
||||
} from 'reactflow'
|
||||
import { uniqBy } from 'lodash-es'
|
||||
import {
|
||||
useIsChatMode,
|
||||
useWorkflow,
|
||||
useWorkflowVariables,
|
||||
} from '../../hooks'
|
||||
import type {
|
||||
Node,
|
||||
Var,
|
||||
} from '../../types'
|
||||
import { AssignerNodeInputType, WriteMode } from './types'
|
||||
|
||||
export const useGetAvailableVars = () => {
|
||||
const nodes: Node[] = useNodes()
|
||||
const { getBeforeNodesInSameBranchIncludeParent } = useWorkflow()
|
||||
const { getNodeAvailableVars } = useWorkflowVariables()
|
||||
const isChatMode = useIsChatMode()
|
||||
const getAvailableVars = useCallback((nodeId: string, handleId: string, filterVar: (v: Var) => boolean, hideEnv = false) => {
|
||||
const availableNodes: Node[] = []
|
||||
const currentNode = nodes.find(node => node.id === nodeId)!
|
||||
|
||||
if (!currentNode)
|
||||
return []
|
||||
|
||||
const beforeNodes = getBeforeNodesInSameBranchIncludeParent(nodeId)
|
||||
availableNodes.push(...beforeNodes)
|
||||
const parentNode = nodes.find(node => node.id === currentNode.parentId)
|
||||
|
||||
if (hideEnv) {
|
||||
return getNodeAvailableVars({
|
||||
parentNode,
|
||||
beforeNodes: uniqBy(availableNodes, 'id').filter(node => node.id !== nodeId),
|
||||
isChatMode,
|
||||
hideEnv,
|
||||
hideChatVar: hideEnv,
|
||||
filterVar,
|
||||
})
|
||||
.map(node => ({
|
||||
...node,
|
||||
vars: node.isStartNode ? node.vars.filter(v => !v.variable.startsWith('sys.')) : node.vars,
|
||||
}))
|
||||
.filter(item => item.vars.length > 0)
|
||||
}
|
||||
|
||||
return getNodeAvailableVars({
|
||||
parentNode,
|
||||
beforeNodes: uniqBy(availableNodes, 'id').filter(node => node.id !== nodeId),
|
||||
isChatMode,
|
||||
filterVar,
|
||||
})
|
||||
}, [nodes, getBeforeNodesInSameBranchIncludeParent, getNodeAvailableVars, isChatMode])
|
||||
|
||||
return getAvailableVars
|
||||
}
|
||||
|
||||
export const useHandleAddOperationItem = () => {
|
||||
return useCallback((list: any[]) => {
|
||||
const newItem = {
|
||||
variable_selector: [],
|
||||
write_mode: WriteMode.overwrite,
|
||||
input_type: AssignerNodeInputType.variable,
|
||||
value: '',
|
||||
}
|
||||
return [...list, newItem]
|
||||
}, [])
|
||||
}
|
||||
@@ -15,31 +15,71 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
const nodes: Node[] = useNodes()
|
||||
const { assigned_variable_selector: variable, write_mode: writeMode } = data
|
||||
if (data.version === '2') {
|
||||
const { items: operationItems } = data
|
||||
const validOperationItems = operationItems?.filter(item =>
|
||||
item.variable_selector && item.variable_selector.length > 0,
|
||||
) || []
|
||||
|
||||
if (validOperationItems.length === 0) {
|
||||
return (
|
||||
<div className='relative flex flex-col px-3 py-1 gap-0.5 items-start self-stretch'>
|
||||
<div className='flex flex-col items-start gap-1 self-stretch'>
|
||||
<div className='flex px-[5px] py-1 items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg'>
|
||||
<div className='flex-1 text-text-tertiary system-xs-medium'>{t(`${i18nPrefix}.varNotSet`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className='relative flex flex-col px-3 py-1 gap-0.5 items-start self-stretch'>
|
||||
{operationItems.map((value, index) => {
|
||||
const variable = value.variable_selector
|
||||
if (!variable || variable.length === 0)
|
||||
return null
|
||||
const isSystem = isSystemVar(variable)
|
||||
const isEnv = isENV(variable)
|
||||
const isChatVar = isConversationVar(variable)
|
||||
const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
|
||||
const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
|
||||
return (
|
||||
<NodeVariableItem
|
||||
key={index}
|
||||
node={node as Node}
|
||||
isEnv={isEnv}
|
||||
isChatVar={isChatVar}
|
||||
writeMode={value.operation}
|
||||
varName={varName}
|
||||
className='bg-workflow-block-parma-bg'
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// Legacy version
|
||||
const { assigned_variable_selector: variable, write_mode: writeMode } = data as any
|
||||
|
||||
if (!variable || variable.length === 0)
|
||||
return null
|
||||
|
||||
const isSystem = isSystemVar(variable)
|
||||
const isEnv = isENV(variable)
|
||||
const isChatVar = isConversationVar(variable)
|
||||
|
||||
const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
|
||||
const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
|
||||
|
||||
return (
|
||||
<div className='relative px-3'>
|
||||
<div className='mb-1 system-2xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.assignedVariable`)}</div>
|
||||
<div className='relative flex flex-col px-3 py-1 gap-0.5 items-start self-stretch'>
|
||||
<NodeVariableItem
|
||||
node={node as Node}
|
||||
isEnv={isEnv}
|
||||
isChatVar={isChatVar}
|
||||
varName={varName}
|
||||
writeMode={writeMode}
|
||||
className='bg-workflow-block-parma-bg'
|
||||
/>
|
||||
<div className='my-2 flex justify-between items-center h-[22px] px-[5px] bg-workflow-block-parma-bg radius-sm'>
|
||||
<div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.writeMode`)}</div>
|
||||
<div className='system-xs-medium text-text-secondary'>{t(`${i18nPrefix}.${writeMode}`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import VarReferencePicker from '../_base/components/variable/var-reference-picker'
|
||||
import OptionCard from '../_base/components/option-card'
|
||||
import {
|
||||
RiAddLine,
|
||||
} from '@remixicon/react'
|
||||
import VarList from './components/var-list'
|
||||
import useConfig from './use-config'
|
||||
import { WriteMode } from './types'
|
||||
import type { AssignerNodeType } from './types'
|
||||
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
||||
import { useHandleAddOperationItem } from './hooks'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import { type NodePanelProps } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const i18nPrefix = 'workflow.nodes.assigner'
|
||||
|
||||
@@ -18,67 +18,48 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
|
||||
data,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleAddOperationItem = useHandleAddOperationItem()
|
||||
const {
|
||||
readOnly,
|
||||
inputs,
|
||||
handleAssignedVarChanges,
|
||||
isSupportAppend,
|
||||
handleOperationListChanges,
|
||||
getAssignedVarType,
|
||||
getToAssignedVarType,
|
||||
writeModeTypesNum,
|
||||
writeModeTypesArr,
|
||||
writeModeTypes,
|
||||
handleWriteModeChange,
|
||||
filterAssignedVar,
|
||||
filterToAssignedVar,
|
||||
handleToAssignedVarChange,
|
||||
toAssignedVarType,
|
||||
} = useConfig(id, data)
|
||||
const handleAddOperation = () => {
|
||||
const newList = handleAddOperationItem(inputs.items || [])
|
||||
handleOperationListChanges(newList)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-2'>
|
||||
<div className='px-4 pb-4 space-y-4'>
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.assignedVariable`)}
|
||||
>
|
||||
<VarReferencePicker
|
||||
readonly={readOnly}
|
||||
nodeId={id}
|
||||
isShowNodeName
|
||||
value={inputs.assigned_variable_selector || []}
|
||||
onChange={handleAssignedVarChanges}
|
||||
filterVar={filterAssignedVar}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.writeMode`)}
|
||||
>
|
||||
<div className={cn('grid gap-2 grid-cols-3')}>
|
||||
{writeModeTypes.map(type => (
|
||||
<OptionCard
|
||||
key={type}
|
||||
title={t(`${i18nPrefix}.${type}`)}
|
||||
onSelect={handleWriteModeChange(type)}
|
||||
selected={inputs.write_mode === type}
|
||||
disabled={!isSupportAppend && type === WriteMode.Append}
|
||||
tooltip={type === WriteMode.Append ? t(`${i18nPrefix}.writeModeTip`)! : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
{inputs.write_mode !== WriteMode.Clear && (
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.setVariable`)}
|
||||
>
|
||||
<VarReferencePicker
|
||||
readonly={readOnly}
|
||||
nodeId={id}
|
||||
isShowNodeName
|
||||
value={inputs.input_variable_selector || []}
|
||||
onChange={handleToAssignedVarChange}
|
||||
filterVar={filterToAssignedVar}
|
||||
valueTypePlaceHolder={toAssignedVarType}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<div className='flex py-2 flex-col items-start self-stretch'>
|
||||
<div className='flex flex-col justify-center items-start gap-1 px-4 py-2 w-full self-stretch'>
|
||||
<div className='flex items-start gap-2 self-stretch'>
|
||||
<div className='flex flex-col justify-center items-start flex-grow text-text-secondary system-sm-semibold-uppercase'>{t(`${i18nPrefix}.variables`)}</div>
|
||||
<ActionButton onClick={handleAddOperation}>
|
||||
<RiAddLine className='w-4 h-4 shrink-0 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
<VarList
|
||||
readonly={readOnly}
|
||||
nodeId={id}
|
||||
list={inputs.items || []}
|
||||
onChange={(newList) => {
|
||||
handleOperationListChanges(newList)
|
||||
}}
|
||||
filterVar={filterAssignedVar}
|
||||
filterToAssignedVar={filterToAssignedVar}
|
||||
getAssignedVarType={getAssignedVarType}
|
||||
writeModeTypes={writeModeTypes}
|
||||
writeModeTypesArr={writeModeTypesArr}
|
||||
writeModeTypesNum={writeModeTypesNum}
|
||||
getToAssignedVarType={getToAssignedVarType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
|
||||
|
||||
export enum WriteMode {
|
||||
Overwrite = 'over-write',
|
||||
Append = 'append',
|
||||
Clear = 'clear',
|
||||
overwrite = 'over-write',
|
||||
clear = 'clear',
|
||||
append = 'append',
|
||||
extend = 'extend',
|
||||
set = 'set',
|
||||
increment = '+=',
|
||||
decrement = '-=',
|
||||
multiply = '*=',
|
||||
divide = '/=',
|
||||
}
|
||||
|
||||
export enum AssignerNodeInputType {
|
||||
variable = 'variable',
|
||||
constant = 'constant',
|
||||
}
|
||||
|
||||
export type AssignerNodeOperation = {
|
||||
variable_selector: ValueSelector
|
||||
input_type: AssignerNodeInputType
|
||||
operation: WriteMode
|
||||
value: any
|
||||
}
|
||||
|
||||
export type AssignerNodeType = CommonNodeType & {
|
||||
assigned_variable_selector: ValueSelector
|
||||
write_mode: WriteMode
|
||||
input_variable_selector: ValueSelector
|
||||
version?: '1' | '2'
|
||||
items: AssignerNodeOperation[]
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { useCallback, useMemo } from 'react'
|
||||
import produce from 'immer'
|
||||
import { useStoreApi } from 'reactflow'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import { VarType } from '../../types'
|
||||
import type { ValueSelector, Var } from '../../types'
|
||||
import { type AssignerNodeType, WriteMode } from './types'
|
||||
import { WriteMode } from './types'
|
||||
import type { AssignerNodeOperation, AssignerNodeType } from './types'
|
||||
import { useGetAvailableVars } from './hooks'
|
||||
import { convertV1ToV2 } from './utils'
|
||||
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
|
||||
import {
|
||||
useIsChatMode,
|
||||
@@ -13,9 +15,20 @@ import {
|
||||
useWorkflowVariables,
|
||||
} from '@/app/components/workflow/hooks'
|
||||
|
||||
const useConfig = (id: string, payload: AssignerNodeType) => {
|
||||
const useConfig = (id: string, rawPayload: AssignerNodeType) => {
|
||||
const payload = useMemo(() => convertV1ToV2(rawPayload), [rawPayload])
|
||||
const { nodesReadOnly: readOnly } = useNodesReadOnly()
|
||||
const isChatMode = useIsChatMode()
|
||||
const getAvailableVars = useGetAvailableVars()
|
||||
const filterVar = (varType: VarType) => {
|
||||
return (v: Var) => {
|
||||
if (varType === VarType.any)
|
||||
return true
|
||||
if (v.type === VarType.any)
|
||||
return true
|
||||
return v.type === varType
|
||||
}
|
||||
}
|
||||
|
||||
const store = useStoreApi()
|
||||
const { getBeforeNodesInSameBranch } = useWorkflow()
|
||||
@@ -30,59 +43,41 @@ const useConfig = (id: string, payload: AssignerNodeType) => {
|
||||
return getBeforeNodesInSameBranch(id)
|
||||
}, [getBeforeNodesInSameBranch, id])
|
||||
const { inputs, setInputs } = useNodeCrud<AssignerNodeType>(id, payload)
|
||||
const newSetInputs = useCallback((newInputs: AssignerNodeType) => {
|
||||
const finalInputs = produce(newInputs, (draft) => {
|
||||
if (draft.version !== '2')
|
||||
draft.version = '2'
|
||||
})
|
||||
setInputs(finalInputs)
|
||||
}, [setInputs])
|
||||
|
||||
const { getCurrentVariableType } = useWorkflowVariables()
|
||||
const assignedVarType = getCurrentVariableType({
|
||||
parentNode: iterationNode,
|
||||
valueSelector: inputs.assigned_variable_selector || [],
|
||||
availableNodes,
|
||||
isChatMode,
|
||||
isConstant: false,
|
||||
})
|
||||
|
||||
const isSupportAppend = useCallback((varType: VarType) => {
|
||||
return [VarType.arrayString, VarType.arrayNumber, VarType.arrayObject].includes(varType)
|
||||
}, [])
|
||||
|
||||
const isCurrSupportAppend = useMemo(() => isSupportAppend(assignedVarType), [assignedVarType, isSupportAppend])
|
||||
|
||||
const handleAssignedVarChanges = useCallback((variable: ValueSelector | string) => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.assigned_variable_selector = variable as ValueSelector
|
||||
draft.input_variable_selector = []
|
||||
|
||||
const newVarType = getCurrentVariableType({
|
||||
parentNode: iterationNode,
|
||||
valueSelector: draft.assigned_variable_selector || [],
|
||||
availableNodes,
|
||||
isChatMode,
|
||||
isConstant: false,
|
||||
})
|
||||
|
||||
if (inputs.write_mode === WriteMode.Append && !isSupportAppend(newVarType))
|
||||
draft.write_mode = WriteMode.Overwrite
|
||||
const getAssignedVarType = useCallback((valueSelector: ValueSelector) => {
|
||||
return getCurrentVariableType({
|
||||
parentNode: iterationNode,
|
||||
valueSelector: valueSelector || [],
|
||||
availableNodes,
|
||||
isChatMode,
|
||||
isConstant: false,
|
||||
})
|
||||
setInputs(newInputs)
|
||||
}, [inputs, setInputs, getCurrentVariableType, iterationNode, availableNodes, isChatMode, isSupportAppend])
|
||||
}, [getCurrentVariableType, iterationNode, availableNodes, isChatMode])
|
||||
|
||||
const writeModeTypes = [WriteMode.Overwrite, WriteMode.Append, WriteMode.Clear]
|
||||
const handleOperationListChanges = useCallback((items: AssignerNodeOperation[]) => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.items = [...items]
|
||||
})
|
||||
newSetInputs(newInputs)
|
||||
}, [inputs, newSetInputs])
|
||||
|
||||
const handleWriteModeChange = useCallback((writeMode: WriteMode) => {
|
||||
return () => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.write_mode = writeMode
|
||||
if (inputs.write_mode === WriteMode.Clear)
|
||||
draft.input_variable_selector = []
|
||||
})
|
||||
setInputs(newInputs)
|
||||
}
|
||||
}, [inputs, setInputs])
|
||||
const writeModeTypesArr = [WriteMode.overwrite, WriteMode.clear, WriteMode.append, WriteMode.extend]
|
||||
const writeModeTypes = [WriteMode.overwrite, WriteMode.clear, WriteMode.set]
|
||||
const writeModeTypesNum = [WriteMode.increment, WriteMode.decrement, WriteMode.multiply, WriteMode.divide]
|
||||
|
||||
const toAssignedVarType = useMemo(() => {
|
||||
const { write_mode } = inputs
|
||||
if (write_mode === WriteMode.Overwrite)
|
||||
const getToAssignedVarType = useCallback((assignedVarType: VarType, write_mode: WriteMode) => {
|
||||
if (write_mode === WriteMode.overwrite || write_mode === WriteMode.increment || write_mode === WriteMode.decrement
|
||||
|| write_mode === WriteMode.multiply || write_mode === WriteMode.divide || write_mode === WriteMode.extend)
|
||||
return assignedVarType
|
||||
if (write_mode === WriteMode.Append) {
|
||||
if (write_mode === WriteMode.append) {
|
||||
if (assignedVarType === VarType.arrayString)
|
||||
return VarType.string
|
||||
if (assignedVarType === VarType.arrayNumber)
|
||||
@@ -91,20 +86,18 @@ const useConfig = (id: string, payload: AssignerNodeType) => {
|
||||
return VarType.object
|
||||
}
|
||||
return VarType.string
|
||||
}, [assignedVarType, inputs])
|
||||
}, [])
|
||||
|
||||
const filterAssignedVar = useCallback((varPayload: Var, selector: ValueSelector) => {
|
||||
return selector.join('.').startsWith('conversation')
|
||||
}, [])
|
||||
|
||||
const filterToAssignedVar = useCallback((varPayload: Var, selector: ValueSelector) => {
|
||||
if (isEqual(selector, inputs.assigned_variable_selector))
|
||||
return false
|
||||
|
||||
if (inputs.write_mode === WriteMode.Overwrite) {
|
||||
const filterToAssignedVar = useCallback((varPayload: Var, assignedVarType: VarType, write_mode: WriteMode) => {
|
||||
if (write_mode === WriteMode.overwrite || write_mode === WriteMode.extend || write_mode === WriteMode.increment
|
||||
|| write_mode === WriteMode.decrement || write_mode === WriteMode.multiply || write_mode === WriteMode.divide) {
|
||||
return varPayload.type === assignedVarType
|
||||
}
|
||||
else if (inputs.write_mode === WriteMode.Append) {
|
||||
else if (write_mode === WriteMode.append) {
|
||||
switch (assignedVarType) {
|
||||
case VarType.arrayString:
|
||||
return varPayload.type === VarType.string
|
||||
@@ -117,27 +110,21 @@ const useConfig = (id: string, payload: AssignerNodeType) => {
|
||||
}
|
||||
}
|
||||
return true
|
||||
}, [inputs.assigned_variable_selector, inputs.write_mode, assignedVarType])
|
||||
|
||||
const handleToAssignedVarChange = useCallback((value: ValueSelector | string) => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.input_variable_selector = value as ValueSelector
|
||||
})
|
||||
setInputs(newInputs)
|
||||
}, [inputs, setInputs])
|
||||
}, [])
|
||||
|
||||
return {
|
||||
readOnly,
|
||||
inputs,
|
||||
handleAssignedVarChanges,
|
||||
assignedVarType,
|
||||
isSupportAppend: isCurrSupportAppend,
|
||||
handleOperationListChanges,
|
||||
getAssignedVarType,
|
||||
getToAssignedVarType,
|
||||
writeModeTypes,
|
||||
handleWriteModeChange,
|
||||
writeModeTypesArr,
|
||||
writeModeTypesNum,
|
||||
filterAssignedVar,
|
||||
filterToAssignedVar,
|
||||
handleToAssignedVarChange,
|
||||
toAssignedVarType,
|
||||
getAvailableVars,
|
||||
filterVar,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,83 @@
|
||||
import type { AssignerNodeType } from './types'
|
||||
import { AssignerNodeInputType, WriteMode } from './types'
|
||||
|
||||
export const checkNodeValid = (payload: AssignerNodeType) => {
|
||||
return true
|
||||
}
|
||||
|
||||
export const formatOperationName = (type: string) => {
|
||||
if (type === 'over-write')
|
||||
return 'Overwrite'
|
||||
return type.charAt(0).toUpperCase() + type.slice(1)
|
||||
}
|
||||
|
||||
type Item = {
|
||||
value: string | number
|
||||
name: string
|
||||
}
|
||||
|
||||
export const getOperationItems = (
|
||||
assignedVarType?: string,
|
||||
writeModeTypes?: WriteMode[],
|
||||
writeModeTypesArr?: WriteMode[],
|
||||
writeModeTypesNum?: WriteMode[],
|
||||
): Item[] => {
|
||||
if (assignedVarType?.startsWith('array') && writeModeTypesArr) {
|
||||
return writeModeTypesArr.map(type => ({
|
||||
value: type,
|
||||
name: type,
|
||||
}))
|
||||
}
|
||||
|
||||
if (assignedVarType === 'number' && writeModeTypes && writeModeTypesNum) {
|
||||
return [
|
||||
...writeModeTypes.map(type => ({
|
||||
value: type,
|
||||
name: type,
|
||||
})),
|
||||
{ value: 'divider', name: 'divider' } as Item,
|
||||
...writeModeTypesNum.map(type => ({
|
||||
value: type,
|
||||
name: type,
|
||||
})),
|
||||
]
|
||||
}
|
||||
|
||||
if (writeModeTypes && ['string', 'object'].includes(assignedVarType || '')) {
|
||||
return writeModeTypes.map(type => ({
|
||||
value: type,
|
||||
name: type,
|
||||
}))
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
const convertOldWriteMode = (oldMode: string): WriteMode => {
|
||||
switch (oldMode) {
|
||||
case 'over-write':
|
||||
return WriteMode.overwrite
|
||||
case 'append':
|
||||
return WriteMode.append
|
||||
case 'clear':
|
||||
return WriteMode.clear
|
||||
default:
|
||||
return WriteMode.overwrite
|
||||
}
|
||||
}
|
||||
|
||||
export const convertV1ToV2 = (payload: any): AssignerNodeType => {
|
||||
if (payload.version === '2' && payload.items)
|
||||
return payload as AssignerNodeType
|
||||
|
||||
return {
|
||||
version: '2',
|
||||
items: [{
|
||||
variable_selector: payload.assigned_variable_selector || [],
|
||||
input_type: AssignerNodeInputType.variable,
|
||||
operation: convertOldWriteMode(payload.write_mode),
|
||||
value: payload.input_variable_selector || [],
|
||||
}],
|
||||
...payload,
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user