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