dify

dify/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx

@@ -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

dify/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx

@@ -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)

dify/web/app/components/workflow/nodes/assigner/components/var-list/use-var-list.ts

@@ -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

dify/web/app/components/workflow/nodes/assigner/default.ts

@@ -0,0 +1,50 @@
+import type { NodeDefault } from '../../types'
+import { type AssignerNodeType, WriteMode } from './types'
+import { genNodeMetaData } from '@/app/components/workflow/utils'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
+const i18nPrefix = 'workflow.errorMsg'
+
+const metaData = genNodeMetaData({
+  classification: BlockClassificationEnum.Transform,
+  sort: 5,
+  type: BlockEnum.Assigner,
+  helpLinkUri: 'variable-assigner',
+})
+const nodeDefault: NodeDefault<AssignerNodeType> = {
+  metaData,
+  defaultValue: {
+    version: '2',
+    items: [],
+  },
+  checkValid(payload: AssignerNodeType, t: any) {
+    let errorMessages = ''
+    const {
+      items: operationItems,
+    } = payload
+
+    operationItems?.forEach((value) => {
+      if (!errorMessages && !value.variable_selector?.length)
+        errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.assignedVariable') })
+
+      if (!errorMessages && value.operation !== WriteMode.clear && value.operation !== WriteMode.removeFirst && value.operation !== WriteMode.removeLast) {
+        if (value.operation === WriteMode.set || value.operation === WriteMode.increment
+          || value.operation === WriteMode.decrement || value.operation === WriteMode.multiply
+          || value.operation === WriteMode.divide) {
+          if (!value.value && value.value !== false && 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,
+      errorMessage: errorMessages,
+    }
+  },
+}
+
+export default nodeDefault

dify/web/app/components/workflow/nodes/assigner/hooks.ts

@@ -0,0 +1,68 @@
+import { useCallback } from 'react'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+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]
+  }, [])
+}

dify/web/app/components/workflow/nodes/assigner/node.tsx

@@ -0,0 +1,82 @@
+import type { FC } from 'react'
+import React from 'react'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { useTranslation } from 'react-i18next'
+import type { AssignerNodeType } from './types'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, type Node, type NodeProps } from '@/app/components/workflow/types'
+import {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
+import Badge from '@/app/components/base/badge'
+
+const i18nPrefix = 'workflow.nodes.assigner'
+
+const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
+  data,
+}) => {
+  const { t } = useTranslation()
+  const nodes: Node[] = useNodes()
+  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 items-start gap-0.5 self-stretch px-3 py-1'>
+          <div className='flex flex-col items-start gap-1 self-stretch'>
+            <div className='flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg px-[5px] py-1'>
+              <div className='system-xs-medium flex-1 text-text-tertiary'>{t(`${i18nPrefix}.varNotSet`)}</div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
+        {operationItems.map((value, index) => {
+          const variable = value.variable_selector
+          if (!variable || variable.length === 0)
+            return null
+          const isSystem = isSystemVar(variable)
+          const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
+          return (
+            <VariableLabelInNode
+              key={index}
+              variables={variable}
+              nodeType={node?.data.type}
+              nodeTitle={node?.data.title}
+              rightSlot={
+                value.operation && <Badge className='!ml-auto shrink-0' text={t(`${i18nPrefix}.operations.${value.operation}`)} />
+              }
+            />
+          )
+        })}
+      </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 node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
+
+  return (
+    <div className='relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1'>
+      <VariableLabelInNode
+        variables={variable}
+        nodeType={node?.data.type}
+        nodeTitle={node?.data.title}
+        rightSlot={
+          writeMode && <Badge className='!ml-auto shrink-0' text={t(`${i18nPrefix}.operations.${writeMode}`)} />
+        }
+      />
+    </div>
+  )
+}
+
+export default React.memo(NodeComponent)

dify/web/app/components/workflow/nodes/assigner/panel.tsx

