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

Add localization support for endpoint pages components (#667)

Browse source 
* 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.

* Add localization to component endpoints pages

* Revert default to en after testing.

* Update LoginForm.tsx

* Fix translation.

* Make lint happy
This commit is contained in:
Abner Chou 2023-07-22 15:09:45 -04:00 • committed by GitHub
parent 4148c6d219
commit b64273957a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 212 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

22
client/src/components/Endpoints/BingAI/Settings.jsx
View file

@ -6,6 +6,9 @@ import SelectDropDown from '../../ui/SelectDropDown';
import { cn } from '~/utils/';
import useDebounce from '~/hooks/useDebounce';
import { useUpdateTokenCountMutation } from '@librechat/data-provider';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
const defaultTextProps =
'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
@ -20,6 +23,7 @@ function Settings(props) {
const setToneStyle = (value) => setOption('toneStyle')(value.toLowerCase());
const debouncedContext = useDebounce(context, 250);
const updateTokenCountMutation = useUpdateTokenCountMutation();
const lang = useRecoilValue(store.lang);
useEffect(() => {
if (!debouncedContext || debouncedContext.trim() === '') {
@ -48,7 +52,7 @@ function Settings(props) {
<div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2">
<Label htmlFor="toneStyle-dropdown" className="text-left text-sm font-medium">
Tone Style <small className="opacity-40">(default: creative)</small>
{localize(lang, 'com_endpoint_tone_style')} <small className="opacity-40">({localize(lang, 'com_endpoint_default_creative')})</small>
</Label>
<SelectDropDown
id="toneStyle-dropdown"
@ -66,26 +70,26 @@ function Settings(props) {
</div>
<div className="grid w-full items-center gap-2">
<Label htmlFor="context" className="text-left text-sm font-medium">
Context <small className="opacity-40">(default: blank)</small>
{localize(lang, 'com_endpoint_context')} <small className="opacity-40">({localize(lang, 'com_endpoint_default_blank')})</small>
</Label>
<TextareaAutosize
id="context"
disabled={readonly}
value={context || ''}
onChange={(e) => setContext(e.target.value || null)}
placeholder="Bing can use up to 7k tokens for 'context', which it can reference for the conversation. The specific limit is not known but may run into errors exceeding 7k tokens"
placeholder={localize(lang, 'com_endpoint_bing_context_placeholder')}
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2',
)}
/>
<small className="mb-5 text-black dark:text-white">{`Token count: ${tokenCount}`}</small>
<small className="mb-5 text-black dark:text-white">{`${localize(lang, 'com_endpoint_token_count')}: ${tokenCount}`}</small>
</div>
</div>
<div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2">
<Label htmlFor="jailbreak" className="text-left text-sm font-medium">
Enable Sydney <small className="opacity-40">(default: false)</small>
{localize(lang, 'com_endpoint_bing_enable_sydney')} <small className="opacity-40">({localize(lang, 'com_endpoint_default_false')})</small>
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">
<Checkbox
@ -99,7 +103,7 @@ function Settings(props) {
htmlFor="jailbreak"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
>
Jailbreak <small>To enable Sydney</small>
{localize(lang, 'com_endpoint_bing_jailbreak')} <small>{localize(lang, 'com_endpoint_bing_to_enable_sydney')}</small>
</label>
</div>
</div>
@ -116,9 +120,9 @@ function Settings(props) {
className="text-blue-500 transition-colors duration-200 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500"
rel="noreferrer"
>
System Message
{localize(lang, 'com_endpoint_system_message')}
</a>{' '}
<small className="opacity-40 dark:text-gray-50">(default: blank)</small>
<small className="opacity-40 dark:text-gray-50">( {localize(lang, 'com_endpoint_default_blank')})</small>
</Label>
<TextareaAutosize
@ -126,7 +130,7 @@ function Settings(props) {
disabled={readonly}
value={systemMessage || ''}
onChange={(e) => setSystemMessage(e.target.value || null)}
placeholder="WARNING: Misuse of this feature can get you BANNED from using Bing! Click on 'System Message' for full instructions and the default message if omitted, which is the 'Sydney' preset that is considered safe."
placeholder={localize(lang, 'com_endpoint_bing_system_message_placeholder')}
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 placeholder:text-red-400',