feat: split tools data to out and add demo

web/app/(commonLayout)/plugins/test/tools-picker/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+import { useEffect, useState } from 'react'
+import AllTools from '@/app/components/workflow/block-selector/all-tools'
+import {
+  fetchAllBuiltInTools,
+  fetchAllCustomTools,
+  fetchAllWorkflowTools,
+} from '@/service/tools'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+
+const ToolsPicker = () => {
+  const [buildInTools, setBuildInTools] = useState<ToolWithProvider[]>([])
+  const [customTools, setCustomTools] = useState<ToolWithProvider[]>([])
+  const [workflowTools, setWorkflowTools] = useState<ToolWithProvider[]>([])
+
+  useEffect(() => {
+    (async () => {
+      const buildInTools = await fetchAllBuiltInTools()
+      const customTools = await fetchAllCustomTools()
+      const workflowTools = await fetchAllWorkflowTools()
+      setBuildInTools(buildInTools)
+      setCustomTools(customTools)
+      setWorkflowTools(workflowTools)
+    })()
+  })
+  return (
+    <div className="relative mt-5 mx-auto w-[320px] bg-white">
+      <AllTools
+        searchText=""
+        onSelect={() => { }}
+        buildInTools={buildInTools}
+        customTools={customTools}
+        workflowTools={workflowTools}
+      />
+    </div>
+  )
+}
+
+export default ToolsPicker

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

@@ -6,7 +6,6 @@ import type {
   OnSelectBlock,
   ToolWithProvider,
 } from '../types'
-import { useStore } from '../store'
 import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
@@ -15,18 +14,21 @@ import { useGetLanguage } from '@/context/i18n'
 
 type AllToolsProps = {
   searchText: string
+  buildInTools: ToolWithProvider[]
+  customTools: ToolWithProvider[]
+  workflowTools: ToolWithProvider[]
   onSelect: OnSelectBlock
 }
 const AllTools = ({
   searchText,
   onSelect,
+  buildInTools,
+  workflowTools,
+  customTools,
 }: 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[] = []

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

@@ -47,7 +47,7 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
+    <div className="index-bar absolute right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
       {letters.map(letter => (
         <div className="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
           {letter}

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

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
+import { useStore } from '../store'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
@@ -25,6 +26,9 @@ const Tabs: FC<TabsProps> = ({
   noBlocks,
 }) => {
   const tabs = useTabs()
+  const buildInTools = useStore(s => s.buildInTools)
+  const customTools = useStore(s => s.customTools)
+  const workflowTools = useStore(s => s.workflowTools)
 
   return (
     <div onClick={e => e.stopPropagation()}>
@@ -64,6 +68,9 @@ const Tabs: FC<TabsProps> = ({
           <AllTools
             searchText={searchText}
             onSelect={onSelect}
+            buildInTools={buildInTools}
+            customTools={customTools}
+            workflowTools={workflowTools}
           />
         )
       }