@@ -0,0 +1,68 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import VarList from './components/var-list'
+import useConfig from './use-config'
+import type { AssignerNodeType } from './types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
+import { useHandleAddOperationItem } from './hooks'
+import ActionButton from '@/app/components/base/action-button'
+
+const i18nPrefix = 'workflow.nodes.assigner'
+
+const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
+  id,
+  data,
+}) => {
+  const { t } = useTranslation()
+  const handleAddOperationItem = useHandleAddOperationItem()
+  const {
+    readOnly,
+    inputs,
+    handleOperationListChanges,
+    getAssignedVarType,
+    getToAssignedVarType,
+    writeModeTypesNum,
+    writeModeTypesArr,
+    writeModeTypes,
+    filterAssignedVar,
+    filterToAssignedVar,
+  } = useConfig(id, data)
+  const handleAddOperation = () => {
+    const newList = handleAddOperationItem(inputs.items || [])
+    handleOperationListChanges(newList)
+  }
+
+  return (
+    <div className='flex flex-col items-start self-stretch py-2'>
+      <div className='flex w-full flex-col items-start justify-center gap-1 self-stretch px-4 py-2'>
+        <div className='flex items-start gap-2 self-stretch'>
+          <div className='system-sm-semibold-uppercase flex grow flex-col items-start justify-center text-text-secondary'>{t(`${i18nPrefix}.variables`)}</div>
+          <ActionButton onClick={handleAddOperation}>
+            <RiAddLine className='h-4 w-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>
+  )
+}
+
+export default React.memo(Panel)

dify/web/app/components/workflow/nodes/assigner/types.ts

@@ -0,0 +1,34 @@
+import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
+
+export enum WriteMode {
+  overwrite = 'over-write',
+  clear = 'clear',
+  append = 'append',
+  extend = 'extend',
+  set = 'set',
+  increment = '+=',
+  decrement = '-=',
+  multiply = '*=',
+  divide = '/=',
+  removeFirst = 'remove-first',
+  removeLast = 'remove-last',
+}
+
+export enum AssignerNodeInputType {
+  variable = 'variable',
+  constant = 'constant',
+}
+
+export type AssignerNodeOperation = {
+  variable_selector: ValueSelector
+  input_type: AssignerNodeInputType
+  operation: WriteMode
+  value: any
+}
+
+export type AssignerNodeType = CommonNodeType & {
+  version?: '1' | '2'
+  items: AssignerNodeOperation[]
+}
+
+export const writeModeTypesNum = [WriteMode.increment, WriteMode.decrement, WriteMode.multiply, WriteMode.divide]

dify/web/app/components/workflow/nodes/assigner/use-config.ts

