fix: refresh after install plugin (#13593)

web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx

@@ -1,4 +1,5 @@
-import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useProviderContext } from '@/context/provider-context'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
@@ -8,7 +9,9 @@ import { PluginType } from '../../types'
 
 const useRefreshPluginList = () => {
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
-  const updateModelProviders = useUpdateModelProviders()
+  const { mutate: refetchLLMModelList } = useModelList(ModelTypeEnum.textGeneration)
+  const { mutate: refetchEmbeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
+  const { mutate: refetchRerankModelList } = useModelList(ModelTypeEnum.rerank)
   const { refreshModelProviders } = useProviderContext()
 
   const invalidateAllToolProviders = useInvalidateAllToolProviders()
@@ -31,8 +34,10 @@ const useRefreshPluginList = () => {
 
       // model select
       if (PluginType.model.includes(manifest.category) || refreshAllType) {
-        updateModelProviders()
         refreshModelProviders()
+        refetchLLMModelList()
+        refetchEmbeddingModelList()
+        refetchRerankModelList()
       }
 
       // agent select

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

@@ -136,9 +136,10 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.uploadFailed }))
   }, [])
 
-  const handleInstalled = useCallback(() => {
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed }))
-    refreshPluginList(manifest)
+    if (!notRefresh)
+      refreshPluginList(manifest)
     setIsInstalling(false)
     onSuccess()
   }, [manifest, onSuccess, refreshPluginList, setIsInstalling])

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

@@ -24,7 +24,7 @@ type LoadedProps = {
   selectedPackage: string
   onBack: () => void
   onStartToInstall?: () => void
-  onInstalled: () => void
+  onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
 }
 
