feat: pass current value to form input

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

@@ -6,17 +6,24 @@ import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { BlockEnum } from '../../../types'
 import { useWorkflowVariableType } from '../../../hooks'
 import { useTranslation } from 'react-i18next'
+import type { FormInputItem } from '../types'
 
 type Props = {
   nodeId: string
   value: string
   onChange: (value: string) => void
+  formInputs: FormInputItem[]
+  onFormInputsChange: (payload: FormInputItem[]) => void
+  nodeTitle: string
 }
 
 const FormContent: FC<Props> = ({
   nodeId,
   value,
   onChange,
+  formInputs,
+  onFormInputsChange,
+  nodeTitle,
 }) => {
   const { t } = useTranslation()
   const filterVar = () => true
@@ -38,6 +45,9 @@ const FormContent: FC<Props> = ({
         className='min-h-[80px]'
         hitlInputBlock={{
           show: true,
+          formInputs,
+          nodeTitle,
+          onFormInputsChange,
         }}
         workflowVariableBlock={{
           show: true,

web/app/components/workflow/nodes/human-input/panel.tsx

@@ -35,6 +35,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
     handleUserActionDelete,
     handleTimeoutChange,
     handleFormContentChange,
+    handleFormInputsChange,
   } = useConfig(id, data)
 
   const { availableVars, availableNodesWithParent } = useAvailableVarList(id, {
@@ -70,6 +71,9 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           nodeId={id}
           value={inputs.form_content}
           onChange={handleFormContentChange}
+          nodeTitle={inputs.title}
+          formInputs={inputs.inputs}
+          onFormInputsChange={handleFormInputsChange}
         />
       </div>
       {/* user actions */}

web/app/components/workflow/nodes/human-input/types.ts

@@ -3,15 +3,7 @@ import type { CommonNodeType, InputVarType, ValueSelector, Variable } from '@/ap
 export type HumanInputNodeType = CommonNodeType & {
   delivery_methods: DeliveryMethod[]
   form_content: string
-  form_input: {
-    type: InputVarType
-    output_variable_name: string
-    placeholder?: { // only text-input and paragraph support placeholder
-      type: 'variable' | 'const',
-      selector: ValueSelector
-      value: string
-    }
-  }[]
+  inputs: FormInputItem[]
   user_actions: UserAction[]
   timeout: number
   timeout_unit: 'hour' | 'day'
@@ -47,6 +39,19 @@ export type DeliveryMethod = {
   config?: EmailConfig
 }
 
+export type FormInputItemPlaceholder = {
+  type: 'variable' | 'const',
+  selector: ValueSelector
+  value: string
+}
+
+export type FormInputItem = {
+  type: InputVarType
+  output_variable_name: string
+  // only text-input and paragraph support placeholder
+  placeholder?: FormInputItemPlaceholder
+}
+
 export enum UserActionButtonType {
   Primary = 'primary',
   Default = 'default',

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

@@ -1,5 +1,5 @@
 import useNodeCrud from '../_base/hooks/use-node-crud'
-import type { HumanInputNodeType } from './types'
+import type { FormInputItem, HumanInputNodeType } from './types'
 
 const useFormContent = (id: string, payload: HumanInputNodeType) => {
   const { inputs, setInputs } = useNodeCrud<HumanInputNodeType>(id, payload)
@@ -9,8 +9,16 @@ const useFormContent = (id: string, payload: HumanInputNodeType) => {
       form_content: value,
     })
   }
+
+  const handleFormInputsChange = (formInputs: FormInputItem[]) => {
+    setInputs({
+      ...inputs,
+      inputs: formInputs,
+    })
+  }
   return {
     handleFormContentChange,
+    handleFormInputsChange,
   }
 }