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>
2025-12-20 00:06:56 +08:00 · 2024-05-27 21:57:08 +08:00
parent 444fdb79dc
commit 45deaee762
210 changed files with 9951 additions and 2223 deletions
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -0,0 +1,107 @@
+import {
+  memo,
+  useMemo,
+} from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
+import { useStore } from '../../../store'
+import { BlockEnum } from '../../../types'
+import type {
+  Node,
+  ValueSelector,
+  VarType,
+} from '../../../types'
+import type { VariableAssignerNodeType } from '../types'
+import {
+  useGetAvailableVars,
+  useVariableAssigner,
+} from '../hooks'
+import { filterVar } from '../utils'
+import NodeHandle from './node-handle'
+import NodeVariableItem from './node-variable-item'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+
+const i18nPrefix = 'workflow.nodes.variableAssigner'
+type GroupItem = {
+  groupEnabled: boolean
+  targetHandleId: string
+  title: string
+  type: string
+  variables: ValueSelector[]
+  variableAssignerNodeId: string
+  variableAssignerNodeData: VariableAssignerNodeType
+}
+type NodeGroupItemProps = {
+  item: GroupItem
+}
+const NodeGroupItem = ({
+  item,
+}: NodeGroupItemProps) => {
+  const { t } = useTranslation()
+  const enteringNodePayload = useStore(s => s.enteringNodePayload)
+  const hoveringAssignVariableGroupId = useStore(s => s.hoveringAssignVariableGroupId)
+  const nodes: Node[] = useNodes()
+  const {
+    handleGroupItemMouseEnter,
+    handleGroupItemMouseLeave,
+  } = useVariableAssigner()
+  const getAvailableVars = useGetAvailableVars()
+  const outputType = useMemo(() => {
+    if (item.targetHandleId === 'target')
+      return item.variableAssignerNodeData.output_type
+
+    const group = item.variableAssignerNodeData.advanced_settings?.groups.find(group => group.groupId === item.targetHandleId)
+    return group?.output_type || ''
+  }, [item.variableAssignerNodeData, item.targetHandleId])
+  const availableVars = getAvailableVars(item.variableAssignerNodeId, item.targetHandleId, filterVar(outputType as VarType))
+  const showSelectionBorder = enteringNodePayload?.nodeId === item.variableAssignerNodeId && item.groupEnabled && hoveringAssignVariableGroupId === item.targetHandleId
+  const connected = item.variableAssignerNodeData._connectedTargetHandleIds?.includes(item.targetHandleId)
+
+  return (
+    <div
+      className={cn(
+        'relative pt-1 px-1.5 pb-1.5 rounded-lg border border-transparent',
+        showSelectionBorder && '!border-primary-600',
+      )}
+      onMouseEnter={() => handleGroupItemMouseEnter(item.targetHandleId)}
+      onMouseLeave={handleGroupItemMouseLeave}
+    >
+      <div className='flex items-center justify-between h-4 text-[10px] font-medium text-gray-500'>
+        <NodeHandle
+          connected={connected}
+          variableAssignerNodeId={item.variableAssignerNodeId}
+          variableAssignerNodeData={item.variableAssignerNodeData}
+          handleId={item.targetHandleId}
+          availableVars={availableVars}
+        />
+        <span className='grow uppercase truncate' title={item.title}>{item.title}</span>
+        <span className='shrink-0 ml-2'>{item.type}</span>
+      </div>
+      {
+        !item.variables.length && (
+          <div className='relative flex items-center px-1 h-[22px] justify-between bg-gray-100 rounded-md space-x-1 text-[10px] font-normal text-gray-400 uppercase'>
+            {t(`${i18nPrefix}.varNotSet`)}
+          </div>
+        )
+      }
+      {
+        !!item.variables.length && item.variables.map((variable = [], index) => {
+          const isSystem = isSystemVar(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}
+              varName={varName}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default memo(NodeGroupItem)