From 386ee7b07bd77f04a6b340005a3b44f5e4cd6476 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 20 Nov 2024 11:49:20 +0800
Subject: [PATCH] update model provider list after plugin installed

---
 .../account-setting/model-provider-page/index.tsx |  2 +-
 .../plugins/install-plugin/base/installed.tsx     | 15 ++++++++++++---
 web/app/components/plugins/provider-card.tsx      |  7 +------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index f807bd7922..7faf3f3de7 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -222,7 +222,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
         {!collapse && !isPluginsLoading && (
           <div className='grid grid-cols-2 gap-2'>
             {plugins.map(plugin => (
-              <ProviderCard key={plugin.plugin_id} payload={plugin} onSuccess={updateModelProviders} />
+              <ProviderCard key={plugin.plugin_id} payload={plugin} />
             ))}
           </div>
         )}
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index 442a61e372..eba50a6b21 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -1,11 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
+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 { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 
 type Props = {
@@ -24,6 +26,13 @@ const Installed: FC<Props> = ({
   onCancel,
 }) => {
   const { t } = useTranslation()
+  const updateModelProviders = useUpdateModelProviders()
+
+  const handleClose = () => {
+    onCancel()
+    if (payload?.category === PluginType.model)
+      updateModelProviders()
+  }
   return (
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
@@ -45,7 +54,7 @@ const Installed: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px]'
-          onClick={onCancel}
+          onClick={handleClose}
         >
           {t('common.operation.close')}
         </Button>
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 3f2d889bc0..63df53d0c5 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -19,13 +19,11 @@ import { useBoolean } from 'ahooks'
 type Props = {
   className?: string
   payload: Plugin
-  onSuccess: () => void
 }
 
 const ProviderCard: FC<Props> = ({
   className,
   payload,
-  onSuccess,
 }) => {
   const { t } = useTranslation()
   const [isShowInstallFromMarketplace, {
@@ -86,10 +84,7 @@ const ProviderCard: FC<Props> = ({
             manifest={payload as any}
             uniqueIdentifier={payload.latest_package_identifier}
             onClose={hideInstallFromMarketplace}
-            onSuccess={() => {
-              onSuccess()
-              hideInstallFromMarketplace()
-            }}
+            onSuccess={() => hideInstallFromMarketplace()}
           />
         )
       }