feat: pinned models

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

@@ -4,7 +4,7 @@
 	import { getContext, tick } from 'svelte';
 	import dayjs from '$lib/dayjs';
 
-	import { mobile, pinnedModels, user } from '$lib/stores';
+	import { mobile, settings, user } from '$lib/stores';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { copyToClipboard, sanitizeResponseContent } from '$lib/utils';
@@ -22,6 +22,8 @@
 	export let value: string = '';
 
 	export let unloadModelHandler: (modelValue: string) => void = () => {};
+	export let pinModelHandler: (modelValue: string) => void = () => {};
+
 	export let onClick: () => void = () => {};
 
 	const copyLinkHandler = async (model) => {
@@ -236,13 +238,7 @@
 		<ModelItemMenu
 			bind:show={showMenu}
 			model={item.model}
-			toggleSidebarHandler={() => {
-				if ($pinnedModels.includes(item.model.id)) {
-					pinnedModels.set($pinnedModels.filter((id) => id !== item.model.id));
-				} else {
-					pinnedModels.set([...new Set([...$pinnedModels, item.model.id])]);
-				}
-			}}
+			{pinModelHandler}
 			copyLinkHandler={() => {
 				copyLinkHandler(item.model);
 			}}

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

@@ -8,14 +8,14 @@
 	import Link from '$lib/components/icons/Link.svelte';
 	import Eye from '$lib/components/icons/Eye.svelte';
 	import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
-	import { pinnedModels } from '$lib/stores';
+	import { settings } from '$lib/stores';
 
 	const i18n = getContext('i18n');
 
 	export let show = false;
 	export let model;
 
-	export let toggleSidebarHandler: Function = () => {};
+	export let pinModelHandler: (modelId: string) => void = () => {};
 	export let copyLinkHandler: Function = () => {};
 
 	export let onClose: Function = () => {};
@@ -52,18 +52,18 @@
 				e.stopPropagation();
 				e.preventDefault();
 
-				toggleSidebarHandler();
+				pinModelHandler(model?.id);
 				show = false;
 			}}
 		>
-			{#if ($pinnedModels ?? []).includes(model?.id)}
+			{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
 				<EyeSlash />
 			{:else}
 				<Eye />
 			{/if}
 
 			<div class="flex items-center">
-				{#if ($pinnedModels ?? []).includes(model?.id)}
+				{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
 					{$i18n.t('Hide from Sidebar')}
 				{:else}
 					{$i18n.t('Keep in Sidebar')}

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

@@ -57,6 +57,8 @@
 	export let className = 'w-[32rem]';
 	export let triggerClassName = 'text-lg';
 
+	export let pinModelHandler: (modelId: string) => void = () => {};
+
 	let tagsContainerElement;
 
 	let show = false;
@@ -500,6 +502,7 @@
 						{item}
 						{index}
 						{value}
+						{pinModelHandler}
 						{unloadModelHandler}
 						onClick={() => {
 							value = item.value;