fix(web): add input field crash

web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx

@@ -9,6 +9,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
 } from 'react'
 import { HITL_INPUT_REG } from '@/config'
 import { decoratorTransform } from '../../utils'
@@ -39,6 +40,32 @@ const HITLInputReplacementBlock = ({
       acc.push(...curr.vars.filter(v => v.isRagVariable))
     return acc
   }, []), [variables])
+  const latestConfigRef = useRef({
+    nodeId,
+    formInputs,
+    onFormInputsChange,
+    onFormInputItemRename,
+    onFormInputItemRemove,
+    workflowNodesMap,
+    getVarType,
+    environmentVariables,
+    conversationVariables,
+    ragVariables,
+    readonly,
+  })
+  latestConfigRef.current = {
+    nodeId,
+    formInputs,
+    onFormInputsChange,
+    onFormInputItemRename,
+    onFormInputItemRemove,
+    workflowNodesMap,
+    getVarType,
+    environmentVariables,
+    conversationVariables,
+    ragVariables,
+    readonly,
+  }
 
   useEffect(() => {
     if (!editor.hasNodes([HITLInputNode]))
@@ -47,6 +74,20 @@ const HITLInputReplacementBlock = ({
 
   const createHITLInputBlockNode = useCallback((textNode: TextNode): HITLInputNode => {
     const varName = textNode.getTextContent().split('.')[1]!.replace(/#\}\}$/, '')
+    const {
+      nodeId,
+      formInputs,
+      onFormInputsChange,
+      onFormInputItemRename,
+      onFormInputItemRemove,
+      workflowNodesMap,
+      getVarType,
+      environmentVariables,
+      conversationVariables,
+      ragVariables,
+      readonly,
+    } = latestConfigRef.current
+
     return $applyNodeReplacement($createHITLInputNode(
       varName,
       nodeId,
@@ -61,7 +102,7 @@ const HITLInputReplacementBlock = ({
       ragVariables,
       readonly,
     ))
-  }, [nodeId, formInputs, onFormInputsChange, onFormInputItemRename, onFormInputItemRemove, workflowNodesMap, getVarType, environmentVariables, conversationVariables, ragVariables, readonly])
+  }, [])
 
   const getMatch = useCallback((text: string) => {
     const matchArr = REGEX.exec(text)

web/app/components/base/prompt-editor/prompt-editor-content.tsx

@@ -1,9 +1,6 @@
-import type {
-  EditorState,
-  LexicalCommand,
-} from 'lexical'
+import type { EditorState } from 'lexical'
 import type { FC } from 'react'
-import type { Hotkey } from './plugins/shortcuts-popup-plugin'
+import type { Hotkey, ShortcutPopupInsertHandler } from './plugins/shortcuts-popup-plugin'
 import type {
   ContextBlockType,
   CurrentBlockType,
@@ -71,7 +68,7 @@ import {
 
 type ShortcutPopup = {
   hotkey: Hotkey
-  Popup: React.ComponentType<{ onClose: () => void, onInsert: (command: LexicalCommand<unknown>, params: unknown[]) => void }>
+  Popup: React.ComponentType<{ onClose: () => void, onInsert: ShortcutPopupInsertHandler }>
 }
 
 type PromptEditorContentProps = {

web/app/components/workflow/nodes/human-input/components/form-content.tsx

@@ -101,8 +101,8 @@ const FormContent: FC<FormContentProps> = ({
     acc[node.id] = {
       title: node.data.title,
       type: node.data.type,
-      width: node.width,
-      height: node.height,
+      width: node.width ?? undefined,
+      height: node.height ?? undefined,
       position: node.position,
     }
     if (node.data.type === BlockEnum.Start) {