user action validation

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

@@ -8,6 +8,7 @@ import type { UserAction } from '../types'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import ButtonStyleDropdown from './button-style-dropdown'
+import { genActionId } from '../utils'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -23,6 +24,21 @@ const UserActionItem: FC<Props> = ({
   onDelete,
 }) => {
   const { t } = useTranslation()
+
+  const handleIDChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value.trim())
+      onChange({ ...data, id: genActionId() })
+    else
+      onChange({ ...data, id: e.target.value })
+  }
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value.trim())
+      onChange({ ...data, title: 'Button Text' })
+    else
+      onChange({ ...data, title: e.target.value })
+  }
+
   return (
     <div className='flex items-center gap-1'>
       <div className='shrink-0'>
@@ -30,14 +46,14 @@ const UserActionItem: FC<Props> = ({
           wrapperClassName='w-[120px]'
           value={data.id}
           placeholder={t(`${i18nPrefix}.userActions.actionNamePlaceholder`)}
-          onChange={e => onChange({ ...data, id: e.target.value })}
+          onChange={handleIDChange}
         />
       </div>
       <div className='grow'>
         <Input
           value={data.title}
           placeholder={t(`${i18nPrefix}.userActions.buttonTextPlaceholder`)}
-          onChange={e => onChange({ ...data, title: e.target.value })}
+          onChange={handleTextChange}
         />
       </div>
       <ButtonStyleDropdown

web/app/components/workflow/nodes/human-input/panel.tsx

@@ -18,6 +18,7 @@ import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use
 import { VarType } from '@/app/components/workflow/types'
 import type { Var } from '@/app/components/workflow/types'
 import FormContent from './components/form-content'
+import { genActionId } from './utils'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -84,7 +85,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
             <ActionButton
               onClick={() => {
                 handleUserActionAdd({
-                  id: 'Action',
+                  id: genActionId(),
                   title: 'Button Text',
                   button_style: UserActionButtonType.Default,
                 })
@@ -99,11 +100,11 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
         )}
         {inputs.user_actions.length > 0 && (
           <div className='space-y-2'>
-            {inputs.user_actions.map(action => (
+            {inputs.user_actions.map((action, index) => (
               <UserActionItem
-                key={action.id}
+                key={index}
                 data={action}
-                onChange={handleUserActionChange}
+                onChange={data => handleUserActionChange(index, data)}
                 onDelete={handleUserActionDelete}
               />
             ))}

web/app/components/workflow/nodes/human-input/use-config.ts

@@ -24,10 +24,9 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
     })
   }
 
-  const handleUserActionChange = (updatedAction: UserAction) => {
+  const handleUserActionChange = (index: number, updatedAction: UserAction) => {
     const newActions = produce(inputs.user_actions, (draft) => {
-      const index = draft.findIndex(a => a.id === updatedAction.id)
-      if (index !== -1)
+      if (draft[index])
         draft[index] = updatedAction
     })
     setInputs({

web/app/components/workflow/nodes/human-input/utils.ts

@@ -0,0 +1,3 @@
+export const genActionId = () => {
+  return `a${Date.now().toString(36)}${Math.floor(Math.random() * 36).toString(36)}`
+}