Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
* 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
This commit is contained in:
Jacob Colyvan 2024-08-30 20:57:29 +10:00 • committed by GitHub
parent a0042317b2
commit 2ce4f66218
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 71 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -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 />