From f31e2af3490df090972aa28865caa62f1e2e9aaa Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 4 Jan 2025 02:30:51 -0800
Subject: [PATCH] refac: play sound only in last active tab

---
 src/lib/components/NotificationToast.svelte |  4 +-
 src/lib/stores/index.ts                     |  2 +-
 src/routes/+layout.svelte                   | 51 ++++++++++++++++-----
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/NotificationToast.svelte b/src/lib/components/NotificationToast.svelte
index cc357bcc80..59129d3140 100644
--- a/src/lib/components/NotificationToast.svelte
+++ b/src/lib/components/NotificationToast.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { settings, playingNotificationSound } from '$lib/stores';
+	import { settings, playingNotificationSound, isLastActiveTab } from '$lib/stores';
 	import DOMPurify from 'dompurify';
 
 	import { marked } from 'marked';
@@ -17,7 +17,7 @@
 		}
 
 		if ($settings?.notificationSound ?? true) {
-			if (!$playingNotificationSound) {
+			if (!$playingNotificationSound && $isLastActiveTab) {
 				playingNotificationSound.set(true);
 
 				const audio = new Audio(`/audio/notification.mp3`);
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index e3c8858a17..7fd9b7bf0c 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -69,7 +69,7 @@ export const temporaryChatEnabled = writable(false);
 export const scrollPaginationEnabled = writable(false);
 export const currentChatPage = writable(1);
 
-
+export const isLastActiveTab = writable(true);
 export const playingNotificationSound = writable(false);
 
 export type Model = OpenAIModel | OllamaModel;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8866c050c7..da6756ce16 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,8 @@
 		chats,
 		currentChatPage,
 		tags,
-		temporaryChatEnabled
+		temporaryChatEnabled,
+		isLastActiveTab
 	} from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
@@ -43,7 +44,10 @@
 
 	setContext('i18n', i18n);
 
+	const bc = new BroadcastChannel('active-tab-channel');
+
 	let loaded = false;
+
 	const BREAKPOINT = 768;
 
 	const setupSocket = async (enableWebsocket) => {
@@ -108,11 +112,13 @@
 				const { done, content, title } = data;
 
 				if (done) {
-					if ($settings?.notificationEnabled ?? false) {
-						const notification = new Notification(`${title} | Open WebUI`, {
-							body: content,
-							icon: `${WEBUI_BASE_URL}/static/favicon.png`
-						});
+					if ($isLastActiveTab) {
+						if ($settings?.notificationEnabled ?? false) {
+							new Notification(`${title} | Open WebUI`, {
+								body: content,
+								icon: `${WEBUI_BASE_URL}/static/favicon.png`
+							});
+						}
 					}
 
 					toast.custom(NotificationToast, {
@@ -146,11 +152,13 @@
 			const data = event?.data?.data ?? null;
 
 			if (type === 'message') {
-				if ($settings?.notificationEnabled ?? false) {
-					new Notification(`#${event?.channel?.name} | Open WebUI`, {
-						body: data?.content,
-						icon: `${WEBUI_BASE_URL}/static/favicon.png`
-					});
+				if ($isLastActiveTab) {
+					if ($settings?.notificationEnabled ?? false) {
+						new Notification(`#${event?.channel?.name} | Open WebUI`, {
+							body: data?.content,
+							icon: `${WEBUI_BASE_URL}/static/favicon.png`
+						});
+					}
 				}
 
 				toast.custom(NotificationToast, {
@@ -169,6 +177,27 @@
 	};
 
 	onMount(async () => {
+		// Listen for messages on the BroadcastChannel
+		bc.onmessage = (event) => {
+			if (event.data === 'active') {
+				isLastActiveTab.set(false); // Another tab became active
+			}
+		};
+
+		// Set yourself as the last active tab when this tab is focused
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === 'visible') {
+				isLastActiveTab.set(true); // This tab is now the active tab
+				bc.postMessage('active'); // Notify other tabs that this tab is active
+			}
+		};
+
+		// Add event listener for visibility state changes
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		// Call visibility change handler initially to set state on load
+		handleVisibilityChange();
+
 		theme.set(localStorage.theme);
 
 		mobile.set(window.innerWidth < BREAKPOINT);