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/iteration/insert-block.tsx

@@ -0,0 +1,61 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import cn from 'classnames'
+import { useNodesInteractions } from '../../hooks'
+import type {
+  BlockEnum,
+  OnSelectBlock,
+} from '../../types'
+import BlockSelector from '../../block-selector'
+
+type InsertBlockProps = {
+  startNodeId: string
+  availableBlocksTypes: BlockEnum[]
+}
+const InsertBlock = ({
+  startNodeId,
+  availableBlocksTypes,
+}: InsertBlockProps) => {
+  const [open, setOpen] = useState(false)
+  const { handleNodeAdd } = useNodesInteractions()
+
+  const handleOpenChange = useCallback((v: boolean) => {
+    setOpen(v)
+  }, [])
+  const handleInsert = useCallback<OnSelectBlock>((nodeType, toolDefaultValue) => {
+    handleNodeAdd(
+      {
+        nodeType,
+        toolDefaultValue,
+      },
+      {
+        nextNodeId: startNodeId,
+        nextNodeTargetHandle: 'target',
+      },
+    )
+  }, [startNodeId, handleNodeAdd])
+
+  return (
+    <div
+      className={cn(
+        'nopan nodrag',
+        'hidden group-hover/insert:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
+        open && '!block',
+      )}
+    >
+      <BlockSelector
+        open={open}
+        onOpenChange={handleOpenChange}
+        asChild
+        onSelect={handleInsert}
+        availableBlocksTypes={availableBlocksTypes}
+        triggerClassName={() => 'hover:scale-125 transition-all'}
+      />
+    </div>
+  )
+}
+
+export default memo(InsertBlock)