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/block-selector/all-tools.tsx

@@ -0,0 +1,76 @@
+import {
+  useMemo,
+  useState,
+} from 'react'
+import cn from 'classnames'
+import type {
+  OnSelectBlock,
+  ToolWithProvider,
+} from '../types'
+import { useStore } from '../store'
+import { ToolTypeEnum } from './types'
+import Tools from './tools'
+import { useToolTabs } from './hooks'
+import { useGetLanguage } from '@/context/i18n'
+
+type AllToolsProps = {
+  searchText: string
+  onSelect: OnSelectBlock
+}
+const AllTools = ({
+  searchText,
+  onSelect,
+}: AllToolsProps) => {
+  const language = useGetLanguage()
+  const tabs = useToolTabs()
+  const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
+  const buildInTools = useStore(s => s.buildInTools)
+  const customTools = useStore(s => s.customTools)
+  const workflowTools = useStore(s => s.workflowTools)
+
+  const tools = useMemo(() => {
+    let mergedTools: ToolWithProvider[] = []
+    if (activeTab === ToolTypeEnum.All)
+      mergedTools = [...buildInTools, ...customTools]
+    if (activeTab === ToolTypeEnum.BuiltIn)
+      mergedTools = buildInTools
+    if (activeTab === ToolTypeEnum.Custom)
+      mergedTools = customTools
+    if (activeTab === ToolTypeEnum.Workflow)
+      mergedTools = workflowTools
+
+    return mergedTools.filter((toolWithProvider) => {
+      return toolWithProvider.tools.some((tool) => {
+        return tool.label[language].toLowerCase().includes(searchText.toLowerCase())
+      })
+    })
+  }, [activeTab, buildInTools, customTools, workflowTools, searchText, language])
+  return (
+    <div>
+      <div className='flex items-center px-3 h-8 space-x-1 bg-gray-25 border-b-[0.5px] border-black/[0.08] shadow-xs'>
+        {
+          tabs.map(tab => (
+            <div
+              className={cn(
+                'flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer',
+                'text-xs font-medium text-gray-700',
+                activeTab === tab.key && 'bg-gray-200',
+              )}
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+            >
+              {tab.name}
+            </div>
+          ))
+        }
+      </div>
+      <Tools
+        showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
+        tools={tools}
+        onSelect={onSelect}
+      />
+    </div>
+  )
+}
+
+export default AllTools

web/app/components/workflow/block-selector/constants.tsx

@@ -39,6 +39,11 @@ export const BLOCKS: Block[] = [
     type: BlockEnum.IfElse,
     title: 'IF/ELSE',
   },
+  {
+    classification: BlockClassificationEnum.Logic,
+    type: BlockEnum.Iteration,
+    title: 'Iteration',
+  },
   {
     classification: BlockClassificationEnum.Transform,
     type: BlockEnum.Code,
@@ -51,8 +56,13 @@ export const BLOCKS: Block[] = [
   },
   {
     classification: BlockClassificationEnum.Transform,
-    type: BlockEnum.VariableAssigner,
-    title: 'Variable Assigner',
+    type: BlockEnum.VariableAggregator,
+    title: 'Variable Aggregator',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.ParameterExtractor,
+    title: 'Parameter Extractor',
   },
   {
     classification: BlockClassificationEnum.Utilities,

web/app/components/workflow/block-selector/hooks.ts

@@ -1,6 +1,9 @@
 import { useTranslation } from 'react-i18next'
 import { BLOCKS } from './constants'
-import { TabsEnum } from './types'
+import {
+  TabsEnum,
+  ToolTypeEnum,
+} from './types'
 
 export const useBlocks = () => {
   const { t } = useTranslation()
@@ -22,12 +25,31 @@ export const useTabs = () => {
       name: t('workflow.tabs.blocks'),
     },
     {
-      key: TabsEnum.BuiltInTool,
-      name: t('workflow.tabs.builtInTool'),
-    },
-    {
-      key: TabsEnum.CustomTool,
-      name: t('workflow.tabs.customTool'),
+      key: TabsEnum.Tools,
+      name: t('workflow.tabs.tools'),
+    },
+  ]
+}
+
+export const useToolTabs = () => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      key: ToolTypeEnum.All,
+      name: t('workflow.tabs.allTool'),
+    },
+    {
+      key: ToolTypeEnum.BuiltIn,
+      name: t('workflow.tabs.builtInTool'),
+    },
+    {
+      key: ToolTypeEnum.Custom,
+      name: t('workflow.tabs.customTool'),
+    },
+    {
+      key: ToolTypeEnum.Workflow,
+      name: t('workflow.tabs.workflowTool'),
     },
   ]
 }

web/app/components/workflow/block-selector/index.tsx

