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

✨ style: Dynamic text sizing for greeting and name display (#6833)

Browse source 
* ✨ feat: Implement dynamic text sizing for greeting and name display

* refactor: simplified text-size logic
This commit is contained in:
Marco Beretta 2025-04-15 04:39:35 +02:00 • committed by GitHub
parent 5d56f48879
commit d0332c6e07
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,22 @@ import { getIconEndpoint, getEntity } from '~/utils';
const containerClassName =
'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black';
function getTextSizeClass(text: string | undefined | null) {
if (!text) {
return 'text-xl sm:text-2xl';
}
if (text.length < 40) {
return 'text-2xl sm:text-4xl';
}
if (text.length < 70) {
return 'text-xl sm:text-2xl';
}
return 'text-lg sm:text-md';
}
export default function Landing({ centerFormOnLanding }: { centerFormOnLanding: boolean }) {
const { conversation } = useChatContext();
const agentsMap = useAgentsMapContext();
@ -122,6 +138,11 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
return margin;
}, [lineCount, description, textHasMultipleLines, contentHeight]);
const greetingText =
typeof startupConfig?.interface?.customWelcome === 'string'
? getGreeting()
: getGreeting() + (user?.name ? ', ' + user.name : '');
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'} ${getDynamicMargin}`}
@ -155,7 +176,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
<SplitText
key={`split-text-${name}`}
text={name}
className="text-4xl font-medium text-text-primary"
className={`${getTextSizeClass(name)} font-medium text-text-primary`}
delay={50}
textAlign="center"
animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }}
@ -168,13 +189,9 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
</div>
) : (
<SplitText
key={`split-text-${getGreeting()}${user?.name ? '-user' : ''}`}
text={
typeof startupConfig?.interface?.customWelcome === 'string'
? getGreeting()
: getGreeting() + (user?.name ? ', ' + user.name : '')
}
className="text-2xl font-medium text-text-primary sm:text-4xl"
key={`split-text-${greetingText}${user?.name ? '-user' : ''}`}
text={greetingText}
className={`${getTextSizeClass(greetingText)} font-medium text-text-primary`}
delay={50}
textAlign="center"
animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }}