From 705f5aecd761e3675730dc681de81b0eff0ad5eb Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Fri, 1 Mar 2024 10:18:07 +0100
Subject: [PATCH] svelte-sonner migration

---
 package-lock.json                             | 46 +++++--------------
 package.json                                  |  4 +-
 src/lib/components/admin/EditUserModal.svelte |  2 +-
 src/lib/components/chat/MessageInput.svelte   |  2 +-
 .../chat/MessageInput/Documents.svelte        |  2 +-
 .../chat/MessageInput/Models.svelte           |  2 +-
 .../chat/MessageInput/PromptCommands.svelte   |  2 +-
 src/lib/components/chat/Messages.svelte       |  2 +-
 .../chat/Messages/ResponseMessage.svelte      |  2 +-
 src/lib/components/chat/ModelSelector.svelte  |  2 +-
 .../components/chat/Settings/Account.svelte   |  2 +-
 .../Settings/Account/UpdatePassword.svelte    |  2 +-
 src/lib/components/chat/Settings/Audio.svelte |  2 +-
 src/lib/components/chat/Settings/Chats.svelte |  2 +-
 .../chat/Settings/Connections.svelte          |  2 +-
 .../components/chat/Settings/General.svelte   |  2 +-
 .../components/chat/Settings/Images.svelte    |  2 +-
 .../components/chat/Settings/Interface.svelte |  2 +-
 .../components/chat/Settings/Models.svelte    |  2 +-
 src/lib/components/chat/SettingsModal.svelte  |  2 +-
 .../components/documents/AddDocModal.svelte   |  2 +-
 .../components/documents/EditDocModal.svelte  |  2 +-
 .../documents/Settings/General.svelte         |  2 +-
 src/lib/components/layout/Navbar.svelte       |  2 +-
 src/lib/components/layout/Sidebar.svelte      |  2 +-
 src/routes/(app)/+layout.svelte               |  2 +-
 src/routes/(app)/+page.svelte                 |  2 +-
 src/routes/(app)/admin/+page.svelte           |  2 +-
 src/routes/(app)/c/[id]/+page.svelte          |  2 +-
 src/routes/(app)/documents/+page.svelte       |  2 +-
 src/routes/(app)/modelfiles/+page.svelte      |  2 +-
 .../(app)/modelfiles/create/+page.svelte      |  2 +-
 src/routes/(app)/modelfiles/edit/+page.svelte |  2 +-
 src/routes/(app)/prompts/+page.svelte         |  2 +-
 src/routes/(app)/prompts/create/+page.svelte  |  2 +-
 src/routes/(app)/prompts/edit/+page.svelte    |  2 +-
 src/routes/+layout.svelte                     |  4 +-
 src/routes/auth/+page.svelte                  |  2 +-
 38 files changed, 51 insertions(+), 73 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9fdfdb8a..43deeace 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "v1.0.0-alpha.101",
+	"version": "0.1.106",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "v1.0.0-alpha.101",
+			"version": "0.1.106",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
 				"async": "^3.2.5",
@@ -17,7 +17,7 @@
 				"js-sha256": "^0.10.1",
 				"katex": "^0.16.9",
 				"marked": "^9.1.0",
-				"svelte-french-toast": "^1.2.0",
+				"svelte-sonner": "^0.3.19",
 				"tippy.js": "^6.3.7",
 				"uuid": "^9.0.1"
 			},
@@ -3211,17 +3211,6 @@
 				}
 			}
 		},
-		"node_modules/svelte-french-toast": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
-			"integrity": "sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==",
-			"dependencies": {
-				"svelte-writable-derived": "^3.1.0"
-			},
-			"peerDependencies": {
-				"svelte": "^3.57.0 || ^4.0.0"
-			}
-		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.3",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
@@ -3307,15 +3296,12 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/svelte-writable-derived": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-3.1.0.tgz",
-			"integrity": "sha512-cTvaVFNIJ036vSDIyPxJYivKC7ZLtcFOPm1Iq6qWBDo1fOHzfk6ZSbwaKrxhjgy52Rbl5IHzRcWgos6Zqn9/rg==",
-			"funding": {
-				"url": "https://ko-fi.com/pixievoltno1"
-			},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.19",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.19.tgz",
+			"integrity": "sha512-jpPOgLtHwRaB6Vqo2dUQMv15/yUV/BQWTjKpEqQ11uqRSHKjAYUKZyGrHB2cQsGmyjR0JUzBD58btpgNqINQ/Q==",
 			"peerDependencies": {
-				"svelte": "^3.2.1 || ^4.0.0-next.1"
+				"svelte": ">=3 <5"
 			}
 		},
 		"node_modules/tailwindcss": {
@@ -5882,14 +5868,6 @@
 				"postcss-scss": "^4.0.8"
 			}
 		},
-		"svelte-french-toast": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
-			"integrity": "sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==",
-			"requires": {
-				"svelte-writable-derived": "^3.1.0"
-			}
-		},
 		"svelte-hmr": {
 			"version": "0.15.3",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
@@ -5920,10 +5898,10 @@
 				}
 			}
 		},