@@ -39,6 +39,7 @@ type NodeSelectorProps = {
   asChild?: boolean
   availableBlocksTypes?: BlockEnum[]
   disabled?: boolean
+  noBlocks?: boolean
 }
 const NodeSelector: FC<NodeSelectorProps> = ({
   open: openFromProps,
@@ -54,6 +55,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   asChild,
   availableBlocksTypes,
   disabled,
+  noBlocks = false,
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -136,6 +138,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
             onSelect={handleSelect}
             searchText={searchText}
             availableBlocksTypes={availableBlocksTypes}
+            noBlocks={noBlocks}
           />
         </div>
       </PortalToFollowElemContent>

web/app/components/workflow/block-selector/tabs.tsx

@@ -3,48 +3,55 @@ import {
   memo,
   useState,
 } from 'react'
+import cn from 'classnames'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
 import { TabsEnum } from './types'
-import Tools from './tools'
 import Blocks from './blocks'
+import AllTools from './all-tools'
 
 export type TabsProps = {
   searchText: string
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   availableBlocksTypes?: BlockEnum[]
+  noBlocks?: boolean
 }
 const Tabs: FC<TabsProps> = ({
   searchText,
   onSelect,
   availableBlocksTypes,
+  noBlocks,
 }) => {
   const tabs = useTabs()
-  const [activeTab, setActiveTab] = useState(tabs[0].key)
+  const [activeTab, setActiveTab] = useState(noBlocks ? TabsEnum.Tools : TabsEnum.Blocks)
 
   return (
     <div onClick={e => e.stopPropagation()}>
-      <div className='flex items-center px-3 border-b-[0.5px] border-b-black/5'>
-        {
-          tabs.map(tab => (
-            <div
-              key={tab.key}
-              className={`
-              relative mr-4 h-[34px] leading-[34px] text-[13px] font-medium cursor-pointer
-              ${activeTab === tab.key
-              ? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
-              : 'text-gray-500'}
-              `}
-              onClick={() => setActiveTab(tab.key)}
-            >
-              {tab.name}
-            </div>
-          ))
-        }
-      </div>
       {
-        activeTab === TabsEnum.Blocks && (
+        !noBlocks && (
+          <div className='flex items-center px-3 border-b-[0.5px] border-b-black/5'>
+            {
+              tabs.map(tab => (
+                <div
+                  key={tab.key}
+                  className={cn(
+                    'relative mr-4 h-[34px] leading-[34px] text-[13px] font-medium cursor-pointer',
+                    activeTab === tab.key
+                      ? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
+                      : 'text-gray-500',
+                  )}
+                  onClick={() => setActiveTab(tab.key)}
+                >
+                  {tab.name}
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+      {
+        activeTab === TabsEnum.Blocks && !noBlocks && (
           <Blocks
             searchText={searchText}
             onSelect={onSelect}
@@ -53,17 +60,8 @@ const Tabs: FC<TabsProps> = ({
         )
       }
       {
-        activeTab === TabsEnum.BuiltInTool && (
-          <Tools
-            onSelect={onSelect}
-            searchText={searchText}
-          />
-        )
-      }
-      {
-        activeTab === TabsEnum.CustomTool && (
-          <Tools
-            isCustom
+        activeTab === TabsEnum.Tools && (
+          <AllTools
             searchText={searchText}
             onSelect={onSelect}
           />

web/app/components/workflow/block-selector/tools.tsx

@@ -1,41 +1,28 @@
 import {
   memo,
   useCallback,
-  useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import type { ToolWithProvider } from '../types'
-import { useStore } from '../store'
 import type { ToolDefaultValue } from './types'
 import Tooltip from '@/app/components/base/tooltip'
+import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { useGetLanguage } from '@/context/i18n'
 
 type ToolsProps = {
-  isCustom?: boolean
+  showWorkflowEmpty: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
-  searchText: string
+  tools: ToolWithProvider[]
 }
 const Blocks = ({
-  isCustom,
-  searchText,
+  showWorkflowEmpty,
   onSelect,
+  tools,
 }: ToolsProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
-  const buildInTools = useStore(s => s.buildInTools)
-  const customTools = useStore(s => s.customTools)
-
-  const tools = useMemo(() => {
-    const currentTools = isCustom ? customTools : buildInTools
-
-    return currentTools.filter((toolWithProvider) => {
-      return toolWithProvider.tools.some((tool) => {
-        return tool.label[language].toLowerCase().includes(searchText.toLowerCase())
-      })
-    })
-  }, [isCustom, customTools, buildInTools, searchText, language])
 
   const renderGroup = useCallback((toolWithProvider: ToolWithProvider) => {
     const list = toolWithProvider.tools
@@ -97,10 +84,15 @@ const Blocks = ({
   return (
     <div className='p-1 max-w-[320px] max-h-[464px] overflow-y-auto'>
       {
-        !tools.length && (
+        !tools.length && !showWorkflowEmpty && (
           <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
         )
       }
+      {!tools.length && showWorkflowEmpty && (
+        <div className='py-10'>
+          <Empty/>
+        </div>
+      )}
       {
         !!tools.length && tools.map(renderGroup)
       }

web/app/components/workflow/block-selector/types.ts

@@ -1,7 +1,13 @@
 export enum TabsEnum {
   Blocks = 'blocks',
-  BuiltInTool = 'built-in-tool',
-  CustomTool = 'custom-tool',
+  Tools = 'tools',
+}
+
+export enum ToolTypeEnum {
+  All = 'all',
+  BuiltIn = 'built-in',
+  Custom = 'custom',
+  Workflow = 'workflow',
 }
 
 export enum BlockClassificationEnum {