Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-22 18:34:08 +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

50
client/src/components/Chat/Landing.tsx
View file

@ -1,5 +1,5 @@
import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
import { easings } from '@react-spring/web';
import { useMemo, useCallback } from 'react';
import { EModelEndpoint } from 'librechat-data-provider';
import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
@ -20,6 +20,11 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
const { user } = useAuthContext();
const localize = useLocalize();
const [textHasMultipleLines, setTextHasMultipleLines] = useState(false);
const [lineCount, setLineCount] = useState(1);
const [contentHeight, setContentHeight] = useState(0);
const contentRef = useRef<HTMLDivElement>(null);
const endpointType = useMemo(() => {
let ep = conversation?.endpoint ?? '';
if (
@ -81,13 +86,46 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
}
}, [localize, startupConfig?.interface?.customWelcome]);
const handleLineCountChange = useCallback((count: number) => {
setTextHasMultipleLines(count > 1);
setLineCount(count);
}, []);
useEffect(() => {
if (contentRef.current) {
setContentHeight(contentRef.current.offsetHeight);
}
}, [lineCount, description]);
const getDynamicMargin = useMemo(() => {
let margin = 'mb-0';
if (lineCount > 2 || (description && description.length > 100)) {
margin = 'mb-10';
} else if (lineCount > 1 || (description && description.length > 0)) {
margin = 'mb-6';
} else if (textHasMultipleLines) {
margin = 'mb-4';
}
if (contentHeight > 200) {
margin = 'mb-16';
} else if (contentHeight > 150) {
margin = 'mb-12';
}
return margin;
}, [lineCount, description, textHasMultipleLines, contentHeight]);
return (
<div
className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'}`}
className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'} ${getDynamicMargin}`}
>
<div className="flex flex-col items-center gap-0 p-2">
<div className="flex flex-col items-center justify-center gap-4 md:flex-row">
<div className="relative size-10 justify-center">
<div ref={contentRef} className="flex flex-col items-center gap-0 p-2">
<div
className={`flex ${textHasMultipleLines ? 'flex-col' : 'flex-col md:flex-row'} items-center justify-center gap-4`}
>
<div className={`relative size-10 justify-center ${textHasMultipleLines ? 'mb-2' : ''}`}>
<ConvoIcon
agentsMap={agentsMap}
assistantMap={assistantMap}
@ -120,6 +158,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
easing={easings.easeOutCubic}
threshold={0}
rootMargin="0px"
onLineCountChange={handleLineCountChange}
/>
</div>
) : (
@ -134,6 +173,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
easing={easings.easeOutCubic}
threshold={0}
rootMargin="0px"
onLineCountChange={handleLineCountChange}
/>
)}
</div>