mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-14 03:55:52 +08:00
mcp card
This commit is contained in:
jZonG
parent
2dbad07433
commit
ec31bbc24a
12
web/app/components/tools/mcp/hooks.ts
Normal file
12
web/app/components/tools/mcp/hooks.ts
Normal file
@ -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 }
|
||||
}
|
||||
@ -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) => (
|
||||
<div key={index}></div>
|
||||
{filteredList.map(provider => (
|
||||
<MCPCard
|
||||
key={provider.id}
|
||||
data={provider}
|
||||
currentProvider={currentProvider}
|
||||
handleSelect={setCurrentProvider}
|
||||
/>
|
||||
))}
|
||||
{!list.length && renderDefaultCard()}
|
||||
</div>
|
||||
|
||||
@ -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'],
|
||||
update_elapsed_time: 1742892299,
|
||||
tools: [],
|
||||
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,
|
||||
},
|
||||
]
|
||||
|
||||
72
web/app/components/tools/mcp/provider-card.tsx
Normal file
72
web/app/components/tools/mcp/provider-card.tsx
Normal file
@ -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
|
||||
@ -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',
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -158,6 +158,10 @@ const translation = {
|
||||
cardTitle: '添加 MCP 服务 (HTTP)',
|
||||
cardLink: '了解更多关于 MCP 服务集成的信息',
|
||||
},
|
||||
noConfigured: '未配置',
|
||||
updateTime: '更新于',
|
||||
toolsCount: '{{count}} 个工具',
|
||||
noTools: '没有可用的工具',
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user