Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-04 09:38:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🅰️ feat: Dynamic Font Size (#3568)

Browse source 
* wip: general setup

* added: translations for font-size

* fix: prompts related linter errors and add theming

* wip: font size selector

* refactor: Update FontSizeSelector options display property

* refactor: adjust Intersection Observer threshold and debounce rate

* feat: Update selectedPrompt type in PromptForm to be optional

* feat: dynamic font size

* refactor: Update message font size in navigation bar

* refactor: Update code analyze block styling

* refactor: ProgressText dynamic font size

* refactor: move FontSizeSelector component to Chat from General settings

* fix: HoverButtons styling for better visibility

* refactor: Update HoverButtons styling for better visibility

---------

Co-authored-by: kraken <solodarken@gmail.com>
This commit is contained in:
Danny Avila 2024-08-07 14:23:33 -04:00 • committed by GitHub
parent b390ba781f
commit 2bb0842650
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 340 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
View file

@ -1,6 +1,7 @@
import { memo } from 'react';
import * as Tabs from '@radix-ui/react-tabs';
import { SettingsTabValues } from 'librechat-data-provider';
import FontSizeSelector from './FontSizeSelector';
import SendMessageKeyEnter from './EnterToSend';
import ShowCodeSwitch from './ShowCodeSwitch';
import { ForkSettings } from './ForkSettings';
@ -12,11 +13,14 @@ function Chat() {
<Tabs.Content value={SettingsTabValues.CHAT} role="tabpanel" className="md: w-full">
<div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<SendMessageKeyEnter />
<FontSizeSelector />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ChatDirection />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<SendMessageKeyEnter />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ShowCodeSwitch />
</div>

37
client/src/components/Nav/SettingsTabs/Chat/FontSizeSelector.tsx Normal file
View file

@ -0,0 +1,37 @@
import { useRecoilState } from 'recoil';
import { Dropdown } from '~/components/ui';
import { applyFontSize } from '~/utils';
import { useLocalize } from '~/hooks';
import store from '~/store';
export default function FontSizeSelector() {
const [fontSize, setFontSize] = useRecoilState(store.fontSize);
const localize = useLocalize();
const handleChange = (val: string) => {
setFontSize(val);
applyFontSize(val);
};
const options = [
{ value: 'text-xs', display: localize('com_nav_font_size_xs') },
{ value: 'text-sm', display: localize('com_nav_font_size_sm') },
{ value: 'text-base', display: localize('com_nav_font_size_base') },
{ value: 'text-lg', display: localize('com_nav_font_size_lg') },
{ value: 'text-xl', display: localize('com_nav_font_size_xl') },
];
return (
<div className="flex w-full items-center justify-between">
<div>{localize('com_nav_font_size')}</div>
<Dropdown
value={fontSize}
options={options}
onChange={handleChange}
testId="font-size-selector"
sizeClasses="w-[150px]"
anchor="bottom start"
/>
</div>
);
}

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

@ -6,10 +6,10 @@ import type { TDangerButtonProps } from '~/common';
import { ThemeContext, useLocalize, useLocalStorage } from '~/hooks';
import HideSidePanelSwitch from './HideSidePanelSwitch';
import AutoScrollSwitch from './AutoScrollSwitch';
import ArchivedChats from './ArchivedChats';
import { Dropdown } from '~/components/ui';
import DangerButton from '../DangerButton';
import store from '~/store';
import ArchivedChats from './ArchivedChats';
export const ThemeSelector = ({
theme,
@ -156,7 +156,7 @@ function General() {
className="w-full md:min-h-[271px]"
ref={contentRef}
>
<div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
<div className="flex flex-col gap-3 text-sm text-text-primary">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ThemeSelector theme={theme} onChange={changeTheme} />
</div>