admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: the frontend part of mcp (#22131)

Browse Source 
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>
This commit is contained in:
Joel
2025-07-10 14:14:02 +08:00
committed by GitHub
parent 535fff62f3
commit 5375d9bb27
152 changed files with 6340 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
View File

@@ -17,10 +17,13 @@ import { ToolTipContent } from '@/app/components/base/tooltip/content'
import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
import cn from '@/utils/classnames'
import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
type Props = {
icon?: any
providerName?: string
isMCPTool?: boolean
providerShowName?: string
toolLabel?: string
showSwitch?: boolean
switchValue?: boolean
@@ -35,11 +38,14 @@ type Props = {
onInstall?: () => void
versionMismatch?: boolean
open: boolean
canChooseMCPTool?: boolean,
}
const ToolItem = ({
open,
icon,
isMCPTool,
providerShowName,
providerName,
toolLabel,
showSwitch,
@@ -54,11 +60,13 @@ const ToolItem = ({
isError,
errorTip,
versionMismatch,
canChooseMCPTool,
}: Props) => {
const { t } = useTranslation()
const providerNameText = providerName?.split('/').pop()
const providerNameText = isMCPTool ? providerShowName : providerName?.split('/').pop()
const isTransparent = uninstalled || versionMismatch || isError
const [isDeleting, setIsDeleting] = useState(false)
const isShowCanNotChooseMCPTip = isMCPTool && !canChooseMCPTool
return (
<div className={cn(
@@ -67,7 +75,7 @@ const ToolItem = ({
isDeleting && 'border-state-destructive-border shadow-xs hover:bg-state-destructive-hover',
)}>
{icon && (
<div className={cn('shrink-0', isTransparent && 'opacity-50')}>
<div className={cn('shrink-0', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
{typeof icon === 'string' && <div className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge bg-cover bg-center' style={{ backgroundImage: `url(${icon})` }} />}
{typeof icon !== 'string' && <AppIcon className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge' size='xs' icon={icon?.content} background={icon?.background} />}
</div>
@@ -75,18 +83,19 @@ const ToolItem = ({
{!icon && (
<div className={cn(
'flex h-7 w-7 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30',
)}>
<div className='flex h-5 w-5 items-center justify-center opacity-35'>
<Group className='text-text-tertiary' />
</div>
</div>
)}
<div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50')}>
<div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{providerNameText}</div>
<div className='system-xs-medium text-text-secondary'>{toolLabel}</div>
</div>
<div className='hidden items-center gap-1 group-hover:flex'>
{!noAuth && !isError && !uninstalled && !versionMismatch && (
{!noAuth && !isError && !uninstalled && !versionMismatch && !isShowCanNotChooseMCPTip && (
<ActionButton>
<RiEqualizer2Line className='h-4 w-4' />
</ActionButton>
@@ -103,7 +112,7 @@ const ToolItem = ({
<RiDeleteBinLine className='h-4 w-4' />
</div>
</div>
{!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
{!isError && !uninstalled && !noAuth && !versionMismatch && !isShowCanNotChooseMCPTip && showSwitch && (
<div className='mr-1' onClick={e => e.stopPropagation()}>
<Switch
size='md'
@@ -112,6 +121,9 @@ const ToolItem = ({
/>
</div>
)}
{isShowCanNotChooseMCPTip && (
<McpToolNotSupportTooltip />
)}
{!isError && !uninstalled && !versionMismatch && noAuth && (
<Button variant='secondary' size='small' onClick={onAuth}>
{t('tools.notAuthorized')}