feat: tool picker

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

@@ -1,39 +1,13 @@
 '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'
+import React from 'react'
+import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 
 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>
+    <ToolPicker
+      supportAddCustomTool={true}
+      onSelect={() => { }}
+    />
   )
 }