From e257455c9c06ee111378c67b78bf79a1aee6b43f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 25 Jul 2025 16:59:09 +0800
Subject: [PATCH] feat: input filed form

---
 .../components/base/prompt-editor/index.tsx   |  4 +-
 .../plugins/hitl-input-block/input-field.tsx  | 62 +++++++++++++------
 .../plugins/hitl-input-block/tag-label.tsx    | 24 +++++++
 .../plugins/hitl-input-block/test-page.tsx    | 15 -----
 4 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
 delete mode 100644 web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index a87a51cd50..6ad832b595 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { FC } from 'react'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import type {
   EditorState,
 } from 'lexical'
@@ -66,7 +66,7 @@ export type PromptEditorProps = {
   compact?: boolean
   wrapperClassName?: string
   className?: string
-  placeholder?: string | JSX.Element
+  placeholder?: string | React.JSX.Element
   placeholderClassName?: string
   style?: React.CSSProperties
   value?: string
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index 972982cacb..d716fe5880 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -1,29 +1,55 @@
 import React from 'react'
 import Input from '@/app/components/base/input'
-import Button from '@/app/components/base/button'
-import Tooltip from '@/app/components/base/tooltip'
-import { RiSendPlaneLine } from '@remixicon/react'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import TagLabel from './tag-label'
+import Button from '../../../button'
+import { useTranslation } from 'react-i18next'
+import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 
 const InputField: React.FC = () => {
+  const { t } = useTranslation()
   return (
-    <div className="flex flex-col space-y-4">
-      {/* Input Field */}
-      <div className="flex items-center space-x-2">
+    <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
+      <div className='system-md-semibold text-text-primary'>Insert input field</div>
+      <div className="mt-3">
+        <div className='system-xs-medium text-text-secondary'>
+          Save response as<span className='system-xs-regular relative text-text-destructive-secondary'>*</span>
+        </div>
         <Input
-          className="flex-1 rounded-md border border-components-input-border-active bg-components-input-bg-normal px-4 py-2 text-text-primary"
-          placeholder="Enter your text here"
+          className="mt-1.5"
+          placeholder="Name this variable for later reference"
         />
-        <Tooltip popupContent="Submit">
-          <Button className="bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg-hover">
-            <RiSendPlaneLine className="h-5 w-5" />
-          </Button>
-        </Tooltip>
       </div>
-
-      {/* Additional Info */}
-      <p className="text-sm text-components-input-text-placeholder">
-        Please provide the required information.
-      </p>
+      <div className='mt-4'>
+        <div className='system-xs-medium text-text-secondary'>
+          Pre-populate field
+        </div>
+        <PromptEditor
+          className='mt-1.5 h-[72px] rounded-lg bg-components-input-bg-normal px-3 py-1'
+          placeholder={
+          <div className='system-sm-regular mt-1 px-3 text-text-tertiary'>
+            <div className="flex h-5 items-center space-x-1">
+              <span>Add</span>
+              <TagLabel type='edit' text='static content' />
+              <span>or</span>
+              <TagLabel type='variable' text='variable' />
+              <span>users</span>
+            </div>
+            <div className="flex h-5 items-center">will see initially, or leave empty.</div>
+          </div>}
+        />
+      </div>
+      <div className='mt-4 flex justify-end space-x-2'>
+        <Button >{t('common.operation.cancel')}</Button>
+        <Button
+          className='flex'
+          variant='primary'
+        >
+          <span className='mr-1'>Insert</span>
+          <span className='system-kbd mr-0.5 flex h-4 items-center rounded-[4px] bg-components-kbd-bg-white px-1'>{getKeyboardKeyNameBySystem('ctrl')}</span>
+          <span className=' system-kbd flex items-center rounded-[4px] bg-components-kbd-bg-white px-1'>↩︎</span>
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
new file mode 100644
index 0000000000..01c19155f4
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
@@ -0,0 +1,24 @@
+'use client'
+import { RiEditLine } from '@remixicon/react'
+import type { FC } from 'react'
+import React from 'react'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+
+type Props = {
+  type: 'edit' | 'variable'
+  text: string
+}
+
+const TagLabel: FC<Props> = ({
+  type,
+  text,
+}) => {
+  const Icon = type === 'edit' ? RiEditLine : Variable02
+  return (
+    <div className='flex h-5 items-center space-x-1 rounded-md bg-components-button-secondary-bg px-1 text-text-accent'>
+      <Icon className='size-3.5' />
+      <div className='system-xs-medium '>{text}</div>
+    </div>
+  )
+}
+export default React.memo(TagLabel)
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx
deleted file mode 100644
index 7fdcc935b3..0000000000
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import InputField from './input-field'
-
-const TestPage: React.FC = () => {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-100">
-      <div className="w-full max-w-md rounded-md bg-white p-4 shadow-md">
-        <h1 className="mb-4 text-xl font-bold">Test Input Field</h1>
-        <InputField />
-      </div>
-    </div>
-  )
-}
-
-export default TestPage