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 36dcf034ae..b5c9632092 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,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 = ({ }) => { 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 = ({ }} autoFocus /> + {tempPayload.output_variable_name && !nameValid && ( +
+ {t(`${i18nPrefix}.variableNameInvalid`, { ns: 'workflow' })} +
+ )}
@@ -93,6 +106,7 @@ const InputField: React.FC = ({ @@ -101,6 +115,7 @@ const InputField: React.FC = ({