tool icon

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<string, any>
   is_team_authorization: boolean
   allow_delete: boolean

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,

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
 }

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
+}