refactor(use-tool-icon): make data parameter optional and update usage in variable inspect components

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

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

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])

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>