From 4bb5b3db0a7bfce5d7bdcf1688481e7a3f9ba0a8 Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Thu, 22 Feb 2024 15:20:48 +0100
Subject: [PATCH] added animations

---
 package-lock.json                             | 21 +++++++++++++++--
 package.json                                  |  3 ++-
 .../components/chat/WhatsChangedModal.svelte  | 11 ++++-----
 src/lib/components/common/Modal.svelte        | 23 ++++++++++++++++---
 4 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ded65c9ab..9fdfdb8a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "0.0.1",
+	"version": "v1.0.0-alpha.101",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.0.1",
+			"version": "v1.0.0-alpha.101",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
 				"async": "^3.2.5",
@@ -38,6 +38,7 @@
 				"prettier-plugin-svelte": "^2.10.1",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
+				"svelte-confetti": "^1.3.2",
 				"tailwindcss": "^3.3.3",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
@@ -3174,6 +3175,15 @@
 				"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-confetti": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.3.2.tgz",
+			"integrity": "sha512-R+JwFTC7hIgWVA/OuXrkj384B7CMoceb0t9VacyW6dORTQg0pWojVBB8Bo3tM30cLEQE48Fekzqgx+XSzHESMA==",
+			"dev": true,
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
 		"node_modules/svelte-eslint-parser": {
 			"version": "0.33.1",
 			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.33.1.tgz",
@@ -5852,6 +5862,13 @@
 				"typescript": "^5.0.3"
 			}
 		},
+		"svelte-confetti": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.3.2.tgz",
+			"integrity": "sha512-R+JwFTC7hIgWVA/OuXrkj384B7CMoceb0t9VacyW6dORTQg0pWojVBB8Bo3tM30cLEQE48Fekzqgx+XSzHESMA==",
+			"dev": true,
+			"requires": {}
+		},
 		"svelte-eslint-parser": {
 			"version": "0.33.1",
 			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.33.1.tgz",
diff --git a/package.json b/package.json
index edc4762fc..ba5d2089c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-confetti": "^1.3.2",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
@@ -52,4 +53,4 @@
 		"tippy.js": "^6.3.7",
 		"uuid": "^9.0.1"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/chat/WhatsChangedModal.svelte b/src/lib/components/chat/WhatsChangedModal.svelte
index 372bb8b54..85f5ef980 100644
--- a/src/lib/components/chat/WhatsChangedModal.svelte
+++ b/src/lib/components/chat/WhatsChangedModal.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import Modal from '../common/Modal.svelte';
+	import { Confetti } from 'svelte-confetti';
 	import { WEBUI_NAME, WEB_UI_VERSION, RELEASE_NOTES } from '$lib/constants';
 	import { config, showWhatsChanged } from '$lib/stores';
 
-	export let show = false;
-
 	function toggleVisibility() {
 		showWhatsChanged.update((value) => !value);
 	}
@@ -13,7 +12,10 @@
 <Modal>
 	<div class="px-5 py-4 dark:text-gray-300">
 		<div class="flex justify-between items-start">
-			<div class="text-xl font-bold">{WEBUI_NAME}</div>
+			<div class="text-xl font-bold">
+				{WEBUI_NAME}
+				<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
+			</div>
 			<button class="self-center" on:click={toggleVisibility}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -67,6 +69,3 @@
 		</div>
 	</div>
 </Modal>
-
-<style>
-</style>
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
index 7a4a9478d..8da1473d2 100644
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@@ -34,14 +34,14 @@
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- 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"
+		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: 200 }}
 	>
 		<div
-			class="m-auto rounded-xl max-w-full {sizeToWidth(
+			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={{ delay: 100, duration: 200 }}
+			transition:fade={{ duration: 200 }}
 			on:click={(e) => {
 				e.stopPropagation();
 			}}
@@ -50,3 +50,20 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	.modal-content {
+		animation: scaleUp 0.1s ease-out forwards;
+	}
+
+	@keyframes scaleUp {
+		from {
+			transform: scale(0.9);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>