Merge branch 'feat/plugins' of github.com:langgenius/dify into feat/plugins

2025-08-14 06:15:53 +08:00 · 2024-10-17 15:22:08 +08:00 · 2024-10-17 15:22:08 +08:00 · a6109a60b8
commit a6109a60b8
parent 28f7bbf83a cac04c5f3c
15 changed files with 163 additions and 120 deletions
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@ -1,17 +1,17 @@
 import { handleDelete } from './actions'
-import TestClientPlugin from './test-client-plugin'
 import Card from '@/app/components/plugins/card'
 import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
-import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
+import { getLocaleOnServer } from '@/i18n/server'
 import Badge from '@/app/components/base/badge'
+
 const PluginList = async () => {
  const locale = getLocaleOnServer()
  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
-  const { t: pluginI8n } = await translate(locale, 'plugin')
+
  return (
    <div className='pb-3 bg-white'>
      <div className='mx-3 '>
@ -22,19 +22,14 @@ const PluginList = async () => {
              key={index}
              payload={plugin as any}
              onDelete={handleDelete}
-              pluginI8n={pluginI8n}
-              locale={locale}
            />
          ))}
        </div>
-        <h2>Client plugin item</h2>
-        <TestClientPlugin />

        <h2 className='my-3'>Install Plugin / Package under bundle</h2>
        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
          <Card
            payload={toolNotion as any}
