From d4b7a361821949c2dc6e2952bb8a5125b137d605 Mon Sep 17 00:00:00 2001
From: jZonG <jzongcode@gmail.com>
Date: Wed, 7 May 2025 20:28:34 +0800
Subject: [PATCH] MCP new card

---
 web/app/components/tools/mcp/create-card.tsx  | 57 +++++++++++++++++++
 web/app/components/tools/mcp/index.tsx        | 14 ++++-
 web/app/components/tools/provider-list.tsx    |  2 +-
 .../tools/provider/custom-create-card.tsx     | 24 ++++----
 web/i18n/en-US/tools.ts                       |  6 ++
 web/i18n/zh-Hans/tools.ts                     |  6 ++
 6 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100644 web/app/components/tools/mcp/create-card.tsx

diff --git a/web/app/components/tools/mcp/create-card.tsx b/web/app/components/tools/mcp/create-card.tsx
new file mode 100644
index 0000000000..51cd03ba61
--- /dev/null
+++ b/web/app/components/tools/mcp/create-card.tsx
@@ -0,0 +1,57 @@
+'use client'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import {
+  RiAddCircleFill,
+  RiArrowRightUpLine,
+  RiBookOpenLine,
+} from '@remixicon/react'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import { useAppContext } from '@/context/app-context'
+
+type Props = {
+  handleCreate: () => void
+}
+
+const NewMCPCard = ({ handleCreate }: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  const linkUrl = useMemo(() => {
+    // TODO help link
+    if (language.startsWith('zh_'))
+      return 'https://docs.dify.ai/zh-hans/guides/tools#ru-he-chuang-jian-zi-ding-yi-gong-ju'
+    return 'https://docs.dify.ai/en/guides/tools#how-to-create-custom-tools'
+  }, [language])
+
+  const [showModal, setShowModal] = useState(false)
+
+  return (
+    <>
+      {isCurrentWorkspaceManager && (
+        <div className='col-span-1 flex min-h-[108px] cursor-pointer flex-col rounded-xl bg-background-default-dimmed transition-all duration-200 ease-in-out'>
+          <div className='group grow rounded-t-xl' onClick={() => setShowModal(true)}>
+            <div className='flex shrink-0 items-center p-4 pb-3'>
+              <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover'>
+                <RiAddCircleFill className='h-4 w-4 text-text-quaternary group-hover:text-text-accent'/>
+              </div>
+              <div className='system-md-semibold ml-3 text-text-secondary group-hover:text-text-accent'>{t('tools.mcp.create.cardTitle')}</div>
+            </div>
+          </div>
+          <div className='rounded-b-xl border-t-[0.5px] border-divider-subtle px-4 py-3 text-text-tertiary hover:text-text-accent'>
+            <a href={linkUrl} target='_blank' rel='noopener noreferrer' className='flex items-center space-x-1'>
+              <RiBookOpenLine className='h-3 w-3 shrink-0' />
+              <div className='system-xs-regular grow truncate' title={t('tools.mcp.create.cardLink') || ''}>{t('tools.mcp.create.cardLink')}</div>
+              <RiArrowRightUpLine className='h-3 w-3 shrink-0' />
+            </a>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+export default NewMCPCard
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 930be386a1..0e2c733a90 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -1,5 +1,7 @@
 'use client'
 import React from 'react'
+import NewMCPCard from './create-card'
+import cn from '@/utils/classnames'
 
 type Props = {
   searchText: string
@@ -8,10 +10,18 @@ type Props = {
 const MCPList = ({
   searchText,
 }: Props) => {
+  const handleCreate = () => {
+    console.log('handleCreate')
+  }
   return (
     <>
-      <div>
-        MCP
+      <div
+        className={cn(
+          'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+          // 'overflow-hidden',
+        )}
+      >
+        <NewMCPCard handleCreate={handleCreate} />
         {searchText}
       </div>
     </>
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 55c3c2212d..d5ef0f0130 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -97,7 +97,7 @@ const ProviderList = () => {
               />
             </div>
           </div>
-          {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && (
+          {(filteredCollectionList.length > 0 || (activeTab !== 'builtin' && activeTab !== 'mcp')) && (
             <div className={cn(
               'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
               !filteredCollectionList.length && activeTab === 'workflow' && 'grow',
diff --git a/web/app/components/tools/provider/custom-create-card.tsx b/web/app/components/tools/provider/custom-create-card.tsx
index 6dd268cb3a..830d423e47 100644
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -3,13 +3,13 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import {
-  RiAddLine,
+  RiAddCircleFill,
+  RiArrowRightUpLine,
+  RiBookOpenLine,
 } from '@remixicon/react'
 import type { CustomCollectionBackend } from '../types'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import { createCustomCollection } from '@/service/tools'
 import Toast from '@/app/components/base/toast'
@@ -45,20 +45,20 @@ const Contribute = ({ onRefreshData }: Props) => {
   return (
     <>
       {isCurrentWorkspaceManager && (
-        <div className='col-span-1 flex min-h-[135px] cursor-pointer flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-on-panel-item-bg transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg'>
-          <div className='group grow rounded-t-xl hover:bg-background-body' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+        <div className='col-span-1 flex min-h-[135px] cursor-pointer flex-col rounded-xl bg-background-default-dimmed transition-all duration-200 ease-in-out'>
+          <div className='group grow rounded-t-xl' onClick={() => setIsShowEditCustomCollectionModal(true)}>
             <div className='flex shrink-0 items-center p-4 pb-3'>
-              <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover'>
-                <RiAddLine className='h-4 w-4 text-text-tertiary group-hover:text-text-accent'/>
+              <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover'>
+                <RiAddCircleFill className='h-4 w-4 text-text-quaternary group-hover:text-text-accent'/>
               </div>
-              <div className='ml-3 text-sm font-semibold leading-5 text-text-primary group-hover:text-text-accent'>{t('tools.createCustomTool')}</div>
+              <div className='system-md-semibold ml-3 text-text-secondary group-hover:text-text-accent'>{t('tools.createCustomTool')}</div>
             </div>
           </div>
-          <div className='rounded-b-xl border-t-[0.5px] border-divider-regular px-4 py-3 text-text-tertiary hover:bg-background-body hover:text-text-accent'>
+          <div className='rounded-b-xl border-t-[0.5px] border-divider-subtle px-4 py-3 text-text-tertiary hover:text-text-accent'>
             <a href={linkUrl} target='_blank' rel='noopener noreferrer' className='flex items-center space-x-1'>
-              <BookOpen01 className='h-3 w-3 shrink-0' />
-              <div className='grow truncate text-xs font-normal leading-[18px]' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
-              <ArrowUpRight className='h-3 w-3 shrink-0' />
+              <RiBookOpenLine className='h-3 w-3 shrink-0' />
+              <div className='system-xs-regular grow truncate' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
+              <RiArrowRightUpLine className='h-3 w-3 shrink-0' />
             </a>
           </div>
         </div>
diff --git a/web/i18n/en-US/tools.ts b/web/i18n/en-US/tools.ts
index f624fac945..550989b58a 100644
--- a/web/i18n/en-US/tools.ts
+++ b/web/i18n/en-US/tools.ts
@@ -153,6 +153,12 @@ const translation = {
   toolNameUsageTip: 'Tool call name for agent reasoning and prompting',
   copyToolName: 'Copy Name',
   noTools: 'No tools found',
+  mcp: {
+    create: {
+      cardTitle: 'Add MCP Server (HTTP)',
+      cardLink: 'Learn more about MCP server integration',
+    },
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/tools.ts b/web/i18n/zh-Hans/tools.ts
index 98e7b6e271..b1a9978940 100644
--- a/web/i18n/zh-Hans/tools.ts
+++ b/web/i18n/zh-Hans/tools.ts
@@ -153,6 +153,12 @@ const translation = {
   toolNameUsageTip: '工具调用名称，用于 Agent 推理和提示词',
   copyToolName: '复制名称',
   noTools: '没有工具',
+  mcp: {
+    create: {
+      cardTitle: '添加 MCP 服务 (HTTP)',
+      cardLink: '了解更多关于 MCP 服务集成的信息',
+    },
+  },
 }
 
 export default translation