🚀 feat: Banner (#3952)

* feat: Add banner schema and model

* feat: Add optional JwtAuth

To handle the conditional logic with and without authentication within the model.

* feat: Add an endpoint to retrieve a banner

* feat: Add implementation for client to use banner and access API

* feat: Display a banner on UI

* feat: Script for updating and deleting banners

* style: Update banner style

* fix: Adjust the height when the banner is displayed

* fix: failed specs

client/src/components/Auth/AuthLayout.tsx

@@ -3,6 +3,7 @@ import { BlinkAnimation } from './BlinkAnimation';
 import { TStartupConfig } from 'librechat-data-provider';
 import SocialLoginRender from './SocialLoginRender';
 import { ThemeSelector } from '~/components/ui';
+import { Banner } from '../Banners';
 import Footer from './Footer';
 
 const ErrorRender = ({ children }: { children: React.ReactNode }) => (
@@ -56,6 +57,7 @@ function AuthLayout({
 
   return (
     <div className="relative flex min-h-screen flex-col bg-white dark:bg-gray-900">
+      <Banner />
       <BlinkAnimation active={isFetching}>
         <div className="mt-6 h-10 w-full bg-cover">
           <img src="/assets/logo.svg" className="h-full w-full object-contain" alt="Logo" />

client/src/components/Auth/__tests__/Login.spec.tsx

@@ -54,6 +54,11 @@ const setup = ({
     },
   },
   useGetStartupConfigReturnValue = mockStartupConfig,
+  useGetBannerQueryReturnValue = {
+    isLoading: false,
+    isError: false,
+    data: {},
+  },
 } = {}) => {
   const mockUseLoginUser = jest
     .spyOn(mockDataProvider, 'useLoginUserMutation')
@@ -71,6 +76,10 @@ const setup = ({
     .spyOn(mockDataProvider, 'useRefreshTokenMutation')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useRefreshTokenMutationReturnValue);
+  const mockUseGetBannerQuery = jest
+    .spyOn(mockDataProvider, 'useGetBannerQuery')
+    //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
+    .mockReturnValue(useGetBannerQueryReturnValue);
   const mockUseOutletContext = jest.spyOn(reactRouter, 'useOutletContext').mockReturnValue({
     startupConfig: useGetStartupConfigReturnValue.data,
   });
@@ -93,6 +102,7 @@ const setup = ({
     mockUseOutletContext,
     mockUseGetStartupConfig,
     mockUseRefreshTokenMutation,
+    mockUseGetBannerQuery,
   };
 };
 

client/src/components/Auth/__tests__/LoginForm.spec.tsx

@@ -59,6 +59,11 @@ const setup = ({
     isError: false,
     data: mockStartupConfig,
   },
+  useGetBannerQueryReturnValue = {
+    isLoading: false,
+    isError: false,
+    data: {},
+  },
 } = {}) => {
   const mockUseLoginUser = jest
     .spyOn(mockDataProvider, 'useLoginUserMutation')
@@ -76,11 +81,16 @@ const setup = ({
     .spyOn(mockDataProvider, 'useRefreshTokenMutation')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useRefreshTokenMutationReturnValue);
+  const mockUseGetBannerQuery = jest
+    .spyOn(mockDataProvider, 'useGetBannerQuery')
+    //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
+    .mockReturnValue(useGetBannerQueryReturnValue);
   return {
     mockUseLoginUser,
     mockUseGetUserQuery,
     mockUseGetStartupConfig,
     mockUseRefreshTokenMutation,
+    mockUseGetBannerQuery,
   };
 };
 

client/src/components/Auth/__tests__/Registration.spec.tsx

@@ -50,6 +50,11 @@ const setup = ({
       user: {},
     },
   },
+  useGetBannerQueryReturnValue = {
+    isLoading: false,
+    isError: false,
+    data: {},
+  },
   useGetStartupConfigReturnValue = mockStartupConfig,
 } = {}) => {
   const mockUseRegisterUserMutation = jest
@@ -71,6 +76,10 @@ const setup = ({
   const mockUseOutletContext = jest.spyOn(reactRouter, 'useOutletContext').mockReturnValue({
     startupConfig: useGetStartupConfigReturnValue.data,
   });
+  const mockUseGetBannerQuery = jest
+    .spyOn(mockDataProvider, 'useGetBannerQuery')
+    //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
+    .mockReturnValue(useGetBannerQueryReturnValue);
   const renderResult = render(
     <AuthLayout
       startupConfig={useGetStartupConfigReturnValue.data as TStartupConfig}

client/src/components/Banners/Banner.tsx

@@ -0,0 +1,48 @@
+import { XIcon } from 'lucide-react';
+import { useRecoilState } from 'recoil';
+import { useGetBannerQuery } from 'librechat-data-provider/react-query';
+import store from '~/store';
+import { useEffect, useRef } from 'react';
+
+export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) => void }) => {
+  const { data: banner } = useGetBannerQuery();
+  const [hideBannerHint, setHideBannerHint] = useRecoilState<string[]>(store.hideBannerHint);
+  const bannerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (onHeightChange && bannerRef.current) {
+      onHeightChange(bannerRef.current.offsetHeight);
+    }
+  }, [banner, hideBannerHint, onHeightChange]);
+
+  if (!banner || (banner.bannerId && hideBannerHint.includes(banner.bannerId))) {
+    return null;
+  }
+
+  const onClick = () => {
+    setHideBannerHint([...hideBannerHint, banner.bannerId]);
+    if (onHeightChange) {
+      onHeightChange(0); // Reset height when banner is closed
+    }
+  };
+
+  return (
+    <div
+      ref={bannerRef}
+      className="sticky top-0 z-20 flex items-center bg-neutral-900 from-gray-700 to-gray-900 px-2 py-1 text-slate-50 dark:bg-gradient-to-r dark:text-white md:relative"
+    >
+      <div
+        className="w-full truncate px-4 text-center text-sm"
+        dangerouslySetInnerHTML={{ __html: banner.message }}
+      ></div>
+      <button
+        type="button"
+        aria-label="Dismiss banner"
+        className="h-8 w-8 opacity-80 hover:opacity-100"
+        onClick={onClick}
+      >
+        <XIcon className="mx-auto h-4 w-4" />
+      </button>
+    </div>
+  );
+};

client/src/components/Banners/index.ts

@@ -0,0 +1 @@
+export { Banner } from './Banner';

client/src/components/ui/OGDialogTemplate.tsx

@@ -74,7 +74,7 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
         <div>{leftButtons != null ? leftButtons : null}</div>
         <div className="flex h-auto gap-3">
           {showCancelButton && (
-            <OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm ring-offset-2 dark:ring-offset-0 focus:ring-2 focus:ring-black">
+            <OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm ring-offset-2 focus:ring-2 focus:ring-black dark:ring-offset-0">
               {Cancel}
             </OGDialogClose>
           )}