Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 17:30:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

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

* refactor: Clean up Banner component and improve className handling
This commit is contained in:
Marco Beretta 2025-12-03 23:22:35 +01:00 • committed by Danny Avila
parent 04a4a2aa44
commit 5b3cef6d86
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
5 changed files with 42 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

36
client/src/components/Banners/Banner.tsx
View file

@ -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
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" aria-hidden="true" />
</button>
{!banner.persistable && (
<Button
size="icon"
variant="ghost"
aria-label="Dismiss banner"
className="size-8"
onClick={onClick}
>
<XIcon className="mx-auto h-4 w-4 text-text-primary" aria-hidden="true" />
</Button>
)}
</div>
);
};