@@ -84,7 +87,7 @@ export default function Settings({ open, onOpenChange }) {
value="general"
>
- General
+ {localize(lang, 'com_nav_setting_general')}
diff --git a/client/src/components/Nav/SettingsTabs/ClearChatsButton.spec.tsx b/client/src/components/Nav/SettingsTabs/ClearChatsButton.spec.tsx
index a75b52359ff..597ce61f154 100644
--- a/client/src/components/Nav/SettingsTabs/ClearChatsButton.spec.tsx
+++ b/client/src/components/Nav/SettingsTabs/ClearChatsButton.spec.tsx
@@ -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(
-
,
+
+
+ ,
);
expect(getByText('Clear all chats')).toBeInTheDocument();
@@ -21,7 +24,9 @@ describe('ClearChatsButton', () => {
it('renders confirm clear when confirmClear is true', () => {
const { getByText } = render(
-
,
+
+
+ ,
);
expect(getByText('Confirm Clear')).toBeInTheDocument();
@@ -29,7 +34,9 @@ describe('ClearChatsButton', () => {
it('calls onClick when the button is clicked', () => {
const { getByText } = render(
-
,
+
+
+ ,
);
fireEvent.click(getByText('Clear'));
diff --git a/client/src/components/Nav/SettingsTabs/General.tsx b/client/src/components/Nav/SettingsTabs/General.tsx
index 828522a0be3..5620693d7b5 100644
--- a/client/src/components/Nav/SettingsTabs/General.tsx
+++ b/client/src/components/Nav/SettingsTabs/General.tsx
@@ -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;
-}) => (
-
-
Theme
-
-
-);
+}) => {
+ const lang = useRecoilValue(store.lang);
+
+ return (
+
+
{localize(lang, 'com_nav_theme')}
+
+
+ );
+};
export const ClearChatsButton = ({
confirmClear,
@@ -33,27 +40,31 @@ export const ClearChatsButton = ({
confirmClear: boolean;
showText: boolean;
onClick: () => void;
-}) => (
-
- {showText &&
Clear all chats
}
-
-
-);
+}) => {
+ const lang = useRecoilValue(store.lang);
+
+ return (
+
+ {showText &&
{localize(lang, 'com_nav_clear_all_chats')}
}
+
+
+ );
+};
function General() {
const { theme, setTheme } = useContext(ThemeContext);
diff --git a/client/src/components/Nav/SettingsTabs/ThemeSelector.spec.tsx b/client/src/components/Nav/SettingsTabs/ThemeSelector.spec.tsx
index 9ba9c91a720..54aa0b43de7 100644
--- a/client/src/components/Nav/SettingsTabs/ThemeSelector.spec.tsx
+++ b/client/src/components/Nav/SettingsTabs/ThemeSelector.spec.tsx
@@ -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(
-
,
+
+
+ ,
);
expect(getByText('Theme')).toBeInTheDocument();
@@ -20,7 +23,11 @@ describe('ThemeSelector', () => {
});
it('calls onChange when the select value changes', () => {
- const { getByDisplayValue } = render(
);
+ const { getByDisplayValue } = render(
+
+
+ ,
+ );
fireEvent.change(getByDisplayValue('System'), { target: { value: 'dark' } });
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index e0c039b1b40..622656a5727 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -10,12 +10,14 @@ import { Panel, Spinner } from '~/components';
import { cn } from '~/utils/';
import { useAuthContext, useDebounce } from '~/hooks';
import store from '~/store';
+import { localize } from '~/localization/Translation';
export default function Nav({ navVisible, setNavVisible }) {
const [isHovering, setIsHovering] = useState(false);
const { isAuthenticated } = useAuthContext();
const containerRef = useRef(null);
const scrollPositionRef = useRef(null);
+ const lang = useRecoilValue(store.lang);
const [conversations, setConversations] = useState([]);
// current page
@@ -151,7 +153,7 @@ export default function Nav({ navVisible, setNavVisible }) {
)}
onClick={toggleNavVisible}
>
-
Close sidebar
+
{localize(lang, 'com_nav_close_sidebar')}
@@ -195,7 +197,7 @@ export default function Nav({ navVisible, setNavVisible }) {
onClick={toggleNavVisible}
>