From e6c6fa8ed8e889f6094498b65f7a464a74d07d57 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Mon, 26 May 2025 17:28:16 +0800 Subject: [PATCH] tool icon --- web/app/components/tools/types.ts | 2 +- .../workflow/block-selector/utils.ts | 3 +- .../workflow/hooks/use-checklist.ts | 25 +++++---------- .../workflow/hooks/use-tool-icon.ts | 32 ++++++++++++++++++- 4 files changed, 41 insertions(+), 21 deletions(-) diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts index 4a66ac3063..3b0a19c7f4 100644 --- a/web/app/components/tools/types.ts +++ b/web/app/components/tools/types.ts @@ -44,7 +44,7 @@ export type Collection = { description: TypeWithI18N icon: string | Emoji label: TypeWithI18N - type: CollectionType + type: CollectionType | string team_credentials: Record is_team_authorization: boolean allow_delete: boolean diff --git a/web/app/components/workflow/block-selector/utils.ts b/web/app/components/workflow/block-selector/utils.ts index eb6d6727b0..55412481e1 100644 --- a/web/app/components/workflow/block-selector/utils.ts +++ b/web/app/components/workflow/block-selector/utils.ts @@ -1,4 +1,3 @@ -import { CollectionType } from '@/app/components/tools/types' import type { Tool } from '@/app/components/tools/types' import type { DataSourceItem } from './types' @@ -10,7 +9,7 @@ export const transformDataSourceToTool = (dataSourceItem: DataSourceItem) => { description: dataSourceItem.declaration.identity.description, icon: dataSourceItem.declaration.identity.icon, label: dataSourceItem.declaration.identity.label, - type: CollectionType.datasource, + type: dataSourceItem.declaration.provider_type, team_credentials: {}, is_team_authorization: false, allow_delete: true, diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts index f775fadddc..be5c2ec0db 100644 --- a/web/app/components/workflow/hooks/use-checklist.ts +++ b/web/app/components/workflow/hooks/use-checklist.ts @@ -20,15 +20,16 @@ import { CUSTOM_NODE, MAX_TREE_DEPTH, } from '../constants' -import { useWorkflow } from '../hooks' +import { + useGetToolIcon, + useWorkflow, +} from '../hooks' import type { ToolNodeType } from '../nodes/tool/types' import { useNodesMetaData } from './use-nodes-meta-data' import { useToastContext } from '@/app/components/base/toast' -import { CollectionType } from '@/app/components/tools/types' import { useGetLanguage } from '@/context/i18n' import type { AgentNodeType } from '../nodes/agent/types' import { useStrategyProviders } from '@/service/use-strategy' -import { canFindTool } from '@/utils' import { useDatasetsDetailStore } from '../datasets-detail-store/store' import type { KnowledgeRetrievalNodeType } from '../nodes/knowledge-retrieval/types' import type { DataSet } from '@/models/datasets' @@ -44,6 +45,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => { const { data: strategyProviders } = useStrategyProviders() const datasetsDetail = useDatasetsDetailStore(s => s.datasetsDetail) const { getStartNodes } = useWorkflow() + const getToolIcon = useGetToolIcon() const getCheckData = useCallback((data: CommonNodeType<{}>) => { let checkData = data @@ -75,23 +77,12 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => { for (let i = 0; i < nodes.length; i++) { const node = nodes[i] - let toolIcon let moreDataForCheckValid - if (node.data.type === BlockEnum.Tool) { - const { provider_type } = node.data - + if (node.data.type === BlockEnum.Tool) moreDataForCheckValid = getToolCheckParams(node.data as ToolNodeType, buildInTools, customTools, workflowTools, language) - if (provider_type === CollectionType.builtIn) - toolIcon = buildInTools.find(tool => canFindTool(tool.id, node.data.provider_id || ''))?.icon - - if (provider_type === CollectionType.custom) - toolIcon = customTools.find(tool => tool.id === node.data.provider_id)?.icon - - if (provider_type === CollectionType.workflow) - toolIcon = workflowTools.find(tool => tool.id === node.data.provider_id)?.icon - } + const toolIcon = getToolIcon(node.data) if (node.data.type === BlockEnum.Agent) { const data = node.data as AgentNodeType const isReadyForCheckValid = !!strategyProviders @@ -135,7 +126,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => { }) return list - }, [nodes, edges, buildInTools, customTools, workflowTools, language, nodesExtraData, t, strategyProviders, getCheckData, getStartNodes]) + }, [nodes, edges, buildInTools, customTools, workflowTools, language, nodesExtraData, t, strategyProviders, getCheckData, getStartNodes, getToolIcon]) return needWarningNodes } diff --git a/web/app/components/workflow/hooks/use-tool-icon.ts b/web/app/components/workflow/hooks/use-tool-icon.ts index 9e72029455..3df15f5565 100644 --- a/web/app/components/workflow/hooks/use-tool-icon.ts +++ b/web/app/components/workflow/hooks/use-tool-icon.ts @@ -1,4 +1,5 @@ import { + useCallback, useMemo, } from 'react' import type { @@ -9,6 +10,7 @@ import { } from '../types' import { useStore, + useWorkflowStore, } from '../store' import { CollectionType } from '@/app/components/tools/types' import { canFindTool } from '@/utils' @@ -31,8 +33,36 @@ export const useToolIcon = (data: Node['data']) => { return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon } if (data.type === BlockEnum.DataSource) - return dataSourceList?.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon + return dataSourceList?.find(toolWithProvider => toolWithProvider.name === data.provider_id)?.icon }, [data, buildInTools, customTools, workflowTools, dataSourceList]) return toolIcon } + +export const useGetToolIcon = () => { + const workflowStore = useWorkflowStore() + const getToolIcon = useCallback((data: Node['data']) => { + const { + buildInTools, + customTools, + workflowTools, + dataSourceList, + } = workflowStore.getState() + + if (data.type === BlockEnum.Tool) { + let targetTools = buildInTools + if (data.provider_type === CollectionType.builtIn) + targetTools = buildInTools + else if (data.provider_type === CollectionType.custom) + targetTools = customTools + else + targetTools = workflowTools + return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon + } + + if (data.type === BlockEnum.DataSource) + return dataSourceList?.find(toolWithProvider => toolWithProvider.name === data.provider_id)?.icon + }, [workflowStore]) + + return getToolIcon +}