Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-06 00:00:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

🚀 feat: enhance UI components and refactor settings (#6625)

Browse source 
* 🚀 feat: Add Save Badges State functionality to chat settings

* 🚀 feat: Remove individual chat setting components and introduce a reusable ToggleSwitch component

* 🚀 feat: Replace Switches with reusable ToggleSwitch component in General settings; style: improved HoverCard

* 🚀 feat: Refactor ChatForm and Footer components for improved layout and state management

* 🚀 feat: Add deprecation warning for GPT Plugins endpoint

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2025-04-01 09:15:41 +02:00 • committed by GitHub
parent 14ff66b2c3
commit a5154e1349
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 227 additions and 350 deletions
Download patch file Download diff file Expand all files Collapse all files

38
client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.spec.tsx
View file

@ -1,38 +0,0 @@
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render, fireEvent } from 'test/layout-test-utils';
import AutoScrollSwitch from './AutoScrollSwitch';
import { RecoilRoot } from 'recoil';
describe('AutoScrollSwitch', () => {
/**
* Mock function to set the auto-scroll state.
*/
let mockSetAutoScroll: jest.Mock<void, [boolean]> | ((value: boolean) => void) | undefined;
beforeEach(() => {
mockSetAutoScroll = jest.fn();
});
it('renders correctly', () => {
const { getByTestId } = render(
<RecoilRoot>
<AutoScrollSwitch />
</RecoilRoot>,
);
expect(getByTestId('autoScroll')).toBeInTheDocument();
});
it('calls onCheckedChange when the switch is toggled', () => {
const { getByTestId } = render(
<RecoilRoot>
<AutoScrollSwitch onCheckedChange={mockSetAutoScroll} />
</RecoilRoot>,
);
const switchElement = getByTestId('autoScroll');
fireEvent.click(switchElement);
expect(mockSetAutoScroll).toHaveBeenCalledWith(true);
});
});

46
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -6,9 +6,34 @@ import HideSidePanelSwitch from './HideSidePanelSwitch';
import { ThemeContext, useLocalize } from '~/hooks';
import AutoScrollSwitch from './AutoScrollSwitch';
import ArchivedChats from './ArchivedChats';
import { Dropdown } from '~/components/ui';
import ToggleSwitch from '../ToggleSwitch';
import { Dropdown } from '~/components';
import store from '~/store';
const toggleSwitchConfigs = [
{
stateAtom: store.enableUserMsgMarkdown,
localizationKey: 'com_nav_user_msg_markdown',
switchId: 'enableUserMsgMarkdown',
hoverCardText: undefined,
key: 'enableUserMsgMarkdown',
},
{
stateAtom: store.autoScroll,
localizationKey: 'com_nav_auto_scroll',
switchId: 'autoScroll',
hoverCardText: undefined,
key: 'autoScroll',
},
{
stateAtom: store.hideSidePanel,
localizationKey: 'com_nav_hide_panel',
switchId: 'hideSidePanel',
hoverCardText: undefined,
key: 'hideSidePanel',
},
];
export const ThemeSelector = ({
theme,
onChange,
@ -127,15 +152,16 @@ function General() {
<div className="pb-3">
<LangSelector langcode={langcode} onChange={changeLang} />
</div>
<div className="pb-3">
<UserMsgMarkdownSwitch />
</div>
<div className="pb-3">
<AutoScrollSwitch />
</div>
<div className="pb-3">
<HideSidePanelSwitch />
</div>
{toggleSwitchConfigs.map((config) => (
<div key={config.key} className="pb-3">
<ToggleSwitch
stateAtom={config.stateAtom}
localizationKey={config.localizationKey}
hoverCardText={config.hoverCardText}
switchId={config.switchId}
/>
</div>
))}
<div className="pb-3">
<ArchivedChats />
</div>