refactor: rename cancel editor handler and improve variable name validation in field list

web/app/components/rag-pipeline/components/input-field/editor/index.tsx

@@ -27,8 +27,7 @@ const InputFieldEditor = ({
   const handleSubmit = useCallback((value: FormData, moreInfo?: MoreInfo) => {
     const inputFieldData = convertFormDataToINputField(value)
     onSubmit(inputFieldData, moreInfo)
-    onClose()
+  }, [onSubmit])
-  }, [onSubmit, onClose])
 
   return (
     <DialogWrapper

web/app/components/rag-pipeline/components/input-field/field-list/hooks.ts

@@ -10,6 +10,7 @@ import type { MoreInfo, ValueSelector } from '@/app/components/workflow/types'
 import { ChangeType } from '@/app/components/workflow/types'
 import { useWorkflow } from '@/app/components/workflow/hooks'
 import { useBoolean } from 'ahooks'
+import Toast from '@/app/components/base/toast'
 
 export const useFieldList = (
   initialInputFields: InputVar[],
@@ -51,8 +52,9 @@ export const useFieldList = (
     setEditingField(inputFieldsRef.current[index])
     setShowInputFieldEditor(true)
   }, [])
-  const handleCancelInputFieldEditor = useCallback(() => {
+  const handleCloseInputFieldEditor = useCallback(() => {
     setShowInputFieldEditor(false)
+    editingFieldIndex.current = -1
     setEditingField(undefined)
   }, [])
 
@@ -77,6 +79,15 @@ export const useFieldList = (
   }, [removedIndex, handleInputFieldsChange, removeUsedVarInNodes, removedVar, hideRemoveVarConfirm])
 
   const handleSubmitField = useCallback((data: InputVar, moreInfo?: MoreInfo) => {
+    const isDuplicate = inputFieldsRef.current.some(field =>
+      field.variable === data.variable && field.variable !== editingField?.variable)
+    if (isDuplicate) {
+      Toast.notify({
+        type: 'error',
+        message: 'Variable name already exists. Please choose a different name.',
+      })
+      return
+    }
     const newInputFields = produce(inputFieldsRef.current, (draft) => {
       const currentIndex = editingFieldIndex.current
       if (currentIndex === -1) {
@@ -89,7 +100,8 @@ export const useFieldList = (
     // Update variable name in nodes if it has changed
     if (moreInfo?.type === ChangeType.changeVarName)
       handleOutVarRenameChange(nodeId, [nodeId, moreInfo.payload?.beforeKey || ''], [nodeId, moreInfo.payload?.afterKey || ''])
-  }, [handleInputFieldsChange, handleOutVarRenameChange, nodeId])
+    handleCloseInputFieldEditor()
+  }, [editingField?.variable, handleCloseInputFieldEditor, handleInputFieldsChange, handleOutVarRenameChange, nodeId])
 
   return {
     inputFields,
@@ -100,7 +112,7 @@ export const useFieldList = (
     editingField,
     showInputFieldEditor,
     handleOpenInputFieldEditor,
-    handleCancelInputFieldEditor,
+    handleCloseInputFieldEditor,
     isShowRemoveVarConfirm,
     hideRemoveVarConfirm,
     onRemoveVarConfirm,

web/app/components/rag-pipeline/components/input-field/field-list/index.tsx

@@ -34,7 +34,7 @@ const FieldList = ({
     handleSubmitField,
     handleListSortChange,
     handleRemoveField,
-    handleCancelInputFieldEditor,
+    handleCloseInputFieldEditor,
     handleOpenInputFieldEditor,
     showInputFieldEditor,
     editingField,
@@ -69,7 +69,7 @@ const FieldList = ({
           show={showInputFieldEditor}
           initialData={editingField}
           onSubmit={handleSubmitField}
-          onClose={handleCancelInputFieldEditor}
+          onClose={handleCloseInputFieldEditor}
         />
       )}
       <RemoveEffectVarConfirm