-		"svelte-writable-derived": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-3.1.0.tgz",
-			"integrity": "sha512-cTvaVFNIJ036vSDIyPxJYivKC7ZLtcFOPm1Iq6qWBDo1fOHzfk6ZSbwaKrxhjgy52Rbl5IHzRcWgos6Zqn9/rg==",
+		"svelte-sonner": {
+			"version": "0.3.19",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.19.tgz",
+			"integrity": "sha512-jpPOgLtHwRaB6Vqo2dUQMv15/yUV/BQWTjKpEqQ11uqRSHKjAYUKZyGrHB2cQsGmyjR0JUzBD58btpgNqINQ/Q==",
 			"requires": {}
 		},
 		"tailwindcss": {
diff --git a/package.json b/package.json
index 2ce66e78..ce9c8fcc 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,8 @@
 		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",
 		"marked": "^9.1.0",
-		"svelte-french-toast": "^1.2.0",
+		"svelte-sonner": "^0.3.19",
 		"tippy.js": "^6.3.7",
 		"uuid": "^9.0.1"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/admin/EditUserModal.svelte b/src/lib/components/admin/EditUserModal.svelte
index 09005b30..d8ceb145 100644
--- a/src/lib/components/admin/EditUserModal.svelte
+++ b/src/lib/components/admin/EditUserModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { createEventDispatcher } from 'svelte';
 	import { onMount } from 'svelte';
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index f9ff8fc3..81a581be 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { onMount, tick } from 'svelte';
 	import { settings } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
diff --git a/src/lib/components/chat/MessageInput/Documents.svelte b/src/lib/components/chat/MessageInput/Documents.svelte
index 616cf7be..03eea0c6 100644
--- a/src/lib/components/chat/MessageInput/Documents.svelte
+++ b/src/lib/components/chat/MessageInput/Documents.svelte
@@ -4,7 +4,7 @@
 	import { documents } from '$lib/stores';
 	import { removeFirstHashWord, isValidHttpUrl } from '$lib/utils';
 	import { tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let prompt = '';
 
diff --git a/src/lib/components/chat/MessageInput/Models.svelte b/src/lib/components/chat/MessageInput/Models.svelte
index e671bcec..cedd1d5b 100644
--- a/src/lib/components/chat/MessageInput/Models.svelte
+++ b/src/lib/components/chat/MessageInput/Models.svelte
@@ -3,7 +3,7 @@
 	import { models } from '$lib/stores';
 	import { splitStream } from '$lib/utils';
 	import { tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let prompt = '';
 	export let user = null;
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 962a7f1d..da3c1149 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -2,7 +2,7 @@
 	import { prompts } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
 	import { tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let prompt = '';
 	let selectedCommandIdx = 0;
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index ca65b530..fd0a6e83 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -4,7 +4,7 @@
 	import { chats, config, modelfiles, settings, user } from '$lib/stores';
 	import { tick } from 'svelte';
 
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
 
 	import UserMessage from './Messages/UserMessage.svelte';
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 9ad58c78..69b301e3 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { marked } from 'marked';
 	import tippy from 'tippy.js';
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 8f478916..eb5fe67b 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -2,7 +2,7 @@
 	import { setDefaultModels } from '$lib/apis/configs';
 	import { models, showSettings, settings, user } from '$lib/stores';
 	import { onMount, tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let selectedModels = [''];
 	export let disabled = false;
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 2d87acaf..66d10733 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { onMount } from 'svelte';
 
 	import { user } from '$lib/stores';
diff --git a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
index f15d0b50..dc3d3552 100644
--- a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
+++ b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { updateUserPassword } from '$lib/apis/auths';
 
 	let show = false;
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 289ec0bb..5cc45f43 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
 	export let saveSettings: Function;
diff --git a/src/lib/components/chat/Settings/Chats.svelte b/src/lib/components/chat/Settings/Chats.svelte
index b8befb68..bab3acc7 100644
--- a/src/lib/components/chat/Settings/Chats.svelte
+++ b/src/lib/components/chat/Settings/Chats.svelte
@@ -15,7 +15,7 @@
 	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let saveSettings: Function;
 	// Chats
diff --git a/src/lib/components/chat/Settings/Connections.svelte b/src/lib/components/chat/Settings/Connections.svelte
index f4c0e04d..fc0de9a1 100644
--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@@ -5,7 +5,7 @@
 
 	import { getOllamaAPIUrl, getOllamaVersion, updateOllamaAPIUrl } from '$lib/apis/ollama';
 	import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let getModels: Function;
 
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 43826f1a..567c67a8 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
 
diff --git a/src/lib/components/chat/Settings/Images.svelte b/src/lib/components/chat/Settings/Images.svelte
index cf64b7d4..b36eae12 100644
--- a/src/lib/components/chat/Settings/Images.svelte
+++ b/src/lib/components/chat/Settings/Images.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { config, user } from '$lib/stores';
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index f2dfac5c..e8dd77c4 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -3,7 +3,7 @@
 	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
 	import { config, models, user } from '$lib/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
 	export let saveSettings: Function;
diff --git a/src/lib/components/chat/Settings/Models.svelte b/src/lib/components/chat/Settings/Models.svelte
index 92e6b7dd..dc73ab06 100644
--- a/src/lib/components/chat/Settings/Models.svelte
+++ b/src/lib/components/chat/Settings/Models.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import queue from 'async/queue';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { createModel, deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index b112180b..b7b21e4f 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { models, settings, user } from '$lib/stores';
 
 	import { getOllamaModels } from '$lib/apis/ollama';
diff --git a/src/lib/components/documents/AddDocModal.svelte b/src/lib/components/documents/AddDocModal.svelte
index bf24f9c6..922996fd 100644
--- a/src/lib/components/documents/AddDocModal.svelte
+++ b/src/lib/components/documents/AddDocModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { onMount } from 'svelte';
 
diff --git a/src/lib/components/documents/EditDocModal.svelte b/src/lib/components/documents/EditDocModal.svelte
index 4974da5a..f37232a5 100644
--- a/src/lib/components/documents/EditDocModal.svelte
+++ b/src/lib/components/documents/EditDocModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { onMount } from 'svelte';
 
diff --git a/src/lib/components/documents/Settings/General.svelte b/src/lib/components/documents/Settings/General.svelte
index 503cbc84..9bf496a2 100644
--- a/src/lib/components/documents/Settings/General.svelte
+++ b/src/lib/components/documents/Settings/General.svelte
@@ -9,7 +9,7 @@
 	} from '$lib/apis/rag';
 	import { documents } from '$lib/stores';
 	import { onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let saveHandler: Function;
 
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 986eca38..95923c75 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 238b9e66..711e4fd6 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -16,7 +16,7 @@
 		updateChatById,
 		getAllChatTags
 	} from '$lib/apis/chats';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index ceee2209..8afe2fd8 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { openDB, deleteDB } from 'idb';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 581db7c0..b1407f26 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { onMount, tick } from 'svelte';
 	import { goto } from '$app/navigation';
diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index b1169709..13fb99b6 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -4,7 +4,7 @@
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
 	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 32af2b17..1ff69464 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { onMount, tick } from 'svelte';
 	import { goto } from '$app/navigation';
diff --git a/src/routes/(app)/documents/+page.svelte b/src/routes/(app)/documents/+page.svelte
index 79fe691b..72b4987c 100644
--- a/src/routes/(app)/documents/+page.svelte
+++ b/src/routes/(app)/documents/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index 14398417..cb3b9d70 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/routes/(app)/modelfiles/create/+page.svelte b/src/routes/(app)/modelfiles/create/+page.svelte
index 12ffe063..d54e9709 100644
--- a/src/routes/(app)/modelfiles/create/+page.svelte
+++ b/src/routes/(app)/modelfiles/create/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { v4 as uuidv4 } from 'uuid';
-	import { toast } from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { settings, user, config, modelfiles, models } from '$lib/stores';
 
diff --git a/src/routes/(app)/modelfiles/edit/+page.svelte b/src/routes/(app)/modelfiles/edit/+page.svelte
index b2a5545c..4759eb92 100644
--- a/src/routes/(app)/modelfiles/edit/+page.svelte
+++ b/src/routes/(app)/modelfiles/edit/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { v4 as uuidv4 } from 'uuid';
-	import { toast } from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 
 	import { onMount } from 'svelte';
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 784c8693..a02eaf00 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/routes/(app)/prompts/create/+page.svelte b/src/routes/(app)/prompts/create/+page.svelte
index 4dad5795..548aa431 100644
--- a/src/routes/(app)/prompts/create/+page.svelte
+++ b/src/routes/(app)/prompts/create/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { goto } from '$app/navigation';
 	import { prompts } from '$lib/stores';
diff --git a/src/routes/(app)/prompts/edit/+page.svelte b/src/routes/(app)/prompts/edit/+page.svelte
index 0611056a..f6b2dc5f 100644
--- a/src/routes/(app)/prompts/edit/+page.svelte
+++ b/src/routes/(app)/prompts/edit/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { goto } from '$app/navigation';
 	import { prompts } from '$lib/stores';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 93ccad19..7124789b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import { onMount, tick } from 'svelte';
 	import { config, user, theme, WEBUI_NAME } from '$lib/stores';
 	import { goto } from '$app/navigation';
-	import toast, { Toaster } from 'svelte-french-toast';
+	import { Toaster, toast } from 'svelte-sonner';
 
 	import { getBackendConfig } from '$lib/apis';
 	import { getSessionUser } from '$lib/apis/auths';
@@ -68,4 +68,4 @@
 	<slot />
 {/if}
 
-<Toaster />
+<Toaster richColors position="top-right" />
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 30c5a93e..3dbe1271 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -4,7 +4,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	let loaded = false;
 	let mode = 'signin';