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

* 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

@@ -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',
             )}
           >

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 || ''}`}
+              key={`split-text-${getGreeting()}${user?.name ? '-user' : ''}`}
-              text={getGreeting() + (user?.name ? ', ' + user.name : '')}
+              text={
-              className="text-4xl font-medium text-text-primary"
+                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>

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}

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={{

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}