Fix: Cross-language dropdown menu options translation error. (#17615)

web/src/components/cross-language-form-field.tsx

@@ -6,12 +6,12 @@ import {
 } from '@/components/ui/form';
 import { MultiSelect } from '@/components/ui/multi-select';
 import { cn } from '@/lib/utils';
-import { t } from 'i18next';
 import { toLower } from 'lodash';
+import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-const Languages = [
+export const Languages = [
   'English',
   'Chinese',
   'Spanish',
@@ -25,10 +25,18 @@ const Languages = [
   'Dutch',
 ];
 
-export const crossLanguageOptions = Languages.map((x) => ({
-  label: t('language.' + toLower(x)),
-  value: x,
-}));
+export function useCrossLanguageOptions() {
+  const { t } = useTranslation();
+
+  return useMemo(
+    () =>
+      Languages.map((x) => ({
+        label: t('language.' + toLower(x)),
+        value: x,
+      })),
+    [t],
+  );
+}
 
 type CrossLanguageItemProps = {
   name?: string;
@@ -43,6 +51,7 @@ export const CrossLanguageFormField = ({
 }: CrossLanguageItemProps) => {
   const { t } = useTranslation();
   const form = useFormContext();
+  const crossLanguageOptions = useCrossLanguageOptions();
 
   return (
     <FormField

web/src/locales/zh.ts

@@ -3135,6 +3135,7 @@ Tokenizer 会根据所选方式将内容存储为对应的数据结构。`,
       bulgarian: '保加利亚语',
       arabic: '阿拉伯语',
       turkish: '土耳其语',
+      dutch: '荷兰语',
     },
     pagination: {
       total: '总共 {{total}} 条',

web/src/pages/agent/form/parser-form/common-form-fields.tsx

@@ -1,4 +1,4 @@
-import { crossLanguageOptions } from '@/components/cross-language-form-field';
+import { useCrossLanguageOptions } from '@/components/cross-language-form-field';
 import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-field';
 import {
   SelectWithSearch,
@@ -167,6 +167,7 @@ export function RemoveHeaderFooterFormField({ prefix }: CommonProps) {
 
 export function LanguageFormField({ prefix }: CommonProps) {
   const { t } = useTranslation();
+  const crossLanguageOptions = useCrossLanguageOptions();
 
   return (
     <RAGFlowFormItem

web/src/pages/agent/form/parser-form/use-set-initial-language.ts

@@ -1,4 +1,4 @@
-import { crossLanguageOptions } from '@/components/cross-language-form-field';
+import { Languages } from '@/components/cross-language-form-field';
 import { isEmpty } from 'lodash';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -16,14 +16,10 @@ export function useSetInitialLanguage({
 
   useEffect(() => {
     if (languageShown && isEmpty(lang)) {
-      form.setValue(
-        buildFieldNameWithPrefix('lang', prefix),
-        crossLanguageOptions[0].value,
-        {
-          shouldValidate: true,
-          shouldDirty: true,
-        },
-      );
+      form.setValue(buildFieldNameWithPrefix('lang', prefix), Languages[0], {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
     }
   }, [form, lang, languageShown, prefix]);
 }