AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-18 06:55:51 +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

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