🚀 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>
           )}

client/src/routes/Root.tsx

@@ -8,6 +8,7 @@ import { AgentsMapContext, AssistantsMapContext, FileMapContext, SearchContext }
 import { useAuthContext, useAssistantsMap, useAgentsMap, useFileMap, useSearch } from '~/hooks';
 import { Nav, MobileNav } from '~/components/Nav';
 import TermsAndConditionsModal from '~/components/ui/TermsAndConditionsModal';
+import { Banner } from '~/components/Banners';
 
 export default function Root() {
   const { isAuthenticated, logout, token } = useAuthContext();
@@ -16,6 +17,7 @@ export default function Root() {
     const savedNavVisible = localStorage.getItem('navVisible');
     return savedNavVisible !== null ? JSON.parse(savedNavVisible) : true;
   });
+  const [bannerHeight, setBannerHeight] = useState(0);
 
   const search = useSearch({ isAuthenticated });
   const fileMap = useFileMap({ isAuthenticated });
@@ -24,7 +26,6 @@ export default function Root() {
 
   const [showTerms, setShowTerms] = useState(false);
   const { data: config } = useGetStartupConfig();
-
   const { data: termsData } = useUserTermsQuery({
     enabled: isAuthenticated && !!config?.interface?.termsOfService?.modalAcceptance,
   });
@@ -54,7 +55,8 @@ export default function Root() {
       <FileMapContext.Provider value={fileMap}>
         <AssistantsMapContext.Provider value={assistantsMap}>
           <AgentsMapContext.Provider value={agentsMap}>
-            <div className="flex h-dvh">
+            <Banner onHeightChange={setBannerHeight} />
+            <div className="flex" style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
               <div className="relative z-0 flex h-full w-full overflow-hidden">
                 <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
                 <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">

client/src/store/banner.ts

@@ -0,0 +1,5 @@
+import { atomWithLocalStorage } from './utils';
+
+const hideBannerHint = atomWithLocalStorage('hideBannerHint', [] as string[]);
+
+export default { hideBannerHint };

client/src/store/index.ts

@@ -12,7 +12,7 @@ import preset from './preset';
 import prompts from './prompts';
 import lang from './language';
 import settings from './settings';
-
+import banner from './banner';
 export default {
   ...artifacts,
   ...families,
@@ -28,4 +28,5 @@ export default {
   ...preset,
   ...lang,
   ...settings,
+  ...banner,
 };