snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/banners/BannerRegion.tsx

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from 'react';
+
+import LegacyBanner from './LegacyBanner';
+import UiKitBanner from './UiKitBanner';
+import { useUserBanners } from './hooks/useUserBanners';
+import { withErrorBoundary } from '../../components/withErrorBoundary';
+import * as banners from '../../lib/banners';
+
+const BannerRegion = () => {
+	const payload = useSyncExternalStore(...banners.firstSubscription);
+
+	useUserBanners();
+
+	if (!payload) {
+		return null;
+	}
+
+	if (banners.isLegacyPayload(payload)) {
+		return <LegacyBanner config={payload} />;
+	}
+
+	return <UiKitBanner key={payload.viewId} initialView={payload} />;
+};
+
+export default withErrorBoundary(BannerRegion);

apps/meteor/client/views/banners/LegacyBanner.tsx

@@ -0,0 +1,61 @@
+import { Banner, Icon } from '@rocket.chat/fuselage';
+import DOMPurify from 'dompurify';
+import { useCallback, useEffect } from 'react';
+
+import type { LegacyBannerPayload } from '../../lib/banners';
+import * as banners from '../../lib/banners';
+
+export type LegacyBannerProps = {
+	config: LegacyBannerPayload;
+};
+
+const LegacyBanner = ({ config }: LegacyBannerProps) => {
+	const { closable = true, title, text, html, icon, modifiers } = config;
+
+	const inline = !modifiers?.includes('large');
+	const variant = modifiers?.includes('danger') ? 'danger' : 'info';
+
+	useEffect(() => {
+		if (!config.timer) {
+			return;
+		}
+
+		const timer = setTimeout(() => {
+			config.onClose?.call(undefined);
+			banners.close();
+		}, config.timer);
+
+		return (): void => {
+			clearTimeout(timer);
+		};
+	}, [config.onClose, config.timer]);
+
+	const handleAction = useCallback(() => {
+		config.action?.call(undefined);
+	}, [config.action]);
+
+	const handleClose = useCallback(() => {
+		config.onClose?.call(undefined);
+		banners.close();
+	}, [config.onClose]);
+
+	return (
+		<Banner
+			inline={inline}
+			actionable={!!config.action}
+			closeable={closable}
+			icon={icon ? <Icon name={icon} size='x20' /> : undefined}
+			title={typeof title === 'function' ? title() : title}
+			variant={variant}
+			onAction={handleAction}
+			onClose={handleClose}
+		>
+			{typeof text === 'function' ? text() : text}
+			{html && (
+				<div dangerouslySetInnerHTML={{ __html: typeof html === 'function' ? DOMPurify.sanitize(html()) : DOMPurify.sanitize(html) }} />
+			)}
+		</Banner>
+	);
+};
+
+export default LegacyBanner;

apps/meteor/client/views/banners/UiKitBanner.tsx

@@ -0,0 +1,67 @@
+import { Banner, Icon } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { UiKitContext, bannerParser, UiKitBanner as UiKitBannerSurfaceRender, UiKitComponent } from '@rocket.chat/fuselage-ui-kit';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useMemo } from 'react';
+
+import MarkdownText from '../../components/MarkdownText';
+import { useBannerContextValue } from '../../uikit/hooks/useBannerContextValue';
+import { useUiKitActionManager } from '../../uikit/hooks/useUiKitActionManager';
+import { useUiKitView } from '../../uikit/hooks/useUiKitView';
+
+// TODO: move this to fuselage-ui-kit itself
+bannerParser.mrkdwn = ({ text }) => <MarkdownText variant='inline' content={text} />;
+
+export type UiKitBannerProps = {
+	key: UiKit.BannerView['viewId']; // force re-mount when viewId changes
+	initialView: UiKit.BannerView;
+};
+
+const UiKitBanner = ({ initialView }: UiKitBannerProps) => {
+	const { view, values, state } = useUiKitView(initialView);
+	const actionManager = useUiKitActionManager();
+	const contextValue = useBannerContextValue({ view, values });
+
+	const icon = useMemo(() => {
+		if (view.icon) {
+			return <Icon name={view.icon} size='x20' />;
+		}
+
+		return null;
+	}, [view.icon]);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const handleClose = useStableCallback(() => {
+		void actionManager
+			.emitInteraction(view.appId, {
+				type: 'viewClosed',
+				payload: {
+					viewId: view.viewId,
+					view: {
+						...view,
+						id: view.viewId,
+						state,
+					},
+					isCleared: true,
+				},
+			})
+			.catch((error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			});
+	});
+
+	// TODO: check why we are not considering TextObject as title
+	if (view.title && typeof view.title !== 'string') {
+		return null;
+	}
+	return (
+		<Banner icon={icon} inline={view.inline} title={view.title} variant={view.variant} closeable onClose={handleClose}>
+			<UiKitContext.Provider value={contextValue}>
+				<UiKitComponent render={UiKitBannerSurfaceRender} blocks={view.blocks} />
+			</UiKitContext.Provider>
+		</Banner>
+	);
+};
+
+export default UiKitBanner;

apps/meteor/client/views/banners/hooks/useDismissUserBannerMutation.ts

@@ -0,0 +1,15 @@
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+
+export const useDismissUserBannerMutation = () => {
+	const dismissBanner = useEndpoint('POST', '/v1/banners.dismiss');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useMutation({
+		mutationFn: ({ id }: { id: string }) => dismissBanner({ bannerId: id }),
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+	});
+};

apps/meteor/client/views/banners/hooks/useUserBanners.ts

@@ -0,0 +1,47 @@
+import { useUser } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDismissUserBannerMutation } from './useDismissUserBannerMutation';
+import * as banners from '../../../lib/banners';
+
+export const useUserBanners = () => {
+	const user = useUser();
+
+	const { t, i18n } = useTranslation();
+	const { mutate: dismissUserBanner } = useDismissUserBannerMutation();
+
+	useEffect(() => {
+		if (!user?.banners || Object.keys(user.banners).length === 0) {
+			return;
+		}
+
+		const firstBanner = Object.values(user.banners)
+			.filter((b) => b.read !== true)
+			.sort((a, b) => b.priority - a.priority)[0];
+
+		if (!firstBanner) {
+			return;
+		}
+
+		banners.open({
+			id: firstBanner.id,
+			title: i18n.exists(firstBanner.title) ? t(firstBanner.title) : firstBanner.title,
+			text: i18n.exists(firstBanner.text)
+				? t(firstBanner.text, {
+						postProcess: 'sprintf',
+						sprintf: firstBanner.textArguments,
+					})
+				: firstBanner.text,
+			modifiers: firstBanner.modifiers,
+			action() {
+				if (firstBanner.link) {
+					window.open(firstBanner.link, '_system');
+				}
+			},
+			onClose() {
+				dismissUserBanner({ id: firstBanner.id });
+			},
+		});
+	}, [dismissUserBanner, i18n, t, user?.banners]);
+};