feat: Add More Translation Text & Minor UI Fixes (#861)

* config token translation

* more translation and fix

* fix conflict

* fix(DialogTemplate) bug with the spec.tsx, localize hooks need to be in a recoil root

* small clean up

* fix(NewTopic) in endpoint

* fix(RecoilRoot)

* test(DialogTemplate.spec) used data-testid

* fix(DialogTemplate)

* some cleanup

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
This commit is contained in:
Marco Beretta 2023-09-04 15:23:26 +02:00 committed by GitHub
parent 28230d9305
commit ac8b898495
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 333 additions and 206 deletions

View file

@ -3,11 +3,11 @@ import { CheckIcon } from 'lucide-react';
import { DialogButton } from '~/components/ui';
import React, { useState, useContext, useEffect, useCallback } from 'react';
import { useClearConversationsMutation } from 'librechat-data-provider';
import { useRecoilValue, useRecoilState } from 'recoil';
import { useRecoilState } from 'recoil';
import store from '~/store';
import { ThemeContext } from '~/hooks';
import { cn } from '~/utils';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
export const ThemeSelector = ({
theme,
@ -16,19 +16,19 @@ export const ThemeSelector = ({
theme: string;
onChange: (value: string) => void;
}) => {
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
return (
<div className="flex items-center justify-between">
<div>{localize(lang, 'com_nav_theme')}</div>
<div>{localize('com_nav_theme')}</div>
<select
className="w-24 rounded border border-black/10 bg-transparent text-sm dark:border-white/20 dark:bg-gray-900"
onChange={(e) => onChange(e.target.value)}
value={theme}
>
<option value="system">{localize(lang, 'com_nav_theme_system')}</option>
<option value="dark">{localize(lang, 'com_nav_theme_dark')}</option>
<option value="light">{localize(lang, 'com_nav_theme_light')}</option>
<option value="system">{localize('com_nav_theme_system')}</option>
<option value="dark">{localize('com_nav_theme_dark')}</option>
<option value="light">{localize('com_nav_theme_light')}</option>
</select>
</div>
);
@ -45,11 +45,11 @@ export const ClearChatsButton = ({
showText: boolean;
onClick: () => void;
}) => {
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
return (
<div className="flex items-center justify-between">
{showText && <div>{localize(lang, 'com_nav_clear_all_chats')}</div>}
{showText && <div>{localize('com_nav_clear_all_chats')}</div>}
<DialogButton
id="clearConvosBtn"
onClick={onClick}
@ -70,7 +70,7 @@ export const ClearChatsButton = ({
id="clearConvosTxt"
data-testid="clear-convos-confirm"
>
<CheckIcon className="h-5 w-5" /> {localize(lang, 'com_nav_confirm_clear')}
<CheckIcon className="h-5 w-5" /> {localize('com_nav_confirm_clear')}
</div>
) : (
<div
@ -78,7 +78,7 @@ export const ClearChatsButton = ({
id="clearConvosTxt"
data-testid="clear-convos-initial"
>
{localize(lang, 'com_nav_clear')}
{localize('com_ui_clear')}
</div>
)}
@ -95,25 +95,25 @@ export const LangSelector = ({
langcode: string;
onChange: (value: string) => void;
}) => {
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
return (
<div className="flex items-center justify-between">
<div>{localize(lang, 'com_nav_language')}</div>
<div>{localize('com_nav_language')}</div>
<select
className="w-24 rounded border border-black/10 bg-transparent text-sm dark:border-white/20 dark:bg-gray-900"
onChange={(e) => onChange(e.target.value)}
value={langcode}
>
<option value="en">{localize(lang, 'com_nav_lang_english')}</option>
<option value="cn">{localize(lang, 'com_nav_lang_chinese')}</option>
<option value="de">{localize(lang, 'com_nav_lang_german')}</option>
<option value="es">{localize(lang, 'com_nav_lang_spanish')}</option>
<option value="fr">{localize(lang, 'com_nav_lang_french')}</option>
<option value="it">{localize(lang, 'com_nav_lang_italian')}</option>
<option value="pl">{localize(lang, 'com_nav_lang_polish')}</option>
<option value="br">{localize(lang, 'com_nav_lang_brazilian_portuguese')}</option>
<option value="ru">{localize(lang, 'com_nav_lang_russian')}</option>
<option value="en">{localize('com_nav_lang_english')}</option>
<option value="cn">{localize('com_nav_lang_chinese')}</option>
<option value="de">{localize('com_nav_lang_german')}</option>
<option value="es">{localize('com_nav_lang_spanish')}</option>
<option value="fr">{localize('com_nav_lang_french')}</option>
<option value="it">{localize('com_nav_lang_italian')}</option>
<option value="pl">{localize('com_nav_lang_polish')}</option>
<option value="br">{localize('com_nav_lang_brazilian_portuguese')}</option>
<option value="ru">{localize('com_nav_lang_russian')}</option>
</select>
</div>
);