From 90e689d282f7ff86e8e20681cae4a2be202781ab Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 23 Jun 2025 15:26:33 +0800
Subject: [PATCH] fix: tool icon not show

---
 .../workflow-app/hooks/use-fetch-workflow-inspect-vars.ts     | 1 +
 web/app/components/workflow/hooks/use-workflow.ts             | 2 ++
 web/app/components/workflow/variable-inspect/group.tsx        | 4 ++++
 web/types/workflow.ts                                         | 3 ++-
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts b/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
index dfc2cb6429..9d3ff84929 100644
--- a/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
+++ b/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
@@ -41,6 +41,7 @@ const useSetWorkflowVarsWithValue = () => {
       })
       const nodeWithVar = {
         nodeId,
+        nodePayload: node.data,
         nodeType: node.data.type,
         title: node.data.title,
         vars: varsUnderTheNode,
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index 8c655b0017..1b98178152 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -492,6 +492,8 @@ export const useToolIcon = (data: Node['data']) => {
   const customTools = useStore(s => s.customTools)
   const workflowTools = useStore(s => s.workflowTools)
   const toolIcon = useMemo(() => {
+    if(!data)
+      return ''
     if (data.type === BlockEnum.Tool) {
       let targetTools = buildInTools
       if (data.provider_type === CollectionType.builtIn)
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 867f1635e8..1b032c8992 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -20,6 +20,7 @@ import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
 import cn from '@/utils/classnames'
+import { useToolIcon } from '../hooks'
 
 type Props = {
   nodeData?: NodeWithVar
@@ -43,6 +44,8 @@ const Group = ({
   const { t } = useTranslation()
   const [isCollapsed, setIsCollapsed] = useState(false)
 
+  const toolIcon = useToolIcon(nodeData?.nodePayload as any)
+
   const isEnv = varType === VarInInspectType.environment
   const isChatVar = varType === VarInInspectType.conversation
   const isSystem = varType === VarInInspectType.system
@@ -114,6 +117,7 @@ const Group = ({
               <BlockIcon
                 className='shrink-0'
                 type={nodeData.nodeType}
+                toolIcon={toolIcon || ''}
                 size='xs'
               />
               <div className='system-xs-medium-uppercase truncate text-text-tertiary'>{nodeData.title}</div>
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index 0f20656cbf..030d6f0667 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -1,5 +1,5 @@
 import type { Viewport } from 'reactflow'
-import type { BlockEnum, ConversationVariable, Edge, EnvironmentVariable, InputVar, Node, ValueSelector, VarType, Variable } from '@/app/components/workflow/types'
+import type { BlockEnum, CommonNodeType, ConversationVariable, Edge, EnvironmentVariable, InputVar, Node, ValueSelector, VarType, Variable } from '@/app/components/workflow/types'
 import type { TransferMethod } from '@/types/app'
 import type { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 import type { BeforeRunFormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form'
@@ -394,6 +394,7 @@ export type VarInInspect = {
 
 export type NodeWithVar = {
   nodeId: string
+  nodePayload: CommonNodeType
   nodeType: BlockEnum
   title: string
   vars: VarInInspect[]