feat: add install model plugin

web/app/components/plugins/install-plugin/base/installed.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import type { PluginDeclaration, PluginManifestInMarket } from '../../types'
+import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
 import Card from '../../card'
 import Button from '@/app/components/base/button'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 
 type Props = {
-  payload?: PluginDeclaration | PluginManifestInMarket | null
+  payload?: Plugin | PluginDeclaration | PluginManifestInMarket | null
   isMarketPayload?: boolean
   isFailed: boolean
   errMsg?: string | null

web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import type { PluginManifestInMarket } from '../../types'
+import type { Plugin, PluginManifestInMarket } from '../../types'
 import { InstallStep } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
@@ -12,7 +12,7 @@ const i18nPrefix = 'plugin.installModal'
 
 type InstallFromMarketplaceProps = {
   uniqueIdentifier: string
-  manifest: PluginManifestInMarket
+  manifest: PluginManifestInMarket | Plugin
   onSuccess: () => void
   onClose: () => void
 }
@@ -36,7 +36,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
     if (step === InstallStep.installFailed)
       return t(`${i18nPrefix}.installFailed`)
     return t(`${i18nPrefix}.installPlugin`)
-  }, [step])
+  }, [step, t])
 
   const handleInstalled = useCallback(() => {
     setStep(InstallStep.installed)

web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useMemo } from 'react'
 import { RiInformation2Line } from '@remixicon/react'
-import type { PluginManifestInMarket } from '../../../types'
+import type { Plugin, PluginManifestInMarket } from '../../../types'
 import Card from '../../../card'
 import { pluginManifestInMarketToPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
@@ -16,7 +16,7 @@ const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   uniqueIdentifier: string
-  payload: PluginManifestInMarket
+  payload: PluginManifestInMarket | Plugin
   onCancel: () => void
   onStartToInstall?: () => void
   onInstalled: () => void
@@ -104,7 +104,7 @@ const Installed: FC<Props> = ({
         <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'
-            payload={pluginManifestInMarketToPluginProps(payload)}
+            payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
             titleLeft={versionInfo}
           />
         </div>

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

@@ -12,7 +12,9 @@ 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'
 
 type Props = {
   className?: string
@@ -24,6 +26,10 @@ const ProviderCard: FC<Props> = ({
   payload,
 }) => {
   const { t } = useTranslation()
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: hideInstallFromMarketplace,
+  }] = useBoolean(false)
   const language = useGetLanguage()
   const { org, label } = payload
 
@@ -58,6 +64,7 @@ const ProviderCard: FC<Props> = ({
         <Button
           className='flex-grow'
           variant='primary'
+          onClick={showInstallFromMarketplace}
         >
           {t('plugin.detailPanel.operation.install')}
         </Button>
@@ -71,6 +78,16 @@ const ProviderCard: FC<Props> = ({
           </a>
         </Button>
       </div>
+      {
+        isShowInstallFromMarketplace && (
+          <InstallFromMarketplace
+            manifest={payload as any}
+            uniqueIdentifier={payload.latest_package_identifier}
+            onClose={hideInstallFromMarketplace}
+            onSuccess={hideInstallFromMarketplace}
+          />
+        )
+      }
     </div>
   )
 }