From e2e5dedceb12218ee6f073462c4a30b58cd32f0d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 7 Aug 2025 18:28:08 +0800
Subject: [PATCH] feat: add form content editor

---
 .../components/base/prompt-editor/index.tsx   |  3 +-
 .../human-input/components/form-content.tsx   | 55 ++++++++++++++++++-
 .../workflow/nodes/human-input/panel.tsx      |  7 ++-
 .../workflow/nodes/human-input/types.ts       | 13 ++++-
 .../workflow/nodes/human-input/use-config.ts  |  3 +
 .../nodes/human-input/use-form-content.ts     | 17 ++++++
 6 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/human-input/use-form-content.ts

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 24e7bcb442..a80c15c897 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -259,8 +259,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           )
         }
         {
-          // TODO: test hitlInputBlock?.show
-          (
+          hitlInputBlock?.show && (
             <>
               <HITLInputBlock />
               <HITLInputBlockReplacementBlock />
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content.tsx b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
index 69305fbf3f..8e14bef745 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
@@ -1,16 +1,67 @@
 'use client'
+import PromptEditor from '@/app/components/base/prompt-editor'
 import type { FC } from 'react'
 import React from 'react'
+import useAvailableVarList from '../../_base/hooks/use-available-var-list'
+import { BlockEnum } from '../../../types'
+import { useWorkflowVariableType } from '../../../hooks'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
-
+  nodeId: string
+  value: string
+  onChange: (value: string) => void
 }
 
 const FormContent: FC<Props> = ({
+  nodeId,
+  value,
+  onChange,
 }) => {
+  const { t } = useTranslation()
+  const filterVar = () => true
+  const {
+    availableVars,
+    availableNodesWithParent: availableNodes,
+  } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar,
+  })
+
+  const getVarType = useWorkflowVariableType()
+
   return (
     <div>
-      aaaa
+      <PromptEditor
+        value={value}
+        onChange={onChange}
+        className='min-h-[80px]'
+        hitlInputBlock={{
+          show: true,
+        }}
+        workflowVariableBlock={{
+          show: true,
+          variables: availableVars || [],
+          getVarType: getVarType as any,
+          workflowNodesMap: availableNodes.reduce((acc: any, node) => {
+            acc[node.id] = {
+              title: node.data.title,
+              type: node.data.type,
+              width: node.width,
+              height: node.height,
+              position: node.position,
+            }
+            if (node.data.type === BlockEnum.Start) {
+              acc.sys = {
+                title: t('workflow.blocks.start'),
+                type: BlockEnum.Start,
+              }
+            }
+            return acc
+          }, {}),
+        }}
+        editable
+      />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 1d205e389b..85a3843dda 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -33,6 +33,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
     handleUserActionChange,
     handleUserActionDelete,
     handleTimeoutChange,
+    handleFormContentChange,
   } = useConfig(id, data)
 
   const { availableVars, availableNodesWithParent } = useAvailableVarList(id, {
@@ -64,7 +65,11 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
             />
           </div>
         </div>
-        <FormContent />
+        <FormContent
+          nodeId={id}
+          value={inputs.form_content}
+          onChange={handleFormContentChange}
+        />
       </div>
       {/* user actions */}
       <div className='px-4 py-2'>
diff --git a/web/app/components/workflow/nodes/human-input/types.ts b/web/app/components/workflow/nodes/human-input/types.ts
index 136ff58767..500f4d9f9b 100644
--- a/web/app/components/workflow/nodes/human-input/types.ts
+++ b/web/app/components/workflow/nodes/human-input/types.ts
@@ -1,8 +1,17 @@
-import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
+import type { CommonNodeType, InputVarType, ValueSelector, Variable } from '@/app/components/workflow/types'
 
 export type HumanInputNodeType = CommonNodeType & {
   delivery_methods: DeliveryMethod[]
-  form_content: any
+  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
+    }
+  }[]
   user_actions: UserAction[]
   timeout: number
   timeout_unit: 'hour' | 'day'
diff --git a/web/app/components/workflow/nodes/human-input/use-config.ts b/web/app/components/workflow/nodes/human-input/use-config.ts
index b58cb5139b..d132c0015f 100644
--- a/web/app/components/workflow/nodes/human-input/use-config.ts
+++ b/web/app/components/workflow/nodes/human-input/use-config.ts
@@ -4,9 +4,11 @@ import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-cr
 import {
   useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
+import useFormContent from './use-form-content'
 const useConfig = (id: string, payload: HumanInputNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<HumanInputNodeType>(id, payload)
+  const formContentHook = useFormContent(id, payload)
 
   const handleDeliveryMethodChange = (methods: DeliveryMethod[]) => {
     setInputs({
@@ -58,6 +60,7 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
     handleUserActionChange,
     handleUserActionDelete,
     handleTimeoutChange,
+    ...formContentHook,
   }
 }
 
diff --git a/web/app/components/workflow/nodes/human-input/use-form-content.ts b/web/app/components/workflow/nodes/human-input/use-form-content.ts
new file mode 100644
index 0000000000..1fbdf02a32
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/use-form-content.ts
@@ -0,0 +1,17 @@
+import useNodeCrud from '../_base/hooks/use-node-crud'
+import type { HumanInputNodeType } from './types'
+
+const useFormContent = (id: string, payload: HumanInputNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<HumanInputNodeType>(id, payload)
+  const handleFormContentChange = (value: string) => {
+    setInputs({
+      ...inputs,
+      form_content: value,
+    })
+  }
+  return {
+    handleFormContentChange,
+  }
+}
+
+export default useFormContent