AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-16 16:16:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: not show mcp tools icon in node

Browse Source
This commit is contained in:
Joel 2025-05-28 16:57:15 +08:00
parent 18eb5ad33f
commit 9350646c97
1 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/app/components/workflow/nodes/agent/components/tool-icon.tsx
View File

@ -2,10 +2,11 @@ import Tooltip from '@/app/components/base/tooltip'
import Indicator from '@/app/components/header/indicator'
import classNames from '@/utils/classnames'
import { memo, useMemo, useRef, useState } from 'react'
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
import { getIconFromMarketPlace } from '@/utils/get-icon'
import { useTranslation } from 'react-i18next'
import { Group } from '@/app/components/base/icons/src/vender/other'
import AppIcon from '@/app/components/base/app-icon'
type Status = 'not-installed' | 'not-authorized' | undefined
@ -19,19 +20,21 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
const { data: buildInTools } = useAllBuiltInTools()
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const isDataReady = !!buildInTools && !!customTools && !!workflowTools
const { data: mcpTools } = useAllMCPTools()
const isDataReady = !!buildInTools && !!customTools && !!workflowTools && !!mcpTools
const currentProvider = useMemo(() => {
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
return mergedTools.find((toolWithProvider) => {
return toolWithProvider.name === providerName
return toolWithProvider.name === providerName || toolWithProvider.id === providerName
})
}, [buildInTools, customTools, providerName, workflowTools])
}, [buildInTools, customTools, providerName, workflowTools, mcpTools])
const providerNameParts = providerName.split('/')
const author = providerNameParts[0]
const name = providerNameParts[1]
const icon = useMemo(() => {
if (!isDataReady) return ''
if (currentProvider) return currentProvider.icon as string
if (currentProvider) return currentProvider.icon
const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
return iconFromMarketPlace
}, [author, currentProvider, name, isDataReady])
@ -62,19 +65,32 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
)}
ref={containerRef}
>
{(!iconFetchError && isDataReady)
? <img
src={icon}
alt='tool icon'
className={classNames(
'w-full h-full size-3.5 object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
: <Group className="h-3 w-3 opacity-35" />
}
{(() => {
if (iconFetchError || !icon)
return <Group className="h-3 w-3 opacity-35" />
if (typeof icon === 'string') {
return <img
src={icon}
alt='tool icon'
className={classNames(
'w-full h-full size-3.5 object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
}
if (typeof icon === 'object') {
return <AppIcon
className={classNames(
'w-full h-full size-3.5 object-cover',
notSuccess && 'opacity-50',
)}
icon={icon?.content}
background={icon?.background}
/>
}
return <Group className="h-3 w-3 opacity-35" />
})()}
{indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
</div>
</Tooltip>