-            locale={locale}
            descriptionLineRows={1}
            titleLeft={
              <Badge className='ml-1' text={toolNotion.version} />
@ -45,7 +40,6 @@ const PluginList = async () => {
        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
          <Card
            payload={toolNotion as any}
-            locale={locale}
            descriptionLineRows={1}
            installed
          />
@ -54,7 +48,7 @@ const PluginList = async () => {
        <h3 className='my-1'>Install model provide</h3>
        <div className='grid grid-cols-2 gap-3'>
          {pluginList.map((plugin, index) => (
-            <ProviderCard key={index} locale={locale} payload={plugin as any} />
+            <ProviderCard key={index} payload={plugin as any} />
          ))}
        </div>

@ -65,7 +59,6 @@ const PluginList = async () => {
            <Card
              key={index}
              payload={plugin as any}
-              locale={locale}
              footer={
                <CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Tag that has very very long name', 'Productivity', 'Tag2'] : []} />
              }
--- a/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
@ -1,21 +0,0 @@
-'use client'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { extensionDallE } from '@/app/components/plugins/card/card-mock'
-import PluginItem from '@/app/components/plugins/plugin-item'
-import I18n from '@/context/i18n'
-
-const TestClientPlugin = () => {
-  const { locale } = useContext(I18n)
-  const { t } = useTranslation()
-  return (
-    <PluginItem
-      payload={extensionDallE as any}
-      onDelete={() => { }}
-      pluginI8n={t}
-      locale={locale}
-    />
-  )
-}
-export default React.memo(TestClientPlugin)
--- a/web/app/(commonLayout)/plugins/test/other/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/other/page.tsx
@ -0,0 +1,20 @@
+'use client'
+import { useBoolean } from 'ahooks'
+import UpdatePlugin from '@/app/components/plugins/update-plugin'
+
+const Page = () => {
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
+  return (
+    <div>
+      <div onClick={showUpdateModal}>Show Upgrade</div>
+      {isShowUpdateModal && (
+        <UpdatePlugin onHide={hideUpdateModal} />
+      )}
+    </div>
+  )
+}
+
+export default Page
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@ -115,7 +115,7 @@ const ModelProviderPage = () => {
          'shrink-0 relative flex items-center justify-end gap-2 p-0.5 rounded-lg border border-transparent',
          defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
        )}>
-          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }}/>}
+          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
          {defaultModelNotConfigured && (
            <div className='flex items-center gap-1 text-text-primary system-xs-medium'>
              <RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
@ -185,7 +185,7 @@ const ModelProviderPage = () => {
        {!collapse && (
          <div className='grid grid-cols-2 gap-2'>
            {pluginList.map((plugin, index) => (
-              <ProviderCard key={index} installed={false} locale={locale} payload={plugin as any} />
+              <ProviderCard key={index} installed={false} payload={plugin as any} />
            ))}
          </div>
        )}
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@ -1,4 +1,6 @@
+'use client'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import type { Plugin } from '../types'
 import Icon from '../card/base/card-icon'
@ -8,18 +10,16 @@ import OrgInfo from './base/org-info'
 import Description from './base/description'
 import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
-import type { Locale } from '@/i18n'
+import I18n from '@/context/i18n'

 type Props = {
  className?: string
  payload: Plugin
-  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
  titleLeft?: React.ReactNode
  installed?: boolean
  hideCornerMark?: boolean
  descriptionLineRows?: number
  footer?: React.ReactNode
-  serverLocale?: Locale
  isLoading?: boolean
  loadingFileName?: string
 }
@ -32,10 +32,11 @@ const Card = ({
  hideCornerMark,
  descriptionLineRows = 2,
  footer,
-  locale,
  isLoading = false,
  loadingFileName,
 }: Props) => {
+  const { locale } = useContext(I18n)
+
  const { type, name, org, label, brief, icon } = payload

  const getLocalizedText = (obj: Record<string, string> | undefined) =>
@ -80,4 +81,4 @@ const Card = ({
  )
 }

-export default Card
+export default React.memo(Card)
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@ -69,7 +69,6 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
          <Card
            className='w-full'
-            locale={locale}
            payload={status === 'uploading' ? { name: 'notion-sync' } as any : toolNotion as any}
            isLoading={status === 'uploading'}
            loadingFileName='notion-sync.difypkg'
@ -85,7 +84,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
          : (
            <>
              <Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
-              Cancel
+                Cancel
              </Button>
              <Button
                variant='primary'
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@ -1,7 +1,6 @@
 'use client'

 import React, { useMemo, useState } from 'react'
-import { useContext } from 'use-context-selector'
 import { RiInformation2Line } from '@remixicon/react'
 import Card from '../../card'
 import { extensionDallE, modelGPT4, toolNotion } from '../../card/card-mock'
@ -9,14 +8,12 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import I18n from '@/context/i18n'

 type InstallFromMarketplaceProps = {
  onClose: () => void
 }

 const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose }) => {
-  const { locale } = useContext(I18n)
  const plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
  const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
  const [isInstalling, setIsInstalling] = useState(false)
@ -40,7 +37,6 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
      key={index}
      installed={nextStep && !isInstalling}
      payload={plugin}
-      locale={locale}
      className='w-full'
      titleLeft={
        plugin.version === plugin.latest_version
@ -115,7 +111,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
          : (
            <>
              <Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
-              Cancel
+                Cancel
              </Button>
              <Button
                variant='primary'
@ -126,7 +122,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
                  mockInstall()
                }}
              >
-              Install
+                Install
              </Button>
            </>
          )}
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@ -13,35 +13,30 @@ const List = () => {
        <div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@ -54,168 +49,144 @@ const List = () => {
        <div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@ -1,6 +1,9 @@
+'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import { RiArrowRightUpLine, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import { Github } from '../../base/icons/src/public/common'
 import Badge from '../../base/badge'
 import type { Plugin } from '../types'
@ -11,26 +14,21 @@ import OrgInfo from '../card/base/org-info'
 import Title from '../card/base/title'
 import Action from './action'
 import cn from '@/utils/classnames'
-import type { Locale } from '@/i18n'
+import I18n from '@/context/i18n'

 type Props = {
  className?: string
  payload: Plugin
-  locale: Locale
  onDelete: () => void
-  pluginI8n: any
-  isClient?: boolean
 }

 const PluginItem: FC<Props> = ({
  className,
  payload,
  onDelete,
-  locale,
-  pluginI8n,
-  isClient,
 }) => {
-  const t = (key: string, param?: object) => pluginI8n(`${isClient ? 'plugin.' : ''}${key}`, param)
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()

  const { type, name, org, label } = payload
  const hasNewVersion = payload.latest_version !== payload.version
@ -74,12 +72,12 @@ const PluginItem: FC<Props> = ({
          <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
          <div className='flex text-text-tertiary system-xs-regular space-x-1'>
            <RiLoginCircleLine className='w-4 h-4' />
-            <span>{t('endpointsEnabled', { num: 2 })}</span>
+            <span>{t('plugin.endpointsEnabled', { num: 2 })}</span>
          </div>
        </div>

        <div className='flex items-center'>
-          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('from')}</a>
+          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</a>
          <div className='flex items-center space-x-0.5 text-text-secondary'>
            <Github className='ml-1 w-3 h-3' />
            <div className='system-2xs-semibold-uppercase'>GitHub</div>
@ -91,4 +89,4 @@ const PluginItem: FC<Props> = ({
  )
 }

-export default PluginItem
+export default React.memo(PluginItem)
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@ -1,4 +1,6 @@
+'use client'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import type { FC } from 'react'
 import Link from 'next/link'
 import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
@ -9,22 +11,21 @@ import Icon from './card/base/card-icon'
 import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
-import type { Locale } from '@/i18n'
 import cn from '@/utils/classnames'
+import I18n from '@/context/i18n'

 type Props = {
  className?: string
-  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
  payload: Plugin
  installed?: boolean
 }

 const ProviderCard: FC<Props> = ({
  className,
-  locale,
  payload,
  installed = true,
 }) => {
+  const { locale } = useContext(I18n)
  const { org, label } = payload

  return (
--- a/web/app/components/plugins/update-plugin/index.tsx
+++ b/web/app/components/plugins/update-plugin/index.tsx
@ -0,0 +1,97 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import { RiInformation2Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Card from '@/app/components/plugins/card'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import { toolNotion } from '@/app/components/plugins/card/card-mock'
+
+const i18nPrefix = 'plugin.upgrade'
+
+type Props = {
+  onHide: () => void
+}
+
+enum UploadStep {
+  notStarted = 'notStarted',
+  upgrading = 'upgrading',
+  installed = 'installed',
+}
+
+const UpdatePluginModal: FC<Props> = ({
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
+  const configBtnText = useMemo(() => {
+    return ({
+      [UploadStep.notStarted]: t(`${i18nPrefix}.upgrade`),
+      [UploadStep.upgrading]: t(`${i18nPrefix}.upgrading`),
+      [UploadStep.installed]: t(`${i18nPrefix}.close`),
+    })[uploadStep]
+  }, [uploadStep])
+  const handleConfirm = useCallback(() => {
+    if (uploadStep === UploadStep.notStarted) {
+      setUploadStep(UploadStep.upgrading)
+      setTimeout(() => {
+        setUploadStep(UploadStep.installed)
+      }, 1500)
+      return
+    }
+    if (uploadStep === UploadStep.installed)
+      onHide()
+  }, [uploadStep])
+  return (
+    <Modal
+      isShow={true}
+      onClose={onHide}
+      className='min-w-[560px]'
+      closable
+      title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
+    >
+      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+        {t(`${i18nPrefix}.description`)}
+      </div>
+      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <Card
+          installed={uploadStep === UploadStep.installed}
+          payload={toolNotion as any}
+          className='w-full'
+          titleLeft={
+            <>
+              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                {'1.2.0 -> 1.3.2'}
+              </Badge>
+              <div className='flex px-0.5 justify-center items-center gap-0.5'>
+                <div className='text-text-warning system-xs-medium'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>
+                {/* show the used apps */}
+                <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+              </div>
+            </>
+          }
+        />
+      </div>
+      <div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
+        {uploadStep === UploadStep.notStarted && (
+          <Button
+            onClick={onHide}
+          >
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          loading={uploadStep === UploadStep.upgrading}
+          onClick={handleConfirm}
+          disabled={uploadStep === UploadStep.upgrading}
+        >
+          {configBtnText}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(UpdatePluginModal)
--- a/web/app/components/tools/marketplace.tsx
+++ b/web/app/components/tools/marketplace.tsx
@ -45,35 +45,30 @@ const Marketplace = ({
        <div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@ -86,168 +81,144 @@ const Marketplace = ({
        <div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@ -112,7 +112,6 @@ const ProviderList = () => {
                  currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
                )}
                hideCornerMark
-                locale={language}
                payload={{
                  ...collection,
                  brief: collection.description,
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@ -47,6 +47,15 @@ const translation = {
    deleteContentRight: ' plugin?',
    usedInApps: 'This plugin is being used in {{num}} apps.',
  },
+  upgrade: {
+    title: 'Upgrade Plugin',
+    successfulTitle: 'Upgrade successful',
+    description: 'About to upgrade the following plugin',
+    usedInApps: 'Used in {{num}} apps',
+    upgrade: 'Upgrade',
+    upgrading: 'Upgrading...',
+    close: 'Close',
+  },
 }

 export default translation
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -47,6 +47,15 @@ const translation = {
    deleteContentRight: ' 插件?',
    usedInApps: '此插件正在 {{num}} 个应用中使用。',
  },
+  upgrade: {
+    title: '升级插件',
+    successfulTitle: '升级成功',
+    description: '即将升级以下插件',
+    usedInApps: '在 {{num}} 个应用中使用',
+    upgrade: '升级',
+    upgrading: '升级中...',
+    close: '关闭',
+  },
 }

 export default translation