diff --git a/web/app/components/header/account-setting/model-provider-page/hooks.ts b/web/app/components/header/account-setting/model-provider-page/hooks.ts index c0d2e86885..e6d1cda1c1 100644 --- a/web/app/components/header/account-setting/model-provider-page/hooks.ts +++ b/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([]) + const [marketplaceCollectionPluginsMap] = useState>() + 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'), diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx index e6d3c8e19d..dd1f3398f4 100644 --- a/web/app/components/header/account-setting/model-provider-page/index.tsx +++ b/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) => { { 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 @@ -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 }))