From 0587e24fdb0f189f63e3982360a5df2648439fd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Mon, 11 Nov 2024 11:32:41 +0800
Subject: [PATCH] feat: support tool search also can search toolProvider's name
 (#10518)

---
 .../components/tools/add-tool-modal/index.tsx  | 18 +++++++++++-------
 .../workflow/block-selector/all-tools.tsx      | 15 ++++++++++-----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/web/app/components/tools/add-tool-modal/index.tsx b/web/app/components/tools/add-tool-modal/index.tsx
index e285b1a099..f79201256f 100644
--- a/web/app/components/tools/add-tool-modal/index.tsx
+++ b/web/app/components/tools/add-tool-modal/index.tsx
@@ -15,7 +15,6 @@ import Category from './category'
 import Tools from './tools'
 import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
 import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
@@ -44,13 +43,15 @@ const AddToolModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
-  const language = getLanguage(locale)
   const [currentType, setCurrentType] = useState('builtin')
   const [currentCategory, setCurrentCategory] = useState('')
   const [keywords, setKeywords] = useState<string>('')
   const handleKeywordsChange = (value: string) => {
     setKeywords(value)
   }
+  const isMatchingKeywords = (text: string, keywords: string) => {
+    return text.toLowerCase().includes(keywords.toLowerCase())
+  }
   const [toolList, setToolList] = useState<ToolWithProvider[]>([])
   const [listLoading, setListLoading] = useState(true)
   const getAllTools = async () => {
@@ -82,13 +83,16 @@ const AddToolModal: FC<Props> = ({
       else
         return toolWithProvider.labels.includes(currentCategory)
     }).filter((toolWithProvider) => {
-      return toolWithProvider.tools.some((tool) => {
-        return Object.values(tool.label).some((label) => {
-          return label.toLowerCase().includes(keywords.toLowerCase())
+      return (
+        isMatchingKeywords(toolWithProvider.name, keywords)
+        || toolWithProvider.tools.some((tool) => {
+          return Object.values(tool.label).some((label) => {
+            return isMatchingKeywords(label, keywords)
+          })
         })
-      })
+      )
     })
-  }, [currentType, currentCategory, toolList, keywords, language])
+  }, [currentType, currentCategory, toolList, keywords])
 
   const {
     modelConfig,
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 8925649226..dc15313216 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -11,7 +11,6 @@ import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
 import cn from '@/utils/classnames'
-import { useGetLanguage } from '@/context/i18n'
 
 type AllToolsProps = {
   searchText: string
@@ -21,13 +20,16 @@ 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 isMatchingKeywords = (text: string, keywords: string) => {
+    return text.toLowerCase().includes(keywords.toLowerCase())
+  }
+
   const tools = useMemo(() => {
     let mergedTools: ToolWithProvider[] = []
     if (activeTab === ToolTypeEnum.All)
@@ -40,11 +42,14 @@ const AllTools = ({
       mergedTools = workflowTools
 
     return mergedTools.filter((toolWithProvider) => {
-      return toolWithProvider.tools.some((tool) => {
-        return tool.label[language].toLowerCase().includes(searchText.toLowerCase())
+      return isMatchingKeywords(toolWithProvider.name, searchText)
+      || toolWithProvider.tools.some((tool) => {
+        return Object.values(tool.label).some((label) => {
+          return isMatchingKeywords(label, searchText)
+        })
       })
     })
-  }, [activeTab, buildInTools, customTools, workflowTools, searchText, language])
+  }, [activeTab, buildInTools, customTools, workflowTools, searchText])
   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'>