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

🅰️ 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

9
client/src/hooks/Messages/useMessageScrolling.ts
View file

@ -6,6 +6,9 @@ import useScrollToRef from '~/hooks/useScrollToRef';
import { useChatContext } from '~/Providers';
import store from '~/store';
const threshold = 0.14;
const debounceRate = 250;
export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
const autoScroll = useRecoilValue(store.autoScroll);
@ -21,7 +24,7 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
clearTimeout(timeoutIdRef.current);
timeoutIdRef.current = setTimeout(() => {
setShowScrollButton(value);
}, 150);
}, debounceRate);
}, []);
useEffect(() => {
@ -33,7 +36,7 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
([entry]) => {
debouncedSetShowScrollButton(!entry.isIntersecting);
},
{ root: scrollableRef.current, threshold: 0.1 },
{ root: scrollableRef.current, threshold },
);
observer.observe(messagesEndRef.current);
@ -50,7 +53,7 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
([entry]) => {
debouncedSetShowScrollButton(!entry.isIntersecting);
},
{ root: scrollableRef.current, threshold: 0.1 },
{ root: scrollableRef.current, threshold },
);
observer.observe(messagesEndRef.current);
return () => observer.disconnect();

25
client/src/hooks/ThemeContext.tsx
View file

@ -2,22 +2,7 @@
// source: https://plainenglish.io/blog/light-and-dark-mode-in-react-web-application-with-tailwind-css-89674496b942
import React, { createContext, useState, useEffect } from 'react';
const getInitialTheme = () => {
if (typeof window !== 'undefined' && window.localStorage) {
const storedPrefs = window.localStorage.getItem('color-theme');
if (typeof storedPrefs === 'string') {
return storedPrefs;
}
const userMedia = window.matchMedia('(prefers-color-scheme: dark)');
if (userMedia.matches) {
return 'dark';
}
}
return 'light'; // light theme as the default;
};
import { getInitialTheme, applyFontSize } from '~/utils';
type ProviderValue = {
theme: string;
@ -66,6 +51,14 @@ export const ThemeProvider = ({ initialTheme, children }) => {
};
}, []);
useEffect(() => {
const fontSize = localStorage.getItem('fontSize');
if (fontSize == null) {
return;
}
applyFontSize(JSON.parse(fontSize));
}, []);
if (initialTheme) {
rawSetTheme(initialTheme);
}