From 52e9342af53f2bd3543b32e77b11842aef30968c Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 21 Jan 2026 11:31:09 +0800 Subject: [PATCH] feat: refactor user action handling in human input panel and update error messaging --- .../human-input/components/user-action.tsx | 2 +- .../workflow/nodes/human-input/panel.tsx | 19 +++++++++++-------- .../workflow/nodes/human-input/utils.ts | 4 ---- web/i18n/en-US/workflow.json | 4 ++-- web/i18n/zh-Hans/workflow.json | 4 ++-- 5 files changed, 16 insertions(+), 17 deletions(-) diff --git a/web/app/components/workflow/nodes/human-input/components/user-action.tsx b/web/app/components/workflow/nodes/human-input/components/user-action.tsx index ba15f8fef0..cbaf564fac 100644 --- a/web/app/components/workflow/nodes/human-input/components/user-action.tsx +++ b/web/app/components/workflow/nodes/human-input/components/user-action.tsx @@ -47,7 +47,7 @@ const UserActionItem: FC = ({ .join('') if (sanitized !== withUnderscores) - Toast.notify({ type: 'error', message: t(`${i18nPrefix}.userActions.invalidActionIdFormat`, { ns: 'workflow' }) }) + Toast.notify({ type: 'error', message: t(`${i18nPrefix}.userActions.actionIdFormatTip`, { ns: 'workflow' }) }) // Limit to 20 characters if (sanitized.length > ACTION_ID_MAX_LENGTH) { diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx index 80e38e08bc..5df81a522a 100644 --- a/web/app/components/workflow/nodes/human-input/panel.tsx +++ b/web/app/components/workflow/nodes/human-input/panel.tsx @@ -11,6 +11,7 @@ import { import { useBoolean } from 'ahooks' import copy from 'copy-to-clipboard' import * as React from 'react' +import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import ActionButton from '@/app/components/base/action-button' import Button from '@/app/components/base/button' @@ -30,7 +31,6 @@ import TimeoutInput from './components/timeout' import UserActionItem from './components/user-action' import useConfig from './hooks/use-config' import { UserActionButtonType } from './types' -import { genActionId } from './utils' const i18nPrefix = 'nodes.humanInput' @@ -73,6 +73,15 @@ const Panel: FC> = ({ setFalse: hidePreview, }] = useBoolean(false) + const onAddUseAction = useCallback(() => { + const index = inputs.user_actions.length + 1 + handleUserActionAdd({ + id: `action_${index}`, + title: `Button Text ${index}`, + button_style: UserActionButtonType.Default, + }) + }, [handleUserActionAdd, inputs.user_actions.length]) + return (
{/* delivery methods */} @@ -161,13 +170,7 @@ const Panel: FC> = ({ {!readOnly && (
{ - handleUserActionAdd({ - id: genActionId(), - title: 'Button Text', - button_style: UserActionButtonType.Default, - }) - }} + onClick={onAddUseAction} > diff --git a/web/app/components/workflow/nodes/human-input/utils.ts b/web/app/components/workflow/nodes/human-input/utils.ts index b51c7104df..59358fab1e 100644 --- a/web/app/components/workflow/nodes/human-input/utils.ts +++ b/web/app/components/workflow/nodes/human-input/utils.ts @@ -1,7 +1,3 @@ -export const genActionId = () => { - return `a${Date.now().toString(36)}${Math.floor(Math.random() * 36).toString(36)}` -} - export const isOutput = (valueSelector: string[]) => { return valueSelector[0] === '$output' } diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json index 20fc638c11..3b72c52908 100644 --- a/web/i18n/en-US/workflow.json +++ b/web/i18n/en-US/workflow.json @@ -592,15 +592,15 @@ "nodes.humanInput.timeout.days": "Days", "nodes.humanInput.timeout.hours": "Hours", "nodes.humanInput.timeout.title": "Timeout", + "nodes.humanInput.userActions.actionIdFormatTip": "Action ID must start with a letter or underscores, followed by letters, numbers, or underscores", "nodes.humanInput.userActions.actionIdTooLong": "Action ID must be 20 characters or less", "nodes.humanInput.userActions.actionNamePlaceholder": "Action Name", "nodes.humanInput.userActions.buttonTextPlaceholder": "Button display Text", "nodes.humanInput.userActions.buttonTextTooLong": "Button text must be 40 characters or less", "nodes.humanInput.userActions.chooseStyle": "Choose a button style", "nodes.humanInput.userActions.emptyTip": "Click the '+' button to add user actions", - "nodes.humanInput.userActions.invalidActionIdFormat": "Action ID must start with a letter or underscore, followed by letters, numbers, or underscores", "nodes.humanInput.userActions.title": "User Actions", - "nodes.humanInput.userActions.tooltip": "Define buttons that users can click to respond to this form. Each button can trigger different workflow paths.", + "nodes.humanInput.userActions.tooltip": "Define buttons that users can click to respond to this form. Each button can trigger different workflow paths. Action ID must start with a letter or underscores, followed by letters, numbers, or underscores.", "nodes.humanInput.userActions.triggered": "{{actionName}} has been triggered", "nodes.ifElse.addCondition": "Add Condition", "nodes.ifElse.addSubVariable": "Sub Variable", diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json index aa556f3e7a..1ee6f880f9 100644 --- a/web/i18n/zh-Hans/workflow.json +++ b/web/i18n/zh-Hans/workflow.json @@ -592,15 +592,15 @@ "nodes.humanInput.timeout.days": "日", "nodes.humanInput.timeout.hours": "小时", "nodes.humanInput.timeout.title": "超时设置", + "nodes.humanInput.userActions.actionIdFormatTip": "操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线", "nodes.humanInput.userActions.actionIdTooLong": "操作 ID 不能超过 20 个字符", "nodes.humanInput.userActions.actionNamePlaceholder": "操作名称", "nodes.humanInput.userActions.buttonTextPlaceholder": "按钮显示文本", "nodes.humanInput.userActions.buttonTextTooLong": "按钮文本不能超过 40 个字符", "nodes.humanInput.userActions.chooseStyle": "选择按钮样式", "nodes.humanInput.userActions.emptyTip": "点击 '+' 按钮添加用户操作", - "nodes.humanInput.userActions.invalidActionIdFormat": "操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线", "nodes.humanInput.userActions.title": "用户操作", - "nodes.humanInput.userActions.tooltip": "定义用户可以点击以响应此表单的按钮。每个按钮都可以触发不同的工作流路径。", + "nodes.humanInput.userActions.tooltip": "定义用户可以点击以响应此表单的按钮。每个按钮都可以触发不同的工作流路径。操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线。", "nodes.humanInput.userActions.triggered": "已触发{{actionName}}", "nodes.ifElse.addCondition": "添加条件", "nodes.ifElse.addSubVariable": "添加子变量",