chore: improve the check time of variable name in conversation and env var (#7572)

web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx

@@ -15,6 +15,7 @@ import type { ConversationVariable } from '@/app/components/workflow/types'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 import cn from '@/utils/classnames'
+import { checkKeys } from '@/utils/var'
 
 export type ModalPropsType = {
   chatVar?: ConversationVariable
@@ -128,14 +129,16 @@ const ChatVariableModal = ({
     }
   }
 
-  const handleNameChange = (v: string) => {
-    if (!v)
-      return setName('')
-    if (!/^[a-zA-Z0-9_]+$/.test(v))
-      return notify({ type: 'error', message: 'name is can only contain letters, numbers and underscores' })
-    if (/^[0-9]/.test(v))
-      return notify({ type: 'error', message: 'name can not start with a number' })
-    setName(v)
+  const checkVariableName = (value: string) => {
+    const { isValid, errorMessageKey } = checkKeys([value], false)
+    if (!isValid) {
+      notify({
+        type: 'error',
+        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+      })
+      return false
+    }
+    return true
   }
 
   const handleTypeChange = (v: ChatVarType) => {
@@ -211,8 +214,8 @@ const ChatVariableModal = ({
   }
 
   const handleSave = () => {
-    if (!name)
-      return notify({ type: 'error', message: 'name can not be empty' })
+    if (!checkVariableName(name))
+      return
     if (!chatVar && varList.some(chatVar => chatVar.name === name))
       return notify({ type: 'error', message: 'name is existed' })
     // if (type !== ChatVarType.Object && !value)
@@ -272,7 +275,8 @@ const ChatVariableModal = ({
               className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
               placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
               value={name}
-              onChange={e => handleNameChange(e.target.value)}
+              onChange={e => setName(e.target.value || '')}
+              onBlur={e => checkVariableName(e.target.value)}
               type='text'
             />
           </div>

web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -9,6 +9,7 @@ import { ToastContext } from '@/app/components/base/toast'
 import { useStore } from '@/app/components/workflow/store'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
+import { checkKeys } from '@/utils/var'
 
 export type ModalPropsType = {
   env?: EnvironmentVariable
@@ -28,19 +29,21 @@ const VariableModal = ({
   const [name, setName] = React.useState('')
   const [value, setValue] = React.useState<any>()
 
-  const handleNameChange = (v: string) => {
-    if (!v)
-      return setName('')
-    if (!/^[a-zA-Z0-9_]+$/.test(v))
-      return notify({ type: 'error', message: 'name is can only contain letters, numbers and underscores' })
-    if (/^[0-9]/.test(v))
-      return notify({ type: 'error', message: 'name can not start with a number' })
-    setName(v)
+  const checkVariableName = (value: string) => {
+    const { isValid, errorMessageKey } = checkKeys([value], false)
+    if (!isValid) {
+      notify({
+        type: 'error',
+        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+      })
+      return false
+    }
+    return true
   }
 
   const handleSave = () => {
-    if (!name)
-      return notify({ type: 'error', message: 'name can not be empty' })
+    if (!checkVariableName(name))
+      return
     if (!value)
       return notify({ type: 'error', message: 'value can not be empty' })
     if (!env && envList.some(env => env.name === name))
@@ -118,7 +121,8 @@ const VariableModal = ({
               className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
               placeholder={t('workflow.env.modal.namePlaceholder') || ''}
               value={name}
-              onChange={e => handleNameChange(e.target.value)}
+              onChange={e => setName(e.target.value || '')}
+              onBlur={e => checkVariableName(e.target.value)}
               type='text'
             />
           </div>