feat: add mcp tab and merge tool with server ts define

web/app/components/tools/mcp/mock.ts

@@ -9,6 +9,10 @@ export const listData = [
     is_team_authorization: true,
     tools: ['aaa', 'bbb'],
     update_elapsed_time: 1744793369,
+    label: {
+      en_US: 'GOGOGO',
+      zh_Hans: 'GOGOGO',
+    },
   },
   {
     id: 'fdjklajfkljadslf222',
@@ -20,6 +24,10 @@ export const listData = [
     is_team_authorization: false,
     tools: [],
     update_elapsed_time: 1744793369,
+    label: {
+      en_US: 'GOGOGO2',
+      zh_Hans: 'GOGOGO2',
+    },
   },
   {
     id: 'fdjklajfkljadslf333',
@@ -31,5 +39,9 @@ export const listData = [
     is_team_authorization: true,
     tools: ['aaa', 'bbb'],
     update_elapsed_time: 1744793369,
+    label: {
+      en_US: 'GOGOGO3',
+      zh_Hans: 'GOGOGO3',
+    },
   },
 ]

web/app/components/tools/mcp/provider-card.tsx

@@ -9,13 +9,13 @@ import { RiHammerFill } from '@remixicon/react'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useFormatTimeFromNow } from './hooks'
-import type { MCPProvider } from '@/app/components/tools/types'
+import type { ToolWithProvider } from '../../workflow/types'
 import cn from '@/utils/classnames'
 
 type Props = {
-  currentProvider?: MCPProvider
+  currentProvider?: ToolWithProvider
-  data: MCPProvider
+  data: ToolWithProvider
-  handleSelect: (provider: MCPProvider) => void
+  handleSelect: (provider: ToolWithProvider) => void
 }
 
 const MCPCard = ({
@@ -27,7 +27,7 @@ const MCPCard = ({
   const { formatTimeFromNow } = useFormatTimeFromNow()
   // const { locale } = useContext(I18n)
   // const language = getLanguage(locale)
-//   const { isCurrentWorkspaceManager } = useAppContext()
+  //   const { isCurrentWorkspaceManager } = useAppContext()
 
   return (
     <div
@@ -52,7 +52,7 @@ const MCPCard = ({
               )}
             </div>
             <div className='system-xs-regular text-divider-deep'>/</div>
-            <div className='system-xs-regular truncate text-text-tertiary'>{`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.update_elapsed_time * 1000)}`}</div>
+            <div className='system-xs-regular truncate text-text-tertiary'>{`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.update_elapsed_time! * 1000)}`}</div>
           </div>
         </div>
       </div>

web/app/components/tools/mcp/provider-detail.tsx

@@ -2,11 +2,11 @@
 import React from 'react'
 import type { FC } from 'react'
 import Drawer from '@/app/components/base/drawer'
-import type { MCPProvider } from '@/app/components/tools/types'
 import cn from '@/utils/classnames'
+import type { ToolWithProvider } from '../../workflow/types'
 
 type Props = {
-  detail?: MCPProvider
+  detail?: ToolWithProvider
   onUpdate: () => void
   onHide: () => void
 }

web/app/components/tools/types.ts

@@ -51,6 +51,9 @@ export type Collection = {
   labels: string[]
   plugin_id?: string
   letter?: string
+  // MCP Server
+  server_url?: string
+  update_elapsed_time?: number
 }
 
 export type ToolParameter = {
@@ -169,15 +172,3 @@ export type WorkflowToolProviderResponse = {
   }
   privacy_policy: string
 }
-
-export type MCPProvider = {
-  id: string
-  author: string
-  name: string
-  icon: string | Emoji
-  server_url: string
-  type: CollectionType
-  is_team_authorization: boolean
-  tools: string[]
-  update_elapsed_time: number
-}

web/app/components/workflow/block-selector/all-tools.tsx

@@ -31,6 +31,7 @@ type AllToolsProps = {
   buildInTools: ToolWithProvider[]
   customTools: ToolWithProvider[]
   workflowTools: ToolWithProvider[]
+  mcpTools: ToolWithProvider[]
   onSelect: OnSelectBlock
   supportAddCustomTool?: boolean
   onAddedCustomTool?: () => void
@@ -49,6 +50,7 @@ const AllTools = ({
   buildInTools,
   workflowTools,
   customTools,
+  mcpTools = [],
   supportAddCustomTool,
   onShowAddCustomCollectionModal,
   selectedTools,
@@ -64,13 +66,15 @@ const AllTools = ({
   const tools = useMemo(() => {
     let mergedTools: ToolWithProvider[] = []
     if (activeTab === ToolTypeEnum.All)
-      mergedTools = [...buildInTools, ...customTools, ...workflowTools]
+      mergedTools = [...buildInTools, ...customTools, ...workflowTools, ...mcpTools]
     if (activeTab === ToolTypeEnum.BuiltIn)
       mergedTools = buildInTools
     if (activeTab === ToolTypeEnum.Custom)
       mergedTools = customTools
     if (activeTab === ToolTypeEnum.Workflow)
       mergedTools = workflowTools
+    if (activeTab === ToolTypeEnum.MCP)
+      mergedTools = mcpTools
 
     if (!hasFilter)
       return mergedTools.filter(toolWithProvider => toolWithProvider.tools.length > 0)
@@ -80,7 +84,7 @@ const AllTools = ({
         return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) || tool.name.toLowerCase().includes(searchText.toLowerCase())
       })
     })
-  }, [activeTab, buildInTools, customTools, workflowTools, searchText, language, hasFilter])
+  }, [activeTab, buildInTools, customTools, workflowTools, mcpTools, searchText, language, hasFilter])
 
   const {
     queryPluginsWithDebounced: fetchPlugins,

web/app/components/workflow/block-selector/hooks.ts

@@ -51,5 +51,9 @@ export const useToolTabs = () => {
       key: ToolTypeEnum.Workflow,
       name: t('workflow.tabs.workflowTool'),
     },
+    {
+      key: ToolTypeEnum.MCP,
+      name: 'MCP',
+    },
   ]
 }

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

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
@@ -31,6 +31,7 @@ const Tabs: FC<TabsProps> = ({
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
 
   return (
     <div onClick={e => e.stopPropagation()}>
@@ -75,6 +76,7 @@ const Tabs: FC<TabsProps> = ({
             buildInTools={buildInTools || []}
             customTools={customTools || []}
             workflowTools={workflowTools || []}
+            mcpTools={mcpTools || []}
           />
         )
       }

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

@@ -23,7 +23,7 @@ import {
 } from '@/service/tools'
 import type { CustomCollectionBackend } from '@/app/components/tools/types'
 import Toast from '@/app/components/base/toast'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -61,6 +61,7 @@ const ToolPicker: FC<Props> = ({
   const { data: customTools } = useAllCustomTools()
   const invalidateCustomTools = useInvalidateAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
 
   const { builtinToolList, customToolList, workflowToolList } = useMemo(() => {
     if (scope === 'plugins') {
@@ -162,6 +163,7 @@ const ToolPicker: FC<Props> = ({
             buildInTools={builtinToolList || []}
             customTools={customToolList || []}
             workflowTools={workflowToolList || []}
+            mcpTools={mcpTools || []}
             supportAddCustomTool={supportAddCustomTool}
             onAddedCustomTool={handleAddedCustomTool}
             onShowAddCustomCollectionModal={showEditCustomCollectionModal}

web/app/components/workflow/block-selector/types.ts

@@ -8,6 +8,7 @@ export enum ToolTypeEnum {
   BuiltIn = 'built-in',
   Custom = 'custom',
   Workflow = 'workflow',
+  MCP = 'mcp',
 }
 
 export enum BlockClassificationEnum {

web/service/use-tools.ts

@@ -4,7 +4,6 @@ import type {
   Tool,
 } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-import type { MCPProvider } from '@/app/components/tools/types'
 import { useInvalid } from './use-base'
 import {
   useMutation,
@@ -66,11 +65,11 @@ export const useInvalidateAllWorkflowTools = () => {
 
 const useAllMCPToolsKey = [NAME_SPACE, 'MCPTools']
 export const useAllMCPTools = () => {
-  return useQuery<MCPProvider[]>({
+  return useQuery<ToolWithProvider[]>({
     queryKey: useAllMCPToolsKey,
-    // queryFn: () => get<MCPProvider[]>('/workspaces/current/tools/mcp'),
+    // queryFn: () => get<ToolWithProvider[]>('/workspaces/current/tools/mcp'),
     queryFn: () => {
-      return listData as unknown as MCPProvider[]
+      return listData as unknown as ToolWithProvider[]
     },
   })
 }