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/tools/add-tool-modal/empty.tsx

@@ -1,19 +1,48 @@
 'use client'
-import { useSearchParams } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
-const Empty = () => {
+import { ToolTypeEnum } from '../../workflow/block-selector/types'
+import { RiArrowRightUpLine } from '@remixicon/react'
+import Link from 'next/link'
+import cn from '@/utils/classnames'
+import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
+type Props = {
+  type?: ToolTypeEnum
+  isAgent?: boolean
+}
+
+const getLink = (type?: ToolTypeEnum) => {
+  switch (type) {
+    case ToolTypeEnum.Custom:
+      return '/tools?category=api'
+    case ToolTypeEnum.MCP:
+      return '/tools?category=mcp'
+    default:
+      return '/tools?category=api'
+  }
+}
+const Empty = ({
+  type,
+  isAgent,
+}: Props) => {
   const { t } = useTranslation()
-  const searchParams = useSearchParams()
+
+  const hasLink = type && [ToolTypeEnum.Custom, ToolTypeEnum.MCP].includes(type)
+  const Comp = (hasLink ? Link : 'div') as any
+  const linkProps = hasLink ? { href: getLink(type), target: '_blank' } : {}
+  const renderType = isAgent ? 'agent' : type
+  const hasTitle = t(`tools.addToolModal.${renderType}.title`) !== `tools.addToolModal.${renderType}.title`
 
   return (
-    <div className='flex flex-col items-center'>
-      <div className="h-[149px] w-[163px] shrink-0 bg-[url('~@/app/components/tools/add-tool-modal/empty.png')] bg-cover bg-no-repeat"></div>
-      <div className='mb-1 text-[13px] font-medium leading-[18px] text-text-primary'>
-        {t(`tools.addToolModal.${searchParams.get('category') === 'workflow' ? 'emptyTitle' : 'emptyTitleCustom'}`)}
-      </div>
-      <div className='text-[13px] leading-[18px] text-text-tertiary'>
-        {t(`tools.addToolModal.${searchParams.get('category') === 'workflow' ? 'emptyTip' : 'emptyTipCustom'}`)}
+    <div className='flex h-[336px] flex-col items-center justify-center'>
+      <NoToolPlaceholder />
+      <div className='mb-1 mt-2 text-[13px] font-medium leading-[18px] text-text-primary'>
+        {hasTitle ? t(`tools.addToolModal.${renderType}.title`) : 'No tools available'}
       </div>
+      {(!isAgent && hasTitle) && (
+        <Comp className={cn('flex items-center text-[13px] leading-[18px] text-text-tertiary', hasLink && 'cursor-pointer hover:text-text-accent')} {...linkProps}>
+          {t(`tools.addToolModal.${renderType}.tip`)} {hasLink && <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />}
+        </Comp>
+      )}
     </div>
   )
 }