From 05aea9edf9fed0bf7e83ff48e136e3f762976e27 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 23 Feb 2024 00:47:54 -0800
Subject: [PATCH] feat: changelog modal auto popup

---
 src/lib/components/ChangelogModal.svelte | 13 +++++++++----
 src/lib/components/common/Modal.svelte   |  4 ++--
 src/lib/components/layout/Sidebar.svelte |  2 +-
 src/lib/stores/index.ts                  |  1 +
 src/routes/(app)/+layout.svelte          | 22 ++++++++++++----------
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/ChangelogModal.svelte b/src/lib/components/ChangelogModal.svelte
index a20f4e69..fb980789 100644
--- a/src/lib/components/ChangelogModal.svelte
+++ b/src/lib/components/ChangelogModal.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	import Modal from './common/Modal.svelte';
-	import { Confetti } from 'svelte-confetti';
-	import { WEBUI_NAME, WEB_UI_VERSION } from '$lib/constants';
 	import { onMount } from 'svelte';
+	import { Confetti } from 'svelte-confetti';
+
+	import { config } from '$lib/stores';
+
+	import { WEBUI_NAME, WEB_UI_VERSION } from '$lib/constants';
 	import { getChangelog } from '$lib/apis';
 
+	import Modal from './common/Modal.svelte';
+
 	export let show = false;
 
 	let changelog = null;
@@ -79,11 +83,12 @@
 		<div class="flex justify-end pt-3 text-sm font-medium">
 			<button
 				on:click={() => {
+					localStorage.version = $config.version;
 					show = false;
 				}}
 				class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			>
-				<span class="relative">Ok, let's go!</span>
+				<span class="relative">Okay, Let's Go!</span>
 			</button>
 		</div>
 	</div>
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
index bc46b608..a8e94e02 100644
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@@ -35,13 +35,13 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
-		transition:fade={{ duration: 50 }}
+		in:fade={{ duration: 10 }}
 	>
 		<div
 			class=" modal-content m-auto rounded-xl max-w-full {sizeToWidth(
 				size
 			)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
-			transition:fade={{ duration: 50 }}
+			in:fade={{ duration: 10 }}
 			on:click={(e) => {
 				e.stopPropagation();
 			}}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index d4db32e0..bd7303b8 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -563,7 +563,7 @@
 						<div
 							id="dropdownDots"
 							class="absolute z-40 bottom-[70px] 4.5rem rounded-lg shadow w-[240px] bg-gray-900"
-							transition:slide={{ duration: 300 }}
+							in:slide={{ duration: 150 }}
 						>
 							<div class="py-2 w-full">
 								{#if $user.role === 'admin'}
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 7880235c..f7934a3d 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -32,3 +32,4 @@ export const documents = writable([
 
 export const settings = writable({});
 export const showSettings = writable(false);
+export const showChangelog = writable(false);
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 8ef8991d..971caeb6 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
 	import toast from 'svelte-french-toast';
 	import { openDB, deleteDB } from 'idb';
-	import { onMount, tick } from 'svelte';
-	import { goto } from '$app/navigation';
-
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { onMount, tick } from 'svelte';
+	import { goto } from '$app/navigation';
+
 	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
 	import { getModelfiles } from '$lib/apis/modelfiles';
 	import { getPrompts } from '$lib/apis/prompts';
-
 	import { getOpenAIModels } from '$lib/apis/openai';
+	import { getDocs } from '$lib/apis/documents';
+	import { getAllChatTags } from '$lib/apis/chats';
 
 	import {
 		user,
@@ -21,16 +22,16 @@
 		modelfiles,
 		prompts,
 		documents,
-		tags
+		tags,
+		showChangelog,
+		config
 	} from '$lib/stores';
 	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
+	import { checkVersion } from '$lib/utils';
 
 	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
-	import { checkVersion } from '$lib/utils';
 	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
-	import { getDocs } from '$lib/apis/documents';
-	import { getAllChatTags } from '$lib/apis/chats';
 	import ChangelogModal from '$lib/components/ChangelogModal.svelte';
 
 	let ollamaVersion = '';
@@ -183,6 +184,8 @@
 				}
 			});
 
+			showChangelog.set(localStorage.version !== $config.version);
+
 			await tick();
 		}
 
@@ -349,8 +352,6 @@
 					</div>
 				</div>
 			</div>
-		{:else}
-			<ChangelogModal show={true} />
 		{/if}
 
 		<div
@@ -358,6 +359,7 @@
 		>
 			<Sidebar />
 			<SettingsModal bind:show={$showSettings} />
+			<ChangelogModal bind:show={$showChangelog} />
 			<slot />
 		</div>
 	</div>