chore: move get exist var to hooks

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiCloseLine,
@@ -21,7 +21,6 @@ import type { BlockEnum } from '@/app/components/workflow/types'
 import type { Emoji } from '@/app/components/tools/types'
 import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
 import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
-import { useWorkflowStore } from '@/app/components/workflow/store'
 
 const i18nPrefix = 'workflow.singleRun'
 
@@ -36,6 +35,8 @@ export type BeforeRunFormProps = {
   result?: React.JSX.Element
   forms: FormProps[]
   showSpecialResultPanel?: boolean
+  existVarValuesInForms: Record<string, any>[]
+  filteredExistVarForms: FormProps[]
 } & Partial<SpecialResultPanelProps>
 
 function formatValue(value: string | any, type: InputVarType) {
@@ -70,64 +71,11 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
   result,
   forms,
   showSpecialResultPanel,
+  filteredExistVarForms,
+  existVarValuesInForms,
   ...restResultPanelParams
 }) => {
   const { t } = useTranslation()
-  console.log(forms)
-
-  const workflowStore = useWorkflowStore()
-  const {
-    getInspectVar,
-  } = workflowStore.getState()
-
-  const existVarValuesInForms = useMemo(() => {
-    const valuesArr = forms.map((form) => {
-      const values: Record<string, any> = {}
-      form.inputs.forEach(({ variable }) => {
-        // #nodeId.path1?.path2?...# => [nodeId, path1]
-        // TODO: conversation vars and envs
-        const selector = variable.slice(1, -1).split('.')
-        const [nodeId, varName] = selector.slice(0, 2)
-        const inspectVarValue = getInspectVar(nodeId, varName)
-        if (inspectVarValue !== undefined) {
-          const subPathArr = selector.slice(2)
-          if (subPathArr.length > 0) {
-            let current = inspectVarValue.value
-            let invalid = false
-            subPathArr.forEach((subPath) => {
-              if (invalid)
-                return
-
-              if (current && typeof current === 'object' && subPath in current) {
-                current = current[subPath]
-                return
-              }
-              invalid = true
-            })
-            values[variable] = current
-          }
-          else {
-            values[variable] = inspectVarValue
-          }
-        }
-      })
-      return values
-    })
-    return valuesArr
-  }, [forms, getInspectVar])
-
-  const filteredExistVarForms = useMemo(() => {
-    const res = forms.map((form, i) => {
-      const existVarValuesInForm = existVarValuesInForms[i]
-      const newForm = { ...form }
-      const inputs = form.inputs.filter((input) => {
-        return !(input.variable in existVarValuesInForm)
-      })
-      newForm.inputs = inputs
-      return newForm
-    }).filter(form => form.inputs.length > 0)
-    return res
-  }, [forms, existVarValuesInForms])
 
   const isFinished = runningStatus === NodeRunningStatus.Succeeded || runningStatus === NodeRunningStatus.Failed || runningStatus === NodeRunningStatus.Exception
   const isRunning = runningStatus === NodeRunningStatus.Running
@@ -180,7 +128,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
 
       form.inputs.forEach((input) => {
         if (input.variable in existVarValuesInForm) {
-          // TODO: if is the big value, should fetch value from server
+          // TODO: wait for api if need to pass exist var values
           submitData[input.variable] = existVarValuesInForm[input.variable]
           return
         }

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -156,6 +156,8 @@ const BasePanel: FC<BasePanelProps> = ({
     hasLastRunData,
     isDataFromHistory,
     handleRun,
+    getExistVarValuesInForms,
+    getFilteredExistVarForms,
   } = useLastRun<typeof data>({
     id,
     data,
@@ -206,8 +208,16 @@ const BasePanel: FC<BasePanelProps> = ({
                           console.error('childPanelRef is not set')
                           return
                         }
+                        const filteredExistVarForms = getFilteredExistVarForms(childPanelRef.current?.singleRunParams.forms)
+                        if (filteredExistVarForms.length > 0) {
                           setSingleRunParams(childPanelRef.current?.singleRunParams)
                           showSingleRun()
+                        }
+                        else {
+                          // TODO: check valid
+                          // TODO: all value is setted. wait for api if need to pass exist var values
+                          handleRun({})
+                        }
                         handleSyncWorkflowDraft(true)
                       }}
                     >
@@ -307,7 +317,9 @@ const BasePanel: FC<BasePanelProps> = ({
               onRun={handleRun}
               onStop={handleStop}
               {...singleRunParams!}
-              result={<div>xxx</div>}
+              existVarValuesInForms={getExistVarValuesInForms(singleRunParams?.forms as any)}
+              filteredExistVarForms={getFilteredExistVarForms(singleRunParams?.forms as any)}
+              result={<></>}
             />
           )
         }

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts

@@ -4,6 +4,8 @@ import { useCallback, useRef, useState } from 'react'
 import type { PanelExposedType } from '@/types/workflow'
 import { TabType } from '../tab'
 import { sleep } from '@/utils'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 
 type Params<T> = OneStepRunParams<T>
 const useLastRun = <T>({
@@ -42,6 +44,62 @@ const useLastRun = <T>({
   }, [])
   const hasLastRunData = true // TODO: add disabled logic
 
+  const workflowStore = useWorkflowStore()
+  const {
+    getInspectVar,
+  } = workflowStore.getState()
+  const getExistVarValuesInForms = (forms: FormProps[]) => {
+    // if (!singleRunParams)
+    const valuesArr = forms.map((form) => {
+      const values: Record<string, any> = {}
+      form.inputs.forEach(({ variable }) => {
+        // #nodeId.path1?.path2?...# => [nodeId, path1]
+        // TODO: conversation vars and envs
+        const selector = variable.slice(1, -1).split('.')
+        const [nodeId, varName] = selector.slice(0, 2)
+        const inspectVarValue = getInspectVar(nodeId, varName)
+        if (inspectVarValue !== undefined) {
+          const subPathArr = selector.slice(2)
+          if (subPathArr.length > 0) {
+            let current = inspectVarValue.value
+            let invalid = false
+            subPathArr.forEach((subPath) => {
+              if (invalid)
+                return
+
+              if (current && typeof current === 'object' && subPath in current) {
+                current = current[subPath]
+                return
+              }
+              invalid = true
+            })
+            values[variable] = current
+          }
+          else {
+            values[variable] = inspectVarValue
+          }
+        }
+      })
+      return values
+    })
+    return valuesArr
+  }
+
+  const getFilteredExistVarForms = (forms: FormProps[]) => {
+    const existVarValuesInForms = getExistVarValuesInForms(forms)
+
+    const res = forms.map((form, i) => {
+      const existVarValuesInForm = existVarValuesInForms[i]
+      const newForm = { ...form }
+      const inputs = form.inputs.filter((input) => {
+        return !(input.variable in existVarValuesInForm)
+      })
+      newForm.inputs = inputs
+      return newForm
+    }).filter(form => form.inputs.length > 0)
+    return res
+  }
+
   return {
     ...oneStepRunRes,
     childPanelRef,
@@ -53,6 +111,8 @@ const useLastRun = <T>({
     hasLastRunData,
     isDataFromHistory,
     handleRun,
+    getExistVarValuesInForms,
+    getFilteredExistVarForms,
   }
 }
 

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

@@ -44,6 +44,7 @@ import AddVariablePopupWithPosition from './components/add-variable-popup-with-p
 import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
+import { useWorkflowStore } from '../../store'
 
 type BaseNodeProps = {
   children: ReactElement
@@ -128,6 +129,11 @@ const BaseNode: FC<BaseNodeProps> = ({
     return null
   }, [data._loopIndex, data._runningStatus, t])
 
+  const workflowStore = useWorkflowStore()
+  const {
+    hasNodeInspectVars,
+  } = workflowStore.getState()
+
   return (
     <div
       className={cn(
@@ -265,7 +271,7 @@ const BaseNode: FC<BaseNodeProps> = ({
             )
           }
           {
-            data._runningStatus === NodeRunningStatus.Succeeded && (
+            (data._runningStatus === NodeRunningStatus.Succeeded || hasNodeInspectVars(id)) && (
               <RiCheckboxCircleFill className='h-3.5 w-3.5 text-text-success' />
             )
           }