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

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

@@ -264,6 +264,7 @@ export const useMarketplace = (providers: ModelProvider[], searchText: string) =
         query: searchText,
         category: PluginType.model,
         exclude,
+        type: 'plugin',
       })
     }
     else {
@@ -271,6 +272,7 @@ export const useMarketplace = (providers: ModelProvider[], searchText: string) =
         category: PluginType.model,
         condition: getMarketplaceListCondition(PluginType.model),
         exclude,
+        type: 'plugin',
       })
       resetPlugins()
     }

web/app/components/plugins/card/index.tsx

@@ -44,7 +44,7 @@ const Card = ({
   const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
   const { categoriesMap } = useCategories()
   const { type, category, name, org, label, brief, icon, verified } = payload
-  const cornerMark = type !== 'plugin' ? type : categoriesMap[category]?.label
+  const cornerMark = type !== 'plugin' ? categoriesMap.bundle?.label : categoriesMap[category]?.label
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
 

web/app/components/plugins/marketplace/context.tsx

@@ -30,7 +30,10 @@ import {
   useMarketplaceCollectionsAndPlugins,
   useMarketplacePlugins,
 } from './hooks'
-import { getMarketplaceListCondition } from './utils'
+import {
+  getMarketplaceListCondition,
+  getMarketplaceListFilterType,
+} from './utils'
 import { useInstalledPluginList } from '@/service/use-plugins'
 
 export type MarketplaceContextValue = {
@@ -60,7 +63,7 @@ export const MarketplaceContext = createContext<MarketplaceContextValue>({
   handleSearchPluginTextChange: () => {},
   filterPluginTags: [],
   handleFilterPluginTagsChange: () => {},
-  activePluginType: PLUGIN_TYPE_SEARCH_MAP.all,
+  activePluginType: 'all',
   handleActivePluginTypeChange: () => {},
   plugins: undefined,
   resetPlugins: () => {},
@@ -131,6 +134,7 @@ export const MarketplaceContextProvider = ({
         tags: hasValidTags ? tagsFromSearchParams : [],
         sortBy: sortRef.current.sortBy,
         sortOrder: sortRef.current.sortOrder,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
       })
       history.pushState({}, '', `/${searchParams?.language ? `?language=${searchParams?.language}` : ''}`)
     }
@@ -138,6 +142,7 @@ export const MarketplaceContextProvider = ({
       if (shouldExclude && isSuccess) {
         queryMarketplaceCollectionsAndPlugins({
           exclude,
+          type: getMarketplaceListFilterType(activePluginTypeRef.current),
         })
       }
     }
@@ -153,6 +158,7 @@ export const MarketplaceContextProvider = ({
         category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
         condition: getMarketplaceListCondition(activePluginTypeRef.current),
         exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
       })
       resetPlugins()
 
@@ -178,6 +184,7 @@ export const MarketplaceContextProvider = ({
         category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
         condition: getMarketplaceListCondition(activePluginTypeRef.current),
         exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
       })
       resetPlugins()
 
@@ -191,6 +198,7 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
       exclude,
+      type: getMarketplaceListFilterType(activePluginTypeRef.current),
     })
   }, [queryPlugins, resetPlugins, queryMarketplaceCollectionsAndPlugins, exclude])
 
@@ -203,6 +211,7 @@ export const MarketplaceContextProvider = ({
         category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
         condition: getMarketplaceListCondition(type),
         exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
       })
       resetPlugins()
 
@@ -216,6 +225,7 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
       exclude,
+      type: getMarketplaceListFilterType(activePluginTypeRef.current),
     })
   }, [queryPlugins, resetPlugins, queryMarketplaceCollectionsAndPlugins, exclude])
 
@@ -230,6 +240,7 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
       exclude,
+      type: getMarketplaceListFilterType(activePluginTypeRef.current),
     })
   }, [queryPlugins, exclude])
 

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

