add validation for output name & add correct placeholder

web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx

@@ -1,7 +1,7 @@
 import type { FormInputItem, FormInputItemPlaceholder } from '@/app/components/workflow/nodes/human-input/types'
 import { produce } from 'immer'
 import * as React from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { InputVarType } from '@/app/components/workflow/types'
@@ -34,9 +34,17 @@ const InputField: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [tempPayload, setTempPayload] = useState(payload || defaultPayload)
+  const nameValid = useMemo(() => {
+    const name = tempPayload.output_variable_name.trim()
+    if (!name)
+      return false
+    return /(?:[a-z_]\w{0,29}){1,10}/.test(name)
+  }, [tempPayload.output_variable_name])
   const handleSave = useCallback(() => {
+    if (!nameValid)
+      return
     onChange(tempPayload)
-  }, [tempPayload])
+  }, [nameValid, onChange, tempPayload])
   const placeholderConfig = tempPayload.placeholder
   const handlePlaceholderChange = useCallback((key: keyof FormInputItemPlaceholder) => {
     return (value: any) => {
@@ -69,6 +77,11 @@ const InputField: React.FC<Props> = ({
           }}
           autoFocus
         />
+        {tempPayload.output_variable_name && !nameValid && (
+          <div className="system-xs-regular mt-1 px-1 text-text-destructive-secondary">
+            {t(`${i18nPrefix}.variableNameInvalid`, { ns: 'workflow' })}
+          </div>
+        )}
       </div>
       <div className="mt-4">
         <div className="system-xs-medium mb-1.5 text-text-secondary">
@@ -93,6 +106,7 @@ const InputField: React.FC<Props> = ({
               <Button
                 variant="primary"
                 onClick={handleSave}
+                disabled={!nameValid}
               >
                 {t('operation.save', { ns: 'common' })}
               </Button>
@@ -101,6 +115,7 @@ const InputField: React.FC<Props> = ({
               <Button
                 className="flex"
                 variant="primary"
+                disabled={!nameValid}
                 onClick={handleSave}
               >
                 <span className="mr-1">{t(`${i18nPrefix}.insert`, { ns: 'workflow' })}</span>

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

@@ -121,6 +121,7 @@ const FormContent: FC<FormContentProps> = ({
           className={cn('min-h-[80px] ', isExpand && 'h-full')}
           onFocus={setFocus}
           onBlur={setBlur}
+          placeholder={t('nodes.humanInput.formContent.placeholder', { ns: 'workflow' })}
           hitlInputBlock={{
             show: true,
             formInputs,

web/i18n/en-US/workflow.json

@@ -560,6 +560,7 @@
   "nodes.humanInput.errorMsg.noDeliveryMethodEnabled": "Please enable at least one delivery method",
   "nodes.humanInput.errorMsg.noUserActions": "Please add at least one user action",
   "nodes.humanInput.formContent.hotkeyTip": "Press <Key/> to insert variable, <CtrlKey/><Key/> to insert input field",
+  "nodes.humanInput.formContent.placeholder": "Type content here",
   "nodes.humanInput.formContent.preview": "Preview",
   "nodes.humanInput.formContent.title": "Form Content",
   "nodes.humanInput.formContent.tooltip": "What users will see after opening the form. Supports Markdown formatting.",
@@ -573,6 +574,7 @@
   "nodes.humanInput.insertInputField.useConstantInstead": "Use Constant Instead",
   "nodes.humanInput.insertInputField.useVarInstead": "Use Variable Instead",
   "nodes.humanInput.insertInputField.variable": "variable",
+  "nodes.humanInput.insertInputField.variableNameInvalid": "Variable name can only contain letters, numbers, and underscores, and cannot start with a number",
   "nodes.humanInput.log.inputURL": "Input URL:",
   "nodes.humanInput.log.reason": "Reason:",
   "nodes.humanInput.log.reasonContent": "Human input required to proceed",

web/i18n/zh-Hans/workflow.json

@@ -560,6 +560,7 @@
   "nodes.humanInput.errorMsg.noDeliveryMethodEnabled": "请至少启用一种提交方式",
   "nodes.humanInput.errorMsg.noUserActions": "请添加至少一个用户操作",
   "nodes.humanInput.formContent.hotkeyTip": "按 <Key/> 插入变量，按 <CtrlKey/><Key/> 插入输入字段",
+  "nodes.humanInput.formContent.placeholder": "在此输入内容",
   "nodes.humanInput.formContent.preview": "预览",
   "nodes.humanInput.formContent.title": "表单内容",
   "nodes.humanInput.formContent.tooltip": "用户打开表单后看到的内容。支持 Markdown 格式。",
@@ -573,6 +574,7 @@
   "nodes.humanInput.insertInputField.useConstantInstead": "使用常量代替",
   "nodes.humanInput.insertInputField.useVarInstead": "使用变量代替",
   "nodes.humanInput.insertInputField.variable": "变量",
+  "nodes.humanInput.insertInputField.variableNameInvalid": "只能包含字母、数字和下划线，且不能以数字开头",
   "nodes.humanInput.log.inputURL": "输入 URL ：",
   "nodes.humanInput.log.reason": "原因：",
   "nodes.humanInput.log.reasonContent": "需要人类输入才能继续",