From 6da1a48cad5e0eae23926e0260056a1bbfd785d7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 7 Aug 2025 17:56:37 +0800
Subject: [PATCH] chore: notes add form content holder

---
 .../plugins/hitl-input-block/component-ui.tsx   |  6 +++---
 .../human-input/components/form-content.tsx     | 17 +++++++++++++++++
 .../workflow/nodes/human-input/panel.tsx        | 13 +++++++++++++
 web/i18n/en-US/workflow.ts                      |  8 +++++++-
 web/i18n/zh-Hans/workflow.ts                    |  8 +++++++-
 5 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/human-input/components/form-content.tsx

diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index 8d8283eee8..f694adeabf 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -24,11 +24,11 @@ const ComponentUI: FC<Props> = ({
     <div
       className='relative flex h-8 w-full select-none items-center rounded-[8px] border-[1.5px] border-components-input-border-active bg-background-default-hover pl-1.5 pr-0.5'
     >
-      <div className='absolute left-2.5 top-[-12px] '>
+      <div className='absolute left-2.5 top-[-12px]'>
         <div className='absolute bottom-1 h-[1.5px] w-full bg-background-default-subtle'></div>
-        <div className=' relative flex items-center space-x-0.5 text-text-accent-light-mode-only'>
+        <div className='relative flex items-center space-x-0.5 px-1 text-text-accent-light-mode-only'>
           <VariableX className='size-3' />
-          <div className='system-xs-medium'>notes</div>
+          <div className='system-xs-medium'>{t('workflow.nodes.humanInput.editor.notes')}</div>
         </div>
       </div>
 
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
new file mode 100644
index 0000000000..69305fbf3f
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
@@ -0,0 +1,17 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+
+}
+
+const FormContent: FC<Props> = ({
+}) => {
+  return (
+    <div>
+      aaaa
+    </div>
+  )
+}
+export default React.memo(FormContent)
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 1a7096a23c..1d205e389b 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -17,6 +17,7 @@ import TimeoutInput from './components/timeout'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
 import type { Var } from '@/app/components/workflow/types'
+import FormContent from './components/form-content'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -53,6 +54,18 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
       <div className='px-4 py-2'>
         <Divider className='!my-0 !h-px !bg-divider-subtle' />
       </div>
+      {/* form content */}
+      <div className='px-4 py-2'>
+        <div className='mb-1 flex items-center justify-between'>
+          <div className='flex items-center gap-0.5'>
+            <div className='system-sm-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.formContent.title`)}</div>
+            <Tooltip
+              popupContent={t(`${i18nPrefix}.formContent.tooltip`)}
+            />
+          </div>
+        </div>
+        <FormContent />
+      </div>
       {/* user actions */}
       <div className='px-4 py-2'>
         <div className='mb-1 flex items-center justify-between'>
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 8fa1e70a5a..2785f3238c 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -944,7 +944,10 @@ const translation = {
           },
         },
       },
-      formContent: 'form content',
+      formContent: {
+        title: 'Form Content',
+        tooltip: 'What users will see after opening the form. Supports Markdown formatting.',
+      },
       userActions: {
         title: 'User Actions',
         tooltip: 'Define buttons that users can click to respond to this form. Each button can trigger different workflow paths.',
@@ -971,6 +974,9 @@ const translation = {
         prePopulateFieldPlaceholderEnd: 'will see initially, or leave empty.',
         insert: 'Insert',
       },
+      editor: {
+        notes: 'notes',
+      },
     },
   },
   tracing: {
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 7380ba924b..d6d766543e 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -945,7 +945,10 @@ const translation = {
           },
         },
       },
-      formContent: '表单内容',
+      formContent: {
+        title: '表单内容',
+        tooltip: '用户打开表单后看到的内容。支持 Markdown 格式。',
+      },
       userActions: {
         title: '用户操作',
         tooltip: '定义用户可以点击以响应此表单的按钮。每个按钮都可以触发不同的工作流路径。',
@@ -972,6 +975,9 @@ const translation = {
         prePopulateFieldPlaceholderEnd: '将最初看到，或留空。',
         insert: '插入',
       },
+      editor: {
+        notes: ' 笔记',
+      },
     },
   },
   tracing: {