chore: update the model install button

web/app/components/base/install-button/index.tsx

@@ -17,7 +17,7 @@ const InstallButton = ({ loading, onInstall, t }: InstallButtonProps) => {
         {loading ? t('workflow.nodes.agent.pluginInstaller.installing') : t('workflow.nodes.agent.pluginInstaller.install')}
       </div>
       {loading
-        ? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary' />
+        ? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary animate-spin' />
         : <RiInstallLine className='w-3.5 h-3.5 text-text-secondary' />
       }
     </Button>

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx

@@ -13,7 +13,7 @@ import {
 } from '../declarations'
 import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from '../provider-added-card'
 import type { PluginInfoFromMarketPlace } from '@/app/components/plugins/types'
-import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import ConfigurationButton from './configuration-button'
 import { PluginType } from '@/app/components/plugins/types'
 import {
@@ -22,7 +22,7 @@ import {
 } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelDisplay from './model-display'
-import InstallButton from '@/app/components/base/install-button'
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import StatusIndicators from './status-indicators'
 import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
@@ -72,10 +72,8 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
   }, [modelProviders, providerName])
   const [pluginInfo, setPluginInfo] = useState<PluginInfoFromMarketPlace | null>(null)
   const [isPluginChecked, setIsPluginChecked] = useState(false)
-  const [loading, setLoading] = useState(false)
   const [installed, setInstalled] = useState(false)
-  const { mutateAsync: installPackageFromMarketPlace } = useInstallPackageFromMarketPlace()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
-
   useEffect(() => {
     (async () => {
       if (providerName && !modelProvider) {
@@ -133,34 +131,6 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
     })
   }
 
-  const handleInstall = async (pluginInfo: PluginInfoFromMarketPlace) => {
-    setLoading(true)
-    try {
-      const { all_installed } = await installPackageFromMarketPlace(pluginInfo.latest_package_identifier)
-      if (all_installed) {
-        [
-          ModelTypeEnum.textGeneration,
-          ModelTypeEnum.textEmbedding,
-          ModelTypeEnum.rerank,
-          ModelTypeEnum.moderation,
-          ModelTypeEnum.speech2text,
-          ModelTypeEnum.tts,
-        ].forEach((type: ModelTypeEnum) => {
-          if (scope?.includes(type))
-            updateModelList(type)
-        })
-        updateModelProviders()
-        setInstalled(true)
-      }
-    }
-    catch (error) {
-      console.error('Installation failed:', error)
-    }
-    finally {
-      setLoading(false)
-    }
-  }
-
   return (
     <div
       className={cn(
@@ -193,13 +163,27 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
             t={t}
           />
           {!installed && !modelProvider && pluginInfo && (
-            <InstallButton
+            <InstallPluginButton
-              loading={loading}
+              onClick={e => e.stopPropagation()}
-              onInstall={(e) => {
+              size={'small'}
-                e.stopPropagation()
+              uniqueIdentifier={pluginInfo.latest_package_identifier}
-                handleInstall(pluginInfo)
+              onSuccess={() => {
+                [
+                  ModelTypeEnum.textGeneration,
+                  ModelTypeEnum.textEmbedding,
+                  ModelTypeEnum.rerank,
+                  ModelTypeEnum.moderation,
+                  ModelTypeEnum.speech2text,
+                  ModelTypeEnum.tts,
+                ].forEach((type: ModelTypeEnum) => {
+                  if (scope?.includes(type))
+                    updateModelList(type)
+                },
+                )
+                updateModelProviders()
+                invalidateInstalledPluginList()
+                setInstalled(true)
               }}
-              t={t}
             />
           )}
           {modelProvider && !disabled && !needsConfiguration && (

web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx

@@ -38,6 +38,6 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
     className={classNames('flex items-center', className)}
   >
     {!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
-    {!isLoading ? <RiInstallLine className='size-4 ml-1' /> : <RiLoader2Line className='size-4 ml-1 animate-spin' />}
+    {!isLoading ? <RiInstallLine className='size-3.5 ml-1' /> : <RiLoader2Line className='size-3.5 ml-1 animate-spin' />}
   </Button>
 }