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

1 year ago · 66b79ee323
parent 1dad2fdaaf ab9a177c90
commit 66b79ee323
12 changed files with 78 additions and 19 deletions
--- a/web/app/components/header/account-setting/model-provider-page/hooks.ts
+++ b/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()
    }
--- a/web/app/components/plugins/card/index.tsx
+++ b/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 || ''

--- a/web/app/components/plugins/marketplace/context.tsx
+++ b/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])

--- a/web/app/components/plugins/marketplace/hooks.ts
+++ b/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,
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/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}
--- a/web/app/components/plugins/marketplace/types.ts
+++ b/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 = {
--- a/web/app/components/plugins/marketplace/utils.ts
+++ b/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'
+}
--- a/web/app/components/plugins/provider-card.tsx
+++ b/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>
--- a/web/app/components/plugins/types.ts
+++ b/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
--- a/web/app/components/tools/marketplace/hooks.ts
+++ b/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()
      }
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -4,7 +4,7 @@ const translation = {
    models: '模型',
    tools: '工具',
    extensions: '扩展',
-    bundles: '捆绑包',
+    bundles: '插件集',
  },
  search: '搜索',
  allCategories: '所有类别',
--- a/web/service/use-plugins.ts
+++ b/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,
        },
      })
    },