fix: install handle of list refresh

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-from-github/index.tsx

@@ -7,7 +7,7 @@ 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'
@@ -15,6 +15,8 @@ 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/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/plugin-detail-panel/detail-header.tsx

@@ -31,6 +31,7 @@ import { uninstallPlugin } from '@/service/plugins'
 import { useGetLanguage } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 
@@ -52,6 +53,7 @@ const DetailHeader = ({
   const { checkForUpdates, fetchReleases } = useGitHubReleases()
   const { setShowUpdatePluginModal } = useModalContext()
   const { refreshModelProviders } = useProviderContext()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
 
   const {
     installation_id,
@@ -150,10 +152,12 @@ const DetailHeader = ({
     if (res.success) {
       hideDeleteConfirm()
       onUpdate(true)
-      if (category === PluginType.model)
+      if (PluginType.model.includes(category))
         refreshModelProviders()
+      if (PluginType.tool.includes(category))
+        invalidateAllToolProviders()
     }
-  }, [showDeleting, installation_id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders])
+  }, [showDeleting, installation_id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders])
 
   // #plugin TODO# used in apps
   // const usedInApps = 3

web/app/components/plugins/plugin-item/index.tsx

@@ -22,6 +22,7 @@ import cn from '@/utils/classnames'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import { useLanguage } from '../../header/account-setting/model-provider-page/hooks'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { useCategories } from '../hooks'
 import { useProviderContext } from '@/context/provider-context'
 
@@ -40,6 +41,7 @@ const PluginItem: FC<Props> = ({
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
   const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
   const { refreshModelProviders } = useProviderContext()
 
   const {
@@ -59,8 +61,10 @@ const PluginItem: FC<Props> = ({
 
   const handleDelete = () => {
     invalidateInstalledPluginList()
-    if (category === PluginType.model)
+    if (PluginType.model.includes(category))
       refreshModelProviders()
+    if (PluginType.tool.includes(category))
+      invalidateAllToolProviders()
   }
   return (
     <div

web/service/use-tools.ts

@@ -21,6 +21,10 @@ export const useAllToolProviders = () => {
   })
 }
 
+export const useInvalidateAllToolProviders = () => {
+  return useInvalid(useAllToolProvidersKey)
+}
+
 const useAllBuiltInToolsKey = [NAME_SPACE, 'builtIn']
 export const useAllBuiltInTools = () => {
   return useQuery<ToolWithProvider[]>({