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/workflow/block-selector/tool/action-item.tsx

@@ -10,13 +10,12 @@ import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
 import cn from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
-import { RiCheckLine } from '@remixicon/react'
-import Badge from '@/app/components/base/badge'
 
 type Props = {
   provider: ToolWithProvider
   payload: Tool
   disabled?: boolean
+  isAdded?: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
@@ -25,6 +24,7 @@ const ToolItem: FC<Props> = ({
   payload,
   onSelect,
   disabled,
+  isAdded,
 }) => {
   const { t } = useTranslation()
 
@@ -71,18 +71,16 @@ const ToolItem: FC<Props> = ({
             output_schema: payload.output_schema,
             paramSchemas: payload.parameters,
             params,
+            meta: provider.meta,
           })
         }}
       >
-        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary', disabled && 'opacity-30')}>{payload.label[language]}</div>
-        {disabled && <Badge
-          className='flex h-5 items-center space-x-0.5 text-text-tertiary'
-          uppercase
-        >
-          <RiCheckLine className='h-3 w-3 ' />
-          <div>{t('tools.addToolModal.added')}</div>
-        </Badge>
-        }
+        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
+          <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
+        </div>
+        {isAdded && (
+          <div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div>
+        )}
       </div>
     </Tooltip >
   )

web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx

