value of var in node fetching

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

@@ -43,6 +43,8 @@ const useSetWorkflowVarsWithValue = () => {
         nodeType: node.data.type,
         title: node.data.title,
         vars: varsUnderTheNode,
+        isSingRunRunning: false,
+        isValueFetched: false,
       }
       return nodeWithVar
     })

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

@@ -81,12 +81,20 @@ const useInspectVarsCrud = () => {
   }
 
   const editInspectVarValue = useCallback(async (nodeId: string, varId: string, value: any) => {
-    await doEditInspectorVar({
+    if (nodeId === VarInInspectType.conversation) {
-      varId,
+      console.log('edit conversation var value', varId, value)
-      value,
+      invalidateConversationVarValues()
-    })
+    }
-    if (nodeId !== VarInInspectType.conversation && nodeId !== VarInInspectType.system)
+    else if (nodeId === VarInInspectType.system) {
+      invalidateSysVarValues()
+    }
+    else {
+      await doEditInspectorVar({
+        varId,
+        value,
+      })
       setInspectVarValue(nodeId, varId, value)
+    }
   }, [doEditInspectorVar, setInspectVarValue])
 
   const [currNodeId, setCurrNodeId] = useState<string | null>(null)

web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts

@@ -58,8 +58,10 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
         const prevNodes = state.nodesWithInspectVars
         const nodes = produce(prevNodes, (draft) => {
           const index = prevNodes.findIndex(node => node.nodeId === nodeId)
-          if (index === -1)
+          if (index !== -1) {
             draft[index].vars = payload
+            draft[index].isValueFetched = true
+          }
         })
 
         return {

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

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiCloseLine,
@@ -17,6 +17,7 @@ export type currentVarType = {
   nodeId: string
   nodeType: string
   title: string
+  isValueFetched?: boolean
   var: VarInInspect
 }
 
@@ -33,12 +34,28 @@ const Panel: FC = () => {
     conversationVars,
     systemVars,
     nodesWithInspectVars,
+    fetchInspectVarValue,
   } = useCurrentVars()
+
   const isEmpty = useMemo(() => {
     const allVars = [...environmentVariables, ...conversationVars, ...systemVars, ...nodesWithInspectVars]
     return allVars.length === 0
   }, [environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
 
+  const isCurrentNodeVarValueFetching = useMemo(() => {
+    if (!currentNodeVar) return false
+    const targetNode = nodesWithInspectVars.find(node => node.nodeId === currentNodeVar.nodeId)
+    if (!targetNode) return false
+    return !targetNode.isValueFetched
+  }, [currentNodeVar, nodesWithInspectVars])
+
+  const handleNodeVarSelect = useCallback((node: currentVarType) => {
+    setCurrentNodeVar(node)
+    const targetNode = nodesWithInspectVars.find(n => n.nodeId === node.nodeId)
+    if (targetNode && !targetNode.isValueFetched)
+      fetchInspectVarValue([node.nodeId])
+  }, [fetchInspectVarValue, nodesWithInspectVars])
+
   if (isEmpty) {
     return (
       <div className={cn('flex h-full flex-col')}>
@@ -71,12 +88,13 @@ const Panel: FC = () => {
       >
         <Left
           currentNodeVar={currentNodeVar}
-          handleVarSelect={setCurrentNodeVar}
+          handleVarSelect={handleNodeVarSelect}
         />
       </div>
       {/* right */}
       <div className='w-0 grow'>
         <Right
+          isValueFetching={isCurrentNodeVarValueFetching}
           currentNodeVar={currentNodeVar}
           handleOpenMenu={() => setShowLeftPanel(true)}
         />

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

@@ -1,4 +1,3 @@
-// import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiArrowGoBackLine,
@@ -17,6 +16,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import Loading from '@/app/components/base/loading'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
@@ -24,11 +24,13 @@ import cn from '@/utils/classnames'
 type Props = {
   currentNodeVar?: currentVarType
   handleOpenMenu: () => void
+  isValueFetching?: boolean
 }
 
 const Right = ({
   currentNodeVar,
   handleOpenMenu,
+  isValueFetching,
 }: Props) => {
   const { t } = useTranslation()
   const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
@@ -115,7 +117,12 @@ const Right = ({
       {/* content */}
       <div className='grow p-2'>
         {!currentNodeVar && <Empty />}
-        {currentNodeVar && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} />}
+        {isValueFetching && (
+          <div className='flex h-full items-center justify-center'>
+            <Loading />
+          </div>
+        )}
+        {currentNodeVar && !isValueFetching && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} />}
       </div>
     </div>
   )

web/app/components/workflow/variable-inspect/value-content.tsx

@@ -73,7 +73,7 @@ const ValueContent = ({
           ? [currentVar.value]
           : [])
     }
-  }, [currentVar, showTextEditor, showJSONEditor, showFileEditor])
+  }, [currentVar.id])
 
   const handleTextChange = (value: string) => {
     if (currentVar.value_type === 'string')

web/types/workflow.ts

@@ -395,6 +395,6 @@ export type NodeWithVar = {
   nodeType: BlockEnum
   title: string
   vars: VarInInspect[]
-  isFetchingValues?: boolean
   isSingRunRunning?: boolean
+  isValueFetched?: boolean
 }