Feat: upgrade variable assigner (#11285)

Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: -LAN- <laipz8200@outlook.com>
2025-12-09 02:46:52 +08:00 · 2024-12-03 13:56:40 +08:00
parent e79eac688a
commit e135ffc2c1
62 changed files with 1565 additions and 301 deletions
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -15,7 +15,7 @@ const Badge = ({
  return (
    <div
      className={cn(
-        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep  leading-3 text-text-tertiary',
+        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
        uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
        className,
      )}
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -64,7 +64,9 @@ const Input = ({
          destructive && 'bg-components-input-bg-destructive border-components-input-border-destructive text-components-input-text-filled hover:bg-components-input-bg-destructive hover:border-components-input-border-destructive focus:bg-components-input-bg-destructive focus:border-components-input-border-destructive',
          className,
        )}
-        placeholder={placeholder ?? (showLeftIcon ? t('common.operation.search') ?? '' : t('common.placeholder.input'))}
+        placeholder={placeholder ?? (showLeftIcon
+          ? (t('common.operation.search') || '')
+          : (t('common.placeholder.input') || ''))}
        value={value}
        onChange={onChange}
        disabled={disabled}
--- a/web/app/components/base/list-empty/horizontal-line.tsx
+++ b/web/app/components/base/list-empty/horizontal-line.tsx
@@ -0,0 +1,21 @@
+type HorizontalLineProps = {
+  className?: string
+}
+const HorizontalLine = ({
+  className,
+}: HorizontalLineProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="240" height="2" viewBox="0 0 240 2" fill="none" className={className}>
+      <path d="M0 1H240" stroke="url(#paint0_linear_8619_59125)"/>
+      <defs>
+        <linearGradient id="paint0_linear_8619_59125" x1="240" y1="9.99584" x2="3.95539e-05" y2="9.88094" gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" stopOpacity="0.01"/>
+          <stop offset="0.9031" stopColor="#101828" stopOpacity="0.04"/>
+          <stop offset="1" stopColor="white" stopOpacity="0.01"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default HorizontalLine
--- a/web/app/components/base/list-empty/index.tsx
+++ b/web/app/components/base/list-empty/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Variable02 } from '../icons/src/vender/solid/development'
+import VerticalLine from './vertical-line'
+import HorizontalLine from './horizontal-line'
+
+type ListEmptyProps = {
+  title?: string
+  description?: React.ReactNode
+}
+
+const ListEmpty = ({
+  title,
+  description,
+}: ListEmptyProps) => {
+  return (
+    <div className='flex w-[320px] p-4 flex-col items-start gap-2 rounded-[10px] bg-workflow-process-bg'>
+      <div className='flex w-10 h-10 justify-center items-center gap-2 rounded-[10px]'>
+        <div className='flex relative p-1 justify-center items-center gap-2 grow self-stretch rounded-[10px]
+          border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'>
+          <Variable02 className='w-5 h-5 shrink-0 text-text-accent' />
+          <VerticalLine className='absolute -right-[1px] top-1/2 -translate-y-1/4'/>
+          <VerticalLine className='absolute -left-[1px] top-1/2 -translate-y-1/4'/>
+          <HorizontalLine className='absolute top-0 left-3/4 -translate-x-1/4 -translate-y-1/2'/>
+          <HorizontalLine className='absolute top-full left-3/4 -translate-x-1/4 -translate-y-1/2' />
+        </div>
+      </div>
+      <div className='flex flex-col items-start gap-1 self-stretch'>
+        <div className='text-text-secondary system-sm-medium'>{title}</div>
+        {description}
+      </div>
+    </div>
+  )
+}
+
+export default ListEmpty
--- a/web/app/components/base/list-empty/vertical-line.tsx
+++ b/web/app/components/base/list-empty/vertical-line.tsx
@@ -0,0 +1,21 @@
+type VerticalLineProps = {
+  className?: string
+}
+const VerticalLine = ({
+  className,
+}: VerticalLineProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="2" height="132" viewBox="0 0 2 132" fill="none" className={className}>
+      <path d="M1 0L1 132" stroke="url(#paint0_linear_8619_59128)"/>
+      <defs>
+        <linearGradient id="paint0_linear_8619_59128" x1="-7.99584" y1="132" x2="-7.96108" y2="6.4974e-07" gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" stopOpacity="0.01"/>
+          <stop offset="0.877606" stopColor="#101828" stopOpacity="0.04"/>
+          <stop offset="1" stopColor="white" stopOpacity="0.01"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default VerticalLine
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -48,6 +48,7 @@ const getIcon = (type: BlockEnum, className: string) => {
    [BlockEnum.VariableAggregator]: <VariableX className={className} />,
    [BlockEnum.Assigner]: <Assigner className={className} />,
    [BlockEnum.Tool]: <VariableX className={className} />,
+    [BlockEnum.IterationStart]: <VariableX className={className} />,
    [BlockEnum.Iteration]: <Iteration className={className} />,
    [BlockEnum.ParameterExtractor]: <ParameterExtractor className={className} />,
    [BlockEnum.DocExtractor]: <DocsExtractor className={className} />,
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -33,6 +33,7 @@ export type Props = {
  showFileList?: boolean
  onGenerated?: (value: string) => void
  showCodeGenerator?: boolean
+  className?: string
 }

 export const languageMap = {
@@ -67,6 +68,7 @@ const CodeEditor: FC<Props> = ({
  showFileList,
  onGenerated,
  showCodeGenerator = false,
+  className,
 }) => {
  const [isFocus, setIsFocus] = React.useState(false)
  const [isMounted, setIsMounted] = React.useState(false)
@@ -187,7 +189,7 @@ const CodeEditor: FC<Props> = ({
  )

  return (
-    <div className={cn(isExpand && 'h-full')}>
+    <div className={cn(isExpand && 'h-full', className)}>
      {noWrapper
        ? <div className='relative no-wrapper' style={{
          height: isExpand ? '100%' : (editorContentHeight) / 2 + CODE_EDITOR_LINE_HEIGHT, // In IDE, the last line can always be in lop line. So there is some blank space in the bottom.
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -47,7 +47,6 @@ const Field: FC<Props> = ({
              triggerClassName='w-4 h-4 ml-1'
            />
          )}
-
        </div>
        <div className='flex'>
          {operations && <div>{operations}</div>}
--- a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
@@ -10,7 +10,7 @@ const ListNoDataPlaceholder: FC<Props> = ({
  children,
 }) => {
  return (
-    <div className='flex rounded-md bg-gray-50 items-center min-h-[42px] justify-center leading-[18px] text-xs font-normal text-gray-500'>
+    <div className='flex w-full rounded-[10px] bg-background-section items-center min-h-[42px] justify-center system-xs-regular text-text-tertiary'>
      {children}
    </div>
  )
--- a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
@@ -0,0 +1,39 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import VarReferenceVars from './var-reference-vars'
+import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import ListEmpty from '@/app/components/base/list-empty'
+
+type Props = {
+  vars: NodeOutPutVar[]
+  onChange: (value: ValueSelector, varDetail: Var) => void
+  itemWidth?: number
+}
+const AssignedVarReferencePopup: FC<Props> = ({
+  vars,
+  onChange,
+  itemWidth,
+}) => {
+  const { t } = useTranslation()
+  // max-h-[300px] overflow-y-auto todo: use portal to handle long list
+  return (
+    <div className='p-1 bg-components-panel-bg-bur rounded-lg border-[0.5px] border-components-panel-border shadow-lg w-[352px]' >
+      {(!vars || vars.length === 0)
+        ? <ListEmpty
+          title={t('workflow.nodes.assigner.noAssignedVars') || ''}
+          description={t('workflow.nodes.assigner.assignedVarsDescription')}
+        />
+        : <VarReferenceVars
+          searchBoxClassName='mt-1'
+          vars={vars}
+          onChange={onChange}
+          itemWidth={itemWidth}
+          isSupportFileVar
+        />
+      }
+    </div >
+  )
+}
+export default React.memo(AssignedVarReferencePopup)
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -60,6 +60,9 @@ type Props = {
  onRemove?: () => void
  typePlaceHolder?: string
  isSupportFileVar?: boolean
+  placeholder?: string
+  minWidth?: number
+  popupFor?: 'assigned' | 'toAssigned'
 }

 const VarReferencePicker: FC<Props> = ({
@@ -83,6 +86,9 @@ const VarReferencePicker: FC<Props> = ({
  onRemove,
  typePlaceHolder,
  isSupportFileVar = true,
+  placeholder,
+  minWidth,
+  popupFor,
 }) => {
  const { t } = useTranslation()
  const store = useStoreApi()
@@ -261,7 +267,7 @@ const VarReferencePicker: FC<Props> = ({
                  <AddButton onClick={() => { }}></AddButton>
                </div>
              )
-              : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-gray-100 border', isInTable && 'bg-transparent border-none')}>
+              : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-gray-100 border', isInTable && 'bg-transparent border-none', readonly && 'bg-components-input-bg-disabled')}>
                {isSupportConstantValue
                  ? <div onClick={(e) => {
                    e.stopPropagation()
@@ -285,7 +291,7 @@ const VarReferencePicker: FC<Props> = ({
                    />
                  </div>
                  : (!hasValue && <div className='ml-1.5 mr-1'>
-                    <Variable02 className='w-3.5 h-3.5 text-gray-400' />
+                    <Variable02 className={`w-4 h-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
                  </div>)}
                {isConstant
                  ? (
@@ -329,17 +335,17 @@ const VarReferencePicker: FC<Props> = ({
                                    {!hasValue && <Variable02 className='w-3.5 h-3.5' />}
                                    {isEnv && <Env className='w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
                                    {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
-                                    <div className={cn('ml-0.5 text-xs font-medium truncate', (isEnv || isChatVar) && '!text-text-secondary')} title={varName} style={{
+                                    <div className={cn('ml-0.5 text-xs font-medium truncate', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700')} title={varName} style={{
                                      maxWidth: maxVarNameWidth,
                                    }}>{varName}</div>
                                  </div>
-                                  <div className='ml-0.5 text-xs font-normal text-gray-500 capitalize truncate' title={type} style={{
+                                  <div className='ml-0.5 capitalize truncate text-text-tertiary text-center system-xs-regular' title={type} style={{
                                    maxWidth: maxTypeWidth,
                                  }}>{type}</div>
                                  {!isValidVar && <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-[#D92D20]' />}
                                </>
                              )
-                              : <div className='text-[13px] font-normal text-gray-400'>{t('workflow.common.setVarValuePlaceholder')}</div>}
+                              : <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} text-ellipsis system-sm-regular`}>{placeholder ?? t('workflow.common.setVarValuePlaceholder')}</div>}
                          </div>
                        </Tooltip>
                      </div>
@@ -378,12 +384,13 @@ const VarReferencePicker: FC<Props> = ({
        </WrapElem>
        <PortalToFollowElemContent style={{
          zIndex: 100,
-        }}>
+        }} className='mt-1'>
          {!isConstant && (
            <VarReferencePopup
              vars={outputVars}
+              popupFor={popupFor}
              onChange={handleVarReferenceChange}
-              itemWidth={isAddBtnTrigger ? 260 : triggerWidth}
+              itemWidth={isAddBtnTrigger ? 260 : (minWidth || triggerWidth)}
              isSupportFileVar={isSupportFileVar}
            />
          )}
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -1,33 +1,64 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import VarReferenceVars from './var-reference-vars'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import ListEmpty from '@/app/components/base/list-empty'
+import { LanguagesSupported } from '@/i18n/language'
+import I18n from '@/context/i18n'

 type Props = {
  vars: NodeOutPutVar[]
+  popupFor?: 'assigned' | 'toAssigned'
  onChange: (value: ValueSelector, varDetail: Var) => void
  itemWidth?: number
  isSupportFileVar?: boolean
 }
 const VarReferencePopup: FC<Props> = ({
  vars,
+  popupFor,
  onChange,
  itemWidth,
  isSupportFileVar = true,
 }) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
  // max-h-[300px] overflow-y-auto todo: use portal to handle long list
  return (
    <div className='p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1' style={{
      width: itemWidth || 228,
    }}>
-      <VarReferenceVars
-        searchBoxClassName='mt-1'
-        vars={vars}
-        onChange={onChange}
-        itemWidth={itemWidth}
-        isSupportFileVar={isSupportFileVar}
-      />
+      {((!vars || vars.length === 0) && popupFor)
+        ? (popupFor === 'toAssigned'
+          ? (
+            <ListEmpty
+              title={t('workflow.variableReference.noAvailableVars') || ''}
+              description={<div className='text-text-tertiary system-xs-regular'>
+                {t('workflow.variableReference.noVarsForOperation')}
+              </div>}
+            />
+          )
+          : (
+            <ListEmpty
+              title={t('workflow.variableReference.noAssignedVars') || ''}
+              description={<div className='text-text-tertiary system-xs-regular'>
+                {t('workflow.variableReference.assignedVarsDescription')}
+                <a target='_blank' rel='noopener noreferrer'
+                  className='text-text-accent-secondary'
+                  href={locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/guides/workflow/variables#conversation-variables' : `https://docs.dify.ai/${locale.toLowerCase()}/guides/workflow/variables#hui-hua-bian-liang`}>{t('workflow.variableReference.conversationVars')}</a>
+              </div>}
+            />
+          ))
+        : <VarReferenceVars
+          searchBoxClassName='mt-1'
+          vars={vars}
+          onChange={onChange}
+          itemWidth={itemWidth}
+          isSupportFileVar={isSupportFileVar}
+        />
+      }
    </div >
  )
 }
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -24,6 +24,7 @@ import QuestionClassifyDefault from '@/app/components/workflow/nodes/question-cl
 import HTTPDefault from '@/app/components/workflow/nodes/http/default'
 import ToolDefault from '@/app/components/workflow/nodes/tool/default'
 import VariableAssigner from '@/app/components/workflow/nodes/variable-assigner/default'
+import Assigner from '@/app/components/workflow/nodes/assigner/default'
 import ParameterExtractorDefault from '@/app/components/workflow/nodes/parameter-extractor/default'
 import IterationDefault from '@/app/components/workflow/nodes/iteration/default'
 import { ssePost } from '@/service/base'
@@ -39,6 +40,7 @@ const { checkValid: checkQuestionClassifyValid } = QuestionClassifyDefault
 const { checkValid: checkHttpValid } = HTTPDefault
 const { checkValid: checkToolValid } = ToolDefault
 const { checkValid: checkVariableAssignerValid } = VariableAssigner
+const { checkValid: checkAssignerValid } = Assigner
 const { checkValid: checkParameterExtractorValid } = ParameterExtractorDefault
 const { checkValid: checkIterationValid } = IterationDefault

@@ -51,7 +53,7 @@ const checkValidFns: Record<BlockEnum, Function> = {
  [BlockEnum.QuestionClassifier]: checkQuestionClassifyValid,
  [BlockEnum.HttpRequest]: checkHttpValid,
  [BlockEnum.Tool]: checkToolValid,
-  [BlockEnum.VariableAssigner]: checkVariableAssignerValid,
+  [BlockEnum.VariableAssigner]: checkAssignerValid,
  [BlockEnum.VariableAggregator]: checkVariableAssignerValid,
  [BlockEnum.ParameterExtractor]: checkParameterExtractorValid,
  [BlockEnum.Iteration]: checkIterationValid,
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/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 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
--- a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
@@ -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)
--- a/web/app/components/workflow/nodes/assigner/components/var-list/use-var-list.ts
+++ b/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
--- a/web/app/components/workflow/nodes/assigner/default.ts
+++ b/web/app/components/workflow/nodes/assigner/default.ts
@@ -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,
--- a/web/app/components/workflow/nodes/assigner/hooks.ts
+++ b/web/app/components/workflow/nodes/assigner/hooks.ts
@@ -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]
+  }, [])
+}
--- a/web/app/components/workflow/nodes/assigner/node.tsx
+++ b/web/app/components/workflow/nodes/assigner/node.tsx
@@ -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>
  )
 }
--- a/web/app/components/workflow/nodes/assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/assigner/panel.tsx
@@ -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>
  )
--- a/web/app/components/workflow/nodes/assigner/types.ts
+++ b/web/app/components/workflow/nodes/assigner/types.ts
@@ -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[]
 }
--- a/web/app/components/workflow/nodes/assigner/use-config.ts
+++ b/web/app/components/workflow/nodes/assigner/use-config.ts
@@ -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,
  }
 }

--- a/web/app/components/workflow/nodes/assigner/utils.ts
+++ b/web/app/components/workflow/nodes/assigner/utils.ts
@@ -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,
+  }
+}
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -1,9 +1,11 @@
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
+import Badge from '@/app/components/base/badge'
 import type { Node } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'

@@ -12,20 +14,26 @@ type NodeVariableItemProps = {
  isChatVar: boolean
  node: Node
  varName: string
+  writeMode?: string
  showBorder?: boolean
  className?: string
 }
+
+const i18nPrefix = 'workflow.nodes.assigner'
+
 const NodeVariableItem = ({
  isEnv,
  isChatVar,
  node,
  varName,
+  writeMode,
  showBorder,
  className,
 }: NodeVariableItemProps) => {
+  const { t } = useTranslation()
  return (
    <div className={cn(
-      'relative flex items-center mt-0.5 h-6 bg-gray-100 rounded-md  px-1 text-xs font-normal text-gray-700',
+      'relative flex items-center p-[3px] pl-[5px] gap-1 self-stretch rounded-md bg-workflow-block-param-bg',
      showBorder && '!bg-black/[0.02]',
      className,
    )}>
@@ -41,11 +49,19 @@ const NodeVariableItem = ({
          <Line3 className='mr-0.5'></Line3>
        </div>
      )}
-      <div className='flex items-center text-primary-600'>
+      <div className='flex items-center text-primary-600 w-full'>
        {!isEnv && !isChatVar && <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />}
        {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
-        <div className={cn('max-w-[75px] truncate ml-0.5 text-xs font-medium', (isEnv || isChatVar) && 'text-gray-900')} title={varName}>{varName}</div>
+        {!isChatVar && <div className={cn('max-w-[75px] truncate ml-0.5 system-xs-medium overflow-hidden text-ellipsis', isEnv && 'text-gray-900')} title={varName}>{varName}</div>}
+        {isChatVar
+          && <div className='flex items-center w-full gap-1'>
+            <div className='flex h-[18px] min-w-[18px] items-center gap-0.5 flex-1'>
+              <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />
+              <div className='max-w-[75px] truncate ml-0.5 system-xs-medium overflow-hidden text-ellipsis text-util-colors-teal-teal-700'>{varName}</div>
+            </div>
+            {writeMode && <Badge className='shrink-0' text={t(`${i18nPrefix}.operations.${writeMode}`)} />}
+          </div>
+        }
      </div>
    </div>
  )