@@ -11,21 +11,29 @@ import { useMemo } from 'react'
 type Props = {
   payload: ToolWithProvider[]
   isShowLetterIndex: boolean
+  indexBar: React.ReactNode
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   letters: string[]
   toolRefs: any
   selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }
 
 const ToolViewFlatView: FC<Props> = ({
   letters,
   payload,
   isShowLetterIndex,
+  indexBar,
   hasSearchText,
   onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
   toolRefs,
   selectedTools,
+  canChooseMCPTool,
 }) => {
   const firstLetterToolIds = useMemo(() => {
     const res: Record<string, string> = {}
@@ -37,26 +45,31 @@ const ToolViewFlatView: FC<Props> = ({
     return res
   }, [payload, letters])
   return (
-    <div>
-      {payload.map(tool => (
-        <div
-          key={tool.id}
-          ref={(el) => {
-            const letter = firstLetterToolIds[tool.id]
-            if (letter)
-              toolRefs.current[letter] = el
-          }}
-        >
-          <Tool
-            payload={tool}
-            viewType={ViewType.flat}
-            isShowLetterIndex={isShowLetterIndex}
-            hasSearchText={hasSearchText}
-            onSelect={onSelect}
-            selectedTools={selectedTools}
-          />
-        </div>
-      ))}
+    <div className='flex w-full'>
+      <div className='mr-1 grow'>
+        {payload.map(tool => (
+          <div
+            key={tool.id}
+            ref={(el) => {
+              const letter = firstLetterToolIds[tool.id]
+              if (letter)
+                toolRefs.current[letter] = el
+            }}
+          >
+            <Tool
+              payload={tool}
+              viewType={ViewType.flat}
+              hasSearchText={hasSearchText}
+              onSelect={onSelect}
+              canNotSelectMultiple={canNotSelectMultiple}
+              onSelectMultiple={onSelectMultiple}
+              selectedTools={selectedTools}
+              canChooseMCPTool={canChooseMCPTool}
+            />
+          </div>
+        ))}
+      </div>
+      {isShowLetterIndex && indexBar}
     </div>
   )
 }

web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx

@@ -12,7 +12,10 @@ type Props = {
   toolList: ToolWithProvider[]
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }
 
 const Item: FC<Props> = ({
@@ -20,7 +23,10 @@ const Item: FC<Props> = ({
   toolList,
   hasSearchText,
   onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
   selectedTools,
+  canChooseMCPTool,
 }) => {
   return (
     <div>
@@ -36,7 +42,10 @@ const Item: FC<Props> = ({
             isShowLetterIndex={false}
             hasSearchText={hasSearchText}
             onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
             selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
           />
         ))}
       </div>

web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx

@@ -12,14 +12,20 @@ type Props = {
   payload: Record<string, ToolWithProvider[]>
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }
 
 const ToolListTreeView: FC<Props> = ({
   payload,
   hasSearchText,
   onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
   selectedTools,
+  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
   const getI18nGroupName = useCallback((name: string) => {
@@ -46,7 +52,10 @@ const ToolListTreeView: FC<Props> = ({
           toolList={payload[groupName]}
           hasSearchText={hasSearchText}
           onSelect={onSelect}
+          canNotSelectMultiple={canNotSelectMultiple}
+          onSelectMultiple={onSelectMultiple}
           selectedTools={selectedTools}
+          canChooseMCPTool={canChooseMCPTool}
         />
       ))}
     </div>

web/app/components/workflow/block-selector/tool/tool.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import cn from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useGetLanguage } from '@/context/i18n'
@@ -13,36 +13,108 @@ import { ViewType } from '../view-type-select'
 import ActionItem from './action-item'
 import BlockIcon from '../../block-icon'
 import { useTranslation } from 'react-i18next'
+import { useHover } from 'ahooks'
+import McpToolNotSupportTooltip from '../../nodes/_base/components/mcp-tool-not-support-tooltip'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
 
 type Props = {
   className?: string
   payload: ToolWithProvider
   viewType: ViewType
-  isShowLetterIndex: boolean
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }
 
 const Tool: FC<Props> = ({
   className,
   payload,
   viewType,
-  isShowLetterIndex,
   hasSearchText,
   onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
   selectedTools,
+  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
   const isFlatView = viewType === ViewType.flat
+  const notShowProvider = payload.type === CollectionType.workflow
   const actions = payload.tools
-  const hasAction = true // Now always support actions
+  const hasAction = !notShowProvider
   const [isFold, setFold] = React.useState<boolean>(true)
-  const getIsDisabled = (tool: ToolType) => {
+  const ref = useRef(null)
+  const isHovering = useHover(ref)
+  const isMCPTool = payload.type === CollectionType.mcp
+  const isShowCanNotChooseMCPTip = !canChooseMCPTool && isMCPTool
+  const getIsDisabled = useCallback((tool: ToolType) => {
     if (!selectedTools || !selectedTools.length) return false
-    return selectedTools.some(selectedTool => selectedTool.provider_name === payload.name && selectedTool.tool_name === tool.name)
-  }
+    return selectedTools.some(selectedTool => (selectedTool.provider_name === payload.name || selectedTool.provider_name === payload.id) && selectedTool.tool_name === tool.name)
+  }, [payload.id, payload.name, selectedTools])
+
+  const totalToolsNum = actions.length
+  const selectedToolsNum = actions.filter(action => getIsDisabled(action)).length
+  const isAllSelected = selectedToolsNum === totalToolsNum
+
+  const notShowProviderSelectInfo = useMemo(() => {
+    if (isAllSelected) {
+      return (
+        <span className='system-xs-regular text-text-tertiary'>
+          {t('tools.addToolModal.added')}
+        </span>
+      )
+    }
+  }, [isAllSelected, t])
+  const selectedInfo = useMemo(() => {
+    if (isHovering && !isAllSelected) {
+      return (
+        <span className='system-xs-regular text-components-button-secondary-accent-text'
+          onClick={(e) => {
+            onSelectMultiple?.(BlockEnum.Tool, actions.filter(action => !getIsDisabled(action)).map((tool) => {
+              const params: Record<string, string> = {}
+              if (tool.parameters) {
+                tool.parameters.forEach((item) => {
+                  params[item.name] = ''
+                })
+              }
+              return {
+                provider_id: payload.id,
+                provider_type: payload.type,
+                provider_name: payload.name,
+                tool_name: tool.name,
+                tool_label: tool.label[language],
+                tool_description: tool.description[language],
+                title: tool.label[language],
+                is_team_authorization: payload.is_team_authorization,
+                output_schema: tool.output_schema,
+                paramSchemas: tool.parameters,
+                params,
+              }
+            }))
+          }}
+        >
+          {t('workflow.tabs.addAll')}
+        </span>
+      )
+    }
+
+    if (selectedToolsNum === 0)
+      return <></>
+
+    return (
+      <span className='system-xs-regular text-text-tertiary'>
+        {isAllSelected
+          ? t('workflow.tabs.allAdded')
+          : `${selectedToolsNum} / ${totalToolsNum}`
+        }
+      </span>
+    )
+  }, [actions, getIsDisabled, isAllSelected, isHovering, language, onSelectMultiple, payload.id, payload.is_team_authorization, payload.name, payload.type, selectedToolsNum, t, totalToolsNum])
+
   useEffect(() => {
     if (hasSearchText && isFold) {
       setFold(false)
@@ -71,59 +143,73 @@ const Tool: FC<Props> = ({
   return (
     <div
       key={payload.id}
-      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
+      className={cn('mb-1 last-of-type:mb-0')}
+      ref={ref}
     >
       <div className={cn(className)}>
         <div
-          className='flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+          className='group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
           onClick={() => {
-            if (hasAction)
+            if (hasAction) {
               setFold(!isFold)
+              return
+            }
 
-            // Now always support actions
-            // if (payload.parameters) {
-            //   payload.parameters.forEach((item) => {
-            //     params[item.name] = ''
-            //   })
-            // }
-            // onSelect(BlockEnum.Tool, {
-            //   provider_id: payload.id,
-            //   provider_type: payload.type,
-            //   provider_name: payload.name,
-            //   tool_name: payload.name,
-            //   tool_label: payload.label[language],
-            //   title: payload.label[language],
-            //   params: {},
-            // })
+            const tool = actions[0]
+            const params: Record<string, string> = {}
+            if (tool.parameters) {
+              tool.parameters.forEach((item) => {
+                params[item.name] = ''
+              })
+            }
+            onSelect(BlockEnum.Tool, {
+              provider_id: payload.id,
+              provider_type: payload.type,
+              provider_name: payload.name,
+              tool_name: tool.name,
+              tool_label: tool.label[language],
+              tool_description: tool.description[language],
+              title: tool.label[language],
+              is_team_authorization: payload.is_team_authorization,
+              output_schema: tool.output_schema,
+              paramSchemas: tool.parameters,
+              params,
+            })
           }}
         >
-          <div className='flex h-8 grow items-center'>
+          <div className={cn('flex h-8 grow items-center', isShowCanNotChooseMCPTip && 'opacity-30')}>
             <BlockIcon
               className='shrink-0'
               type={BlockEnum.Tool}
               toolIcon={payload.icon}
             />
-            <div className='ml-2 w-0 flex-1 grow truncate text-sm text-text-primary'>{payload.label[language]}</div>
+            <div className='ml-2 flex w-0 grow items-center text-sm text-text-primary'>
+              <span className='max-w-[250px] truncate'>{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
+              {isFlatView && groupName && (
+                <span className='system-xs-regular ml-2 shrink-0 text-text-quaternary'>{groupName}</span>
+              )}
+              {isMCPTool && <Mcp className='ml-2 size-3.5 shrink-0 text-text-quaternary' />}
+            </div>
           </div>
 
-          <div className='flex items-center'>
-            {isFlatView && (
-              <div className='system-xs-regular text-text-tertiary'>{groupName}</div>
-            )}
+          <div className='ml-2 flex items-center'>
+            {!isShowCanNotChooseMCPTip && !canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)}
+            {isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
             {hasAction && (
-              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} />
+              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
             )}
           </div>
         </div>
 
-        {hasAction && !isFold && (
+        {!notShowProvider && hasAction && !isFold && (
           actions.map(action => (
             <ActionItem
               key={action.name}
               provider={payload}
               payload={action}
               onSelect={onSelect}
-              disabled={getIsDisabled(action)}
+              disabled={getIsDisabled(action) || isShowCanNotChooseMCPTip}
+              isAdded={getIsDisabled(action)}
             />
           ))
         )}