feat(variables): replace spaces with underscores in variable name inputs

Add utility function to automatically replace spaces with underscores in variable name input fields. This ensures consistent variable naming across all input components that handle variable names.

web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx

@@ -8,7 +8,7 @@ import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
 import Input from '@/app/components/base/input'
 import type { VarType } from '@/app/components/workflow/types'
-import { checkKeys } from '@/utils/var'
+import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 
 type Props = {
@@ -37,6 +37,8 @@ const OutputVarList: FC<Props> = ({
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
       const oldKey = list[index].variable
+
+      replaceSpaceWithUnderscreInVarNameInput(e.target)
       const newKey = e.target.value
 
       const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -8,7 +8,7 @@ import VarReferencePicker from './var-reference-picker'
 import Input from '@/app/components/base/input'
 import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
-import { checkKeys } from '@/utils/var'
+import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 
 type Props = {
@@ -38,6 +38,8 @@ const VarList: FC<Props> = ({
 
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
+      replaceSpaceWithUnderscreInVarNameInput(e.target)
+
       const newKey = e.target.value
       const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
       if (!isValid) {

web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx

@@ -15,7 +15,7 @@ import { VarType } from '@/app/components/workflow/types'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { Folder } from '@/app/components/base/icons/src/vender/line/files'
-import { checkKeys } from '@/utils/var'
+import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 
 const i18nPrefix = 'workflow.nodes.variableAssigner'
@@ -89,6 +89,7 @@ const VarGroupItem: FC<Props> = ({
   }] = useBoolean(false)
 
   const handleGroupNameChange = useCallback((e: ChangeEvent<any>) => {
+    replaceSpaceWithUnderscreInVarNameInput(e.target)
     const value = e.target.value
     const { isValid, errorKey, errorMessageKey } = checkKeys([value], false)
     if (!isValid) {

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

@@ -16,7 +16,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'
+import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 
 export type ModalPropsType = {
   chatVar?: ConversationVariable
@@ -143,6 +143,13 @@ const ChatVariableModal = ({
     return true
   }
 
+  const handleVarNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    replaceSpaceWithUnderscreInVarNameInput(e.target)
+    if (!checkVariableName(e.target.value))
+      return
+    setName(e.target.value || '')
+  }
+
   const handleTypeChange = (v: ChatVarType) => {
     setValue(undefined)
     setEditorContent(undefined)
@@ -275,7 +282,7 @@ const ChatVariableModal = ({
             <Input
               placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
               value={name}
-              onChange={e => setName(e.target.value || '')}
+              onChange={handleVarNameChange}
               onBlur={e => checkVariableName(e.target.value)}
               type='text'
             />

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

@@ -10,7 +10,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'
+import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 
 export type ModalPropsType = {
   env?: EnvironmentVariable
@@ -42,6 +42,13 @@ const VariableModal = ({
     return true
   }
 
+  const handleVarNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    replaceSpaceWithUnderscreInVarNameInput(e.target)
+    if (!checkVariableName(e.target.value))
+      return
+    setName(e.target.value || '')
+  }
+
   const handleSave = () => {
     if (!checkVariableName(name))
       return
@@ -127,7 +134,7 @@ const VariableModal = ({
             <Input
               placeholder={t('workflow.env.modal.namePlaceholder') || ''}
               value={name}
-              onChange={e => setName(e.target.value || '')}
+              onChange={handleVarNameChange}
               onBlur={e => checkVariableName(e.target.value)}
               type='text'
             />

web/utils/var.ts

@@ -120,3 +120,13 @@ export function getMarketplaceUrl(path: string, params?: Record<string, string |
   }
   return `${MARKETPLACE_URL_PREFIX}${path}?${searchParams.toString()}`
 }
+
+export const replaceSpaceWithUnderscreInVarNameInput = (input: HTMLInputElement) => {
+  const start = input.selectionStart
+  const end = input.selectionEnd
+
+  input.value = input.value.replaceAll(' ', '_')
+
+  if (start !== null && end !== null)
+    input.setSelectionRange(start, end)
+}