fix: clear node vars status

web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts

@@ -4,13 +4,14 @@ import { useStoreApi } from 'reactflow'
 import type { Node } from '@/app/components/workflow/types'
 import { fetchAllInspectVars } from '@/service/workflow'
 import { useInvalidateConversationVarValues, useInvalidateSysVarValues } from '@/service/use-workflow'
-
+import { useNodesInteractionsWithoutSync } from '../../workflow/hooks/use-nodes-interactions-without-sync'
 const useSetWorkflowVarsWithValue = () => {
   const workflowStore = useWorkflowStore()
   const { setNodesWithInspectVars, appId } = workflowStore.getState()
   const store = useStoreApi()
   const invalidateConversationVarValues = useInvalidateConversationVarValues(appId)
   const invalidateSysVarValues = useInvalidateSysVarValues(appId)
+  const { handleCancelAllNodeSuccessStatus } = useNodesInteractionsWithoutSync()
 
   const setInspectVarsToStore = (inspectVars: VarInInspect[]) => {
     const { getNodes } = store.getState()
@@ -56,6 +57,7 @@ const useSetWorkflowVarsWithValue = () => {
     invalidateSysVarValues()
     const data = await fetchAllInspectVars(appId)
     setInspectVarsToStore(data)
+    handleCancelAllNodeSuccessStatus() // to make sure clear node output show the unset status
   }
   return {
     fetchInspectVars,

web/app/components/workflow/hooks/use-inspect-vars-crud.ts

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { isConversationVar, isENV, isSystemVar } from '../nodes/_base/components/variable/utils'
 import produce from 'immer'
 import type { Node } from '@/app/components/workflow/types'
+import { useNodesInteractionsWithoutSync } from './use-nodes-interactions-without-sync'
 
 const useInspectVarsCrud = () => {
   const workflowStore = useWorkflowStore()
@@ -43,6 +44,7 @@ const useInspectVarsCrud = () => {
   const { mutate: doDeleteInspectVar } = useDeleteInspectVar(appId)
 
   const { mutate: doEditInspectorVar } = useEditInspectorVar(appId)
+  const { handleCancelNodeSuccessStatus } = useNodesInteractionsWithoutSync()
 
   const getNodeInspectVars = useCallback((nodeId: string) => {
     const node = nodesWithInspectVars.find(node => node.nodeId === nodeId)
@@ -123,6 +125,7 @@ const useInspectVarsCrud = () => {
         }
     })
     setNodesWithInspectVars(nodes)
+    handleCancelNodeSuccessStatus(nodeId)
   }
 
   const deleteInspectVar = async (nodeId: string, varId: string) => {
@@ -146,7 +149,6 @@ const useInspectVarsCrud = () => {
 
   const editInspectVarValue = useCallback(async (nodeId: string, varId: string, value: any) => {
     if (nodeId === VarInInspectType.conversation) {
-      console.log('edit conversation var value', varId, value)
       invalidateConversationVarValues()
     }
     else if (nodeId === VarInInspectType.system) {

web/app/components/workflow/hooks/use-nodes-interactions-without-sync.ts

@@ -1,9 +1,12 @@
 import { useCallback } from 'react'
 import produce from 'immer'
 import { useStoreApi } from 'reactflow'
+import { NodeRunningStatus } from '../types'
+import { useEdgesInteractionsWithoutSync } from './use-edges-interactions-without-sync'
 
 export const useNodesInteractionsWithoutSync = () => {
   const store = useStoreApi()
+    const { handleEdgeCancelRunningStatus } = useEdgesInteractionsWithoutSync()
 
   const handleNodeCancelRunningStatus = useCallback(() => {
     const {
@@ -21,7 +24,42 @@ export const useNodesInteractionsWithoutSync = () => {
     setNodes(newNodes)
   }, [store])
 
+  const handleCancelAllNodeSuccessStatus = useCallback(() => {
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+
+    const nodes = getNodes()
+    const newNodes = produce(nodes, (draft) => {
+      draft.forEach((node) => {
+        if(node.data._runningStatus === NodeRunningStatus.Succeeded)
+          node.data._runningStatus = undefined
+      })
+    })
+    setNodes(newNodes)
+    handleEdgeCancelRunningStatus()
+  }, [handleEdgeCancelRunningStatus, store])
+
+  const handleCancelNodeSuccessStatus = useCallback((nodeId: string) => {
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+
+    const newNodes = produce(getNodes(), (draft) => {
+      const node = draft.find(n => n.id === nodeId)
+      if (node && node.data._runningStatus === NodeRunningStatus.Succeeded) {
+        node.data._runningStatus = undefined
+        node.data._waitingRun = false
+      }
+    })
+    setNodes(newNodes)
+  }, [store])
+
   return {
     handleNodeCancelRunningStatus,
+    handleCancelAllNodeSuccessStatus,
+    handleCancelNodeSuccessStatus,
   }
 }

web/app/components/workflow/nodes/_base/node.tsx

@@ -90,7 +90,7 @@ const BaseNode: FC<BaseNodeProps> = ({
     }
   }, [data.isInLoop, data.selected, id, handleNodeLoopChildSizeChange])
 
-  const { hasNodeInspectVars, nodesWithInspectVars } = useInspectVarsCrud()
+  const { hasNodeInspectVars } = useInspectVarsCrud()
   // window.nodesWithInspectVars = nodesWithInspectVars
   const hasVarValue = hasNodeInspectVars(id)
   const showSelectedBorder = data.selected || data._isBundled || data._isEntering
@@ -106,7 +106,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       showFailedBorder: data._runningStatus === NodeRunningStatus.Failed && !showSelectedBorder,
       showExceptionBorder: data._runningStatus === NodeRunningStatus.Exception && !showSelectedBorder,
     }
-  }, [data._runningStatus, showSelectedBorder])
+  }, [data._runningStatus, hasVarValue, showSelectedBorder])
 
   const LoopIndex = useMemo(() => {
     let text = ''