From 933194b1f71eeb7edd9899adb11c2c345ee8ade4 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 5 Jun 2025 15:08:57 +0800
Subject: [PATCH] feat: mcp tools not support warning

---
 .../tool-selector/index.tsx                   |  1 +
 .../tool-selector/tool-item.tsx               | 11 ++++++++--
 .../mcp-tool-not-support-tooltip.tsx          | 22 +++++++++++++++++++
 web/i18n/en-US/plugin.ts                      |  1 +
 web/i18n/zh-Hans/plugin.ts                    |  1 +
 5 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx

diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index fba99f4e68..ec35db953a 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -279,6 +279,7 @@ const ToolSelector: FC<Props> = ({
                   </p>
                 </div>
               }
+              canChooseMCPTool={canChooseMCPTool}
             />
           )}
         </PortalToFollowElemTrigger>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index 391b8a8528..7747870f13 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -17,6 +17,7 @@ import { ToolTipContent } from '@/app/components/base/tooltip/content'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
 import cn from '@/utils/classnames'
+import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 
 type Props = {
   icon?: any
@@ -37,6 +38,7 @@ type Props = {
   onInstall?: () => void
   versionMismatch?: boolean
   open: boolean
+  canChooseMCPTool?: boolean,
 }
 
 const ToolItem = ({
@@ -58,11 +60,13 @@ const ToolItem = ({
   isError,
   errorTip,
   versionMismatch,
+  canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
   const providerNameText = isMCPTool ? providerShowName : providerName?.split('/').pop()
   const isTransparent = uninstalled || versionMismatch || isError
   const [isDeleting, setIsDeleting] = useState(false)
+  const isShowCanNotChooseMCPTip = isMCPTool && !canChooseMCPTool
 
   return (
     <div className={cn(
@@ -90,7 +94,7 @@ const ToolItem = ({
         <div className='system-xs-medium text-text-secondary'>{toolLabel}</div>
       </div>
       <div className='hidden items-center gap-1 group-hover:flex'>
-        {!noAuth && !isError && !uninstalled && !versionMismatch && (
+        {!noAuth && !isError && !uninstalled && !versionMismatch && !isShowCanNotChooseMCPTip && (
           <ActionButton>
             <RiEqualizer2Line className='h-4 w-4' />
           </ActionButton>
@@ -107,7 +111,7 @@ const ToolItem = ({
           <RiDeleteBinLine className='h-4 w-4' />
         </div>
       </div>
-      {!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
+      {!isError && !uninstalled && !noAuth && !versionMismatch && !isShowCanNotChooseMCPTip && showSwitch && (
         <div className='mr-1' onClick={e => e.stopPropagation()}>
           <Switch
             size='md'
@@ -116,6 +120,9 @@ const ToolItem = ({
           />
         </div>
       )}
+      {isShowCanNotChooseMCPTip && (
+        <McpToolNotSupportTooltip />
+      )}
       {!isError && !uninstalled && !versionMismatch && noAuth && (
         <Button variant='secondary' size='small' onClick={onAuth}>
           {t('tools.notAuthorized')}
diff --git a/web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx b/web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx
new file mode 100644
index 0000000000..8117f7502f
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx
@@ -0,0 +1,22 @@
+'use client'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiAlertFill } from '@remixicon/react'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const McpToolNotSupportTooltip: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      popupContent={
+        <div className='w-[256px]'>
+        {t('plugin.detailPanel.toolSelector.unsupportedMCPTool')}
+        </div>
+      }
+    >
+      <RiAlertFill className='size-4 text-text-warning-secondary' />
+    </Tooltip>
+  )
+}
+export default React.memo(McpToolNotSupportTooltip)
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index a4e4d39d39..d314a448dd 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -93,6 +93,7 @@ const translation = {
       unsupportedTitle: 'Unsupported Action',
       unsupportedContent: 'The installed plugin version does not provide this action.',
       unsupportedContent2: 'Click to switch version.',
+      unsupportedMCPTool: 'Currently selected agent strategy plugin version does not support MCP tools.',
     },
     configureApp: 'Configure App',
     configureModel: 'Configure model',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index e088557dfb..a7be431b3e 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -93,6 +93,7 @@ const translation = {
       unsupportedTitle: '不支持的 Action',
       unsupportedContent: '已安装的插件版本不提供这个 action。',
       unsupportedContent2: '点击切换版本',
+      unsupportedMCPTool: '当前选定的 Agent 策略插件版本不支持 MCP 工具。',
     },
     configureApp: '应用设置',
     configureModel: '模型设置',