fix: tool list

web/app/components/plugins/marketplace/empty/line.tsx

@@ -9,7 +9,7 @@ const Line = ({
       <path d="M1 0.5L1 240.5" stroke="url(#paint0_linear_1989_74474)"/>
       <defs>
         <linearGradient id="paint0_linear_1989_74474" x1="-7.99584" y1="240.5" x2="-7.88094" y2="0.50004" gradientUnits="userSpaceOnUse">
-          <stop stop-color="white" stopOpacity="0.01"/>
+          <stop stopColor="white" stopOpacity="0.01"/>
           <stop offset="0.503965" stopColor="#101828" stopOpacity="0.08"/>
           <stop offset="1" stopColor="white" stopOpacity="0.01"/>
         </linearGradient>

web/app/components/tools/marketplace/hooks.ts

@@ -3,28 +3,68 @@ import {
   useEffect,
   useState,
 } from 'react'
+import { useDebounceFn } from 'ahooks'
 import type { Plugin } from '@/app/components/plugins/types'
-import type { MarketplaceCollection } from '@/app/components/plugins/marketplace/types'
-import { getMarketplaceCollectionsAndPlugins } from '@/app/components/plugins/marketplace/utils'
+import type {
+  MarketplaceCollection,
+  PluginsSearchParams,
+} from '@/app/components/plugins/marketplace/types'
+import {
+  getMarketplaceCollectionsAndPlugins,
+  getMarketplacePlugins,
+} from '@/app/components/plugins/marketplace/utils'
 
-export const useMarketplace = () => {
+export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
   const [marketplaceCollections, setMarketplaceCollections] = useState<MarketplaceCollection[]>([])
   const [marketplaceCollectionPluginsMap, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>({})
   const [isLoading, setIsLoading] = useState(true)
-  const getMarketplaceCollections = useCallback(async () => {
+  const [plugins, setPlugins] = useState<Plugin[]>()
+
+  const handleUpldateMarketplaceCollections = useCallback(async () => {
     setIsLoading(true)
     const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins()
     setIsLoading(false)
+
     setMarketplaceCollections(marketplaceCollections)
     setMarketplaceCollectionPluginsMap(marketplaceCollectionPluginsMap)
+    setPlugins(undefined)
   }, [])
+
+  const handleUpdatePlugins = async (query: PluginsSearchParams) => {
+    setIsLoading(true)
+    const { marketplacePlugins } = await getMarketplacePlugins(query)
+    setIsLoading(false)
+
+    setPlugins(marketplacePlugins)
+  }
+
+  const { run: handleUpdatePluginsWithDebounced } = useDebounceFn(handleUpdatePlugins, {
+    wait: 500,
+  })
+
   useEffect(() => {
-    getMarketplaceCollections()
-  }, [getMarketplaceCollections])
+    if (searchPluginText || filterPluginTags.length) {
+      if (searchPluginText) {
+        handleUpdatePluginsWithDebounced({
+          query: searchPluginText,
+          tags: filterPluginTags,
+        })
+        return
+      }
+      handleUpdatePlugins({
+        query: searchPluginText,
+        tags: filterPluginTags,
+      })
+    }
+    else {
+      handleUpldateMarketplaceCollections()
+    }
+  }, [searchPluginText, filterPluginTags, handleUpdatePluginsWithDebounced, handleUpldateMarketplaceCollections])
 
   return {
     isLoading,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
+    plugins,
   }
 }

web/app/components/tools/marketplace/index.tsx

@@ -4,16 +4,21 @@ import List from '@/app/components/plugins/marketplace/list'
 import Loading from '@/app/components/base/loading'
 
 type MarketplaceProps = {
+  searchPluginText: string
+  filterPluginTags: string[]
   onMarketplaceScroll: () => void
 }
 const Marketplace = ({
+  searchPluginText,
+  filterPluginTags,
   onMarketplaceScroll,
 }: MarketplaceProps) => {
   const {
     isLoading,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
-  } = useMarketplace()
+    plugins,
+  } = useMarketplace(searchPluginText, filterPluginTags)
 
   return (
     <div className='shrink-0 sticky -bottom-[442px] h-[530px] overflow-y-auto px-12 py-2 pt-0 bg-background-default-subtle'>
@@ -55,6 +60,7 @@ const Marketplace = ({
           <List
             marketplaceCollections={marketplaceCollections}
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+            plugins={plugins}
             showInstallButton
           />
         )

web/app/components/tools/provider-list.tsx

@@ -126,9 +126,13 @@ const ProviderList = () => {
         </div>
         {
           enable_marketplace && (
-            <Marketplace onMarketplaceScroll={() => {
+            <Marketplace
+              onMarketplaceScroll={() => {
                 containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' })
-            }} />
+              }}
+              searchPluginText={keywords}
+              filterPluginTags={tagFilterValue}
+            />
           )
         }
       </div>