📌 feat: Add Support for Persistable (Non-Dismissible) Banners (#10730)

* feat: Add persistable property to banners and update related components

* refactor: Clean up Banner component and improve className handling

client/src/components/Banners/Banner.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { XIcon } from 'lucide-react';
 import { useRecoilState } from 'recoil';
+import { Button, cn } from '@librechat/client';
 import { useGetBannerQuery } from '~/data-provider';
 import store from '~/store';
 
@@ -15,34 +16,45 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
     }
   }, [banner, hideBannerHint, onHeightChange]);
 
-  if (!banner || (banner.bannerId && hideBannerHint.includes(banner.bannerId))) {
+  if (
+    !banner ||
+    (banner.bannerId && !banner.persistable && hideBannerHint.includes(banner.bannerId))
+  ) {
     return null;
   }
 
   const onClick = () => {
+    if (banner.persistable) {
+      return;
+    }
+
     setHideBannerHint([...hideBannerHint, banner.bannerId]);
+
     if (onHeightChange) {
-      onHeightChange(0); // Reset height when banner is closed
+      onHeightChange(0);
     }
   };
 
   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"
+      className="sticky top-0 z-20 flex items-center bg-surface-secondary px-2 py-1 text-text-primary dark:bg-gradient-to-r md:relative"
     >
       <div
-        className="w-full truncate px-4 text-center text-sm"
+        className={cn('text-md w-full truncate text-center', !banner.persistable && 'px-4')}
         dangerouslySetInnerHTML={{ __html: banner.message }}
       ></div>
-      <button
+      {!banner.persistable && (
-        type="button"
+        <Button
-        aria-label="Dismiss banner"
+          size="icon"
-        className="h-8 w-8 opacity-80 hover:opacity-100"
+          variant="ghost"
-        onClick={onClick}
+          aria-label="Dismiss banner"
-      >
+          className="size-8"
-        <XIcon className="mx-auto h-4 w-4" aria-hidden="true" />
+          onClick={onClick}
-      </button>
+        >
+          <XIcon className="mx-auto h-4 w-4 text-text-primary" aria-hidden="true" />
+        </Button>
+      )}
     </div>
   );
 };

config/update-banner.js

@@ -22,15 +22,17 @@ const connect = require('./connect');
   let displayTo = '';
   let message = '';
   let isPublic = undefined;
+  let persistable = undefined;
   // If we have the right number of arguments, lets use them
   if (process.argv.length >= 3) {
     displayFrom = process.argv[2];
     displayTo = process.argv[3];
     message = process.argv[4];
     isPublic = process.argv[5] === undefined ? undefined : process.argv[5] === 'true';
+    persistable = process.argv[6] === undefined ? undefined : process.argv[6] === 'true';
   } else {
     console.orange(
-      'Usage: npm run update-banner <displayFrom(Format: yyyy-mm-ddTHH:MM:SSZ)> <displayTo(Format: yyyy-mm-ddTHH:MM:SSZ)> <message> <isPublic(true/false)>',
+      'Usage: npm run update-banner <displayFrom(Format: yyyy-mm-ddTHH:MM:SSZ)> <displayTo(Format: yyyy-mm-ddTHH:MM:SSZ)> <message> <isPublic(true/false)> <persistable(true/false)>',
     );
     console.orange('Note: if you do not pass in the arguments, you will be prompted for them.');
     console.purple('--------------------------');
@@ -81,6 +83,11 @@ const connect = require('./connect');
     isPublic = isPublicInput.toLowerCase() === 'y' ? true : false;
   }
 
+  if (persistable === undefined) {
+    const persistableInput = await askQuestion('Is persistable (cannot be dismissed) (y/N):');
+    persistable = persistableInput.toLowerCase() === 'y' ? true : false;
+  }
+
   // Generate the same bannerId for the same message
   // This allows us to display only messages that haven't been shown yet
   const NAMESPACE = '6ba7b810-9dad-11d1-80b4-00c04fd430c8'; // Use an arbitrary namespace UUID
@@ -101,6 +108,7 @@ const connect = require('./connect');
           message,
           bannerId,
           isPublic,
+          persistable,
         },
         { new: true },
       );
@@ -111,6 +119,7 @@ const connect = require('./connect');
         message,
         bannerId,
         isPublic,
+        persistable,
       });
     }
   } catch (error) {
@@ -131,6 +140,7 @@ const connect = require('./connect');
   console.purple(`to: ${displayTo || 'not specified'}`);
   console.purple(`Banner: ${message}`);
   console.purple(`isPublic: ${isPublic}`);
+  console.purple(`persistable: ${persistable}`);
   silentExit(0);
 })();
 

packages/data-provider/src/schemas.ts

@@ -1139,6 +1139,7 @@ export const tBannerSchema = z.object({
   createdAt: z.string(),
   updatedAt: z.string(),
   isPublic: z.boolean(),
+  persistable: z.boolean().default(false),
 });
 export type TBanner = z.infer<typeof tBannerSchema>;
 

packages/data-schemas/src/schema/banner.ts

@@ -7,6 +7,7 @@ export interface IBanner extends Document {
   displayTo?: Date;
   type: 'banner' | 'popup';
   isPublic: boolean;
+  persistable: boolean;
 }
 
 const bannerSchema = new Schema<IBanner>(
@@ -36,6 +37,10 @@ const bannerSchema = new Schema<IBanner>(
       type: Boolean,
       default: false,
     },
+    persistable: {
+      type: Boolean,
+      default: false,
+    },
   },
   { timestamps: true },
 );

packages/data-schemas/src/types/banner.ts

@@ -7,4 +7,5 @@ export interface IBanner extends Document {
   displayTo?: Date;
   type: 'banner' | 'popup';
   isPublic: boolean;
+  persistable: boolean;
 }