From 5824a2d71c9e4724a8f8d701b9aa0189673145b2 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 22 Aug 2025 16:02:14 +0800
Subject: [PATCH] refactor(use-tool-icon): make data parameter optional and
 update usage in variable inspect components

---
 web/app/components/workflow/hooks/use-tool-icon.ts     | 4 +++-
 web/app/components/workflow/variable-inspect/group.tsx | 2 +-
 web/app/components/workflow/variable-inspect/panel.tsx | 3 +++
 web/app/components/workflow/variable-inspect/right.tsx | 4 +++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/hooks/use-tool-icon.ts b/web/app/components/workflow/hooks/use-tool-icon.ts
index 921e097d74..734a7da390 100644
--- a/web/app/components/workflow/hooks/use-tool-icon.ts
+++ b/web/app/components/workflow/hooks/use-tool-icon.ts
@@ -15,7 +15,7 @@ import {
 import { CollectionType } from '@/app/components/tools/types'
 import { canFindTool } from '@/utils'
 
-export const useToolIcon = (data: Node['data']) => {
+export const useToolIcon = (data?: Node['data']) => {
   const buildInTools = useStore(s => s.buildInTools)
   const customTools = useStore(s => s.customTools)
   const workflowTools = useStore(s => s.workflowTools)
@@ -26,6 +26,7 @@ export const useToolIcon = (data: Node['data']) => {
     if (!data)
       return ''
     if (data.type === BlockEnum.Tool) {
+      // eslint-disable-next-line sonarjs/no-dead-store
       let targetTools = buildInTools
       if (data.provider_type === CollectionType.builtIn)
         targetTools = buildInTools
@@ -55,6 +56,7 @@ export const useGetToolIcon = () => {
     } = workflowStore.getState()
 
     if (data.type === BlockEnum.Tool) {
+      // eslint-disable-next-line sonarjs/no-dead-store
       let targetTools = buildInTools
       if (data.provider_type === CollectionType.builtIn)
         targetTools = buildInTools
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 29b6c3ca44..923c5ce289 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -40,7 +40,7 @@ const Group = ({
   const { t } = useTranslation()
   const [isCollapsed, setIsCollapsed] = useState(false)
 
-  const toolIcon = useToolIcon(nodeData?.nodePayload as any)
+  const toolIcon = useToolIcon(nodeData?.nodePayload)
 
   const isEnv = varType === VarInInspectType.environment
   const isChatVar = varType === VarInInspectType.conversation
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index 4209e89b1b..57ab3fa9dc 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -14,6 +14,7 @@ import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 
 import cn from '@/utils/classnames'
+import type { NodeProps } from '../types'
 
 export type currentVarType = {
   nodeId: string
@@ -21,6 +22,7 @@ export type currentVarType = {
   title: string
   isValueFetched?: boolean
   var: VarInInspect
+  nodeData: NodeProps['data']
 }
 
 const Panel: FC = () => {
@@ -114,6 +116,7 @@ const Panel: FC = () => {
       title: targetNode.title,
       isSingRunRunning: targetNode.isSingRunRunning,
       isValueFetched: targetNode.isValueFetched,
+      nodeData: targetNode.nodePayload,
       ...(currentVar ? { var: currentVar } : {}),
     }
   }, [currentFocusNodeId, currentVarId, environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index 2b87c46b55..d86280a888 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -26,7 +26,7 @@ import GetCodeGeneratorResModal from '../../app/configuration/config/code-genera
 import { AppType } from '@/types/app'
 import { useHooksStore } from '../hooks-store'
 import { useCallback, useMemo } from 'react'
-import { useNodesInteractions } from '../hooks'
+import { useNodesInteractions, useToolIcon } from '../hooks'
 import { CodeLanguage } from '../nodes/code/types'
 import useNodeCrud from '../nodes/_base/hooks/use-node-crud'
 import type { GenRes } from '@/service/debug'
@@ -52,6 +52,7 @@ const Right = ({
   const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
   const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
+  const toolIcon = useToolIcon(currentNodeVar?.nodeData)
 
   const {
     resetConversationVar,
@@ -177,6 +178,7 @@ const Right = ({
                     className='shrink-0'
                     type={currentNodeVar.nodeType as BlockEnum}
                     size='xs'
+                    toolIcon={toolIcon}
                   />
                   <div className='system-sm-regular shrink-0 text-text-secondary'>{currentNodeVar.title}</div>
                   <div className='system-sm-regular shrink-0 text-text-quaternary'>/</div>