From 369e3eb97fafa5779c4468f2886a65e1391f4f51 Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Wed, 8 Jan 2025 16:39:56 +0800
Subject: [PATCH] feat: add version switch in model selector

---
 .../model-parameter-modal/agent-model-trigger.tsx      |  4 ++--
 .../model-parameter-modal/status-indicators.tsx        | 10 +++++++---
 .../nodes/_base/components/switch-plugin-version.tsx   |  2 +-
 web/i18n/en-US/workflow.ts                             |  1 +
 web/i18n/zh-Hans/workflow.ts                           |  1 +
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
index 068be5bbf3..be56b95a95 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@@ -83,7 +83,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
           // pass
         }
       }
-      if (providerName && !modelProvider) {
+      if (providerName) {
         const parts = providerName.split('/')
         const org = parts[0]
         const name = parts[1]
@@ -101,7 +101,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
         setIsPluginChecked(true)
       }
     })()
-  }, [providerName, modelProvider, modelId, currentProvider])
+  }, [providerName, modelId, currentProvider])
 
   if (modelId && !isPluginChecked)
     return null
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
index d5bda7caf6..1c28ef3019 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@@ -1,5 +1,7 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Link from 'next/link'
+import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
+import { useInstalledPluginList } from '@/service/use-plugins'
 import { RiErrorWarningFill } from '@remixicon/react'
 
 type StatusIndicatorsProps = {
@@ -12,9 +14,10 @@ type StatusIndicatorsProps = {
 }
 
 const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disabled, pluginInfo, t }: StatusIndicatorsProps) => {
+  const { data: pluginList } = useInstalledPluginList()
   const renderTooltipContent = (title: string, description?: string, linkText?: string, linkHref?: string) => {
     return (
-      <div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5'>
+      <div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5' onClick={e => e.stopPropagation()}>
         <div className='text-text-primary title-xs-semi-bold'>{title}</div>
         {description && (
           <div className='min-w-[200px] text-text-secondary body-xs-regular'>
@@ -36,6 +39,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
       </div>
     )
   }
+  // const installedPluginUniqueIdentifier = pluginList?.plugins.find(plugin => plugin.name === pluginInfo.name)?.plugin_unique_identifier
   return (
     <>
       {/* plugin installed and model is in model list but disabled */}
@@ -45,7 +49,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
           popupContent={inModelList ? t('workflow.nodes.agent.modelSelectorTooltips.deprecated')
             : renderTooltipContent(
               t('workflow.nodes.agent.modelNotSupport.title'),
-              t('workflow.nodes.agent.modelNotSupport.desc'),
+              !pluginInfo ? t('workflow.nodes.agent.modelNotSupport.desc') : t('workflow.nodes.agent.modelNotSupport.descForVersionSwitch'),
               !pluginInfo ? t('workflow.nodes.agent.linkToPlugin') : '',
               !pluginInfo ? '/plugins' : '',
             )
@@ -53,7 +57,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
           asChild={false}
           needsDelay={!inModelList}
         >
-          <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          {!pluginInfo ? <RiErrorWarningFill className='w-4 h-4 text-text-destructive' /> : <SwitchPluginVersion uniqueIdentifier={pluginList?.plugins.find(plugin => plugin.name === pluginInfo.name)?.plugin_unique_identifier ?? ''} />}
         </Tooltip>
       )}
       {!modelProvider && !pluginInfo && (
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index 05a673ee2b..2eee37c5c5 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -61,7 +61,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
   }
   const { t } = useTranslation()
   return <Tooltip popupContent={!isShow && !isShowUpdateModal && tooltip} triggerMethod='hover'>
-    <div className={cn('w-fit', className)}>
+    <div className={cn('w-fit flex items-center justify-center', className)}>
       {isShowUpdateModal && pluginDetail && <PluginMutationModel
         onCancel={hideUpdateModal}
         plugin={pluginManifestToCardPluginProps({
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index b25a1b4915..8e8d1ea9d9 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -725,6 +725,7 @@ const translation = {
       modelNotSupport: {
         title: 'Unsupported Model',
         desc: 'The installed plugin version does not provide this model.',
+        descForVersionSwitch: 'The installed plugin version does not provide this model. Click to switch version.',
       },
       configureModel: 'Configure Model',
       notAuthorized: 'Not Authorized',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 4cbd5246bf..8992770fb8 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -725,6 +725,7 @@ const translation = {
       modelNotSupport: {
         title: '不支持的模型',
         desc: '已安装的插件版本不提供此模型。',
+        descForVersionSwitch: '已安装的插件版本不提供此模型。点击切换版本。',
       },
       model: '模型',
       toolbox: '工具箱',