From 19e152fd0cf1bb4c329e231e6f38127c2ae6a5dd Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 28 Aug 2025 16:57:12 +0800
Subject: [PATCH] chore: prompt editor ui

---
 .../nodes/human-input/components/form-content.tsx   | 13 ++++++++++++-
 .../components/workflow/nodes/human-input/panel.tsx |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

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 120f980f36..335fe17b3c 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
@@ -10,6 +10,9 @@ import type { FormInputItem } from '../types'
 import AddInputField from './add-input-field'
 import { INSERT_HITL_INPUT_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/hitl-input-block'
 import type { LexicalCommand } from 'lexical'
+import { isMac } from '../../../utils'
+import { useBoolean } from 'ahooks'
+import cn from '@/utils/classnames'
 
 type Props = {
   nodeId: string
@@ -73,13 +76,20 @@ const FormContent: FC<Props> = ({
     }
   }, [value])
 
+  const [isFocus, {
+    setTrue: setFocus,
+    setFalse: setBlur,
+  }] = useBoolean(false)
+
   return (
-    <div>
+    <div className={cn('rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal px-3 pt-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active')}>
       <PromptEditor
         key={editorKey}
         value={value}
         onChange={onChange}
         className='min-h-[80px]'
+        onFocus={setFocus}
+        onBlur={setBlur}
         hitlInputBlock={{
           show: true,
           formInputs,
@@ -122,6 +132,7 @@ const FormContent: FC<Props> = ({
           ),
         }]}
       />
+      <div className='system-xs-regular flex h-8 items-center text-components-input-text-placeholder'>Press / to insert variable, {isMac() ? '⌘' : 'Ctrl'} / to insert input field</div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index d901cad57f..0dd5f1cb4a 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -63,7 +63,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
       {/* 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='flex h-6 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`)}