From d0332c6e0780c26067d2618eb7b8ff60da4a6ff4 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 15 Apr 2025 04:39:35 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style:=20Dynamic=20text=20sizing=20?=
 =?UTF-8?q?for=20greeting=20and=20name=20display=20(#6833)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* refactor: simplified text-size logic
---
 client/src/components/Chat/Landing.tsx | 33 +++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index bd2945e242..032c59f538 100644
--- a/client/src/components/Chat/Landing.tsx
+++ b/client/src/components/Chat/Landing.tsx
@@ -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)' }}