refac

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -8,6 +8,7 @@
 	dayjs.extend(relativeTime);
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import { flyAndScale } from '$lib/utils/transitions';
 
 	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
@@ -375,6 +376,41 @@
 		}
 	};
 
+	let showDeleteConfirm = false;
+	let deleteModelTarget: any = null;
+
+	const deleteModelHandler = async (model: any) => {
+		deleteModelTarget = model;
+		showDeleteConfirm = true;
+	};
+
+	const confirmDeleteModel = async () => {
+		const model = deleteModelTarget;
+		if (!model) return;
+
+		const res = await deleteModel(localStorage.token, model.id).catch((error) => {
+			toast.error($i18n.t('Error deleting model: {{error}}', { error }));
+		});
+
+		if (res) {
+			toast.success($i18n.t('Model {{modelName}} deleted successfully', { modelName: model.name ?? model.id }));
+
+			// If the deleted model was selected, clear the selection
+			if (value === model.id) {
+				value = '';
+			}
+
+			models.set(
+				await getModels(
+					localStorage.token,
+					$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
+				)
+			);
+		}
+
+		deleteModelTarget = null;
+	};
+
 	const ITEM_HEIGHT = 42;
 	const OVERSCAN = 10;
 
@@ -388,6 +424,15 @@
 	);
 </script>
 
+<ConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete Model')}
+	message={$i18n.t('Are you sure you want to delete **{{modelName}}**?', { modelName: deleteModelTarget?.name ?? deleteModelTarget?.id ?? '' })}
+	on:confirm={() => {
+		confirmDeleteModel();
+	}}
+/>
+
 <DropdownMenu.Root
 	bind:open={show}
 	onOpenChange={async () => {
@@ -646,6 +691,7 @@
 													{value}
 													{pinModelHandler}
 													{unloadModelHandler}
+													{deleteModelHandler}
 													onClick={() => {
 														value = item.value;
 														selectedModelIdx = index;