mcp card

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

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs'
+import { useCallback } from 'react'
+import { useI18N } from '@/context/i18n'
+
+export const useFormatTimeFromNow = () => {
+  const { locale } = useI18N()
+  const formatTimeFromNow = useCallback((time: number) => {
+    return dayjs(time).locale(locale === 'zh-Hans' ? 'zh-cn' : locale).fromNow()
+  }, [locale])
+
+  return { formatTimeFromNow }
+}

web/app/components/tools/mcp/index.tsx

@@ -1,7 +1,9 @@
 'use client'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import NewMCPCard from './create-card'
+import MCPCard from './provider-card'
 import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
+import type { MCPProvider } from '@/app/components/tools/types'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -22,12 +24,14 @@ const MCPList = ({
     })
   }, [list, searchText])
 
+  const [currentProvider, setCurrentProvider] = useState<MCPProvider>()
+
   function renderDefaultCard() {
     const defaultCards = Array.from({ length: 36 }, (_, index) => (
       <div
         key={index}
         className={cn(
-          'inline-flex h-[108px] rounded-xl bg-background-default-lighter opacity-10',
+          'inline-flex h-[111px] rounded-xl bg-background-default-lighter opacity-10',
           index < 4 && 'opacity-60',
           index >= 4 && index < 8 && 'opacity-50',
           index >= 8 && index < 12 && 'opacity-40',
@@ -44,13 +48,18 @@ const MCPList = ({
     <>
       <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',
+          'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
           !list.length && 'h-[calc(100vh_-_136px)] overflow-hidden',
         )}
       >
         <NewMCPCard handleCreate={invalidateMCPList} />
-        {filteredList.map((item, index) => (
+        {filteredList.map(provider => (
-          <div key={index}></div>
+          <MCPCard
+            key={provider.id}
+            data={provider}
+            currentProvider={currentProvider}
+            handleSelect={setCurrentProvider}
+          />
         ))}
         {!list.length && renderDefaultCard()}
       </div>

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

@@ -1,35 +1,35 @@
 export const listData = [
   {
-    id: 'fdjklajfkljadslf',
+    id: 'fdjklajfkljadslf111',
     author: 'KVOJJJin',
     name: 'GOGOGO',
     icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
     server_url: 'https://mcp.composio.dev/notion/****/abc',
     type: 'mcp',
-    is_team_authorization: false,
+    is_team_authorization: true,
     tools: ['aaa', 'bbb'],
-    update_elapsed_time: 1742892299,
+    update_elapsed_time: 1744793369,
   },
   {
-    id: 'fdjklajfkljadslf',
+    id: 'fdjklajfkljadslf222',
     author: 'KVOJJJin',
     name: 'GOGOGO2',
     icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
     server_url: 'https://mcp.composio.dev/notion/****/abc',
     type: 'mcp',
     is_team_authorization: false,
-    tools: ['aaa', 'bbb'],
+    tools: [],
-    update_elapsed_time: 1742892299,
+    update_elapsed_time: 1744793369,
   },
   {
-    id: 'fdjklajfkljadslf',
+    id: 'fdjklajfkljadslf333',
     author: 'KVOJJJin',
     name: 'GOGOGO3',
     icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
     server_url: 'https://mcp.composio.dev/notion/****/abc',
     type: 'mcp',
-    is_team_authorization: false,
+    is_team_authorization: true,
     tools: ['aaa', 'bbb'],
-    update_elapsed_time: 1742892299,
+    update_elapsed_time: 1744793369,
   },
 ]

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

@@ -0,0 +1,72 @@
+'use client'
+// import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+// import { useContext } from 'use-context-selector'
+// import I18n from '@/context/i18n'
+// import { getLanguage } from '@/i18n/language'
+// import { useAppContext } from '@/context/app-context'
+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 cn from '@/utils/classnames'
+
+type Props = {
+  currentProvider?: MCPProvider
+  data: MCPProvider
+  handleSelect: (provider: MCPProvider) => void
+}
+
+const MCPCard = ({
+  currentProvider,
+  data,
+  handleSelect,
+}: Props) => {
+  const { t } = useTranslation()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+  // const { locale } = useContext(I18n)
+  // const language = getLanguage(locale)
+//   const { isCurrentWorkspaceManager } = useAppContext()
+
+  return (
+    <div
+      onClick={() => handleSelect(data)}
+      className={cn(
+        'relative flex cursor-pointer flex-col rounded-xl border-[1.5px] border-transparent bg-components-card-bg shadow-xs hover:bg-components-card-bg-alt hover:shadow-md',
+        currentProvider?.id === data.id && 'border-components-option-card-option-selected-border bg-components-card-bg-alt',
+      )}
+    >
+      <div className='group flex grow items-center gap-3 rounded-t-xl p-4'>
+        <Icon className='shrink-0' src={data.icon} />
+        <div className='grow'>
+          <div className='system-md-semibold mb-1 truncate text-text-secondary' title={data.name}>{data.name}</div>
+          <div className='flex items-center gap-2'>
+            <div className='flex items-center gap-1'>
+              <RiHammerFill className='h-3 w-3 shrink-0 text-text-quaternary' />
+              {data.tools.length > 0 && (
+                <div className='system-xs-regular grow text-text-tertiary'>{t('tools.mcp.toolsCount', { count: data.tools.length })}</div>
+              )}
+              {!data.tools.length && (
+                <div className='system-xs-regular grow text-text-tertiary'>{t('tools.mcp.noTools')}</div>
+              )}
+            </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>
+        </div>
+      </div>
+      <div className='flex items-center gap-1 rounded-b-xl pb-2.5 pl-4 pr-2.5 pt-1.5'>
+        <div className='system-xs-regular grow truncate text-text-tertiary' title={data.server_url}>{data.server_url}</div>
+        {data.is_team_authorization && <Indicator color='green' />}
+        {!data.is_team_authorization && (
+          <div className='system-xs-medium flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 text-util-colors-red-red-500'>
+            {t('tools.mcp.noConfigured')}
+            <Indicator color='red' />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+export default MCPCard

web/i18n/en-US/tools.ts

@@ -158,6 +158,10 @@ const translation = {
       cardTitle: 'Add MCP Server (HTTP)',
       cardLink: 'Learn more about MCP server integration',
     },
+    noConfigured: 'Unconfigured Server',
+    updateTime: 'Updated',
+    toolsCount: '{{count}} tools',
+    noTools: 'No tools available',
   },
 }
 

web/i18n/zh-Hans/tools.ts

@@ -158,6 +158,10 @@ const translation = {
       cardTitle: '添加 MCP 服务 (HTTP)',
       cardLink: '了解更多关于 MCP 服务集成的信息',
     },
+    noConfigured: '未配置',
+    updateTime: '更新于',
+    toolsCount: '{{count}} 个工具',
+    noTools: '没有可用的工具',
   },
 }