From e2ff0f986db51034c0ea2b6d865567db240a4367 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 29 Mar 2025 17:47:38 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AC=20style:=20Chat=20UI,=20Greeting,?=
 =?UTF-8?q?=20and=20Message=20adjustments=20(#6612)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 client/src/components/Chat/Input/ChatForm.tsx |  2 +-
 client/src/components/Chat/Landing.tsx        | 27 ++++++++++---------
 .../components/Chat/Messages/MessageParts.tsx |  2 +-
 .../Chat/Messages/ui/MessageRender.tsx        |  2 +-
 .../src/components/Messages/ContentRender.tsx |  2 +-
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index 4f083903b3..751d7eb6d0 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -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',
             )}
           >
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index cbf51080d9..484a38b904 100644
--- a/client/src/components/Chat/Landing.tsx
+++ b/client/src/components/Chat/Landing.tsx
@@ -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>
diff --git a/client/src/components/Chat/Messages/MessageParts.tsx b/client/src/components/Chat/Messages/MessageParts.tsx
index 1ce0c19e9d..bf1dd3732c 100644
--- a/client/src/components/Chat/Messages/MessageParts.tsx
+++ b/client/src/components/Chat/Messages/MessageParts.tsx
@@ -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}
diff --git a/client/src/components/Chat/Messages/ui/MessageRender.tsx b/client/src/components/Chat/Messages/ui/MessageRender.tsx
index 0cbc0f142b..d5cabb6f1c 100644
--- a/client/src/components/Chat/Messages/ui/MessageRender.tsx
+++ b/client/src/components/Chat/Messages/ui/MessageRender.tsx
@@ -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={{
diff --git a/client/src/components/Messages/ContentRender.tsx b/client/src/components/Messages/ContentRender.tsx
index 6c141790e2..477e739df3 100644
--- a/client/src/components/Messages/ContentRender.tsx
+++ b/client/src/components/Messages/ContentRender.tsx
@@ -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}