ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MCP new card

Browse Source
pull/22091/head
jZonG 1 year ago
parent 4123c0a960
commit d4b7a36182
6 changed files with 94 additions and 15 deletions
Show Stats Download Patch File Download Diff File

57
web/app/components/tools/mcp/create-card.tsx
Unescape Escape View File

@ -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

14
web/app/components/tools/mcp/index.tsx
Unescape Escape View File

@ -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>
</>

2
web/app/components/tools/provider-list.tsx
Unescape Escape View File

@ -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',

24
web/app/components/tools/provider/custom-create-card.tsx
Unescape Escape View File

@ -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>

6
web/i18n/en-US/tools.ts
Unescape Escape View File

@ -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

6
web/i18n/zh-Hans/tools.ts
Unescape Escape View File

@ -153,6 +153,12 @@ const translation = {
toolNameUsageTip: '工具调用名称，用于 Agent 推理和提示词',
copyToolName: '复制名称',
noTools: '没有工具',
mcp: {
create: {
cardTitle: '添加 MCP 服务 (HTTP)',
cardLink: '了解更多关于 MCP 服务集成的信息',
},
},
}
export default translation

Write Preview
Loading…
Cancel
Save