memo running state

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

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useMemo } from 'react'
+import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import { RiLoader2Line, RiStopCircleFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
@@ -7,6 +8,7 @@ import { useStore } from '../store'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
+import type { CommonNodeType } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 const VariableInspectTrigger: FC = () => {
@@ -28,17 +30,19 @@ const VariableInspectTrigger: FC = () => {
     return allVars
   }, [environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
 
-  // ##TODD stop handle
-
   const workflowRunningData = useStore(s => s.workflowRunningData)
-  const isRunning = useMemo(() => {
+  const nodes = useNodes<CommonNodeType>()
+  const isStepRunning = useMemo(() => nodes.some(node => node.data._singleRunningStatus === NodeRunningStatus.Running), [nodes])
+  const isPreviewRunning = useMemo(() => {
     if (!workflowRunningData)
       return false
-    if (workflowRunningData.result.status === WorkflowRunningStatus.Running)
-      return true
-    // TODO: step running state use data in inspector
-    return (workflowRunningData.tracing || []).some(tracingData => tracingData.status === NodeRunningStatus.Running)
+    return workflowRunningData.result.status === WorkflowRunningStatus.Running
   }, [workflowRunningData])
+  const isRunning = useMemo(() => isPreviewRunning || isStepRunning, [isPreviewRunning, isStepRunning])
+
+  const handleStop = () => {
+    // TODO: Implement stop functionality
+  }
 
   const handleClearAll = () => {
     deleteAllInspectorVars()
@@ -83,16 +87,18 @@ const VariableInspectTrigger: FC = () => {
             <RiLoader2Line className='h-4 w-4' />
             <span className='text-text-accent'>{t('workflow.debug.variableInspect.trigger.running')}</span>
           </div>
-          <Tooltip
-            popupContent={t('workflow.debug.variableInspect.trigger.stop')}
-          >
-            <div
-              className='flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
-            // onClick={() => {}}
+          {isPreviewRunning && (
+            <Tooltip
+              popupContent={t('workflow.debug.variableInspect.trigger.stop')}
             >
-              <RiStopCircleFill className='h-4 w-4 text-text-accent' />
-            </div>
-          </Tooltip>
+              <div
+                className='flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
+                onClick={handleStop}
+              >
+                <RiStopCircleFill className='h-4 w-4 text-text-accent' />
+              </div>
+            </Tooltip>
+          )}
         </>
       )}
     </div>