@@ -13,8 +13,8 @@ import type {
   PluginsSearchParams,
 } from './types'
 import {
+  getFormattedPlugin,
   getMarketplaceCollectionsAndPlugins,
-  getPluginIconInMarketplace,
 } from './utils'
 import i18n from '@/i18n/i18next-config'
 import {
@@ -64,10 +64,9 @@ export const useMarketplacePlugins = () => {
   })
 
   return {
-    plugins: data?.data?.plugins.map(plugin => ({
-      ...plugin,
-      icon: getPluginIconInMarketplace(plugin),
-    })),
+    plugins: data?.data?.plugins.map((plugin) => {
+      return getFormattedPlugin(plugin)
+    }),
     resetPlugins: reset,
     queryPlugins,
     queryPluginsWithDebounced,

web/app/components/plugins/marketplace/list/card-wrapper.tsx

@@ -1,9 +1,9 @@
 'use client'
 import { RiArrowRightUpLine } from '@remixicon/react'
+import { getPluginLinkInMarketplace } from '../utils'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import type { Plugin } from '@/app/components/plugins/types'
-import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Button from '@/app/components/base/button'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
@@ -55,7 +55,7 @@ const CardWrapper = ({
               >
                 {t('plugin.detailPanel.operation.install')}
               </Button>
-              <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${plugin.org}/${plugin.name}?language=${localeFromLocale}`} target='_blank' className='block flex-1 shrink-0 w-[calc(50%-4px)]'>
+              <a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block flex-1 shrink-0 w-[calc(50%-4px)]'>
                 <Button
                   className='w-full gap-0.5'
                 >
@@ -83,7 +83,7 @@ const CardWrapper = ({
   return (
     <a
       className='group inline-block relative rounded-xl cursor-pointer'
-      href={`${MARKETPLACE_URL_PREFIX}/plugins/${plugin.org}/${plugin.name}`}
+      href={getPluginLinkInMarketplace(plugin)}
     >
       <Card
         key={plugin.name}

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

@@ -28,6 +28,7 @@ export type PluginsSearchParams = {
   category?: string
   tags?: string[]
   exclude?: string[]
+  type?: 'plugin' | 'bundle'
 }
 
 export type PluginsSort = {
@@ -39,6 +40,7 @@ export type CollectionsAndPluginsSearchParams = {
   category?: string
   condition?: string
   exclude?: string[]
+  type?: 'plugin' | 'bundle'
 }
 
 export type SearchParams = {

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

@@ -1,15 +1,42 @@
+import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
 import type { Plugin } from '@/app/components/plugins/types'
 import { PluginType } from '@/app/components/plugins/types'
 import type {
   CollectionsAndPluginsSearchParams,
   MarketplaceCollection,
 } from '@/app/components/plugins/marketplace/types'
-import { MARKETPLACE_API_PREFIX } from '@/config'
+import {
+  MARKETPLACE_API_PREFIX,
+  MARKETPLACE_URL_PREFIX,
+} from '@/config'
 
 export const getPluginIconInMarketplace = (plugin: Plugin) => {
+  if (plugin.type === 'bundle')
+    return `${MARKETPLACE_API_PREFIX}/bundles/${plugin.org}/${plugin.name}/icon`
   return `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon`
 }
 
+export const getFormattedPlugin = (bundle: any) => {
+  if (bundle.type === 'bundle') {
+    return {
+      ...bundle,
+      icon: getPluginIconInMarketplace(bundle),
+      brief: bundle.description,
+      label: bundle.labels,
+    }
+  }
+  return {
+    ...bundle,
+    icon: getPluginIconInMarketplace(bundle),
+  }
+}
+
+export const getPluginLinkInMarketplace = (plugin: Plugin) => {
+  if (plugin.type === 'bundle')
+    return `${MARKETPLACE_URL_PREFIX}/bundles/${plugin.org}/${plugin.name}`
+  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[]>
@@ -17,6 +44,8 @@ export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAnd
     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
@@ -30,15 +59,13 @@ export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAnd
           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 {
-          ...plugin,
-          icon: getPluginIconInMarketplace(plugin),
-        }
+        return getFormattedPlugin(plugin)
       })
 
       marketplaceCollectionPluginsMap[collection.name] = plugins
@@ -68,3 +95,13 @@ export const getMarketplaceListCondition = (pluginType: string) => {
 
   return ''
 }
+
+export const getMarketplaceListFilterType = (category: string) => {
+  if (category === PLUGIN_TYPE_SEARCH_MAP.all)
+    return undefined
+
+  if (category === PLUGIN_TYPE_SEARCH_MAP.bundle)
+    return 'bundle'
+
+  return 'plugin'
+}

web/app/components/plugins/provider-card.tsx

@@ -11,10 +11,11 @@ import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
 import { useGetLanguage } from '@/context/i18n'
-import { MARKETPLACE_URL_PREFIX } from '@/config'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import cn from '@/utils/classnames'
 import { useBoolean } from 'ahooks'
+import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
+import { useI18N } from '@/context/i18n'
 
 type Props = {
   className?: string
@@ -32,6 +33,7 @@ const ProviderCard: FC<Props> = ({
   }] = useBoolean(false)
   const language = useGetLanguage()
   const { org, label } = payload
+  const { locale } = useI18N()
 
   return (
     <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
@@ -72,7 +74,7 @@ const ProviderCard: FC<Props> = ({
           className='grow'
           variant='secondary'
         >
-          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${payload.org}/${payload.name}`} target='_blank' className='flex items-center gap-0.5'>
+          <a href={`${getPluginLinkInMarketplace(payload)}?language=${locale}`} target='_blank' className='flex items-center gap-0.5'>
             {t('plugin.detailPanel.operation.detail')}
             <RiArrowRightUpLine className='w-4 h-4' />
           </a>

web/app/components/plugins/types.ts

@@ -119,6 +119,7 @@ export type Plugin = {
   verified: boolean
   label: Record<Locale, string>
   brief: Record<Locale, string>
+  description: Record<Locale, string>
   // Repo readme.md content
   introduction: string
   repository: string

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

@@ -38,6 +38,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
           query: searchPluginText,
           tags: filterPluginTags,
           exclude,
+          type: 'plugin',
         })
         return
       }
@@ -46,6 +47,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
         query: searchPluginText,
         tags: filterPluginTags,
         exclude,
+        type: 'plugin',
       })
     }
     else {
@@ -54,6 +56,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
           category: PluginType.tool,
           condition: getMarketplaceListCondition(PluginType.tool),
           exclude,
+          type: 'plugin',
         })
         resetPlugins()
       }

web/i18n/zh-Hans/plugin.ts

@@ -4,7 +4,7 @@ const translation = {
     models: '模型',
     tools: '工具',
     extensions: '扩展',
-    bundles: '捆绑包',
+    bundles: '插件集',
   },
   search: '搜索',
   allCategories: '所有类别',

web/service/use-plugins.ts

@@ -296,6 +296,7 @@ export const useMutationPluginsFromMarketplace = () => {
         category,
         tags,
         exclude,
+        type,
       } = pluginsSearchParams
       return postMarketplace<{ data: PluginsFromMarketplaceResponse }>('/plugins/search/basic', {
         body: {
@@ -307,6 +308,7 @@ export const useMutationPluginsFromMarketplace = () => {
           category: category !== 'all' ? category : '',
           tags,
           exclude,
+          type,
         },
       })
     },