feat: Enhance input field handling by adding allVariableNames prop and localizing error messages

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

@@ -11,14 +11,24 @@ import { ChangeType } from '@/app/components/workflow/types'
 import { useBoolean } from 'ahooks'
 import Toast from '@/app/components/base/toast'
 import { usePipeline } from '../../../hooks/use-pipeline'
+import { useTranslation } from 'react-i18next'
 
 const VARIABLE_PREFIX = 'rag'
 
-export const useFieldList = (
+type useFieldListProps = {
   initialInputFields: InputVar[],
   onInputFieldsChange: (value: InputVar[]) => void,
   nodeId: string,
-) => {
+  allVariableNames: string[],
+}
+
+export const useFieldList = ({
+  initialInputFields,
+  onInputFieldsChange,
+  nodeId,
+  allVariableNames,
+}: useFieldListProps) => {
+  const { t } = useTranslation()
   const [inputFields, setInputFields] = useState<InputVar[]>(initialInputFields)
   const inputFieldsRef = useRef<InputVar[]>(inputFields)
   const [removedVar, setRemovedVar] = useState<ValueSelector>([])
@@ -81,12 +91,12 @@ export const useFieldList = (
   }, [removedIndex, handleInputFieldsChange, removeUsedVarInNodes, removedVar, hideRemoveVarConfirm])
 
   const handleSubmitField = useCallback((data: InputVar, moreInfo?: MoreInfo) => {
-    const isDuplicate = inputFieldsRef.current.some(field =>
+    const isDuplicate = allVariableNames.some(name =>
-      field.variable === data.variable && field.variable !== editingField?.variable)
+      name === data.variable && name !== editingField?.variable)
     if (isDuplicate) {
       Toast.notify({
         type: 'error',
-        message: 'Variable name already exists. Please choose a different name.',
+        message: t('datasetPipeline.inputFieldPanel.error.variableDuplicate'),
       })
       return
     }
@@ -103,7 +113,7 @@ export const useFieldList = (
     if (moreInfo?.type === ChangeType.changeVarName)
       handleInputVarRename(nodeId, [VARIABLE_PREFIX, nodeId, moreInfo.payload?.beforeKey || ''], [VARIABLE_PREFIX, nodeId, moreInfo.payload?.afterKey || ''])
     handleCloseInputFieldEditor()
-  }, [editingField?.variable, handleCloseInputFieldEditor, handleInputFieldsChange, handleInputVarRename, nodeId])
+  }, [allVariableNames, editingField?.variable, handleCloseInputFieldEditor, handleInputFieldsChange, handleInputVarRename, nodeId, t])
 
   return {
     inputFields,

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

@@ -15,6 +15,7 @@ type FieldListProps = {
   handleInputFieldsChange: (key: string, value: InputVar[]) => void
   readonly?: boolean
   labelClassName?: string
+  allVariableNames: string[]
 }
 
 const FieldList = ({
@@ -24,6 +25,7 @@ const FieldList = ({
   handleInputFieldsChange,
   readonly,
   labelClassName,
+  allVariableNames,
 }: FieldListProps) => {
   const onInputFieldsChange = useCallback((value: InputVar[]) => {
     handleInputFieldsChange(nodeId, value)
@@ -41,7 +43,12 @@ const FieldList = ({
     isShowRemoveVarConfirm,
     hideRemoveVarConfirm,
     onRemoveVarConfirm,
-  } = useFieldList(initialInputFields, onInputFieldsChange, nodeId)
+  } = useFieldList({
+    initialInputFields,
+    onInputFieldsChange,
+    nodeId,
+    allVariableNames,
+  })
 
   return (
     <div className='flex flex-col'>

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

@@ -100,6 +100,10 @@ const InputFieldDialog = ({
     setPreviewPanelOpen(prev => !prev)
   }, [])
 
+  const allVariableNames = useMemo(() => {
+    return ragPipelineVariables?.map(variable => variable.variable) || []
+  }, [ragPipelineVariables])
+
   return (
     <>
       <DialogWrapper
@@ -160,6 +164,7 @@ const InputFieldDialog = ({
                       readonly={readonly}
                       labelClassName='pt-1 pb-1'
                       handleInputFieldsChange={updateInputFields}
+                      allVariableNames={allVariableNames}
                     />
                   )
                 })
@@ -173,6 +178,7 @@ const InputFieldDialog = ({
               readonly={readonly}
               labelClassName='pt-2 pb-1'
               handleInputFieldsChange={updateInputFields}
+              allVariableNames={allVariableNames}
             />
           </div>
           <FooterTip />

web/i18n/en-US/dataset-pipeline.ts

@@ -82,6 +82,9 @@ const translation = {
       stepOneTitle: 'Data Source',
       stepTwoTitle: 'Process Documents',
     },
+    error: {
+      variableDuplicate: 'Variable name already exists. Please choose a different name.',
+    },
   },
   addDocuments: {
     title: 'Add Documents',

web/i18n/zh-Hans/dataset-pipeline.ts

@@ -82,6 +82,9 @@ const translation = {
       stepOneTitle: '数据源',
       stepTwoTitle: '处理文档',
     },
+    error: {
+      variableDuplicate: '变量名已存在。请选择其他名称。',
+    },
   },
   addDocuments: {
     title: '添加文档',