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({
-        category: PluginType.model,
-        condition: getMarketplaceListCondition(PluginType.model),
-        exclude,
-        type: 'plugin',
-      })
-      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,
+        exclude,
       })
-  }, [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,20 +37,11 @@ export const getPluginLinkInMarketplace = (plugin: Plugin) => {
   return `${MARKETPLACE_URL_PREFIX}/plugins/${plugin.org}/${plugin.name}`
 }
 
-export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAndPluginsSearchParams) => {
-  let marketplaceCollections = [] as MarketplaceCollection[]
-  let marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
+export const getMarketplacePluginsByCollectionId = async (collectionId: string, query?: CollectionsAndPluginsSearchParams) => {
+  let plugins = [] as Plugin[]
+
   try {
-    let marketplaceUrl = `${MARKETPLACE_API_PREFIX}/collections?page=1&page_size=100`
-    if (query?.condition)
-      marketplaceUrl += `&condition=${query.condition}`
-    if (query?.type)
-      marketplaceUrl += `&type=${query.type}`
-    const marketplaceCollectionsData = await globalThis.fetch(marketplaceUrl, { cache: 'no-store' })
-    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 url = `${MARKETPLACE_API_PREFIX}/collections/${collectionId}/plugins`
     const marketplaceCollectionPluginsData = await globalThis.fetch(
       url,
       {
@@ -64,9 +55,32 @@ export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAnd
       },
     )
     const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
-      const plugins = marketplaceCollectionPluginsDataJson.data.plugins.map((plugin: Plugin) => {
+    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[]>
+  try {
+    let marketplaceUrl = `${MARKETPLACE_API_PREFIX}/collections?page=1&page_size=100`
+    if (query?.condition)
+      marketplaceUrl += `&condition=${query.condition}`
+    if (query?.type)
+      marketplaceUrl += `&type=${query.type}`
+    const marketplaceCollectionsData = await globalThis.fetch(marketplaceUrl, { cache: 'no-store' })
+    const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
+    marketplaceCollections = marketplaceCollectionsDataJson.data.collections
+    await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
+      const plugins = await getMarketplacePluginsByCollectionId(collection.name, query)
 
       marketplaceCollectionPluginsMap[collection.name] = plugins
     }))