feat: default pinned models

Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>

src/lib/components/layout/Sidebar.svelte

@@ -887,7 +887,7 @@
 					{/if}
 				</div>
 
-				{#if ($models ?? []).length > 0 && ($settings?.pinnedModels ?? []).length > 0}
+				{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
 					<Folder
 						id="sidebar-models"
 						className="px-2 mt-0.5"

src/lib/components/layout/Sidebar/PinnedModelItem.svelte

@@ -50,7 +50,7 @@
 			</div>
 		</a>
 
-		{#if mouseOver && shiftKey}
+		{#if mouseOver && shiftKey && onUnpin}
 			<div class="absolute right-5 top-2.5">
 				<div class=" flex items-center self-center space-x-1.5">
 					<Tooltip content={$i18n.t('Unpin')} className="flex items-center">

src/lib/components/layout/Sidebar/PinnedModelList.svelte

@@ -1,9 +1,9 @@
 <script>
 	import Sortable from 'sortablejs';
 
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount, tick } from 'svelte';
 
-	import { chatId, mobile, models, settings, showSidebar } from '$lib/stores';
+	import { chatId, config, mobile, models, settings, showSidebar } from '$lib/stores';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { updateUserSettings } from '$lib/apis/users';
 	import PinnedModelItem from './PinnedModelItem.svelte';
@@ -11,6 +11,8 @@
 	export let selectedChatId = null;
 	export let shiftKey = false;
 
+	let pinnedModels = [];
+
 	const initPinnedModelsSortable = () => {
 		const pinnedModelsList = document.getElementById('pinned-models-list');
 		if (pinnedModelsList && !$mobile) {
@@ -33,13 +35,36 @@
 		}
 	};
 
-	onMount(() => {
+	let unsubscribeSettings;
+
+	onMount(async () => {
+		pinnedModels = $settings?.pinnedModels ?? [];
+
+		if (pinnedModels.length === 0 && $config?.default_pinned_models) {
+			const defaultPinnedModels = ($config?.default_pinned_models).split(',').filter((id) => id);
+			pinnedModels = defaultPinnedModels.filter((id) => $models.find((model) => model.id === id));
+
+			settings.set({ ...$settings, pinnedModels });
+			await updateUserSettings(localStorage.token, { ui: $settings });
+		}
+
+		unsubscribeSettings = settings.subscribe((value) => {
+			pinnedModels = value?.pinnedModels ?? [];
+		});
+
+		await tick();
 		initPinnedModelsSortable();
 	});
+
+	onDestroy(() => {
+		if (unsubscribeSettings) {
+			unsubscribeSettings();
+		}
+	});
 </script>
 
 <div class="mt-0.5 pb-1.5" id="pinned-models-list">
-	{#each $settings.pinnedModels as modelId (modelId)}
+	{#each pinnedModels as modelId (modelId)}
 		{@const model = $models.find((model) => model.id === modelId)}
 		{#if model}
 			<PinnedModelItem
@@ -52,11 +77,13 @@
 						showSidebar.set(false);
 					}
 				}}
-				onUnpin={() => {
-					const pinnedModels = $settings.pinnedModels.filter((id) => id !== modelId);
-					settings.set({ ...$settings, pinnedModels });
-					updateUserSettings(localStorage.token, { ui: $settings });
-				}}
+				onUnpin={($settings?.pinnedModels ?? []).includes(modelId)
+					? () => {
+							const pinnedModels = $settings.pinnedModels.filter((id) => id !== modelId);
+							settings.set({ ...$settings, pinnedModels });
+							updateUserSettings(localStorage.token, { ui: $settings });
+						}
+					: null}
 			/>
 		{/if}
 	{/each}