From caf7b200249ca6fca499fabcd2bfe4b5e1bf29bb Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 5 Jun 2025 16:04:51 +0800
Subject: [PATCH] feat: not abled in tool list

---
 .../plugin-detail-panel/multiple-tool-selector/index.tsx | 9 ++++++++-
 .../plugin-detail-panel/tool-selector/tool-item.tsx      | 5 +++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index 114b47a431..e8d32f1908 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -13,6 +13,7 @@ import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { useAllMCPTools } from '@/service/use-tools'
 
 type Props = {
   disabled?: boolean
@@ -44,7 +45,13 @@ const MultipleToolSelector = ({
   canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
-  const enabledCount = value.filter(item => item.enabled).length
+    const { data: mcpTools } = useAllMCPTools()
+  const enabledCount = value.filter((item) => {
+    const isMCPTool = mcpTools?.find(tool => tool.id === item.provider_name)
+    if(isMCPTool)
+      return item.enabled && canChooseMCPTool
+    return item.enabled
+  }).length
   // collapse control
   const [collapse, setCollapse] = React.useState(false)
   const handleCollapse = () => {
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 7747870f13..5cc9b7a3a8 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
@@ -75,7 +75,7 @@ const ToolItem = ({
       isDeleting && 'border-state-destructive-border shadow-xs hover:bg-state-destructive-hover',
     )}>
       {icon && (
-        <div className={cn('shrink-0', isTransparent && 'opacity-50')}>
+        <div className={cn('shrink-0', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
           {typeof icon === 'string' && <div className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge bg-cover bg-center' style={{ backgroundImage: `url(${icon})` }} />}
           {typeof icon !== 'string' && <AppIcon className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge' size='xs' icon={icon?.content} background={icon?.background} />}
         </div>
@@ -83,13 +83,14 @@ const ToolItem = ({
       {!icon && (
         <div className={cn(
           'flex h-7 w-7 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
+          isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30',
         )}>
           <div className='flex h-5 w-5 items-center justify-center opacity-35'>
             <Group className='text-text-tertiary' />
           </div>
         </div>
       )}
-      <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50')}>
+      <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
         <div className='system-2xs-medium-uppercase text-text-tertiary'>{providerNameText}</div>
         <div className='system-xs-medium text-text-secondary'>{toolLabel}</div>
       </div>