feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>

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
@@ -26,6 +27,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[],
   availableNodes: Node[],
   nodeId?: string
+  canChooseMCPTool?: boolean
 }
 
 const MultipleToolSelector = ({
@@ -40,9 +42,16 @@ const MultipleToolSelector = ({
   nodeOutputVars,
   availableNodes,
   nodeId,
+  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 = () => {
@@ -66,6 +75,19 @@ const MultipleToolSelector = ({
     setOpen(false)
   }
 
+  const handleAddMultiple = (val: ToolValue[]) => {
+    const newValue = [...value, ...val]
+    // deduplication
+    const deduplication = newValue.reduce((acc, cur) => {
+      if (!acc.find(item => item.provider_name === cur.provider_name && item.tool_name === cur.tool_name))
+        acc.push(cur)
+      return acc
+    }, [] as ToolValue[])
+    // update value
+    onChange(deduplication)
+    setOpen(false)
+  }
+
   // delete tool
   const handleDelete = (index: number) => {
     const newValue = [...value]
@@ -140,8 +162,10 @@ const MultipleToolSelector = ({
                 value={item}
                 selectedTools={value}
                 onSelect={item => handleConfigure(item, index)}
+                onSelectMultiple={handleAddMultiple}
                 onDelete={() => handleDelete(index)}
                 supportEnableSwitch
+                canChooseMCPTool={canChooseMCPTool}
                 isEdit
               />
             </div>
@@ -164,6 +188,8 @@ const MultipleToolSelector = ({
         panelShowState={panelShowState}
         onPanelShowStateChange={setPanelShowState}
         isEdit={false}
+        canChooseMCPTool={canChooseMCPTool}
+        onSelectMultiple={handleAddMultiple}
       />
     </>
   )