feat: refactor user action handling in human input panel and update error messaging

web/app/components/workflow/nodes/human-input/components/user-action.tsx

@@ -47,7 +47,7 @@ const UserActionItem: FC<UserActionItemProps> = ({
       .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) {

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<NodePanelProps<HumanInputNodeType>> = ({
     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 (
     <div className="py-2">
       {/* delivery methods */}
@@ -161,13 +170,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           {!readOnly && (
             <div className="flex items-center px-1">
               <ActionButton
-                onClick={() => {
-                  handleUserActionAdd({
-                    id: genActionId(),
-                    title: 'Button Text',
-                    button_style: UserActionButtonType.Default,
-                  })
-                }}
+                onClick={onAddUseAction}
               >
                 <RiAddLine className="h-4 w-4" />
               </ActionButton>

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'
 }

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": "<strong>{{actionName}}</strong> has been triggered",
   "nodes.ifElse.addCondition": "Add Condition",
   "nodes.ifElse.addSubVariable": "Sub Variable",

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": "已触发<strong>{{actionName}}</strong>",
   "nodes.ifElse.addCondition": "添加条件",
   "nodes.ifElse.addSubVariable": "添加子变量",