fix(share): The language of the shared page will cause the language of the original website to change. (#18043)

web/src/app.tsx

@@ -1,6 +1,5 @@
 import { Toaster as Sonner } from '@/components/ui/sonner';
 import { Toaster } from '@/components/ui/toaster';
-import { changeLanguageAsync } from '@/locales/config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { configResponsive } from 'ahooks';
 import dayjs from 'dayjs';
@@ -13,13 +12,12 @@ import localeData from 'dayjs/plugin/localeData';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
 import weekday from 'dayjs/plugin/weekday';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { RouterProvider } from 'react-router';
 import { ThemeProvider } from './components/theme-provider';
 import { TooltipProvider } from './components/ui/tooltip';
 import { ThemeEnum } from './constants/common';
 import { routers } from './routes';
-import storage from './utils/authorization-util';
 
 import 'react-photo-view/dist/react-photo-view.css';
 
@@ -76,13 +74,6 @@ function Root({ children }: React.PropsWithChildren) {
 }
 
 const RootProvider = ({ children }: React.PropsWithChildren) => {
-  useEffect(() => {
-    const lng = storage.getLanguage();
-    if (lng) {
-      void changeLanguageAsync(lng);
-    }
-  }, []);
-
   return (
     <TooltipProvider>
       <QueryClientProvider client={queryClient}>

web/src/components/floating-chat-widget.tsx

@@ -294,7 +294,7 @@ const FloatingChatWidget = () => {
     }, 50);
 
     if (locale && i18n.language !== locale) {
-      changeLanguageAsync(locale);
+      changeLanguageAsync(locale, { persist: false });
     }
 
     return () => clearTimeout(timer);

web/src/components/message-input/next.tsx

@@ -131,32 +131,29 @@ export function NextMessageInput({
     };
   }, [isResizing]);
 
-  const thinkingOptions = useMemo(
+  const thinkingOptions = [
-    () => [
+    {
-      {
+      label: t('chat.thinkingLevelUltra'),
-        label: t('chat.thinkingLevelUltra'),
+      value: '4',
-        value: '4',
+      description: t('chat.thinkingLevelUltraDescription'),
-        description: t('chat.thinkingLevelUltraDescription'),
+    },
-      },
+    {
-      {
+      label: t('chat.thinkingLevelHigh'),
-        label: t('chat.thinkingLevelHigh'),
+      value: '3',
-        value: '3',
+      description: t('chat.thinkingLevelHighDescription'),
-        description: t('chat.thinkingLevelHighDescription'),
+    },
-      },
+    {
-      {
+      label: t('chat.thinkingLevelMedium'),
-        label: t('chat.thinkingLevelMedium'),
+      value: '2',
-        value: '2',
+      description: t('chat.thinkingLevelMediumDescription'),
-        description: t('chat.thinkingLevelMediumDescription'),
+    },
-      },
+    {
-      {
+      label: t('chat.thinkingLevelLow'),
-        label: t('chat.thinkingLevelLow'),
+      value: '1',
-        value: '1',
+      description: t('chat.thinkingLevelLowDescription'),
-        description: t('chat.thinkingLevelLowDescription'),
+    },
-      },
+    { label: t('chat.thinkingLevelNone'), value: '0' },
-      { label: t('chat.thinkingLevelNone'), value: '0' },
+  ];
-    ],
-    [t],
-  );
 
   const handleThinkingChange = useCallback((value: string) => {
     setEnableThinking(value);

web/src/components/originui/select-with-search.tsx

@@ -28,9 +28,9 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
-import { t } from 'i18next';
 import { RAGFlowSelectOptionType } from '../ui/select';
 import { Separator } from '../ui/separator';
+import { useTranslation } from 'react-i18next';
 
 export type SelectWithSearchOptionType = RAGFlowSelectOptionType & {
   description?: ReactNode;
@@ -127,8 +127,8 @@ export const SelectWithSearch = forwardRef<
       triggerClassName,
       allowClear = false,
       disabled = false,
-      placeholder = t('common.selectPlaceholder'),
+      placeholder,
-      emptyData = t('common.noDataFound'),
+      emptyData,
       allowCustomValue = false,
       onNoMatchEnter,
       disableAutoSelectOnEnter = false,
@@ -137,6 +137,9 @@ export const SelectWithSearch = forwardRef<
     },
     ref,
   ) => {
+    const { t } = useTranslation();
+    const resolvedPlaceholder = placeholder ?? t('common.selectPlaceholder');
+    const resolvedEmptyData = emptyData ?? t('common.noDataFound');
     const id = useId();
     const [open, setOpen] = useState<boolean>(false);
     const [value, setValue] = useState<string>('');
@@ -257,7 +260,7 @@ export const SelectWithSearch = forwardRef<
                 {selectLabel || value}
               </span>
             ) : (
-              <span className="text-text-disabled">{placeholder}</span>
+              <span className="text-text-disabled">{resolvedPlaceholder}</span>
             )}
             <div className="flex items-center justify-between">
               {value && allowClear && (
@@ -296,7 +299,7 @@ export const SelectWithSearch = forwardRef<
             )}
             <CommandList className="mt-2 outline-none">
               <CommandEmpty>
-                <div dangerouslySetInnerHTML={{ __html: emptyData }}></div>
+                <div dangerouslySetInnerHTML={{ __html: resolvedEmptyData }}></div>
               </CommandEmpty>
               {hasCustomSearchValue && (
                 <CommandItem

web/src/locales/config.ts

@@ -97,7 +97,11 @@ export const loadLanguageAsync = async (lng: string): Promise<void> => {
   }
 };
 
-export const changeLanguageAsync = async (lng: string): Promise<void> => {
+export const changeLanguageAsync = async (
+  lng: string,
+  options: { persist?: boolean } = {},
+): Promise<void> => {
+  const { persist = true } = options;
   const normalizedLng = lng;
 
   if (
@@ -107,7 +111,9 @@ export const changeLanguageAsync = async (lng: string): Promise<void> => {
     await loadLanguageAsync(normalizedLng);
   }
 
-  storage.setLanguage(lng);
+  if (persist) {
+    storage.setLanguage(lng);
+  }
 
   updateDocumentLocale(lng);
 

web/src/pages/agent/share/index.tsx

@@ -87,7 +87,7 @@ const ChatContainer = () => {
 
   React.useEffect(() => {
     if (locale && i18n.language !== locale) {
-      changeLanguageAsync(locale);
+      changeLanguageAsync(locale, { persist: false });
     }
   }, [locale, visibleAvatar]);
 

web/src/pages/next-chats/share/index.tsx

@@ -44,7 +44,7 @@ const ChatContainer = () => {
 
   React.useEffect(() => {
     if (locale && i18n.language !== locale) {
-      changeLanguageAsync(locale);
+      changeLanguageAsync(locale, { persist: false });
     }
   }, [locale, visibleAvatar]);
 

web/src/pages/next-search/share/index.tsx

@@ -24,7 +24,7 @@ export default function ShareSearchPage() {
 
   useEffect(() => {
     if (locale && i18n.language !== locale) {
-      changeLanguageAsync(locale);
+      changeLanguageAsync(locale, { persist: false });
     }
   }, [locale]);
   return (