From 17dfb3654f7f6c2ad6f16facd87919759b0cbc0e Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Wed, 8 Jan 2025 14:45:03 +0800
Subject: [PATCH] feat: add version incompatible case

---
 .../model-provider-page/model-icon/index.tsx  |  6 +-
 .../agent-model-trigger.tsx                   |  9 ++-
 .../status-indicators.tsx                     | 72 +++++++++++++------
 .../deprecated-model-trigger.tsx              |  4 +-
 4 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index e657106ab8..1139e5e030 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -13,12 +13,14 @@ type ModelIconProps = {
   modelName?: string
   className?: string
   isDeprecated?: boolean
+  isInModelList?: boolean
 }
 const ModelIcon: FC<ModelIconProps> = ({
   provider,
   className,
   modelName,
   isDeprecated = false,
+  isInModelList = false,
 }) => {
   const language = useLanguage()
   if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
@@ -26,7 +28,7 @@ const ModelIcon: FC<ModelIconProps> = ({
   if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
     return <div className='flex items-center justify-center'><OpenaiViolet className={cn('w-5 h-5', className)}/></div>
 
-  if (provider?.icon_small) {
+  if (provider?.icon_small && isInModelList) {
     return (
       <div className={`flex items-center justify-center w-5 h-5 ${isDeprecated ? 'opacity-50' : ''}`}>
         <img
@@ -40,7 +42,7 @@ const ModelIcon: FC<ModelIconProps> = ({
 
   return (
     <div className={cn(
-      'flex items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
+      'flex items-center justify-center rounded-md border-[0.5px] w-5 h-5 border-components-panel-border-subtle bg-background-default-subtle',
       className,
     )}>
       <div className='flex w-5 h-5 items-center justify-center opacity-35'>
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 6cc21699c4..f38440837c 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
@@ -26,6 +26,7 @@ import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { fetchPluginInfoFromMarketPlace } from '@/service/plugins'
+import { fetchModelProviderModelList } from '@/service/common'
 
 export type AgentModelTriggerProps = {
   open?: boolean
@@ -67,6 +68,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
   const [pluginInfo, setPluginInfo] = useState<PluginInfoFromMarketPlace | null>(null)
   const [isPluginChecked, setIsPluginChecked] = useState(false)
   const [installed, setInstalled] = useState(false)
+  const [inModelList, setInModelList] = useState(false)
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const handleOpenModal = useModelModalHandler()
   useEffect(() => {
@@ -77,6 +79,9 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
         const name = parts[1]
         try {
           const pluginInfo = await fetchPluginInfoFromMarketPlace({ org, name })
+          const modelsData = await fetchModelProviderModelList(`/workspaces/current/model-providers/${providerName}/models`)
+          if (modelId && modelsData.data.find(item => item.model === modelId))
+            setInModelList(true)
           if (pluginInfo.data.plugin.category === PluginType.model)
             setPluginInfo(pluginInfo.data.plugin)
         }
@@ -89,7 +94,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
         setIsPluginChecked(true)
       }
     })()
-  }, [providerName, modelProvider])
+  }, [providerName, modelProvider, modelId])
 
   if (modelId && !isPluginChecked)
     return null
@@ -107,6 +112,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
             provider={currentProvider || modelProvider}
             modelName={currentModel?.model || modelId}
             isDeprecated={hasDeprecated}
+            isInModelList={inModelList}
           />
           <ModelDisplay
             currentModel={currentModel}
@@ -121,6 +127,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
           <StatusIndicators
             needsConfiguration={needsConfiguration}
             modelProvider={!!modelProvider}
+            inModelList={inModelList}
             disabled={!!disabled}
             pluginInfo={pluginInfo}
             t={t}
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 94724b43eb..929eb5c2a6 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
@@ -5,15 +5,41 @@ import { RiErrorWarningFill } from '@remixicon/react'
 type StatusIndicatorsProps = {
   needsConfiguration: boolean
   modelProvider: boolean
+  inModelList: boolean
   disabled: boolean
   pluginInfo: any
   t: any
 }
 
-const StatusIndicators = ({ needsConfiguration, modelProvider, disabled, pluginInfo, t }: StatusIndicatorsProps) => {
+const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disabled, pluginInfo, t }: StatusIndicatorsProps) => {
+  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='text-text-primary title-xs-semi-bold'>{title}</div>
+        {description && (
+          <div className='min-w-[200px] text-text-secondary body-xs-regular'>
+            {description}
+          </div>
+        )}
+        {linkText && linkHref && (
+          <div className='text-text-accent body-xs-regular cursor-pointer z-[100]'>
+            <Link
+              href={linkHref}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            >
+              {linkText}
+            </Link>
+          </div>
+        )}
+      </div>
+    )
+  }
   return (
     <>
-      {!needsConfiguration && modelProvider && disabled && (
+      {/* plugin installed and model is in model list but disabled */}
+      {!needsConfiguration && modelProvider && disabled && inModelList && (
         <Tooltip
           popupContent={t('workflow.nodes.agent.modelSelectorTooltips.deprecated')}
           asChild={false}
@@ -21,26 +47,32 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, disabled, pluginI
           <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
         </Tooltip>
       )}
+      {/* plugin installed from github/local and model is not in model list */}
+      {
+        modelProvider && !inModelList && (
+          <Tooltip
+            popupContent={renderTooltipContent(
+              t('workflow.nodes.agent.modelNotSupport.title'),
+              t('workflow.nodes.agent.modelNotSupport.desc'),
+              !pluginInfo ? t('workflow.nodes.agent.linkToPlugin') : '',
+              !pluginInfo ? '/plugins' : '',
+            )}
+            asChild={false}
+            needsDelay
+          >
+            <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          </Tooltip>
+        )
+      }
+      {/* plugin not installed and not in marketplace */}
       {!modelProvider && !pluginInfo && (
         <Tooltip
-          popupContent={
-            <div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5'>
-              <div className='text-text-primary title-xs-semi-bold'>{t('workflow.nodes.agent.modelNotInMarketplace.title')}</div>
-              <div className='min-w-[200px] text-text-secondary body-xs-regular'>
-                {t('workflow.nodes.agent.modelNotInMarketplace.desc')}
-              </div>
-              <div className='text-text-accent body-xs-regular cursor-pointer z-[100]'>
-                <Link
-                  href={'/plugins'}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                  }}
-                >
-                  {t('workflow.nodes.agent.linkToPlugin')}
-                </Link>
-              </div>
-            </div>
-          }
+          popupContent={renderTooltipContent(
+            t('workflow.nodes.agent.modelNotInMarketplace.title'),
+            t('workflow.nodes.agent.modelNotInMarketplace.desc'),
+            t('workflow.nodes.agent.linkToPlugin'),
+            '/plugins',
+          )}
           asChild={false}
           needsDelay
         >
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
index ce40ab7b22..207e0a7eaf 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
@@ -22,11 +22,11 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={cn('group flex flex-grow items-center p-[3px] pl-1 h-6 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
+      className={cn('group flex flex-grow items-center p-[3px] pl-1 h-8 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
     >
       <div className='flex items-center py-[1px] gap-1 grow'>
         <ModelIcon
-          className="m-0.5 w-4 h-4"
+          className="w-4 h-4"
           provider={currentProvider}
           modelName={modelName}
         />