@@ -55,7 +55,7 @@ const Loaded: React.FC<LoadedProps> = ({
 
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
-  const { handleRefetch } = usePluginTaskList()
+  const { handleRefetch } = usePluginTaskList(payload.category)
   const { check } = checkTaskStatus()
 
   useEffect(() => {
@@ -127,7 +127,7 @@ const Loaded: React.FC<LoadedProps> = ({
         onFailed(error)
         return
       }
-      onInstalled()
+      onInstalled(true)
     }
     catch (e) {
       if (typeof e === 'string') {

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

@@ -32,9 +32,10 @@ const ReadyToInstall: FC<Props> = ({
 }) => {
   const { refreshPluginList } = useRefreshPluginList()
 
-  const handleInstalled = useCallback(() => {
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
     onStepChange(InstallStep.installed)
-    refreshPluginList(manifest)
+    if (!notRefresh)
+      refreshPluginList(manifest)
     setIsInstalling(false)
   }, [manifest, onStepChange, refreshPluginList, setIsInstalling])
 

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

@@ -20,7 +20,7 @@ type Props = {
   payload: PluginDeclaration
   onCancel: () => void
   onStartToInstall?: () => void
-  onInstalled: () => void
+  onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
 }
 
@@ -62,7 +62,7 @@ const Installed: FC<Props> = ({
     onCancel()
   }
 
-  const { handleRefetch } = usePluginTaskList()
+  const { handleRefetch } = usePluginTaskList(payload.category)
   const handleInstall = async () => {
     if (isInstalling) return
     setIsInstalling(true)
@@ -92,7 +92,7 @@ const Installed: FC<Props> = ({
         onFailed(error)
         return
       }
-      onInstalled()
+      onInstalled(true)
     }
     catch (e) {
       if (typeof e === 'string') {

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

@@ -54,9 +54,10 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [isBundle, step, t])
 
-  const handleInstalled = useCallback(() => {
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
     setStep(InstallStep.installed)
-    refreshPluginList(manifest)
+    if (!notRefresh)
+      refreshPluginList(manifest)
     setIsInstalling(false)
   }, [manifest, refreshPluginList, setIsInstalling])
 

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

@@ -21,7 +21,7 @@ type Props = {
   payload: PluginManifestInMarket | Plugin
   onCancel: () => void
   onStartToInstall?: () => void
-  onInstalled: () => void
+  onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
 }
 
@@ -51,7 +51,7 @@ const Installed: FC<Props> = ({
     check,
     stop,
   } = checkTaskStatus()
-  const { handleRefetch } = usePluginTaskList()
+  const { handleRefetch } = usePluginTaskList(payload.category)
 
   useEffect(() => {
     if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
@@ -106,7 +106,7 @@ const Installed: FC<Props> = ({
         onFailed(error)
         return
       }
-      onInstalled()
+      onInstalled(true)
     }
     catch (e) {
       if (typeof e === 'string') {

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -113,6 +113,7 @@ const DetailHeader = ({
         },
         payload: {
           type: PluginSource.github,
+          category: detail.declaration.category,
           github: {
             originalPackageInfo: {
               id: detail.plugin_unique_identifier,
@@ -287,6 +288,7 @@ const DetailHeader = ({
         isShowUpdateModal && (
           <UpdateFromMarketplace
             payload={{
+              category: detail.declaration.category,
               originalPackageInfo: {
                 id: detail.plugin_unique_identifier,
                 payload: detail.declaration,

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

@@ -14,6 +14,7 @@ import { useGitHubReleases } from '../install-plugin/hooks'
 import Toast from '@/app/components/base/toast'
 import { useModalContext } from '@/context/modal-context'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import type { PluginType } from '@/app/components/plugins/types'
 
 const i18nPrefix = 'plugin.action'
 
@@ -22,6 +23,7 @@ type Props = {
   installationId: string
   pluginUniqueIdentifier: string
   pluginName: string
+  category: PluginType
   usedInApps: number
   isShowFetchNewVersion: boolean
   isShowInfo: boolean
@@ -34,6 +36,7 @@ const Action: FC<Props> = ({
   installationId,
   pluginUniqueIdentifier,
   pluginName,
+  category,
   isShowFetchNewVersion,
   isShowInfo,
   isShowDelete,
@@ -67,6 +70,7 @@ const Action: FC<Props> = ({
         },
         payload: {
           type: PluginSource.github,
+          category,
           github: {
             originalPackageInfo: {
               id: pluginUniqueIdentifier,

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

@@ -20,11 +20,9 @@ import Title from '../card/base/title'
 import Action from './action'
 import cn from '@/utils/classnames'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
 import { useSingleCategories } from '../hooks'
-import { useProviderContext } from '@/context/provider-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
+import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
 
 type Props = {
   className?: string
@@ -39,10 +37,7 @@ const PluginItem: FC<Props> = ({
   const { categoriesMap } = useSingleCategories()
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
   const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const { refreshPluginList } = useRefreshPluginList()
-  const invalidateAllToolProviders = useInvalidateAllToolProviders()
-  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
-  const { refreshModelProviders } = useProviderContext()
 
   const {
     source,
@@ -60,13 +55,7 @@ const PluginItem: FC<Props> = ({
   }, [source, author])
 
   const handleDelete = () => {
-    invalidateInstalledPluginList()
+    refreshPluginList({ category } as any)
-    if (PluginType.model.includes(category))
-      refreshModelProviders()
-    if (PluginType.tool.includes(category)) {
-      invalidateAllToolProviders()
-      invalidateAllBuiltinTools()
-    }
   }
   const getValueFromI18nObject = useRenderI18nObject()
   const title = getValueFromI18nObject(label)
@@ -116,6 +105,7 @@ const PluginItem: FC<Props> = ({
                   isShowDelete
                   meta={meta}
                   onDelete={handleDelete}
+                  category={category}
                 />
               </div>
             </div>

web/app/components/plugins/types.ts

@@ -151,6 +151,7 @@ export type Permissions = {
 }
 
 export type UpdateFromMarketPlacePayload = {
+  category: PluginType
   originalPackageInfo: {
     id: string
     payload: PluginDeclaration
@@ -173,6 +174,7 @@ export type UpdateFromGitHubPayload = {
 
 export type UpdatePluginPayload = {
   type: PluginSource
+  category: PluginType
   marketPlace?: UpdateFromMarketPlacePayload
   github?: UpdateFromGitHubPayload
 }

web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -57,7 +57,7 @@ const UpdatePluginModal: FC<Props> = ({
   }
 
   const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
-  const { handleRefetch } = usePluginTaskList()
+  const { handleRefetch } = usePluginTaskList(payload.category)
 
   const configBtnText = useMemo(() => {
     return ({

web/app/components/tools/provider-list.tsx

@@ -69,7 +69,7 @@ const ProviderList = () => {
           className='relative flex flex-col overflow-y-auto bg-background-body grow'
         >
           <div className={cn(
-            'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] z-20 flex-wrap gap-y-2',
+            'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-20 flex-wrap gap-y-2',
             currentProvider && 'pr-6',
           )}>
             <TabSliderNew

web/service/use-plugins.ts

@@ -11,6 +11,7 @@ import type {
   PluginDetail,
   PluginInfoFromMarketPlace,
   PluginTask,
+  PluginType,
   PluginsFromMarketplaceByInfoResponse,
   PluginsFromMarketplaceResponse,
   VersionInfo,
@@ -31,6 +32,7 @@ import {
 import { useInvalidateAllBuiltInTools } from './use-tools'
 import usePermission from '@/app/components/plugins/plugin-page/use-permission'
 import { uninstallPlugin } from '@/service/plugins'
+import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
 
 const NAME_SPACE = 'plugins'
 
@@ -367,10 +369,11 @@ export const useFetchPluginsInMarketPlaceByInfo = (infos: Record<string, any>[])
 }
 
 const usePluginTaskListKey = [NAME_SPACE, 'pluginTaskList']
-export const usePluginTaskList = () => {
+export const usePluginTaskList = (category?: PluginType) => {
   const {
     canManagement,
   } = usePermission()
+  const { refreshPluginList } = useRefreshPluginList()
   const {
     data,
     isFetched,
@@ -383,8 +386,12 @@ export const usePluginTaskList = () => {
     refetchInterval: (lastQuery) => {
       const lastData = lastQuery.state.data
       const taskDone = lastData?.tasks.every(task => task.status === TaskStatus.success || task.status === TaskStatus.failed)
-      if (taskDone)
+      const taskAllFailed = lastData?.tasks.every(task => task.status === TaskStatus.failed)
+      if (taskDone) {
+        if (lastData?.tasks.length && !taskAllFailed)
+          refreshPluginList(category ? { category } as any : undefined, !category)
         return false
+      }
 
       return 5000
     },