🎉 happy birthday LibreChat (#1768)

* happy birthday LibreChat * Refactor endpoint condition in Landing component * Update birthday message in Eng.tsx * fix(/config): avoid nesting ternaries * refactor(/config): check birthday --------- Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
danny-avila · Feb 13, 2024 · 3a56a16 · 3a56a16
1 parent 6a52728
commit 3a56a16
Showing 1 changed file with 49 additions and 32 deletions.
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
@@ -1,14 +1,17 @@
 import { EModelEndpoint } from 'librechat-data-provider';
-import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import { useGetEndpointsQuery, useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { ReactNode } from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
 import { icons } from './Menus/Endpoints/Icons';
+import { BirthdayIcon } from '~/components/svg';
 import { getEndpointField } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
   const { conversation } = useChatContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
+  const { data: startupConfig } = useGetStartupConfig();
   const assistantMap = useAssistantsMapContext();
 
   const localize = useLocalize();
@@ -42,40 +45,54 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   }
 
   return (
-    <div className="relative h-full">
-      <div className="absolute left-0 right-0">{Header && Header}</div>
-      <div className="flex h-full flex-col items-center justify-center">
-        <div className="mb-3 h-[72px] w-[72px]">
-          <div className={className}>
-            {endpoint &&
-              Icon &&
-              Icon({
-                size: 41,
-                context: 'landing',
-                className: 'h-2/3 w-2/3',
-                endpoint: endpoint,
-                iconURL: iconURL,
-                assistantName,
-                avatar,
-              })}
-          </div>
-        </div>
-        {assistantName ? (
-          <div className="flex flex-col items-center gap-0 p-2">
-            <div className="text-center text-2xl font-medium dark:text-white">{assistantName}</div>
-            <div className="text-token-text-secondary max-w-md text-center text-xl font-normal ">
-              {assistantDesc ? assistantDesc : localize('com_nav_welcome_message')}
+    <TooltipProvider delayDuration={50}>
+      <Tooltip>
+        <div className="relative h-full">
+          <div className="absolute left-0 right-0">{Header && Header}</div>
+          <div className="flex h-full flex-col items-center justify-center">
+            <div className="mb-3 h-[72px] w-[72px]">
+              <div className={className}>
+                {endpoint &&
+                  Icon &&
+                  Icon({
+                    size: 41,
+                    context: 'landing',
+                    className: 'h-2/3 w-2/3',
+                    endpoint: endpoint,
+                    iconURL: iconURL,
+                    assistantName,
+                    avatar,
+                  })}
+                <TooltipTrigger>
+                  {(startupConfig?.showBirthdayIcon ?? false) && (
+                    <BirthdayIcon className="absolute bottom-12 right-5" />
+                  )}
+                </TooltipTrigger>
+                <TooltipContent side="top" sideOffset={85} className="left-[-20%]">
+                  {localize('com_ui_happy_birthday')}
+                </TooltipContent>
+              </div>
             </div>
-            {/* <div className="mt-1 flex items-center gap-1 text-token-text-tertiary">
+            {assistantName ? (
+              <div className="flex flex-col items-center gap-0 p-2">
+                <div className="text-center text-2xl font-medium dark:text-white">
+                  {assistantName}
+                </div>
+                <div className="text-token-text-secondary max-w-md text-center text-xl font-normal ">
+                  {assistantDesc ? assistantDesc : localize('com_nav_welcome_message')}
+                </div>
+                {/* <div className="mt-1 flex items-center gap-1 text-token-text-tertiary">
               <div className="text-sm text-token-text-tertiary">By Daniel Avila</div>
             </div> */}
+              </div>
+            ) : (
+              <div className="mb-5 text-2xl font-medium dark:text-white">
+                {localize('com_nav_welcome_message')}
+              </div>
+            )}
           </div>
-        ) : (
-          <div className="mb-5 text-2xl font-medium dark:text-white">
-            {localize('com_nav_welcome_message')}
-          </div>
-        )}
-      </div>
-    </div>
+        </div>
+      </Tooltip>
+    </TooltipProvider>
   );
 }