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

apps/meteor/client/hooks/notification/useDesktopNotification.ts

@@ -0,0 +1,43 @@
+import type { INotificationDesktop } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useUser } from '@rocket.chat/ui-contexts';
+
+import { useNotification } from './useNotification';
+import { RoomManager } from '../../lib/RoomManager';
+import { e2e } from '../../lib/e2ee';
+import { getAvatarAsPng } from '../../lib/utils/getAvatarAsPng';
+
+export const useDesktopNotification = () => {
+	const user = useUser();
+	const notify = useNotification();
+
+	const notifyDesktop = useStableCallback(async (notification: INotificationDesktop) => {
+		if (
+			notification.payload.rid === RoomManager.opened &&
+			(typeof window.document.hasFocus === 'function' ? window.document.hasFocus() : undefined)
+		) {
+			return;
+		}
+		if (user?.status === 'busy') {
+			return;
+		}
+
+		const { message } = notification.payload;
+
+		if (message.t === 'e2e' && message.content) {
+			const e2eRoom = await e2e.getInstanceByRoomId(notification.payload.rid);
+			if (e2eRoom) {
+				const decrypted = await e2eRoom.decrypt(message.content);
+				// TODO(@cardoso): review backward compatibility
+				notification.text = decrypted.msg ?? '';
+			}
+		}
+
+		return getAvatarAsPng(notification.payload.sender?.username, (avatarAsPng) => {
+			notification.icon = avatarAsPng;
+			return notify(notification);
+		});
+	});
+
+	return notifyDesktop;
+};

apps/meteor/client/hooks/notification/useNewMessageNotification.ts

@@ -0,0 +1,20 @@
+import type { AtLeast, ISubscription } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useCustomSound } from '@rocket.chat/ui-contexts';
+
+export const useNewMessageNotification = () => {
+	const { notificationSounds } = useCustomSound();
+
+	const notifyNewMessage = useStableCallback((sub: AtLeast<ISubscription, 'rid'>) => {
+		if (!sub || sub.audioNotificationValue === 'none') {
+			return;
+		}
+
+		if (sub?.audioNotificationValue) {
+			return notificationSounds.playNewMessageCustom(sub.audioNotificationValue);
+		}
+
+		notificationSounds.playNewMessage();
+	});
+	return notifyNewMessage;
+};

apps/meteor/client/hooks/notification/useNotification.ts

@@ -0,0 +1,123 @@
+import type { INotificationDesktop } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { Random } from '@rocket.chat/random';
+import { useRouter, useUserPreference } from '@rocket.chat/ui-contexts';
+
+import { useNotificationAllowed } from './useNotificationAllowed';
+import { stripTags } from '../../../lib/utils/stringUtils';
+import { sdk } from '../../lib/SDKClient';
+import { getUserAvatarURL } from '../../lib/getUserAvatarURL';
+import { onClientMessageReceived } from '../../lib/onClientMessageReceived';
+
+export const useNotification = () => {
+	const requireInteraction = useUserPreference('desktopNotificationRequireInteraction');
+	const router = useRouter();
+	const notificationAllowed = useNotificationAllowed();
+
+	const notify = useStableCallback(async (notification: INotificationDesktop) => {
+		if (!notificationAllowed) {
+			return;
+		}
+		if (!notification.payload) {
+			return;
+		}
+
+		const { rid, name: roomName, _id: msgId } = notification.payload;
+		if (!rid) {
+			return;
+		}
+		const message = await onClientMessageReceived({
+			rid,
+			msg: notification.text,
+			notification: true,
+		} as any);
+
+		const n = new Notification(notification.title, {
+			icon: notification.icon || getUserAvatarURL(notification.payload.sender?.username),
+			body: stripTags(message?.msg),
+			tag: msgId,
+			canReply: true,
+			silent: true,
+			requireInteraction,
+		} as NotificationOptions & {
+			canReply?: boolean;
+		});
+		const notificationDuration = !requireInteraction ? (notification.duration ?? 0) - 0 || 10 : -1;
+		if (notificationDuration > 0) {
+			setTimeout(() => n.close(), notificationDuration * 1000);
+		}
+
+		if (n.addEventListener) {
+			n.addEventListener(
+				'reply',
+				({ response }) =>
+					void sdk.rest.post('/v1/chat.sendMessage', {
+						message: {
+							_id: Random.id(),
+							rid,
+							msg: response,
+						},
+					}),
+			);
+		}
+
+		n.onclick = () => {
+			n.close();
+			window.focus();
+
+			if (!msgId || !rid || !roomName) {
+				return;
+			}
+
+			switch (notification.payload?.type) {
+				case 'd':
+					router.navigate({
+						pattern: '/direct/:rid/:tab?/:context?',
+						params: {
+							rid,
+							...(notification.payload.tmid && {
+								tab: 'thread',
+								context: notification.payload.tmid,
+							}),
+						},
+						search: { ...router.getSearchParameters(), jump: msgId },
+					});
+					break;
+				case 'c':
+					return router.navigate({
+						pattern: '/channel/:name/:tab?/:context?',
+						params: {
+							name: roomName,
+							...(notification.payload.tmid && {
+								tab: 'thread',
+								context: notification.payload.tmid,
+							}),
+						},
+						search: { ...router.getSearchParameters(), jump: msgId },
+					});
+				case 'p':
+					return router.navigate({
+						pattern: '/group/:name/:tab?/:context?',
+						params: {
+							name: roomName,
+							...(notification.payload.tmid && {
+								tab: 'thread',
+								context: notification.payload.tmid,
+							}),
+						},
+						search: { ...router.getSearchParameters(), jump: msgId },
+					});
+				case 'l':
+					return router.navigate({
+						pattern: '/live/:id/:tab?/:context?',
+						params: {
+							id: rid,
+							tab: 'room-info',
+						},
+						search: { ...router.getSearchParameters(), jump: msgId },
+					});
+			}
+		};
+	});
+	return notify;
+};

apps/meteor/client/hooks/notification/useNotificationAllowed.ts

@@ -0,0 +1,19 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+import { notificationManager } from '../../lib/notificationManager';
+
+export const useNotificationAllowed = (): boolean => {
+	const allowed = useSyncExternalStore(
+		useCallback(
+			(callback): (() => void) =>
+				notificationManager.on('change', () => {
+					notificationManager.allowed = Notification.permission === 'granted';
+					callback();
+				}),
+			[],
+		),
+		(): boolean => notificationManager.allowed,
+	);
+
+	return allowed;
+};