chore: var aggrect rename throtte

web/app/components/workflow/nodes/variable-assigner/use-config.ts

@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import produce from 'immer'
-import { useBoolean } from 'ahooks'
+import { useBoolean, useDebounceFn } from 'ahooks'
 import { v4 as uuid4 } from 'uuid'
 import type { ValueSelector, Var } from '../../types'
 import { VarType } from '../../types'
@@ -143,6 +143,20 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
     deleteNodeInspectorVars(id)
   }, [deleteNodeInspectorVars, id, inputs, setInputs])
 
+  // record the first old name value
+  const oldNameRecord = useRef<Record<string, string>>({})
+
+  const {
+    run: renameInspectNameWithDebounce,
+  } = useDebounceFn(
+    (id: string, newName: string) => {
+      const oldName = oldNameRecord.current[id]
+      renameInspectVarName(id, oldName, newName)
+      delete oldNameRecord.current[id]
+    },
+    { wait: 500 },
+  )
+
   const handleVarGroupNameChange = useCallback((groupId: string) => {
     return (name: string) => {
       const index = inputs.advanced_settings.groups.findIndex(item => item.groupId === groupId)
@@ -151,9 +165,11 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
       })
       handleOutVarRenameChange(id, [id, inputs.advanced_settings.groups[index].group_name, 'output'], [id, name, 'output'])
       setInputs(newInputs)
-      renameInspectVarName(id, inputs.advanced_settings.groups[index].group_name, name)
+      if(!(id in oldNameRecord.current))
+        oldNameRecord.current[id] = inputs.advanced_settings.groups[index].group_name
+      renameInspectNameWithDebounce(id, name)
     }
-  }, [handleOutVarRenameChange, id, inputs, renameInspectVarName, setInputs])
+  }, [handleOutVarRenameChange, id, inputs, renameInspectNameWithDebounce, setInputs])
 
   const onRemoveVarConfirm = useCallback(() => {
     removedVars.forEach((v) => {