feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx

@@ -0,0 +1,87 @@
+import {
+  memo,
+  useCallback,
+} from 'react'
+import cn from 'classnames'
+import { useVariableAssigner } from '../../hooks'
+import type { VariableAssignerNodeType } from '../../types'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Plus02 } from '@/app/components/base/icons/src/vender/line/general'
+import AddVariablePopup from '@/app/components/workflow/nodes/_base/components/add-variable-popup'
+import type {
+  NodeOutPutVar,
+  ValueSelector,
+  Var,
+} from '@/app/components/workflow/types'
+
+export type AddVariableProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  variableAssignerNodeId: string
+  variableAssignerNodeData: VariableAssignerNodeType
+  availableVars: NodeOutPutVar[]
+  handleId?: string
+}
+const AddVariable = ({
+  open,
+  onOpenChange,
+  availableVars,
+  variableAssignerNodeId,
+  variableAssignerNodeData,
+  handleId,
+}: AddVariableProps) => {
+  const { handleAssignVariableValueChange } = useVariableAssigner()
+
+  const handleSelectVariable = useCallback((v: ValueSelector, varDetail: Var) => {
+    handleAssignVariableValueChange(
+      variableAssignerNodeId,
+      v,
+      varDetail,
+      handleId,
+    )
+    onOpenChange(false)
+  }, [handleAssignVariableValueChange, variableAssignerNodeId, handleId, onOpenChange])
+
+  return (
+    <div className={cn(
+      'hidden group-hover:flex absolute top-0 left-0 z-10 pointer-events-none',
+      open && '!flex',
+      variableAssignerNodeData.selected && '!flex',
+    )}>
+      <PortalToFollowElem
+        placement={'left-start'}
+        offset={{
+          mainAxis: 4,
+          crossAxis: -60,
+        }}
+        open={open}
+        onOpenChange={onOpenChange}
+      >
+        <PortalToFollowElemTrigger
+          onClick={() => onOpenChange(!open)}
+        >
+          <div
+            className={cn(
+              'flex items-center justify-center',
+              'w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10',
+            )}
+          >
+            <Plus02 className='w-2.5 h-2.5 text-white' />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <AddVariablePopup
+            onSelect={handleSelectVariable}
+            availableVars={availableVars}
+          />
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </div>
+  )
+}
+
+export default memo(AddVariable)