fix crash caused by currentNodeInfo

web/app/components/workflow/variable-inspect/group.tsx

@@ -100,12 +100,14 @@ const Group = ({
     <div className='p-0.5'>
       {/* node item */}
       <div className='group flex h-6 items-center gap-0.5'>
-        {nodeData?.isSingRunRunning && (
-          <RiLoader2Line className='h-3 w-3 animate-spin text-text-accent' />
-        )}
-        {(!nodeData || !nodeData.isSingRunRunning || visibleVarList.length > 0) && (
-          <RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} onClick={() => setIsCollapsed(!isCollapsed)} />
-        )}
+        <div className='h-3 w-3 shrink-0'>
+          {nodeData?.isSingRunRunning && (
+            <RiLoader2Line className='h-3 w-3 animate-spin text-text-accent' />
+          )}
+          {(!nodeData || !nodeData.isSingRunRunning) && visibleVarList.length > 0 && (
+            <RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} onClick={() => setIsCollapsed(!isCollapsed)} />
+          )}
+        </div>
         <div className='flex grow cursor-pointer items-center gap-1' onClick={() => setIsCollapsed(!isCollapsed)}>
           {nodeData && (
             <>

web/app/components/workflow/variable-inspect/left.tsx

@@ -25,6 +25,8 @@ const Left = ({
   const { t } = useTranslation()
 
   const environmentVariables = useStore(s => s.environmentVariables)
+  const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
+
   const {
     conversationVars,
     systemVars,
@@ -36,12 +38,22 @@ const Left = ({
 
   const showDivider = environmentVariables.length > 0 || conversationVars.length > 0 || systemVars.length > 0
 
+  const handleClearAll = () => {
+    deleteAllInspectorVars()
+    setCurrentFocusNodeId('')
+  }
+
+  const handleClearNode = (nodeId: string) => {
+    deleteNodeInspectorVars(nodeId)
+    setCurrentFocusNodeId('')
+  }
+
   return (
     <div className={cn('flex h-full flex-col')}>
       {/* header */}
       <div className='flex shrink-0 items-center justify-between gap-1 pl-4 pr-1 pt-2'>
         <div className='system-sm-semibold-uppercase truncate text-text-primary'>{t('workflow.debug.variableInspect.title')}</div>
-        <Button variant='ghost' size='small' className='shrink-0' onClick={deleteAllInspectorVars}>{t('workflow.debug.variableInspect.clearAll')}</Button>
+        <Button variant='ghost' size='small' className='shrink-0' onClick={handleClearAll}>{t('workflow.debug.variableInspect.clearAll')}</Button>
       </div>
       {/* content */}
       <div className='grow overflow-y-auto py-1'>
@@ -88,7 +100,7 @@ const Left = ({
             currentVar={currentNodeVar}
             handleSelect={handleVarSelect}
             handleView={() => handleNodeSelect(group.nodeId)}
-            handleClear={() => deleteNodeInspectorVars(group.nodeId)}
+            handleClear={() => handleClearNode(group.nodeId)}
           />
         ))}
       </div>

web/app/components/workflow/variable-inspect/panel.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiCloseLine,
@@ -88,7 +88,7 @@ const Panel: FC = () => {
       return res
     }
     if (currentFocusNodeId === VarInInspectType.system) {
-      const currentVar = conversationVars.find(v => v.id === currentVarId)
+      const currentVar = systemVars.find(v => v.id === currentVarId)
       const res = {
         nodeId: VarInInspectType.system,
         title: VarInInspectType.system,
@@ -128,10 +128,15 @@ const Panel: FC = () => {
   const handleNodeVarSelect = useCallback((node: currentVarType) => {
     setCurrentFocusNodeId(node.nodeId)
     setCurrentVarId(node.var.id)
-    const targetNode = nodesWithInspectVars.find(n => n.nodeId === node.nodeId)
-    if (targetNode && !targetNode.isValueFetched)
-      fetchInspectVarValue([node.nodeId])
-  }, [fetchInspectVarValue, nodesWithInspectVars])
+  }, [setCurrentFocusNodeId, setCurrentVarId])
+
+  useEffect(() => {
+    if (currentFocusNodeId && currentVarId) {
+      const targetNode = nodesWithInspectVars.find(node => node.nodeId === currentFocusNodeId)
+      if (targetNode && !targetNode.isValueFetched)
+        fetchInspectVarValue([currentFocusNodeId])
+    }
+  }, [currentFocusNodeId, currentVarId, nodesWithInspectVars, fetchInspectVarValue])
 
   if (isEmpty) {
     return (

web/app/components/workflow/variable-inspect/right.tsx

@@ -35,6 +35,7 @@ const Right = ({
   const { t } = useTranslation()
   const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
+  const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
 
   const {
     resetToLastRunVar,
@@ -51,6 +52,11 @@ const Right = ({
     resetToLastRunVar(currentNodeVar.nodeId, currentNodeVar.var.id)
   }
 
+  const handleClose = () => {
+    setShowVariableInspectPanel(false)
+    setCurrentFocusNodeId('')
+  }
+
   return (
     <div className={cn('flex h-full flex-col')}>
       {/* header */}
@@ -109,7 +115,7 @@ const Right = ({
               )}
             </>
           )}
-          <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
+          <ActionButton onClick={handleClose}>
             <RiCloseLine className='h-4 w-4' />
           </ActionButton>
         </div>