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

chore: Translation Fixes, Lint Error Corrections, and Additional Translations (#788)

Browse source 
* fix translation and small lint error

* changed from localize to useLocalize hook

* changed to useLocalize
This commit is contained in:
Marco Beretta 2023-08-14 17:51:03 +02:00 • committed by GitHub
parent b64cc71d88
commit 74802dd720
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 421 additions and 421 deletions
Download patch file Download diff file Expand all files Collapse all files

22
client/src/components/Auth/Login.tsx
View file

@ -2,18 +2,14 @@ import React, { useEffect } from 'react';
import LoginForm from './LoginForm';
import { useAuthContext } from '~/hooks/AuthContext';
import { useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
import { useGetStartupConfig } from 'librechat-data-provider';
import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
function Login() {
const { login, error, isAuthenticated } = useAuthContext();
const { data: startupConfig } = useGetStartupConfig();
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const navigate = useNavigate();
@ -27,23 +23,23 @@ function Login() {
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">
{localize(lang, 'com_auth_welcome_back')}
{localize('com_auth_welcome_back')}
</h1>
{error && (
<div
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
{localize(lang, 'com_auth_error_login')}
{localize('com_auth_error_login')}
</div>
)}
<LoginForm onSubmit={login} />
{startupConfig?.registrationEnabled && (
<p className="my-4 text-center text-sm font-light text-gray-700">
{' '}
{localize(lang, 'com_auth_no_account')}{' '}
{localize('com_auth_no_account')}{' '}
<a href="/register" className="p-1 text-green-500 hover:underline">
{localize(lang, 'com_auth_sign_up')}
{localize('com_auth_sign_up')}
</a>
</p>
)}
@ -64,7 +60,7 @@ function Login() {
href={`${startupConfig.serverDomain}/oauth/google`}
>
<GoogleIcon />
<p>{localize(lang, 'com_auth_google_login')}</p>
<p>{localize('com_auth_google_login')}</p>
</a>
</div>
</>
@ -96,7 +92,7 @@ function Login() {
href={`${startupConfig.serverDomain}/oauth/github`}
>
<GithubIcon />
<p>{localize(lang, 'com_auth_github_login')}</p>
<p>{localize('com_auth_github_login')}</p>
</a>
</div>
</>
@ -110,7 +106,7 @@ function Login() {
href={`${startupConfig.serverDomain}/oauth/discord`}
>
<DiscordIcon />
<p>{localize(lang, 'com_auth_discord_login')}</p>
<p>{localize('com_auth_discord_login')}</p>
</a>
</div>
</>

32
client/src/components/Auth/LoginForm.tsx
View file

@ -1,7 +1,5 @@
import { useForm } from 'react-hook-form';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
import { TLoginUser } from 'librechat-data-provider';
type TLoginFormProps = {
@ -9,7 +7,7 @@ type TLoginFormProps = {
};
function LoginForm({ onSubmit }: TLoginFormProps) {
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const {
register,
@ -30,20 +28,20 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
type="text"
id="email"
autoComplete="email"
aria-label={localize(lang, 'com_auth_email')}
aria-label={localize('com_auth_email')}
{...register('email', {
required: localize(lang, 'com_auth_email_required'),
required: localize('com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length'),
message: localize('com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length'),
message: localize('com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern'),
message: localize('com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
@ -54,7 +52,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
htmlFor="email"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_email_address')}
{localize('com_auth_email_address')}
</label>
</div>
{errors.email && (
@ -70,16 +68,16 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
type="password"
id="password"
autoComplete="current-password"
aria-label={localize(lang, 'com_auth_password')}
aria-label={localize('com_auth_password')}
{...register('password', {
required: localize(lang, 'com_auth_password_required'),
required: localize('com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length'),
message: localize('com_auth_password_min_length'),
},
maxLength: {
value: 40,
message: localize(lang, 'com_auth_password_max_length'),
message: localize('com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
@ -90,7 +88,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
htmlFor="password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password')}
{localize('com_auth_password')}
</label>
</div>
@ -102,7 +100,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
)}
</div>
<a href="/forgot-password" className="text-sm text-green-500 hover:underline">
{localize(lang, 'com_auth_password_forgot')}
{localize('com_auth_password_forgot')}
</a>
<div className="mt-6">
<button
@ -111,7 +109,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
type="submit"
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
>
{localize(lang, 'com_auth_continue')}
{localize('com_auth_continue')}
</button>
</div>
</form>

70
client/src/components/Auth/Registration.tsx
View file

@ -1,9 +1,7 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
import {
useRegisterUserMutation,
TRegisterUser,
@ -15,7 +13,7 @@ function Registration() {
const navigate = useNavigate();
const { data: startupConfig } = useGetStartupConfig();
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const {
register,
@ -56,7 +54,7 @@ function Registration() {
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">
{localize(lang, 'com_auth_create_account')}
{localize('com_auth_create_account')}
</h1>
{error && (
<div
@ -64,7 +62,7 @@ function Registration() {
role="alert"
data-testid="registration-error"
>
{localize(lang, 'com_auth_error_create')} {errorMessage}
{localize('com_auth_error_create')} {errorMessage}
</div>
)}
<form
@ -79,16 +77,16 @@ function Registration() {
id="name"
type="text"
autoComplete="name"
aria-label={localize(lang, 'com_auth_full_name')}
aria-label={localize('com_auth_full_name')}
{...register('name', {
required: localize(lang, 'com_auth_name_required'),
required: localize('com_auth_name_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_name_min_length'),
message: localize('com_auth_name_min_length'),
},
maxLength: {
value: 80,
message: localize(lang, 'com_auth_name_max_length'),
message: localize('com_auth_name_max_length'),
},
})}
aria-invalid={!!errors.name}
@ -99,7 +97,7 @@ function Registration() {
htmlFor="name"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_full_name')}
{localize('com_auth_full_name')}
</label>
</div>
@ -115,16 +113,16 @@ function Registration() {
<input
type="text"
id="username"
aria-label={localize(lang, 'com_auth_username')}
aria-label={localize('com_auth_username')}
{...register('username', {
required: localize(lang, 'com_auth_username_required'),
required: localize('com_auth_username_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_username_min_length'),
message: localize('com_auth_username_min_length'),
},
maxLength: {
value: 20,
message: localize(lang, 'com_auth_username_max_length'),
message: localize('com_auth_username_max_length'),
},
})}
aria-invalid={!!errors.username}
@ -136,7 +134,7 @@ function Registration() {
htmlFor="username"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_username')}
{localize('com_auth_username')}
</label>
</div>
@ -153,20 +151,20 @@ function Registration() {
type="email"
id="email"
autoComplete="email"
aria-label={localize(lang, 'com_auth_email')}
aria-label={localize('com_auth_email')}
{...register('email', {
required: localize(lang, 'com_auth_email_required'),
required: localize('com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length'),
message: localize('com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length'),
message: localize('com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern'),
message: localize('com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
@ -177,7 +175,7 @@ function Registration() {
htmlFor="email"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_email')}
{localize('com_auth_email')}
</label>
</div>
{errors.email && (
@ -194,16 +192,16 @@ function Registration() {
id="password"
data-testid="password"
autoComplete="current-password"
aria-label={localize(lang, 'com_auth_password')}
aria-label={localize('com_auth_password')}
{...register('password', {
required: localize(lang, 'com_auth_password_required'),
required: localize('com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length'),
message: localize('com_auth_password_min_length'),
},
maxLength: {
value: 128,
message: localize(lang, 'com_auth_password_max_length'),
message: localize('com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
@ -214,7 +212,7 @@ function Registration() {
htmlFor="password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password')}
{localize('com_auth_password')}
</label>
</div>
@ -231,7 +229,7 @@ function Registration() {
type="password"
id="confirm_password"
data-testid="confirm_password"
aria-label={localize(lang, 'com_auth_password_confirm')}
aria-label={localize('com_auth_password_confirm')}
// uncomment to block pasting in confirm field
// onPaste={(e) => {
// e.preventDefault();
@ -239,7 +237,7 @@ function Registration() {
// }}
{...register('confirm_password', {
validate: (value) =>
value === password || localize(lang, 'com_auth_password_not_match'),
value === password || localize('com_auth_password_not_match'),
})}
aria-invalid={!!errors.confirm_password}
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
@ -249,7 +247,7 @@ function Registration() {
htmlFor="confirm_password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password_confirm')}
{localize('com_auth_password_confirm')}
</label>
</div>
@ -273,19 +271,19 @@ function Registration() {
aria-label="Submit registration"
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-green-500"
>
{localize(lang, 'com_auth_continue')}
{localize('com_auth_continue')}
</button>
</div>
</form>
<p className="my-4 text-center text-sm font-light text-gray-700">
{' '}
{localize(lang, 'com_auth_already_have_account')}{' '}
{localize('com_auth_already_have_account')}{' '}
<a
href="/login"
aria-label="Login"
className="p-1 font-medium text-green-500 hover:underline"
>
{localize(lang, 'com_auth_login')}
{localize('com_auth_login')}
</a>
</p>
{startupConfig?.socialLoginEnabled && (
@ -305,7 +303,7 @@ function Registration() {
href={`${startupConfig.serverDomain}/oauth/google`}
>
<GoogleIcon />
<p>{localize(lang, 'com_auth_google_login')}</p>
<p>{localize('com_auth_google_login')}</p>
</a>
</div>
</>
@ -337,7 +335,7 @@ function Registration() {
href={`${startupConfig.serverDomain}/oauth/github`}
>
<GithubIcon />
<p>{localize(lang, 'com_auth_github_login')}</p>
<p>{localize('com_auth_github_login')}</p>
</a>
</div>
</>
@ -351,7 +349,7 @@ function Registration() {
href={`${startupConfig.serverDomain}/oauth/discord`}
>
<DiscordIcon />
<p>{localize(lang, 'com_auth_discord_login')}</p>
<p>{localize('com_auth_discord_login')}</p>
</a>
</div>
</>

36
client/src/components/Auth/RequestPasswordReset.tsx
View file

@ -1,8 +1,6 @@
import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
import {
useRequestPasswordResetMutation,
useGetStartupConfig,
@ -11,7 +9,7 @@ import {
} from 'librechat-data-provider';
function RequestPasswordReset() {
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const {
register,
handleSubmit,
@ -44,22 +42,22 @@ function RequestPasswordReset() {
useEffect(() => {
if (requestPasswordReset.isSuccess) {
if (config.data?.emailEnabled) {
setHeaderText(localize(lang, 'com_auth_reset_password_link_sent'));
setBodyText(localize(lang, 'com_auth_reset_password_email_sent'));
setHeaderText(localize('com_auth_reset_password_link_sent'));
setBodyText(localize('com_auth_reset_password_email_sent'));
} else {
setHeaderText(localize(lang, 'com_auth_reset_password'));
setHeaderText(localize('com_auth_reset_password'));
setBodyText(
<span>
{localize(lang, 'com_auth_click')}{' '}
{localize('com_auth_click')}{' '}
<a className="text-green-600 hover:underline" href={resetLink}>
{localize(lang, 'com_auth_here')}
{localize('com_auth_here')}
</a>{' '}
{localize(lang, 'com_auth_to_reset_your_password')}
{localize('com_auth_to_reset_your_password')}
</span>,
);
}
} else {
setHeaderText(localize(lang, 'com_auth_reset_password'));
setHeaderText(localize('com_auth_reset_password'));
setBodyText(undefined);
}
}, [requestPasswordReset.isSuccess, config.data?.emailEnabled, resetLink, lang]);
@ -73,7 +71,7 @@ function RequestPasswordReset() {
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
{localize(lang, 'com_auth_error_reset_password')}
{localize('com_auth_error_reset_password')}
</div>
)}
{bodyText ? (
@ -96,20 +94,20 @@ function RequestPasswordReset() {
type="email"
id="email"
autoComplete="off"
aria-label={localize(lang, 'com_auth_email')}
aria-label={localize('com_auth_email')}
{...register('email', {
required: localize(lang, 'com_auth_email_required'),
required: localize('com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length'),
message: localize('com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length'),
message: localize('com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern'),
message: localize('com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
@ -120,7 +118,7 @@ function RequestPasswordReset() {
htmlFor="email"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_email_address')}
{localize('com_auth_email_address')}
</label>
</div>
{errors.email && (
@ -136,7 +134,7 @@ function RequestPasswordReset() {
disabled={!!errors.email}
className="w-full rounded-sm border border-transparent bg-green-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-600 focus:outline-none active:bg-green-500"
>
{localize(lang, 'com_auth_continue')}
{localize('com_auth_continue')}
</button>
</div>
</form>

40
client/src/components/Auth/ResetPassword.tsx
View file

@ -4,10 +4,10 @@ import { useResetPasswordMutation, TResetPassword } from 'librechat-data-provide
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
function ResetPassword() {
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const {
register,
handleSubmit,
@ -33,20 +33,20 @@ function ResetPassword() {
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">
{localize(lang, 'com_auth_reset_password_success')}
{localize('com_auth_reset_password_success')}
</h1>
<div
className="relative mb-8 mt-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-center text-green-700"
role="alert"
>
{localize(lang, 'com_auth_login_with_new_password')}
{localize('com_auth_login_with_new_password')}
</div>
<button
onClick={() => navigate('/login')}
aria-label={localize(lang, 'com_auth_sign_in')}
aria-label={localize('com_auth_sign_in')}
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
>
{localize(lang, 'com_auth_continue')}
{localize('com_auth_continue')}
</button>
</div>
</div>
@ -56,18 +56,18 @@ function ResetPassword() {
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">
{localize(lang, 'com_auth_reset_password')}
{localize('com_auth_reset_password')}
</h1>
{resetError && (
<div
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
{localize(lang, 'com_auth_error_invalid_reset_token')}{' '}
{localize('com_auth_error_invalid_reset_token')}{' '}
<a className="font-semibold text-green-600 hover:underline" href="/forgot-password">
{localize(lang, 'com_auth_click_here')}
{localize('com_auth_click_here')}
</a>{' '}
{localize(lang, 'com_auth_to_try_again')}
{localize('com_auth_to_try_again')}
</div>
)}
<form
@ -96,16 +96,16 @@ function ResetPassword() {
type="password"
id="password"
autoComplete="current-password"
aria-label={localize(lang, 'com_auth_password')}
aria-label={localize('com_auth_password')}
{...register('password', {
required: localize(lang, 'com_auth_password_required'),
required: localize('com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length'),
message: localize('com_auth_password_min_length'),
},
maxLength: {
value: 128,
message: localize(lang, 'com_auth_password_max_length'),
message: localize('com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
@ -116,7 +116,7 @@ function ResetPassword() {
htmlFor="password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password')}
{localize('com_auth_password')}
</label>
</div>
@ -132,7 +132,7 @@ function ResetPassword() {
<input
type="password"
id="confirm_password"
aria-label={localize(lang, 'com_auth_password_confirm')}
aria-label={localize('com_auth_password_confirm')}
// uncomment to prevent pasting in confirm field
onPaste={(e) => {
e.preventDefault();
@ -140,7 +140,7 @@ function ResetPassword() {
}}
{...register('confirm_password', {
validate: (value) =>
value === password || localize(lang, 'com_auth_password_not_match'),
value === password || localize('com_auth_password_not_match'),
})}
aria-invalid={!!errors.confirm_password}
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
@ -150,7 +150,7 @@ function ResetPassword() {
htmlFor="confirm_password"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
{localize(lang, 'com_auth_password_confirm')}
{localize('com_auth_password_confirm')}
</label>
</div>
{errors.confirm_password && (
@ -176,10 +176,10 @@ function ResetPassword() {
<button
disabled={!!errors.password || !!errors.confirm_password}
type="submit"
aria-label={localize(lang, 'com_auth_submit_registration')}
aria-label={localize('com_auth_submit_registration')}
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
>
{localize(lang, 'com_auth_continue')}
{localize('com_auth_continue')}
</button>
</div>
</form>

1
client/src/components/Auth/__tests__/Registration.spec.tsx
View file

@ -77,6 +77,7 @@ test('renders registration form', () => {
);
});
// eslint-disable-next-line jest/no-commented-out-tests
// test('calls registerUser.mutate on registration', async () => {
// const mutate = jest.fn();
// const { getByTestId, getByRole, history } = setup({

4
client/src/components/Input/EndpointMenu/EndpointItem.tsx
View file

@ -4,6 +4,7 @@ import { Settings } from 'lucide-react';
import { DropdownMenuRadioItem } from '~/components';
import { getIcon } from '~/components/Endpoints';
import { SetTokenDialog } from '../SetTokenDialog';
import { useLocalize } from '~/hooks';
import store from '~/store';
import { cn, alternateName } from '~/utils';
@ -29,6 +30,7 @@ export default function ModelItem({
});
const isUserProvided = endpointsConfig?.[endpoint]?.userProvide;
const localize = useLocalize();
// regular model
return (
@ -62,7 +64,7 @@ export default function ModelItem({
}}
>
<Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
Config Token
{localize('com_endpoint_config_token')}
</button>
) : null}
</DropdownMenuRadioItem>

19
client/src/components/Input/EndpointMenu/EndpointMenu.jsx
View file

@ -20,6 +20,7 @@ import {
} from '~/components/ui/';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { cn, cleanupPreset, getDefaultConversation } from '~/utils';
import { useLocalize } from '~/hooks';
import store from '~/store';
@ -145,6 +146,8 @@ export default function NewConversationMenu() {
button: true,
});
const localize = useLocalize();
return (
<Dialog className="z-[100]">
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
@ -159,7 +162,7 @@ export default function NewConversationMenu() {
>
{icon}
<span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-hover:max-w-[80px] group-hover:px-2 group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
New Topic
{localize('com_endpoint_new_topic')}
</span>
</Button>
</DropdownMenuTrigger>
@ -171,7 +174,8 @@ export default function NewConversationMenu() {
className="cursor-pointer dark:text-gray-300"
onClick={() => setShowEndpoints((prev) => !prev)}
>
{showEndpoints ? 'Hide ' : 'Show '} Endpoints
{showEndpoints ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
{localize('com_endpoint')}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
@ -188,7 +192,7 @@ export default function NewConversationMenu() {
/>
) : (
<DropdownMenuLabel className="dark:text-gray-300">
No endpoint available.
{localize('com_endpoint_not_available')}
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
@ -200,7 +204,8 @@ export default function NewConversationMenu() {
className="mr-auto cursor-pointer "
onClick={() => setShowPresets((prev) => !prev)}
>
{showPresets ? 'Hide ' : 'Show '} Presets
{showPresets ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
{localize('com_endpoint_examples')}
</span>
<FileUpload onFileSelected={onFileSelected} />
<Dialog>
@ -214,7 +219,7 @@ export default function NewConversationMenu() {
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
> */}
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
Clear All
{localize('com_endpoint_clear_all')}
{/* </Button> */}
</label>
</DialogTrigger>
@ -246,7 +251,9 @@ export default function NewConversationMenu() {
onDeletePreset={onDeletePreset}
/>
) : (
<DropdownMenuLabel className="dark:text-gray-300">No preset yet.</DropdownMenuLabel>
<DropdownMenuLabel className="dark:text-gray-300">
{localize('com_endpoint_no_presets')}
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>

4
client/src/components/Input/Footer.tsx
View file

@ -1,8 +1,10 @@
import React from 'react';
import { useGetStartupConfig } from 'librechat-data-provider';
import { useLocalize } from '~/hooks';
export default function Footer() {
const { data: config } = useGetStartupConfig();
const localize = useLocalize();
return (
<div className="hidden px-3 pb-1 pt-2 text-center text-xs text-black/50 dark:text-white/50 md:block md:px-4 md:pb-4 md:pt-3">
@ -14,7 +16,7 @@ export default function Footer() {
>
{config?.appTitle || 'LibreChat'} v0.5.7
</a>
{' - '}. All AI conversations in one place. Pay per call and not per month.
{' - '}. {localize('com_ui_pay_per_call')}
</div>
);
}

1
client/src/components/Input/GenerationButtons.tsx
View file

@ -1,3 +1,4 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { cn, removeFocusOutlines } from '~/utils/';
type GenerationButtonsProps = {

9
client/src/components/Nav/ClearConvos.tsx
View file

@ -4,15 +4,14 @@ import DialogTemplate from '~/components/ui/DialogTemplate';
import { ClearChatsButton } from './SettingsTabs/';
import { useClearConversationsMutation } from 'librechat-data-provider';
import store from '~/store';
import { useRecoilValue } from 'recoil';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
const ClearConvos = ({ open, onOpenChange }) => {
const { newConversation } = store.useConversation();
const { refreshConversations } = store.useConversations();
const clearConvosMutation = useClearConversationsMutation();
const [confirmClear, setConfirmClear] = useState(false);
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const clearConvos = useCallback(() => {
if (confirmClear) {
@ -34,10 +33,10 @@ const ClearConvos = ({ open, onOpenChange }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={localize(lang, 'com_nav_clear_conversation')}
title={localize('com_nav_clear_conversation')}
className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
headerClassName="border-none"
description={localize(lang, 'com_nav_clear_conversation_confirm_message')}
description={localize('com_nav_clear_conversation_confirm_message')}
buttons={
<ClearChatsButton
showText={false}

6
client/src/components/Nav/ExportConversation/ExportConversation.jsx
View file

@ -6,11 +6,11 @@ import { cn } from '~/utils/';
import ExportModel from './ExportModel';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
const ExportConversation = forwardRef(() => {
const [open, setOpen] = useState(false);
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const conversation = useRecoilValue(store.conversation) || {};
@ -35,7 +35,7 @@ const ExportConversation = forwardRef(() => {
onClick={clickHandler}
>
<Download size={16} />
{localize(lang, 'com_nav_export_conversation')}
{localize('com_nav_export_conversation')}
</button>
<ExportModel open={open} onOpenChange={setOpen} />

9
client/src/components/Nav/MobileNav.jsx
View file

@ -1,14 +1,13 @@
import React from 'react';
import { useRecoilValue } from 'recoil';
import store from '~/store';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
export default function MobileNav({ setNavVisible }) {
const conversation = useRecoilValue(store.conversation);
const { newConversation } = store.useConversation();
const { title = 'New Chat' } = conversation || {};
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
return (
<div className="fixed left-0 right-0 top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
@ -17,7 +16,7 @@ export default function MobileNav({ setNavVisible }) {
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-0 focus:ring-inset focus:ring-white dark:hover:text-white"
onClick={() => setNavVisible((prev) => !prev)}
>
<span className="sr-only">{localize(lang, 'com_nav_open_sidebar')}</span>
<span className="sr-only">{localize('com_nav_open_sidebar')}</span>
<svg
stroke="currentColor"
fill="none"
@ -36,7 +35,7 @@ export default function MobileNav({ setNavVisible }) {
</svg>
</button>
<h1 className="flex-1 text-center text-base font-normal">
{title || localize(lang, 'com_ui_new_chat')}
{title || localize('com_ui_new_chat')}
</h1>
<button type="button" className="px-3" onClick={() => newConversation()}>
<svg

12
client/src/components/Nav/NavLinks.jsx
View file

@ -8,7 +8,7 @@ import NavLink from './NavLink';
import Logout from './Logout';
import { ExportModel } from './ExportConversation';
import { LinkIcon, DotsIcon, GearIcon } from '~/components';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
import { useAuthContext } from '~/hooks/AuthContext';
import { cn } from '~/utils/';
@ -19,7 +19,7 @@ export default function NavLinks() {
const [showClearConvos, setShowClearConvos] = useState(false);
const [showSettings, setShowSettings] = useState(false);
const { user } = useAuthContext();
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const conversation = useRecoilValue(store.conversation) || {};
@ -60,7 +60,7 @@ export default function NavLinks() {
</div>
</div>
<div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
{user?.name || localize(lang, 'com_nav_user')}
{user?.name || localize('com_nav_user')}
</div>
<DotsIcon />
</Menu.Button>
@ -82,7 +82,7 @@ export default function NavLinks() {
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50',
)}
svg={() => <Download size={16} />}
text={localize(lang, 'com_nav_export_conversation')}
text={localize('com_nav_export_conversation')}
clickHandler={clickHandler}
/>
</Menu.Item>
@ -91,7 +91,7 @@ export default function NavLinks() {
<NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
svg={() => <LinkIcon />}
text={localize(lang, 'com_nav_help_faq')}
text={localize('com_nav_help_faq')}
clickHandler={() => window.open('https://docs.librechat.ai/', '_blank')}
/>
</Menu.Item>
@ -99,7 +99,7 @@ export default function NavLinks() {
<NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
svg={() => <GearIcon />}
text={localize(lang, 'com_nav_settings')}
text={localize('com_nav_settings')}
clickHandler={() => setShowSettings(true)}
/>
</Menu.Item>

7
client/src/components/Nav/NewChat.jsx
View file

@ -1,11 +1,10 @@
import React from 'react';
import store from '~/store';
import { useRecoilValue } from 'recoil';
import { localize } from '~/localization/Translation';
import { useLocalize } from '~/hooks';
export default function NewChat() {
const { newConversation } = store.useConversation();
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const clickHandler = () => {
// dispatch(setInputValue(''));
@ -33,7 +32,7 @@ export default function NewChat() {
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
{localize(lang, 'com_ui_new_chat')}
{localize('com_ui_new_chat')}
</a>
);
}

4
client/src/components/Plugins/Store/PluginAuthForm.tsx
View file

@ -23,10 +23,10 @@ function PluginAuthForm({ plugin, onSubmit }: TPluginAuthFormProps) {
className="col-span-1 flex w-full flex-col items-start justify-start gap-2"
method="POST"
onSubmit={handleSubmit((auth) =>
onSubmit({ pluginKey: plugin!.pluginKey, action: 'install', auth }),
onSubmit({ pluginKey: plugin?.pluginKey, action: 'install', auth }),
)}
>
{plugin!.authConfig?.map((config: TPluginAuthConfig, i: number) => (
{plugin?.authConfig?.map((config: TPluginAuthConfig, i: number) => (
<div key={`${config.authField}-${i}`} className="flex w-full flex-col gap-1">
<label
htmlFor={config.authField}

2
client/src/components/Plugins/Store/PluginStoreDialog.tsx
View file

@ -85,7 +85,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
setSelectedPlugin(getAvailablePluginFromKey);
if (
getAvailablePluginFromKey!.authConfig.length > 0 &&
getAvailablePluginFromKey?.authConfig.length > 0 &&
!getAvailablePluginFromKey?.authenticated
) {
setShowPluginAuthForm(true);

30
client/src/components/ui/Landing.tsx
View file

@ -5,16 +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 { useLocalize } from '~/hooks';
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);
const localize = useLocalize();
// @ts-ignore TODO: Fix anti-pattern - requires refactoring conversation store
const { title = localize(lang, 'com_ui_new_chat') } = conversation || {};
const { title = localize('com_ui_new_chat') } = conversation || {};
useDocumentTitle(title);
@ -39,60 +39,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 />
{localize(lang, 'com_ui_examples')}
{localize('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;{localize(lang, 'com_ui_example_quantum_computing')}&quot; →
&quot;{localize('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;{localize(lang, 'com_ui_example_10_year_old_b_day')}&quot; →
&quot;{localize('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;{localize(lang, 'com_ui_example_http_in_js')}&quot; →
&quot;{localize('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 />
{localize(lang, 'com_ui_capabilities')}
{localize('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">
{localize(lang, 'com_ui_capability_remember')}
{localize('com_ui_capability_remember')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
{localize(lang, 'com_ui_capability_correction')}
{localize('com_ui_capability_correction')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
{localize(lang, 'com_ui_capability_decline_requests')}
{localize('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 />
{localize(lang, 'com_ui_limitations')}
{localize('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">
{localize(lang, 'com_ui_limitation_incorrect_info')}
{localize('com_ui_limitation_incorrect_info')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
{localize(lang, 'com_ui_limitation_harmful_biased')}
{localize('com_ui_limitation_harmful_biased')}
</li>
<li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
{localize(lang, 'com_ui_limitation_limited_2021')}
{localize('com_ui_limitation_limited_2021')}
</li>
</ul>
</div>