@@ -0,0 +1,133 @@
+import { useCallback, useMemo } from 'react'
+import { produce } from 'immer'
+import { useStoreApi } from 'reactflow'
+import { VarType } from '../../types'
+import type { ValueSelector, Var } from '../../types'
+import { WriteMode } from './types'
+import type { AssignerNodeOperation, AssignerNodeType } from './types'
+import { writeModeTypesNum } from './types'
+import { useGetAvailableVars } from './hooks'
+import { convertV1ToV2 } from './utils'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import {
+  useIsChatMode,
+  useNodesReadOnly,
+  useWorkflow,
+  useWorkflowVariables,
+} from '@/app/components/workflow/hooks'
+
+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 { getBeforeNodesInSameBranchIncludeParent } = useWorkflow()
+
+  const {
+    getNodes,
+  } = store.getState()
+  const currentNode = getNodes().find(n => n.id === id)
+  const isInIteration = payload.isInIteration
+  const iterationNode = isInIteration ? getNodes().find(n => n.id === currentNode!.parentId) : null
+  const availableNodes = useMemo(() => {
+    return getBeforeNodesInSameBranchIncludeParent(id)
+  }, [getBeforeNodesInSameBranchIncludeParent, 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 getAssignedVarType = useCallback((valueSelector: ValueSelector) => {
+    return getCurrentVariableType({
+      parentNode: isInIteration ? iterationNode : null,
+      valueSelector: valueSelector || [],
+      availableNodes,
+      isChatMode,
+      isConstant: false,
+    })
+  }, [getCurrentVariableType, isInIteration, iterationNode, availableNodes, isChatMode])
+
+  const handleOperationListChanges = useCallback((items: AssignerNodeOperation[]) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.items = [...items]
+    })
+    newSetInputs(newInputs)
+  }, [inputs, newSetInputs])
+
+  const writeModeTypesArr = [WriteMode.overwrite, WriteMode.clear, WriteMode.append, WriteMode.extend, WriteMode.removeFirst, WriteMode.removeLast]
+  const writeModeTypes = [WriteMode.overwrite, WriteMode.clear, WriteMode.set]
+
+  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 (assignedVarType === VarType.arrayString)
+        return VarType.string
+      if (assignedVarType === VarType.arrayNumber)
+        return VarType.number
+      if (assignedVarType === VarType.arrayObject)
+        return VarType.object
+    }
+    return VarType.string
+  }, [])
+
+  const filterAssignedVar = useCallback((varPayload: Var, selector: ValueSelector) => {
+    if (varPayload.isLoopVariable)
+      return true
+    return selector.join('.').startsWith('conversation')
+  }, [])
+
+  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 (write_mode === WriteMode.append) {
+      switch (assignedVarType) {
+        case VarType.arrayString:
+          return varPayload.type === VarType.string
+        case VarType.arrayNumber:
+          return varPayload.type === VarType.number
+        case VarType.arrayObject:
+          return varPayload.type === VarType.object
+        default:
+          return false
+      }
+    }
+    return true
+  }, [])
+
+  return {
+    readOnly,
+    inputs,
+    handleOperationListChanges,
+    getAssignedVarType,
+    getToAssignedVarType,
+    writeModeTypes,
+    writeModeTypesArr,
+    writeModeTypesNum,
+    filterAssignedVar,
+    filterToAssignedVar,
+    getAvailableVars,
+    filterVar,
+  }
+}
+
+export default useConfig

dify/web/app/components/workflow/nodes/assigner/use-single-run-form-params.ts

@@ -0,0 +1,55 @@
+import type { RefObject } from 'react'
+import type { InputVar, ValueSelector, Variable } from '@/app/components/workflow/types'
+import { useMemo } from 'react'
+import useNodeCrud from '../_base/hooks/use-node-crud'
+import { type AssignerNodeType, WriteMode } from './types'
+import { writeModeTypesNum } from './types'
+
+type Params = {
+  id: string,
+  payload: AssignerNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: RefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+  varSelectorsToVarInputs: (variables: ValueSelector[]) => InputVar[]
+}
+const useSingleRunFormParams = ({
+  id,
+  payload,
+  runInputData,
+  setRunInputData,
+  varSelectorsToVarInputs,
+}: Params) => {
+  const { inputs } = useNodeCrud<AssignerNodeType>(id, payload)
+
+  const vars = (inputs.items ?? []).filter((item) => {
+    return item.operation !== WriteMode.clear && item.operation !== WriteMode.set
+                    && item.operation !== WriteMode.removeFirst && item.operation !== WriteMode.removeLast
+                    && !writeModeTypesNum.includes(item.operation)
+  }).map(item => item.value as ValueSelector)
+
+  const forms = useMemo(() => {
+    const varInputs = varSelectorsToVarInputs(vars)
+
+    return [
+      {
+        inputs: varInputs,
+        values: runInputData,
+        onChange: setRunInputData,
+      },
+    ]
+  }, [runInputData, setRunInputData, varSelectorsToVarInputs, vars])
+
+  const getDependentVars = () => {
+    return vars
+  }
+
+  return {
+    forms,
+    getDependentVars,
+  }
+}
+
+export default useSingleRunFormParams

dify/web/app/components/workflow/nodes/assigner/utils.ts

@@ -0,0 +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', 'boolean', '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,
+  }
+}