enh: chat/channel notification toast

backend/open_webui/routers/channels.py

@@ -213,6 +213,8 @@ async def post_new_message(
                             "user": UserNameResponse(**user.model_dump()).model_dump(),
                         },
                     },
+                    "user": UserNameResponse(**user.model_dump()).model_dump(),
+                    "channel": channel.model_dump(),
                 },
                 to=f"channel:{channel.id}",
             )
@@ -275,6 +277,8 @@ async def update_message_by_id(
                             "user": UserNameResponse(**user.model_dump()).model_dump(),
                         },
                     },
+                    "user": UserNameResponse(**user.model_dump()).model_dump(),
+                    "channel": channel.model_dump(),
                 },
                 to=f"channel:{channel.id}",
             )
@@ -334,6 +338,8 @@ async def delete_message_by_id(
                         "user": UserNameResponse(**user.model_dump()).model_dump(),
                     },
                 },
+                "user": UserNameResponse(**user.model_dump()).model_dump(),
+                "channel": channel.model_dump(),
             },
             to=f"channel:{channel.id}",
         )

src/lib/components/NotificationToast.svelte

@@ -24,7 +24,7 @@
 
 	<div>
 		{#if title}
-			<div class=" text-[13px] font-medium mb-0.5 line-clamp-1">{title}</div>
+			<div class=" text-[13px] font-medium mb-0.5 line-clamp-1 capitalize">{title}</div>
 		{/if}
 
 		<div class=" line-clamp-2 text-xs self-center dark:text-gray-300 font-normal">

src/lib/components/channel/Channel.svelte

@@ -102,7 +102,7 @@
 	});
 
 	onDestroy(() => {
-		$socket?.off('channel-events', channelEventHandler);
+		// $socket?.off('channel-events', channelEventHandler);
 	});
 </script>
 

src/lib/components/chat/Chat.svelte

@@ -323,33 +323,6 @@
 
 				history.messages[event.message_id] = message;
 			}
-		} else {
-			await tick();
-			const type = event?.data?.type ?? null;
-			const data = event?.data?.data ?? null;
-
-			if (type === 'chat:completion') {
-				const { done, content, title } = data;
-
-				if (done) {
-					toast.custom(NotificationToast, {
-						componentProps: {
-							onClick: () => {
-								goto(`/c/${event.chat_id}`);
-							},
-							content: content,
-							title: title
-						},
-						duration: 15000,
-						unstyled: true
-					});
-				}
-			} else if (type === 'chat:title') {
-				currentChatPage.set(1);
-				await chats.set(await getChatList(localStorage.token, $currentChatPage));
-			} else if (type === 'chat:tags') {
-				allTags.set(await getAllTags(localStorage.token));
-			}
 		}
 	};
 
@@ -453,7 +426,7 @@
 	onDestroy(() => {
 		chatIdUnsubscriber?.();
 		window.removeEventListener('message', onMessageHandler);
-		$socket?.off('chat-events');
+		// $socket?.off('chat-events');
 	});
 
 	// File upload functions

src/routes/+layout.svelte

@@ -15,7 +15,11 @@
 		mobile,
 		socket,
 		activeUserCount,
-		USAGE_POOL
+		USAGE_POOL,
+		chatId,
+		chats,
+		currentChatPage,
+		tags
 	} from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
@@ -32,6 +36,8 @@
 	import { WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants';
 	import i18n, { initI18n, getLanguages } from '$lib/i18n';
 	import { bestMatchingLanguage } from '$lib/utils';
+	import { getAllTags, getChatList } from '$lib/apis/chats';
+	import NotificationToast from '$lib/components/NotificationToast.svelte';
 
 	setContext('i18n', i18n);
 
@@ -85,6 +91,62 @@
 		});
 	};
 
+	const chatEventHandler = async (event) => {
+		if (event.chat_id !== $chatId) {
+			await tick();
+			const type = event?.data?.type ?? null;
+			const data = event?.data?.data ?? null;
+
+			if (type === 'chat:completion') {
+				const { done, content, title } = data;
+
+				if (done) {
+					toast.custom(NotificationToast, {
+						componentProps: {
+							onClick: () => {
+								goto(`/c/${event.chat_id}`);
+							},
+							content: content,
+							title: title
+						},
+						duration: 15000,
+						unstyled: true
+					});
+				}
+			} else if (type === 'chat:title') {
+				currentChatPage.set(1);
+				await chats.set(await getChatList(localStorage.token, $currentChatPage));
+			} else if (type === 'chat:tags') {
+				tags.set(await getAllTags(localStorage.token));
+			}
+		}
+	};
+
+	const channelEventHandler = async (event) => {
+		// check url path
+		const channel = $page.url.pathname.includes(`/channels/${event.channel_id}`);
+
+		if (!channel && event?.user?.id !== $user?.id) {
+			await tick();
+			const type = event?.data?.type ?? null;
+			const data = event?.data?.data ?? null;
+
+			if (type === 'message') {
+				toast.custom(NotificationToast, {
+					componentProps: {
+						onClick: () => {
+							goto(`/channels/${event.channel_id}`);
+						},
+						content: data?.content,
+						title: event?.channel?.name
+					},
+					duration: 15000,
+					unstyled: true
+				});
+			}
+		}
+	};
+
 	onMount(async () => {
 		theme.set(localStorage.theme);
 
@@ -140,6 +202,9 @@
 						// Save Session User to Store
 						$socket.emit('user-join', { auth: { token: sessionUser.token } });
 
+						$socket?.on('chat-events', chatEventHandler);
+						$socket?.on('channel-events', channelEventHandler);
+
 						await user.set(sessionUser);
 						await config.set(await getBackendConfig());
 					} else {