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

🎨 style: Address Minor UI Refresh Issues (#6552)

Browse source 
* 🎨 style: Adjust isSelected svg layout of ModelSpecItem

* style: fix modelSpec URL image beeing off-center; style: selected svg centered vertically

* style: Update CustomMenu component to use rounded-lg and enhance focus styles

* style: SidePanel top padding same as NewChat

* fix: prevent unnecessary space rendering in SplitText component

* style: Fix class names and enhance layout in Badge components

* feat: disable temporary chat when in chat

* style: handle > 1 lines in title Landing

* feat: enhance dynamic margin calculation based on line count and content height in Landing component
This commit is contained in:
Marco Beretta 2025-03-26 23:57:29 +01:00 • committed by GitHub
parent 6b58547c63
commit 3ba7c4eb19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 147 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

55
client/src/components/ui/SplitText.tsx
View file

@ -12,6 +12,7 @@ interface SplitTextProps {
rootMargin?: string;
textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
onLetterAnimationComplete?: () => void;
onLineCountChange?: (lineCount: number) => void;
}
const SplitText: React.FC<SplitTextProps> = ({
@ -25,6 +26,7 @@ const SplitText: React.FC<SplitTextProps> = ({
rootMargin = '-100px',
textAlign = 'center',
onLetterAnimationComplete,
onLineCountChange,
}) => {
const words = text.split(' ').map((word) => word.split(''));
const letters = words.flat();
@ -32,6 +34,24 @@ const SplitText: React.FC<SplitTextProps> = ({
const ref = useRef<HTMLParagraphElement>(null);
const animatedCount = useRef(0);
const springs = useSprings(
letters.length,
letters.map((_, i) => ({
from: animationFrom,
to: inView
? async (next: (props: any) => Promise<void>) => {
await next(animationTo);
animatedCount.current += 1;
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
onLetterAnimationComplete();
}
}
: animationFrom,
delay: i * delay,
config: { easing },
})),
);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
@ -52,23 +72,22 @@ const SplitText: React.FC<SplitTextProps> = ({
return () => observer.disconnect();
}, [threshold, rootMargin]);
const springs = useSprings(
letters.length,
letters.map((_, i) => ({
from: animationFrom,
to: inView
? async (next: (props: any) => Promise<void>) => {
await next(animationTo);
animatedCount.current += 1;
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
onLetterAnimationComplete();
}
useEffect(() => {
if (ref.current && inView) {
const element = ref.current;
setTimeout(() => {
const lineHeight =
parseInt(getComputedStyle(element).lineHeight) ||
parseInt(getComputedStyle(element).fontSize) * 1.2;
const height = element.offsetHeight;
const lines = Math.round(height / lineHeight);
if (onLineCountChange) {
onLineCountChange(lines);
}
: animationFrom,
delay: i * delay,
config: { easing },
})),
);
}, 100);
}
}, [inView, text, onLineCountChange]);
return (
<p
@ -92,7 +111,9 @@ const SplitText: React.FC<SplitTextProps> = ({
</animated.span>
);
})}
<span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
{wordIndex < words.length - 1 && (
<span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
)}
</span>
))}
</p>