snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/providers/TranslationProvider.tsx

@@ -0,0 +1,274 @@
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import {
+	addSprinfToI18n,
+	extractTranslationKeys,
+	applyCustomTranslations,
+	availableTranslationNamespaces,
+	defaultTranslationNamespace,
+	extractTranslationNamespaces,
+} from '@rocket.chat/i18n';
+import languages from '@rocket.chat/i18n/dist/languages';
+import en from '@rocket.chat/i18n/dist/resources/en.i18n.json';
+import { capitalize, normalizeLanguage } from '@rocket.chat/tools';
+import type { TranslationContextValue } from '@rocket.chat/ui-contexts';
+import { useSetting, TranslationContext } from '@rocket.chat/ui-contexts';
+import type i18next from 'i18next';
+import I18NextHttpBackend from 'i18next-http-backend';
+import type { ReactNode } from 'react';
+import { useEffect, useMemo } from 'react';
+import { I18nextProvider, initReactI18next, useTranslation } from 'react-i18next';
+
+import { i18n } from '../../app/utils/lib/i18n';
+import { AppClientOrchestratorInstance } from '../apps/orchestrator';
+import { getURL } from '../lib/getURL';
+import { onLoggedIn } from '../lib/loggedIn';
+import { isRTLScriptLanguage } from '../lib/utils/isRTLScriptLanguage';
+import { setDateFnsLocale } from '../lib/utils/setDateFnsLocale';
+
+i18n.use(I18NextHttpBackend).use(initReactI18next);
+
+const useCustomTranslations = (i18n: typeof i18next) => {
+	const customTranslations = useSetting('Custom_Translations');
+
+	const parsedCustomTranslations = useMemo((): Record<string, Record<string, string>> | undefined => {
+		if (!customTranslations || typeof customTranslations !== 'string') {
+			return undefined;
+		}
+
+		try {
+			return JSON.parse(customTranslations);
+		} catch (e) {
+			console.error(e);
+			return undefined;
+		}
+	}, [customTranslations]);
+
+	useEffect(() => {
+		if (!parsedCustomTranslations) {
+			return;
+		}
+
+		applyCustomTranslations(i18n, parsedCustomTranslations);
+
+		const handleLanguageChanged = (): void => {
+			applyCustomTranslations(i18n, parsedCustomTranslations);
+		};
+
+		i18n.on('languageChanged', handleLanguageChanged);
+
+		return () => {
+			i18n.off('languageChanged', handleLanguageChanged);
+		};
+	}, [i18n, parsedCustomTranslations]);
+};
+
+const localeCache = new Map<string, Promise<string>>();
+let isI18nInitialized = false;
+
+const useI18next = (lng: string): typeof i18next => {
+	// i18n.init is async, so there's a chance a race condition happens and it is initialized twice
+	// This breaks translations because it loads `lng` in the first init but not the second.
+	if (!isI18nInitialized) {
+		isI18nInitialized = true;
+		i18n.init({
+			lng,
+			fallbackLng: 'en',
+			ns: availableTranslationNamespaces,
+			defaultNS: defaultTranslationNamespace,
+			nsSeparator: '.',
+			resources: {
+				en: extractTranslationNamespaces(en),
+			},
+			partialBundledLanguages: true,
+			backend: {
+				loadPath: 'i18n/{{lng}}.json',
+				parse: (data: string, _lngs?: string | string[], namespaces: string | string[] = []) =>
+					extractTranslationKeys(JSON.parse(data), namespaces),
+				request: (_options: unknown, url: string, _payload: unknown, callback: (error: unknown, data: unknown) => void) => {
+					const params = url.split('/');
+
+					const lng = params[params.length - 1];
+
+					let promise = localeCache.get(lng);
+
+					if (!promise) {
+						promise = fetch(getURL(url)).then((res) => res.text());
+						localeCache.set(lng, promise);
+					}
+
+					promise.then(
+						(res) => callback(null, { data: res, status: 200 }),
+						() => callback(null, { data: '', status: 500 }),
+					);
+				},
+			},
+			react: {
+				useSuspense: true,
+				bindI18n: 'languageChanged loaded',
+				bindI18nStore: 'added removed',
+			},
+			interpolation: {
+				escapeValue: false,
+			},
+		});
+
+		// In some cases, the language will require a word to be in a different position than the default
+		// This enables the capitalization of words that are moved to the start of the sentence directly in the translation file
+		i18n.on('initialized', () => {
+			i18n.services.formatter?.add('capitalize', (value) => {
+				if (typeof value !== 'string') {
+					return value;
+				}
+				return capitalize(value);
+			});
+		});
+	}
+
+	useEffect(() => {
+		i18n.changeLanguage(lng);
+	}, [lng]);
+
+	return i18n;
+};
+
+const useAutoLanguage = () => {
+	const serverLanguage = useSetting('Language', '');
+	const browserLanguage = normalizeLanguage(window.navigator.userLanguage ?? window.navigator.language);
+	const defaultUserLanguage = browserLanguage || serverLanguage || 'en';
+
+	// if the language is supported, if not remove the region
+	const suggestedLanguage = languages.includes(defaultUserLanguage)
+		? defaultUserLanguage
+		: (defaultUserLanguage.split('-').shift() ?? 'en');
+
+	// usually that value is set based on the user's config language
+	const [language] = useLocalStorage('userLanguage', suggestedLanguage);
+
+	document.documentElement.classList[isRTLScriptLanguage(language) ? 'add' : 'remove']('rtl');
+	document.documentElement.setAttribute('dir', isRTLScriptLanguage(language) ? 'rtl' : 'ltr');
+	document.documentElement.lang = language;
+
+	// if user has no language set, we should set it to the default language
+	return language || suggestedLanguage;
+};
+
+const getNorthernSamiDisplayName = (lng: string) => {
+	/*
+	 ** Intl.DisplayName not returning Northern Sami
+	 ** for `se` language code in Chrome Version 134.0.6998.89
+	 ** which is the proper name based on the Unicode Common Locale Data Repository (CLDR)
+	 */
+	const languageDisplayNames: { [key: string]: string } = {
+		se: 'davvisámegiella',
+		sv: 'nordsamiska',
+		ru: 'северносаамский',
+		no: 'nordsamisk',
+		fi: 'pohjoissaame',
+	};
+
+	return languageDisplayNames[lng] || 'Northern Sami';
+};
+
+const getLanguageName = (code: string, lng: string): string => {
+	try {
+		const lang = new Intl.DisplayNames([lng], { type: 'language' });
+
+		if (code === 'se' && lang.of(code) === 'se') {
+			return getNorthernSamiDisplayName(lng);
+		}
+
+		return lang.of(code) ?? code;
+	} catch (e) {
+		return code;
+	}
+};
+
+export type TranslationProviderProps = {
+	children: ReactNode;
+};
+
+const TranslationProvider = ({ children }: TranslationProviderProps) => {
+	const language = useAutoLanguage();
+	const i18nextInstance = useI18next(language);
+	useCustomTranslations(i18nextInstance);
+
+	const availableLanguages = useMemo(
+		() => [
+			{
+				en: 'Default',
+				name: i18nextInstance.t('Default'),
+				ogName: i18nextInstance.t('Default'),
+				key: '',
+			},
+			...[...new Set([...i18nextInstance.languages, ...languages])]
+				.map((key) => ({
+					en: key,
+					name: getLanguageName(key, language),
+					ogName: getLanguageName(key, key),
+					key,
+				}))
+				.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB)),
+		],
+		[language, i18nextInstance],
+	);
+
+	useEffect(() => {
+		setDateFnsLocale(language);
+	}, [language]);
+
+	useEffect(
+		() =>
+			onLoggedIn(() => {
+				AppClientOrchestratorInstance.getAppClientManager().initialize();
+				AppClientOrchestratorInstance.load();
+			}),
+		[],
+	);
+
+	return (
+		<I18nextProvider i18n={i18nextInstance}>
+			<TranslationProviderInner availableLanguages={availableLanguages}>{children}</TranslationProviderInner>
+		</I18nextProvider>
+	);
+};
+
+/**
+ * I was forced to create this component to keep the api useTranslation from rocketchat
+ * rocketchat useTranslation invalidates the provider content, triggering all the places that use it
+ * i18next triggers a re-render inside useTranslation, since now we are using 100% of the i18next
+ * the only way to invalidate after changing the language in a safe way is using the useTranslation from i8next
+ * and invalidating the provider content
+ */
+// eslint-disable-next-line react/no-multi-comp
+const TranslationProviderInner = ({
+	children,
+	availableLanguages,
+}: {
+	children: ReactNode;
+	availableLanguages: {
+		en: string;
+		name: string;
+		ogName: string;
+		key: string;
+	}[];
+}) => {
+	const { t, i18n } = useTranslation();
+
+	const value: TranslationContextValue = useMemo(
+		() => ({
+			language: i18n.language,
+			languages: availableLanguages,
+			loadLanguage: async (language: string) => {
+				i18n.changeLanguage(language);
+			},
+			translate: Object.assign(addSprinfToI18n(t), {
+				has: ((key, options) => key && i18n.exists(key, options)) as TranslationContextValue['translate']['has'],
+			}),
+		}),
+		[availableLanguages, i18n, t],
+	);
+
+	return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
+};
+
+export default TranslationProvider;