🎙️ a11y: update html lang attribute (#3636)

* refactor: remove duplicate localStorage lang call

* refactor: use cookies to handle langcode

* feat: override index.html lang w/ cookie pref

* refactor: only read index on server start

* refactor: rename lang cookie & localstorage as backup

* refactor: use atomWithLocalStorage in language store

* fix: forced reflow warning in language select

client/index.html

@@ -22,7 +22,7 @@
       type="image/png"
       sizes="16x16"
       href="/assets/favicon-16x16.png"
-      />
+    />
     <link
       rel="apple-touch-icon"
       href="/assets/apple-touch-icon-180x180.png"

client/package.json

@@ -65,6 +65,7 @@
     "filenamify": "^6.0.0",
     "html-to-image": "^1.11.11",
     "image-blob-reduce": "^4.1.0",
+    "js-cookie": "^3.0.5",
     "librechat-data-provider": "*",
     "lodash": "^4.17.21",
     "lucide-react": "^0.394.0",
@@ -111,6 +112,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.3.0",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",

client/src/components/Nav/SettingsTabs/General/General.tsx

@@ -1,9 +1,10 @@
 import { useRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
+import Cookies from 'js-cookie';
 import { SettingsTabValues } from 'librechat-data-provider';
 import React, { useContext, useCallback, useRef } from 'react';
 import type { TDangerButtonProps } from '~/common';
-import { ThemeContext, useLocalize, useLocalStorage } from '~/hooks';
+import { ThemeContext, useLocalize } from '~/hooks';
 import HideSidePanelSwitch from './HideSidePanelSwitch';
 import AutoScrollSwitch from './AutoScrollSwitch';
 import ArchivedChats from './ArchivedChats';
@@ -123,7 +124,6 @@ function General() {
   const { theme, setTheme } = useContext(ThemeContext);
 
   const [langcode, setLangcode] = useRecoilState(store.lang);
-  const [selectedLang, setSelectedLang] = useLocalStorage('selectedLang', langcode);
 
   const contentRef = useRef(null);
 
@@ -136,17 +136,18 @@ function General() {
 
   const changeLang = useCallback(
     (value: string) => {
-      setSelectedLang(value);
+      let userLang = value;
       if (value === 'auto') {
-        const userLang = navigator.language || navigator.languages[0];
-        setLangcode(userLang);
-        localStorage.setItem('lang', userLang);
-      } else {
-        setLangcode(value);
-        localStorage.setItem('lang', value);
+        userLang = navigator.language || navigator.languages[0];
       }
+
+      requestAnimationFrame(() => {
+        document.documentElement.lang = userLang;
+      });
+      setLangcode(userLang);
+      Cookies.set('lang', userLang, { expires: 365 });
     },
-    [setLangcode, setSelectedLang],
+    [setLangcode],
   );
 
   return (
@@ -161,7 +162,7 @@ function General() {
           <ThemeSelector theme={theme} onChange={changeTheme} />
         </div>
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <LangSelector langcode={selectedLang} onChange={changeLang} />
+          <LangSelector langcode={langcode} onChange={changeLang} />
         </div>
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
           <AutoScrollSwitch />

client/src/store/language.ts

@@ -1,10 +1,11 @@
-import { atom } from 'recoil';
+import Cookies from 'js-cookie';
+import { atomWithLocalStorage } from './utils';
 
-const userLang = navigator.language || navigator.languages[0];
+const defaultLang = () => {
+  const userLang = navigator.language || navigator.languages[0];
+  return Cookies.get('lang') || localStorage.getItem('lang') || userLang;
+};
 
-const lang = atom({
-  key: 'lang',
-  default: localStorage.getItem('lang') || userLang,
-});
+const lang = atomWithLocalStorage('lang', defaultLang());
 
 export default { lang };