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

💬 style: Chat UI, Greeting, and Message adjustments (#6612)

Browse source 
* style: reduce gap in Message and Content Render components

* style: adjust padding and font size in Chat components for improved layout

* feat: personalize greeting message with user name in Landing component
This commit is contained in:
Marco Beretta 2025-03-29 17:47:38 +01:00 • committed by GitHub
parent a10bc87979
commit e2ff0f986d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 19 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -217,7 +217,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
<div
onClick={handleContainerClick}
className={cn(
'relative flex w-full flex-grow flex-col overflow-hidden rounded-t-3xl border border-border-light bg-surface-chat text-text-primary transition-all duration-200 sm:rounded-3xl',
'relative flex w-full flex-grow flex-col overflow-hidden rounded-t-3xl border border-border-light bg-surface-chat pb-4 text-text-primary transition-all duration-200 sm:rounded-3xl sm:pb-0',
isTextAreaFocused ? 'shadow-lg' : 'shadow-md',
)}
>

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

@ -56,7 +56,12 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
const getGreeting = useCallback(() => {
if (typeof startupConfig?.interface?.customWelcome === 'string') {
return startupConfig.interface.customWelcome;
const customWelcome = startupConfig.interface.customWelcome;
// Replace {{user.name}} with actual user name if available
if (user?.name && customWelcome.includes('{{user.name}}')) {
return customWelcome.replace(/{{user.name}}/g, user.name);
}
return customWelcome;
}
const now = new Date();
@ -84,7 +89,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
else {
return localize('com_ui_good_evening');
}
}, [localize, startupConfig?.interface?.customWelcome]);
}, [localize, startupConfig?.interface?.customWelcome, user?.name]);
const handleLineCountChange = useCallback((count: number) => {
setTextHasMultipleLines(count > 1);
@ -163,9 +168,13 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
</div>
) : (
<SplitText
key={`split-text-${getGreeting()}${user?.name || ''}`}
text={getGreeting() + (user?.name ? ', ' + user.name : '')}
className="text-4xl font-medium text-text-primary"
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"
delay={50}
textAlign="center"
animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }}
@ -177,16 +186,10 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
/>
)}
</div>
{(isAgent || isAssistant) && description ? (
{(isAgent || isAssistant) && description && (
<div className="animate-fadeIn mt-2 max-w-md text-center text-sm font-normal text-text-primary">
{description}
</div>
) : (
typeof startupConfig?.interface?.customWelcome === 'string' && (
<div className="animate-fadeIn mt-2 max-w-md text-center text-sm font-normal text-text-primary">
{startupConfig?.interface?.customWelcome}
</div>
)
)}
</div>
</div>

2
client/src/components/Chat/Messages/MessageParts.tsx
View file

@ -109,7 +109,7 @@ export default function Message(props: TMessageProps) {
<h2 className={cn('select-none font-semibold text-text-primary', fontSize)}>
{name}
</h2>
<div className="flex flex-col gap-1 md:gap-3">
<div className="flex flex-col gap-1">
<div className="flex max-w-full flex-grow flex-col gap-0">
<ContentParts
edit={edit}

2
client/src/components/Chat/Messages/ui/MessageRender.tsx
View file

@ -159,7 +159,7 @@ const MessageRender = memo(
>
<h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2>
<div className="flex flex-col gap-1 md:gap-3">
<div className="flex flex-col gap-1">
<div className="flex max-w-full flex-grow flex-col gap-0">
<MessageContext.Provider
value={{

2
client/src/components/Messages/ContentRender.tsx
View file

@ -156,7 +156,7 @@ const ContentRender = memo(
>
<h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2>
<div className="flex flex-col gap-1 md:gap-3">
<div className="flex flex-col gap-1">
<div className="flex max-w-full flex-grow flex-col gap-0">
<ContentParts
edit={edit}