mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-04 01:28:51 +01:00
Support localization for Nav components (#688)
* 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 * Merge (#1) * Create deploy.yml * Add localization support for endpoint pages components (#667) * 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 * Add a restart to melisearch in docker-compose.yml (#684) * Oauth fixes for Cognito (#686) * Add a restart to melisearch in docker-compose.yml * Oauth fixes for Cognito * Use the username or email for full name from oath if not provided --------- Co-authored-by: Donavan <snark@hey.com> * Italian localization support for endpoint (#687) --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com> Co-authored-by: Donavan Stanley <donavan.stanley@gmail.com> Co-authored-by: Donavan <snark@hey.com> Co-authored-by: Marco Beretta <81851188+Berry-13@users.noreply.github.com> * Translate Nav pages * Fix npm test --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com> Co-authored-by: Donavan Stanley <donavan.stanley@gmail.com> Co-authored-by: Donavan <snark@hey.com> Co-authored-by: Marco Beretta <81851188+Berry-13@users.noreply.github.com>
This commit is contained in:
Abner Chou
GitHub
parent
3b865fbc59
commit
1e49b7ecb1
22 changed files with 346 additions and 130 deletions
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
import { render, fireEvent } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
import { ClearChatsButton } from './General';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
describe('ClearChatsButton', () => {
|
||||
let mockOnClick;
|
||||
|
|
@ -12,7 +13,9 @@ describe('ClearChatsButton', () => {
|
|||
|
||||
it('renders correctly', () => {
|
||||
const { getByText } = render(
|
||||
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />,
|
||||
<RecoilRoot>
|
||||
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />
|
||||
</RecoilRoot>,
|
||||
);
|
||||
|
||||
expect(getByText('Clear all chats')).toBeInTheDocument();
|
||||
|
|
@ -21,7 +24,9 @@ describe('ClearChatsButton', () => {
|
|||
|
||||
it('renders confirm clear when confirmClear is true', () => {
|
||||
const { getByText } = render(
|
||||
<ClearChatsButton confirmClear={true} showText={true} onClick={mockOnClick} />,
|
||||
<RecoilRoot>
|
||||
<ClearChatsButton confirmClear={true} showText={true} onClick={mockOnClick} />
|
||||
</RecoilRoot>,
|
||||
);
|
||||
|
||||
expect(getByText('Confirm Clear')).toBeInTheDocument();
|
||||
|
|
@ -29,7 +34,9 @@ describe('ClearChatsButton', () => {
|
|||
|
||||
it('calls onClick when the button is clicked', () => {
|
||||
const { getByText } = render(
|
||||
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />,
|
||||
<RecoilRoot>
|
||||
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />
|
||||
</RecoilRoot>,
|
||||
);
|
||||
|
||||
fireEvent.click(getByText('Clear'));
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import { CheckIcon } from 'lucide-react';
|
|||
import { ThemeContext } from '~/hooks/ThemeContext';
|
||||
import React, { useState, useContext, useCallback } from 'react';
|
||||
import { useClearConversationsMutation } from '@librechat/data-provider';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import store from '~/store';
|
||||
import { localize } from '~/localization/Translation';
|
||||
|
||||
export const ThemeSelector = ({
|
||||
theme,
|
||||
|
|
@ -10,20 +13,24 @@ export const ThemeSelector = ({
|
|||
}: {
|
||||
theme: string;
|
||||
onChange: (value: string) => void;
|
||||
}) => (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>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">System</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}) => {
|
||||
const lang = useRecoilValue(store.lang);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>{localize(lang, '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>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ClearChatsButton = ({
|
||||
confirmClear,
|
||||
|
|
@ -33,27 +40,31 @@ export const ClearChatsButton = ({
|
|||
confirmClear: boolean;
|
||||
showText: boolean;
|
||||
onClick: () => void;
|
||||
}) => (
|
||||
<div className="flex items-center justify-between">
|
||||
{showText && <div>Clear all chats</div>}
|
||||
<button
|
||||
className="btn relative bg-red-600 text-white hover:bg-red-800"
|
||||
type="button"
|
||||
id="clearConvosBtn"
|
||||
onClick={onClick}
|
||||
>
|
||||
{confirmClear ? (
|
||||
<div className="flex w-full items-center justify-center gap-2" id="clearConvosTxt">
|
||||
<CheckIcon className="h-5 w-5" /> Confirm Clear
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full items-center justify-center gap-2" id="clearConvosTxt">
|
||||
Clear
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}) => {
|
||||
const lang = useRecoilValue(store.lang);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
{showText && <div>{localize(lang, 'com_nav_clear_all_chats')}</div>}
|
||||
<button
|
||||
className="btn relative bg-red-600 text-white hover:bg-red-800"
|
||||
type="button"
|
||||
id="clearConvosBtn"
|
||||
onClick={onClick}
|
||||
>
|
||||
{confirmClear ? (
|
||||
<div className="flex w-full items-center justify-center gap-2" id="clearConvosTxt">
|
||||
<CheckIcon className="h-5 w-5" /> {localize(lang, 'com_nav_confirm_clear')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full items-center justify-center gap-2" id="clearConvosTxt">
|
||||
{localize(lang, 'com_nav_clear')}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function General() {
|
||||
const { theme, setTheme } = useContext(ThemeContext);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
import { render, fireEvent } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
import { ThemeSelector } from './General';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
describe('ThemeSelector', () => {
|
||||
let mockOnChange;
|
||||
|
|
@ -12,7 +13,9 @@ describe('ThemeSelector', () => {
|
|||
|
||||
it('renders correctly', () => {
|
||||
const { getByText, getByDisplayValue } = render(
|
||||
<ThemeSelector theme="system" onChange={mockOnChange} />,
|
||||
<RecoilRoot>
|
||||
<ThemeSelector theme="system" onChange={mockOnChange} />
|
||||
</RecoilRoot>,
|
||||
);
|
||||
|
||||
expect(getByText('Theme')).toBeInTheDocument();
|
||||
|
|
@ -20,7 +23,11 @@ describe('ThemeSelector', () => {
|
|||
});
|
||||
|
||||
it('calls onChange when the select value changes', () => {
|
||||
const { getByDisplayValue } = render(<ThemeSelector theme="system" onChange={mockOnChange} />);
|
||||
const { getByDisplayValue } = render(
|
||||
<RecoilRoot>
|
||||
<ThemeSelector theme="system" onChange={mockOnChange} />
|
||||
</RecoilRoot>,
|
||||
);
|
||||
|
||||
fireEvent.change(getByDisplayValue('System'), { target: { value: 'dark' } });
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue