feat: start node handle var add or change

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

@@ -23,6 +23,7 @@ const useInspectVarsCrud = () => {
     getNodeInspectVars,
     setNodeInspectVars,
     setInspectVarValue,
+    getVarId,
     renameInspectVarName: renameInspectVarNameInStore,
     deleteAllInspectVars: deleteAllInspectVarsInStore,
     hasNodeInspectVars,
@@ -100,16 +101,21 @@ const useInspectVarsCrud = () => {
     }
   }, [data, currNodeId, currEditVarId, getNodeInspectVars, editInspectVarValue])
 
-  const renameInspectVarName = async (nodeId: string, varId: string, selector: ValueSelector) => {
+  const renameInspectVarName = async (nodeId: string, oldName: string, newName: string) => {
+    const varId = getVarId(nodeId, oldName)
+    if (!varId)
+      return
+
+    const newSelector = [nodeId, newName]
     await doEditInspectorVar({
       varId,
-      name: selector[1],
+      name: newName,
     })
-    renameInspectVarNameInStore(nodeId, varId, selector)
+    renameInspectVarNameInStore(nodeId, varId, newSelector)
   }
 
-  const editInspectVarValueType = (nodeId: string) => {
-    deleteNodeInspectorVars(nodeId)
+  const editInspectVarValueType = async (nodeId: string) => {
+    return await deleteNodeInspectorVars(nodeId)
   }
 
   const resetToLastRunVar = (nodeId: string, varId: string) => {

web/app/components/workflow/nodes/start/use-config.ts

@@ -10,6 +10,7 @@ import {
   useNodesReadOnly,
   useWorkflow,
 } from '@/app/components/workflow/hooks'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const useConfig = (id: string, payload: StartNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
@@ -18,6 +19,11 @@ const useConfig = (id: string, payload: StartNodeType) => {
 
   const { inputs, setInputs } = useNodeCrud<StartNodeType>(id, payload)
 
+  const {
+    deleteNodeInspectorVars,
+    renameInspectVarName,
+  } = useInspectVarsCrud()
+
   const [isShowAddVarModal, {
     setTrue: showAddVarModal,
     setFalse: hideAddVarModal,
@@ -46,8 +52,12 @@ const useConfig = (id: string, payload: StartNodeType) => {
     if (moreInfo?.payload?.type === ChangeType.changeVarName) {
       const changedVar = newList[moreInfo.index]
       handleOutVarRenameChange(id, [id, inputs.variables[moreInfo.index].variable], [id, changedVar.variable])
+      renameInspectVarName(id, inputs.variables[moreInfo.index].variable, changedVar.variable)
+    }
+    else { // edit var type
+      deleteNodeInspectorVars(id)
     }
-  }, [handleOutVarRenameChange, id, inputs, isVarUsedInNodes, setInputs, showRemoveVarConfirm])
+  }, [deleteNodeInspectorVars, handleOutVarRenameChange, id, inputs, isVarUsedInNodes, renameInspectVarName, setInputs, showRemoveVarConfirm])
 
   const removeVarInNode = useCallback(() => {
     const newInputs = produce(inputs, (draft) => {
@@ -63,7 +73,8 @@ const useConfig = (id: string, payload: StartNodeType) => {
       draft.variables.push(payload)
     })
     setInputs(newInputs)
-  }, [inputs, setInputs])
+    deleteNodeInspectorVars(id)
+  }, [deleteNodeInspectorVars, id, inputs, setInputs])
   return {
     readOnly,
     isChatMode,

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

@@ -20,6 +20,7 @@ type InspectVarsActions = {
   deleteNodeInspectVars: (nodeId: string) => void
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
   hasNodeInspectVars: (nodeId: string) => boolean
+  getVarId: (nodeId: string, varName: string) => string | undefined
   setInspectVarValue: (nodeId: string, name: string, value: any) => void
   renameInspectVarName: (nodeId: string, varId: string, selector: ValueSelector) => void
   deleteInspectVar: (nodeId: string, varId: string) => void
@@ -97,6 +98,15 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
     hasNodeInspectVars: (nodeId) => {
       return !!get().getNodeInspectVars(nodeId)
     },
+    getVarId: (nodeId: string, varName: string) => {
+      const node = get().getNodeInspectVars(nodeId)
+      if (!node)
+        return undefined
+      const varId = node.vars.find((varItem) => {
+        return varItem.selector[1] === varName
+      })?.id
+      return varId
+    },
     setInspectVarValue: (nodeId, varId, value) => {
       set(produce((state: InspectVarsSliceShape) => {
         const nodes = state.nodesWithInspectVars.map((node) => {