refac

src/lib/components/layout/UpdateInfoToast.svelte

@@ -14,7 +14,7 @@
 </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"
+	class="flex items-start bg-[#F1F8FE] dark:bg-[#020C1D] border border-[3371D5] dark:border-[#03113B] text-[#3371D5] dark:text-[#6795EC] rounded-lg px-3.5 py-3 text-xs max-w-80 pr-2 w-full shadow-lg"
 >
 	<div class="flex-1 font-medium">
 		{$i18n.t(`A new version (v{{LATEST_VERSION}}) is now available.`, {

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

@@ -46,6 +46,7 @@
 	import { compareVersion } from '$lib/utils';
 
 	import UpdateInfoToast from '$lib/components/layout/UpdateInfoToast.svelte';
+	import { fade } from 'svelte/transition';
 
 	const i18n = getContext('i18n');
 
@@ -53,6 +54,8 @@
 	let DB = null;
 	let localDBChats = [];
 
+	let version;
+
 	const getModels = async () => {
 		return _getModels(localStorage.token);
 	};
@@ -216,28 +219,24 @@
 	});
 
 	const checkForVersionUpdates = async () => {
-		const version = await getVersionUpdates(localStorage.token).catch((error) => {
+		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} />
 <ChangelogModal bind:show={$showChangelog} />
 
+{#if version && compareVersion(version.latest, version.current)}
+	<div class=" absolute bottom-8 right-8 z-50" in:fade={{ duration: 100 }}>
+		<UpdateInfoToast {version} />
+	</div>
+{/if}
+
 <div class="app relative">
 	<div
 		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row"