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/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'
@@ -16,6 +16,7 @@ export type TabsProps = {
   tags: string[]
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   availableBlocksTypes?: BlockEnum[]
+  filterElem: React.ReactNode
   noBlocks?: boolean
 }
 const Tabs: FC<TabsProps> = ({
@@ -25,26 +26,28 @@ const Tabs: FC<TabsProps> = ({
   searchText,
   onSelect,
   availableBlocksTypes,
+  filterElem,
   noBlocks,
 }) => {
   const tabs = useTabs()
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
 
   return (
     <div onClick={e => e.stopPropagation()}>
       {
         !noBlocks && (
-          <div className='flex items-center border-b-[0.5px] border-divider-subtle px-3'>
+          <div className='relative flex bg-background-section-burn pl-1 pt-1'>
             {
               tabs.map(tab => (
                 <div
                   key={tab.key}
                   className={cn(
-                    'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
+                    'system-sm-medium relative mr-0.5 flex h-8 cursor-pointer  items-center rounded-t-lg px-3 ',
                     activeTab === tab.key
-                      ? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
+                      ? 'sm-no-bottom cursor-default bg-components-panel-bg text-text-accent'
                       : 'text-text-tertiary',
                   )}
                   onClick={() => onActiveTabChange(tab.key)}
@@ -56,25 +59,30 @@ const Tabs: FC<TabsProps> = ({
           </div>
         )
       }
+      {filterElem}
       {
         activeTab === TabsEnum.Blocks && !noBlocks && (
-          <Blocks
-            searchText={searchText}
-            onSelect={onSelect}
-            availableBlocksTypes={availableBlocksTypes}
-          />
+          <div className='border-t border-divider-subtle'>
+            <Blocks
+              searchText={searchText}
+              onSelect={onSelect}
+              availableBlocksTypes={availableBlocksTypes}
+            />
+          </div>
         )
       }
       {
         activeTab === TabsEnum.Tools && (
           <AllTools
-            className='w-[315px]'
             searchText={searchText}
             onSelect={onSelect}
             tags={tags}
+            canNotSelectMultiple
             buildInTools={buildInTools || []}
             customTools={customTools || []}
             workflowTools={workflowTools || []}
+            mcpTools={mcpTools || []}
+            canChooseMCPTool
           />
         )
       }