enh: reset models

src/lib/components/admin/Settings/Models.svelte

@@ -9,6 +9,7 @@
 	import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
 	import {
 		createNewModel,
+		deleteAllModels,
 		getBaseModels,
 		toggleModelById,
 		updateModelById
@@ -22,6 +23,7 @@
 
 	import ModelEditor from '$lib/components/workspace/Models/ModelEditor.svelte';
 	import { toast } from 'svelte-sonner';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
@@ -32,8 +34,8 @@
 	let baseModels = null;
 
 	let filteredModels = [];
-
 	let selectedModelId = null;
+	let showResetModal = false;
 
 	$: if (models) {
 		filteredModels = models.filter(
@@ -126,6 +128,19 @@
 	});
 </script>
 
+<ConfirmDialog
+	title={$i18n.t('Delete All Models')}
+	message={$i18n.t('This will delete all models including custom models and cannot be undone.')}
+	bind:show={showResetModal}
+	onConfirm={async () => {
+		const res = deleteAllModels(localStorage.token);
+		if (res) {
+			toast.success($i18n.t('All models deleted successfully'));
+			init();
+		}
+	}}
+/>
+
 {#if models !== null}
 	{#if selectedModelId === null}
 		<div class="flex flex-col gap-1 mt-1.5 mb-2">
@@ -137,6 +152,22 @@
 						>{filteredModels.length}</span
 					>
 				</div>
+
+				<div>
+					<Tooltip content={$i18n.t('This will delete all models including custom models')}>
+						<button
+							class=" px-2.5 py-1 rounded-full flex gap-1 items-center"
+							type="button"
+							on:click={() => {
+								showResetModal = true;
+							}}
+						>
+							<div class="text-sm flex-shrink-0">
+								{$i18n.t('Reset')}
+							</div>
+						</button>
+					</Tooltip>
+				</div>
 			</div>
 
 			<div class=" flex flex-1 items-center w-full space-x-2">

src/lib/components/common/ConfirmDialog.svelte

@@ -12,6 +12,8 @@
 	export let cancelLabel = $i18n.t('Cancel');
 	export let confirmLabel = $i18n.t('Confirm');
 
+	export let onConfirm = () => {};
+
 	export let input = false;
 	export let inputPlaceholder = '';
 	export let inputValue = '';
@@ -29,11 +31,17 @@
 
 		if (event.key === 'Enter') {
 			console.log('Enter');
-			show = false;
-			dispatch('confirm', inputValue);
+			confirmHandler();
 		}
 	};
 
+	const confirmHandler = async () => {
+		show = false;
+
+		await onConfirm();
+		dispatch('confirm', inputValue);
+	};
+
 	onMount(() => {
 		mounted = true;
 	});
@@ -110,8 +118,7 @@
 					<button
 						class="bg-gray-900 hover:bg-gray-850 text-gray-100 dark:bg-gray-100 dark:hover:bg-white dark:text-gray-800 font-medium w-full py-2.5 rounded-lg transition"
 						on:click={() => {
-							show = false;
-							dispatch('confirm', inputValue);
+							confirmHandler();
 						}}
 						type="button"
 					>