Merge branch 'feat/plugins' into dev/plugin-deploy

web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -28,11 +28,12 @@ import {
 } from '@/service/common'
 import { useProviderContext } from '@/context/provider-context'
 import {
-  useMarketplaceCollectionsAndPlugins,
   useMarketplacePlugins,
 } from '@/app/components/plugins/marketplace/hooks'
+import type { Plugin } from '@/app/components/plugins/types'
 import { PluginType } from '@/app/components/plugins/types'
-import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
+// import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
+import type { MarketplaceCollection } from '@/app/components/plugins/marketplace/types'
 
 type UseDefaultModelAndModelList = (
   defaultModel: DefaultModelResponse | undefined,
@@ -241,21 +242,40 @@ export const useUpdateModelProviders = () => {
   return updateModelProviders
 }
 
-export const useMarketplace = (providers: ModelProvider[], searchText: string) => {
-  const exclude = useMemo(() => {
-    return providers.map(provider => provider.provider.replace(/(.+)\/([^/]+)$/, '$1'))
-  }, [providers])
-  const {
+export const useMarketplace = () => {
+  const [marketplaceCollections] = useState<MarketplaceCollection[]>([])
+  const [marketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
+  const [isLoading] = useState(false)
+
+  // const getCollectionPlugins = useCallback(async () => {
+  //   setIsLoading(true)
+  //   const collectionPlugins = await getMarketplacePluginsByCollectionId('')
+  //   setIsLoading(false)
+
+  //   setCollectionPlugins(collectionPlugins)
+  // }, [])
+
+  // useEffect(() => {
+  //   getCollectionPlugins()
+  // }, [getCollectionPlugins])
+
+  return {
     isLoading,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
-    queryMarketplaceCollectionsAndPlugins,
-  } = useMarketplaceCollectionsAndPlugins()
+  }
+}
+
+export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText: string) => {
+  const exclude = useMemo(() => {
+    return providers.map(provider => provider.provider.replace(/(.+)\/([^/]+)$/, '$1'))
+  }, [providers])
+
   const {
     plugins,
-    resetPlugins,
+    queryPlugins,
     queryPluginsWithDebounced,
-    isLoading: isPluginsLoading,
+    isLoading,
   } = useMarketplacePlugins()
 
   useEffect(() => {
@@ -268,39 +288,15 @@ export const useMarketplace = (providers: ModelProvider[], searchText: string) =
       })
     }
     else {
-      queryMarketplaceCollectionsAndPlugins({
+      queryPlugins({
+        query: '',
         category: PluginType.model,
-        condition: getMarketplaceListCondition(PluginType.model),
-        exclude,
         type: 'plugin',
+        pageSize: 1000,
+        exclude,
       })
-      resetPlugins()
     }
-  }, [searchText, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins, exclude])
-
-  return {
-    isLoading: isLoading || isPluginsLoading,
-    marketplaceCollections,
-    marketplaceCollectionPluginsMap,
-    plugins: plugins?.filter(plugin => plugin.type !== 'bundle'),
-  }
-}
-
-export const useMarketplaceAllPlugins = () => {
-  const {
-    plugins,
-    queryPlugins,
-    isLoading,
-  } = useMarketplacePlugins()
-
-  useEffect(() => {
-    queryPlugins({
-      query: '',
-      category: PluginType.model,
-      type: 'plugin',
-      pageSize: 1000,
-    })
-  }, [queryPlugins])
+  }, [queryPlugins, queryPluginsWithDebounced, searchText, exclude])
 
   return {
     plugins: plugins?.filter(plugin => plugin.type !== 'bundle'),

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -122,15 +122,14 @@ const ModelProviderPage = ({ searchText }: Props) => {
   const [collapse, setCollapse] = useState(false)
   const locale = getLocaleOnClient()
   const {
-    plugins,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
     isLoading: isPluginsLoading,
-  } = useMarketplace(providers, searchText)
+  } = useMarketplace()
   const {
     plugins: allPlugins,
     isLoading: isAllPluginsLoading,
-  } = useMarketplaceAllPlugins()
+  } = useMarketplaceAllPlugins(providers, searchText)
 
   const cardRender = useCallback((plugin: Plugin) => {
     if (plugin.type === 'bundle')
@@ -220,7 +219,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
             <List
               marketplaceCollections={marketplaceCollections || []}
               marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
-              plugins={plugins}
+              plugins={undefined}
               showInstallButton
               locale={locale}
               cardContainerClassName='grid grid-cols-2 gap-2'

web/app/components/plugins/marketplace/utils.ts

@@ -37,6 +37,36 @@ export const getPluginLinkInMarketplace = (plugin: Plugin) => {
   return `${MARKETPLACE_URL_PREFIX}/plugins/${plugin.org}/${plugin.name}`
 }
 
+export const getMarketplacePluginsByCollectionId = async (collectionId: string, query?: CollectionsAndPluginsSearchParams) => {
+  let plugins = [] as Plugin[]
+
+  try {
+    const url = `${MARKETPLACE_API_PREFIX}/collections/${collectionId}/plugins`
+    const marketplaceCollectionPluginsData = await globalThis.fetch(
+      url,
+      {
+        cache: 'no-store',
+        method: 'POST',
+        body: JSON.stringify({
+          category: query?.category,
+          exclude: query?.exclude,
+          type: query?.type,
+        }),
+      },
+    )
+    const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
+    plugins = marketplaceCollectionPluginsDataJson.data.plugins.map((plugin: Plugin) => {
+      return getFormattedPlugin(plugin)
+    })
+  }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  catch (e) {
+    plugins = []
+  }
+
+  return plugins
+}
+
 export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAndPluginsSearchParams) => {
   let marketplaceCollections = [] as MarketplaceCollection[]
   let marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
@@ -50,23 +80,7 @@ export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAnd
     const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
     marketplaceCollections = marketplaceCollectionsDataJson.data.collections
     await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
-      const url = `${MARKETPLACE_API_PREFIX}/collections/${collection.name}/plugins`
-      const marketplaceCollectionPluginsData = await globalThis.fetch(
-        url,
-        {
-          cache: 'no-store',
-          method: 'POST',
-          body: JSON.stringify({
-            category: query?.category,
-            exclude: query?.exclude,
-            type: query?.type,
-          }),
-        },
-      )
-      const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
-      const plugins = marketplaceCollectionPluginsDataJson.data.plugins.map((plugin: Plugin) => {
-        return getFormattedPlugin(plugin)
-      })
+      const plugins = await getMarketplacePluginsByCollectionId(collection.name, query)
 
       marketplaceCollectionPluginsMap[collection.name] = plugins
     }))