enh: update info toast

src/lib/components/layout/UpdateInfoToast.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { getContext, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	const i18n = getContext('i18n');
+
+	import { WEBUI_VERSION } from '$lib/constants';
+	import XMark from '../icons/XMark.svelte';
+
+	export let version = {
+		current: WEBUI_VERSION,
+		latest: WEBUI_VERSION
+	};
+</script>
+
+<div
+	class="flex items-start bg-[--info-bg] border border-[--info-border] text-[--info-text] rounded-lg px-3.5 py-3 text-xs"
+>
+	<div class="flex-1 font-medium">
+		{$i18n.t(`A new version (v{{VERSION_LATEST}}) is now available.`, {
+			VERSION_LATEST: version.latest
+		})}
+
+		<a
+			href="https://github.com/open-webui/open-webui/releases/tag/v{version.latest}"
+			target="_blank"
+			class="underline"
+		>
+			{$i18n.t('Update for the latest features and improvements.')}</a
+		>
+	</div>
+
+	<div class=" flex-shrink-0 pl-2">
+		<button
+			class=" hover:text-blue-900 dark:hover:text-blue-300 transition"
+			on:click={() => {
+				console.log('closeToast');
+				dispatch('closeToast');
+			}}
+		>
+			<XMark />
+		</button>
+	</div>
+</div>

src/routes/(app)/+layout.svelte

@@ -9,7 +9,7 @@
 
 	import { goto } from '$app/navigation';
 
-	import { getModels as _getModels } from '$lib/apis';
+	import { getModels as _getModels, getVersionUpdates } from '$lib/apis';
 	import { getAllChatTags } from '$lib/apis/chats';
 
 	import { getPrompts } from '$lib/apis/prompts';
@@ -42,6 +42,10 @@
 	import AccountPending from '$lib/components/layout/Overlay/AccountPending.svelte';
 	import { getFunctions } from '$lib/apis/functions';
 	import { page } from '$app/stores';
+	import { WEBUI_VERSION } from '$lib/constants';
+	import { compareVersion } from '$lib/utils';
+
+	import UpdateInfoToast from '$lib/components/layout/UpdateInfoToast.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -191,11 +195,34 @@
 				temporaryChatEnabled.set(true);
 			}
 
+			if ($user.role === 'admin') {
+				checkForVersionUpdates();
+			}
+
 			await tick();
 		}
 
 		loaded = true;
 	});
+
+	const checkForVersionUpdates = async () => {
+		const version = await getVersionUpdates(localStorage.token).catch((error) => {
+			return {
+				current: WEBUI_VERSION,
+				latest: WEBUI_VERSION
+			};
+		});
+
+		if (compareVersion(version.latest, version.current)) {
+			toast.custom(UpdateInfoToast, {
+				duration: Number.POSITIVE_INFINITY,
+				position: 'bottom-right',
+				componentProps: {
+					version
+				}
+			});
+		}
+	};
 </script>
 
 <SettingsModal bind:show={$showSettings} />

src/routes/+layout.svelte

@@ -209,4 +209,14 @@
 	<slot />
 {/if}
 
-<Toaster richColors position="top-center" />
+<Toaster
+	theme={$theme.includes('dark')
+		? 'dark'
+		: $theme === 'system'
+			? window.matchMedia('(prefers-color-scheme: dark)').matches
+				? 'dark'
+				: 'light'
+			: 'light'}
+	richColors
+	position="top-center"
+/>