From bca99cf4f86de2ecca5c46e030bd9825eb5b5134 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 31 Oct 2024 18:37:42 +0800
Subject: [PATCH] feat: tool picker

---
 .../plugins/test/tools-picker/page.tsx        | 38 ++----------
 .../workflow/block-selector/all-tools.tsx     | 13 +++-
 .../workflow/block-selector/tool-picker.tsx   | 60 +++++++++++++++++++
 3 files changed, 78 insertions(+), 33 deletions(-)
 create mode 100644 web/app/components/workflow/block-selector/tool-picker.tsx

diff --git a/web/app/(commonLayout)/plugins/test/tools-picker/page.tsx b/web/app/(commonLayout)/plugins/test/tools-picker/page.tsx
index 7fdf66ebcd..37c3b3b1cf 100644
--- a/web/app/(commonLayout)/plugins/test/tools-picker/page.tsx
+++ b/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={() => { }}
+    />
   )
 }
 
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index f2d7f95ea8..db80492ace 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -15,20 +15,26 @@ import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+import ActionButton from '../../base/action-button'
+import { RiAddLine } from '@remixicon/react'
 
 type AllToolsProps = {
+  className?: string
   searchText: string
   buildInTools: ToolWithProvider[]
   customTools: ToolWithProvider[]
   workflowTools: ToolWithProvider[]
   onSelect: OnSelectBlock
+  supportAddCustomTool?: boolean
 }
 const AllTools = ({
+  className,
   searchText,
   onSelect,
   buildInTools,
   workflowTools,
   customTools,
+  supportAddCustomTool,
 }: AllToolsProps) => {
   const language = useGetLanguage()
   const tabs = useToolTabs()
@@ -57,7 +63,7 @@ const AllTools = ({
   const wrapElemRef = useRef<HTMLDivElement>(null)
 
   return (
-    <div>
+    <div className={cn(className)}>
       <div className='flex items-center justify-between px-3 bg-background-default-hover border-b-[0.5px] border-black/[0.08] shadow-xs'>
         <div className='flex items-center h-8 space-x-1'>
           {
@@ -77,6 +83,11 @@ const AllTools = ({
           }
         </div>
         <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
+        {supportAddCustomTool && (
+          <ActionButton>
+            <RiAddLine className='w-4 h-4' />
+          </ActionButton>
+        )}
       </div>
       <div
         ref={wrapElemRef}
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
new file mode 100644
index 0000000000..db59d044d2
--- /dev/null
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -0,0 +1,60 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useEffect, useState } from 'react'
+import AllTools from '@/app/components/workflow/block-selector/all-tools'
+import type { ToolDefaultValue } from './types'
+import {
+  fetchAllBuiltInTools,
+  fetchAllCustomTools,
+  fetchAllWorkflowTools,
+} from '@/service/tools'
+import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types'
+
+type Props = {
+  onSelect: (tool: ToolDefaultValue) => void
+  supportAddCustomTool?: boolean
+}
+
+const ToolPicker: FC<Props> = ({
+  onSelect,
+  supportAddCustomTool,
+}) => {
+  const [searchText, setSearchText] = useState('')
+
+  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)
+    })()
+  }, [])
+
+  const handleSelect = (_type: BlockEnum, tool?: ToolDefaultValue) => {
+    onSelect(tool!)
+  }
+
+  return (
+    <div className="relative mt-5 mx-auto w-[320px] bg-white">
+      <input placeholder='search holder' value={searchText} onChange={e => setSearchText(e.target.value)} />
+      <AllTools
+        className='mt-1'
+        searchText={searchText}
+        onSelect={handleSelect}
+        buildInTools={buildInTools}
+        customTools={customTools}
+        workflowTools={workflowTools}
+        supportAddCustomTool={supportAddCustomTool}
+      />
+    </div>
+  )
+}
+
+export default React.memo(ToolPicker)