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

web/app/components/plugins/card/base/card-icon.tsx

@@ -2,12 +2,19 @@ import { RiCheckLine, RiCloseLine } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 import cn from '@/utils/classnames'
 
+const iconSizeMap = {
+  xs: 'w-4 h-4 text-base',
+  tiny: 'w-6 h-6 text-base',
+  small: 'w-8 h-8',
+  medium: 'w-9 h-9',
+  large: 'w-10 h-10',
+}
 const Icon = ({
   className,
   src,
   installed = false,
   installFailed = false,
-  size,
+  size = 'large',
 }: {
   className?: string
   src: string | {
@@ -23,7 +30,7 @@ const Icon = ({
     return (
       <div className={cn('relative', className)}>
         <AppIcon
-          size={size || 'large'}
+          size={size}
           iconType={'emoji'}
           icon={src.content}
           background={src.background}
@@ -32,9 +39,10 @@ const Icon = ({
       </div>
     )
   }
+
   return (
     <div
-      className={cn('shrink-0 relative w-10 h-10 rounded-md bg-center bg-no-repeat bg-contain', className)}
+      className={cn('shrink-0 relative rounded-md bg-center bg-no-repeat bg-contain', iconSizeMap[size], className)}
       style={{
         backgroundImage: `url(${src})`,
       }}

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

@@ -4,8 +4,6 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import Card from '../../card'
 import Button from '@/app/components/base/button'
-import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { PluginType } from '../../types'
 import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
@@ -26,12 +24,9 @@ const Installed: FC<Props> = ({
   onCancel,
 }) => {
   const { t } = useTranslation()
-  const updateModelProviders = useUpdateModelProviders()
 
   const handleClose = () => {
     onCancel()
-    if (payload?.category === PluginType.model)
-      updateModelProviders()
   }
   return (
     <>

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -34,9 +34,7 @@ const InstallBundle: FC<Props> = ({
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
     if (step === InstallStep.installed)
-      return t(`${i18nPrefix}.installedSuccessfully`)
-    if (step === InstallStep.installFailed)
-      return t(`${i18nPrefix}.installFailed`)
+      return t(`${i18nPrefix}.installComplete`)
 
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])

web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx

@@ -6,7 +6,6 @@ import MarketplaceItem from '../item/marketplace-item'
 import GithubItem from '../item/github-item'
 import { useFetchPluginsInMarketPlaceByIds, useFetchPluginsInMarketPlaceByInfo } from '@/service/use-plugins'
 import produce from 'immer'
-import { useGetState } from 'ahooks'
 import PackageItem from '../item/package-item'
 import LoadingError from '../../base/loading-error'
 
@@ -25,7 +24,7 @@ const InstallByDSLList: FC<Props> = ({
 }) => {
   const { isLoading: isFetchingMarketplaceDataFromDSL, data: marketplaceFromDSLRes } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.plugin_unique_identifier!))
   const { isLoading: isFetchingMarketplaceDataFromLocal, data: marketplaceResFromLocalRes } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value!))
-  const [plugins, setPlugins, getPlugins] = useGetState<(Plugin | undefined)[]>((() => {
+  const [plugins, doSetPlugins] = useState<(Plugin | undefined)[]>((() => {
     const hasLocalPackage = allPlugins.some(d => d.type === 'package')
     if (!hasLocalPackage)
       return []
@@ -42,17 +41,23 @@ const InstallByDSLList: FC<Props> = ({
     })
     return _plugins
   })())
+  const pluginsRef = React.useRef<(Plugin | undefined)[]>(plugins)
+
+  const setPlugins = useCallback((p: (Plugin | undefined)[]) => {
+    doSetPlugins(p)
+    pluginsRef.current = p
+  }, [])
 
   const [errorIndexes, setErrorIndexes] = useState<number[]>([])
 
   const handleGitHubPluginFetched = useCallback((index: number) => {
     return (p: Plugin) => {
-      const nextPlugins = produce(getPlugins(), (draft) => {
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
         draft[index] = p
       })
       setPlugins(nextPlugins)
     }
-  }, [getPlugins, setPlugins])
+  }, [setPlugins])
 
   const handleGitHubPluginFetchError = useCallback((index: number) => {
     return () => {
@@ -73,7 +78,7 @@ const InstallByDSLList: FC<Props> = ({
     if (!isFetchingMarketplaceDataFromDSL && marketplaceFromDSLRes?.data.plugins) {
       const payloads = marketplaceFromDSLRes?.data.plugins
       const failedIndex: number[] = []
-      const nextPlugins = produce(getPlugins(), (draft) => {
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
         marketPlaceInDSLIndex.forEach((index, i) => {
           if (payloads[i])
             draft[index] = payloads[i]
@@ -82,6 +87,7 @@ const InstallByDSLList: FC<Props> = ({
         })
       })
       setPlugins(nextPlugins)
+
       if (failedIndex.length > 0)
         setErrorIndexes([...errorIndexes, ...failedIndex])
     }
@@ -92,7 +98,7 @@ const InstallByDSLList: FC<Props> = ({
     if (!isFetchingMarketplaceDataFromLocal && marketplaceResFromLocalRes?.data.list) {
       const payloads = marketplaceResFromLocalRes?.data.list
       const failedIndex: number[] = []
-      const nextPlugins = produce(getPlugins(), (draft) => {
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
         marketPlaceInDSLIndex.forEach((index, i) => {
           if (payloads[i]) {
             const item = payloads[i]

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

@@ -7,14 +7,16 @@ import type { InstallState } from '@/app/components/plugins/types'
 import { useGitHubReleases } from '../hooks'
 import { convertRepoToUrl, parseGitHubUrl } from '../utils'
 import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types'
-import { InstallStepFromGitHub } from '../../types'
+import { InstallStepFromGitHub, PluginType } from '../../types'
 import Toast from '@/app/components/base/toast'
 import SetURL from './steps/setURL'
 import SelectPackage from './steps/selectPackage'
 import Installed from '../base/installed'
 import Loaded from './steps/loaded'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useTranslation } from 'react-i18next'
+import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useInvalidateAllToolProviders } from '@/service/use-tools'
 
 const i18nPrefix = 'plugin.installFromGitHub'
 
@@ -28,6 +30,8 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   const { t } = useTranslation()
   const { getIconUrl } = useGetIcon()
   const { fetchReleases } = useGitHubReleases()
+  const updateModelProviders = useUpdateModelProviders()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
   const [state, setState] = useState<InstallState>({
     step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl,
     repoUrl: updatePayload?.originalPackageInfo?.repo
@@ -63,7 +67,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
       return t(`${i18nPrefix}.installFailed`)
 
     return updatePayload ? t(`${i18nPrefix}.updatePlugin`) : t(`${i18nPrefix}.installPlugin`)
-  }, [state.step])
+  }, [state.step, t, updatePayload])
 
   const handleUrlSubmit = async () => {
     const { isValid, owner, repo } = parseGitHubUrl(state.repoUrl)
@@ -111,8 +115,14 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
 
   const handleInstalled = useCallback(() => {
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed }))
+    if (!manifest)
+      return
+    if (PluginType.model.includes(manifest.category))
+      updateModelProviders()
+    if (PluginType.tool.includes(manifest.category))
+      invalidateAllToolProviders()
     onSuccess()
-  }, [onSuccess])
+  }, [invalidateAllToolProviders, manifest, onSuccess, updateModelProviders])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installFailed }))
@@ -142,7 +152,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
       closable
     >
       <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-        <div className='flex flex-col items-start gap-1 flex-grow'>
+        <div className='flex flex-col items-start gap-1 grow'>
           <div className='self-stretch text-text-primary title-2xl-semi-bold'>
             {getTitle()}
           </div>

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

@@ -34,13 +34,15 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
+    if (isBundle && step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
     if (step === InstallStep.installed)
       return t(`${i18nPrefix}.installedSuccessfully`)
     if (step === InstallStep.installFailed)
       return t(`${i18nPrefix}.installFailed`)
 
     return t(`${i18nPrefix}.installPlugin`)
-  }, [step, t])
+  }, [isBundle, step, t])
 
   const { getIconUrl } = useGetIcon()
 

web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx

@@ -2,11 +2,12 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import type { PluginDeclaration } from '../../types'
-import { InstallStep } from '../../types'
+import { InstallStep, PluginType } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-
+import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useInvalidateAllToolProviders } from '@/service/use-tools'
 type Props = {
   step: InstallStep
   onStepChange: (step: InstallStep) => void,
@@ -27,11 +28,19 @@ const ReadyToInstall: FC<Props> = ({
   onError,
 }) => {
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const updateModelProviders = useUpdateModelProviders()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
 
   const handleInstalled = useCallback(() => {
-    invalidateInstalledPluginList()
     onStepChange(InstallStep.installed)
-  }, [invalidateInstalledPluginList, onStepChange])
+    invalidateInstalledPluginList()
+    if (!manifest)
+      return
+    if (PluginType.model.includes(manifest.category))
+      updateModelProviders()
+    if (PluginType.tool.includes(manifest.category))
+      invalidateAllToolProviders()
+  }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest, onStepChange, updateModelProviders])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     onStepChange(InstallStep.installFailed)

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

@@ -3,10 +3,13 @@
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
 import type { Plugin, PluginManifestInMarket } from '../../types'
-import { InstallStep } from '../../types'
+import { InstallStep, PluginType } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
+import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateAllToolProviders } from '@/service/use-tools'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -27,7 +30,9 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
   // readyToInstall -> check installed -> installed/failed
   const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-
+  const updateModelProviders = useUpdateModelProviders()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   // TODO: check installed in beta version.
 
   const getTitle = useCallback(() => {
@@ -40,7 +45,12 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
 
   const handleInstalled = useCallback(() => {
     setStep(InstallStep.installed)
-  }, [])
+    invalidateInstalledPluginList()
+    if (PluginType.model.includes(manifest.category))
+      updateModelProviders()
+    if (PluginType.tool.includes(manifest.category))
+      invalidateAllToolProviders()
+  }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest.category, updateModelProviders])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     setStep(InstallStep.installFailed)

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

@@ -80,7 +80,7 @@ const Installed: FC<Props> = ({
     return (<>{
       payload.latest_version === toInstallVersion || !supportCheckInstalled
         ? (
-          <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.latest_version}</Badge>
+          <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version || payload.latest_version}</Badge>
         )
         : (
           <>

web/app/components/plugins/plugin-detail-panel/action-list.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import { useAppContext } from '@/context/app-context'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
@@ -14,19 +13,25 @@ import {
   useRemoveProviderCredentials,
   useUpdateProviderCredentials,
 } from '@/service/use-tools'
+import type { PluginDetail } from '@/app/components/plugins/types'
 
-const ActionList = () => {
+type Props = {
+  detail: PluginDetail
+}
+
+const ActionList = ({
+  detail,
+}: Props) => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
-  const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
-  const { data: provider } = useBuiltinProviderInfo(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
+  const { data: provider } = useBuiltinProviderInfo(`${detail.plugin_id}/${detail.name}`)
   const invalidateProviderInfo = useInvalidateBuiltinProviderInfo()
-  const { data } = useBuiltinTools(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
+  const { data } = useBuiltinTools(`${detail.plugin_id}/${detail.name}`)
 
   const [showSettingAuth, setShowSettingAuth] = useState(false)
 
   const handleCredentialSettingUpdate = () => {
-    invalidateProviderInfo(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
+    invalidateProviderInfo(`${detail.plugin_id}/${detail.name}`)
     Toast.notify({
       type: 'success',
       message: t('common.api.actionSuccess'),
@@ -74,7 +79,7 @@ const ActionList = () => {
       <div className='flex flex-col gap-2'>
         {data.map(tool => (
           <ToolItem
-            key={`${currentPluginDetail.plugin_id}${tool.name}`}
+            key={`${detail.plugin_id}${tool.name}`}
             disabled={false}
             collection={provider}
             tool={tool}