Feature Localization (i18n) Support (#557)

* init localization

* Update defaul to en

* Fix merge issue and import path.

* Set default to en

* Change jsx to tsx

* Update the password max length string.

* Remove languageContext as using the recoil instead.
This commit is contained in:
Abner Chou 2023-07-11 15:55:21 -04:00 committed by GitHub
parent 13627c7f4f
commit 47e5493744
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 29076 additions and 115 deletions

View file

@ -5,14 +5,16 @@ import SunIcon from '../svg/SunIcon';
import LightningIcon from '../svg/LightningIcon';
import CautionIcon from '../svg/CautionIcon';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useGetStartupConfig } from '@librechat/data-provider';
export default function Landing() {
const { data: config } = useGetStartupConfig();
const setText = useSetRecoilState(store.text);
const conversation = useRecoilValue(store.conversation);
const lang = useRecoilValue(store.lang);
// @ts-ignore TODO: Fix anti-pattern - requires refactoring conversation store
const { title = 'New Chat' } = conversation || {};
const { title = localize(lang, 'com_ui_new_chat') } = conversation || {};
useDocumentTitle(title);
@ -36,60 +38,60 @@ export default function Landing() {
<div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">
<h2 className="m-auto flex items-center gap-3 text-lg font-normal md:flex-col md:gap-2">
<SunIcon />
Examples
{localize(lang, 'com_ui_examples')}
</h2>
<ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
<button
onClick={clickHandler}
className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
>
&quot;Explain quantum computing in simple terms&quot;
&quot;{localize(lang, 'com_ui_example_quantum_computing')}&quot;
</button>
<button
onClick={clickHandler}
className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
>
&quot;Got any creative ideas for a 10 year old&apos;s birthday?&quot;
&quot;;{localize(lang, 'com_ui_example_10_year_old_b_day')}&quot;
</button>
<button
onClick={clickHandler}
className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
>
&quot;How do I make an HTTP request in Javascript?&quot;
&quot;{localize(lang, 'com_ui_example_http_in_js')}&quot;
</button>
</ul>
</div>
<div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">
<h2 className="m-auto flex items-center gap-3 text-lg font-normal md:flex-col md:gap-2">
<LightningIcon />
Capabilities
{localize(lang, 'com_ui_capabilities')}
</h2>
<ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
Remembers what user said earlier in the conversation
{localize(lang, 'com_ui_capability_remember')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
Allows user to provide follow-up corrections
{localize(lang, 'com_ui_capability_correction')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
Trained to decline inappropriate requests
{localize(lang, 'com_ui_capability_decline_requests')}
</li>
</ul>
</div>
<div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">
<h2 className="m-auto flex items-center gap-3 text-lg font-normal md:flex-col md:gap-2">
<CautionIcon />
Limitations
{localize(lang, 'com_ui_limitations')}
</h2>
<ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
May occasionally generate incorrect information
{localize(lang, 'com_ui_limitation_incorrect_info')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
May occasionally produce harmful instructions or biased content
{localize(lang, 'com_ui_limitation_harmful_biased')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
Limited knowledge of world and events after 2021
{localize(lang, 'com_ui_limitation_limited_2021')}
</li>
</ul>
</div>