refac

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

@@ -905,7 +905,7 @@
 
 <svelte:window on:click|capture={handleWindowClick} on:keydown={handleKeydown} />
 
-<div class="relative w-full">
+<div class="relative flex w-full">
 	<button
 		bind:this={triggerElement}
 		class="focus-ring relative w-full {($settings?.highContrastMode ?? false)

src/lib/components/layout/Sidebar/Folders/FolderModal.svelte

@@ -11,7 +11,7 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { user, config, models } from '$lib/stores';
-	import { resolveLocalizedModelName } from '$lib/utils/localizedContent';
+	import ModelSelector from '$lib/components/chat/ModelSelector/Selector.svelte';
 
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
@@ -31,13 +31,12 @@
 		background_image_url: null
 	};
 	let data = {
-		model_ids: null as string[] | null,
+		model_ids: [] as string[],
 		system_prompt: '',
 		files: []
 	};
 
 	let loading = false;
-	$: availableModels = $models.filter((model) => !(model?.info?.meta?.hidden ?? false));
 
 	const submitHandler = async () => {
 		loading = true;
@@ -79,10 +78,11 @@
 			meta = folder.meta || {
 				background_image_url: null
 			};
-			data = folder.data || {
-				model_ids: null,
+			data = {
 				system_prompt: '',
-				files: []
+				files: [],
+				...folder.data,
+				model_ids: folder.data?.model_ids ?? []
 			};
 		}
 
@@ -108,7 +108,7 @@
 			background_image_url: null
 		};
 		data = {
-			model_ids: null,
+			model_ids: [],
 			system_prompt: '',
 			files: []
 		};
@@ -220,31 +220,42 @@
 
 					<hr class=" border-gray-50 dark:border-gray-850/30 my-2.5 w-full" />
 
-					<div class="my-1">
-						<label for="folder-default-model" class="block mb-2 text-xs text-gray-500">
+					<div class="my-1 flex items-center justify-between gap-4">
+						<label
+							for="model-selector-folder-default-button"
+							class="shrink-0 text-xs text-gray-500"
+						>
 							{$i18n.t('Default Model')}
 						</label>
-						<select
-							id="folder-default-model"
-							class="w-full rounded-lg px-2 py-1.5 text-sm bg-gray-50 dark:bg-gray-850"
-							value={data.model_ids?.[0] ?? ''}
-							on:change={(event) => {
-								data.model_ids = event.currentTarget.value ? [event.currentTarget.value] : null;
-							}}
-						>
-							<option value="">{$i18n.t('Use default')}</option>
-							{#if data.model_ids?.[0] && !availableModels.some((model) => model.id === data.model_ids?.[0])}
-								<option value={data.model_ids[0]} disabled>{data.model_ids[0]}</option>
+						<div class="flex min-w-0 max-w-[65%] items-center gap-2">
+							<div class="min-w-0">
+								<ModelSelector
+									id="folder-default"
+									placeholder={$i18n.t('Use default')}
+									items={$models.map((model) => ({
+										value: model.id,
+										label: model.name,
+										model
+									}))}
+									triggerClassName="text-xs"
+									placement="auto"
+									align="end"
+									selectionOnly
+									value={data.model_ids[0] ?? ''}
+									bind:values={data.model_ids}
+								/>
+							</div>
+							{#if data.model_ids.length}
+								<button
+									type="button"
+									aria-label={$i18n.t('Reset')}
+									class="shrink-0 p-1 text-gray-500 hover:text-gray-700 dark:hover:text-gray-200"
+									on:click={() => (data.model_ids = [])}
+								>
+									<XMark className="size-3" />
+								</button>
 							{/if}
-							{#each availableModels as model (model.id)}
-								<option value={model.id}>{resolveLocalizedModelName(model, $i18n.language)}</option>
-							{/each}
-						</select>
-						<p class="mt-1 text-xs text-gray-500">
-							{$i18n.t(
-								"Used for new chats in this folder. Changing a chat's model does not change this default."
-							)}
-						</p>
+						</div>
 					</div>
 
 					{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}

src/lib/i18n/locales/en-US/translation.json

@@ -3400,7 +3400,6 @@
 	"Use segmented retrieval for focused context.": "",
 	"Use these in model system prompts as {{example}}.": "",
 	"Use Web Search?": "",
-	"Used for new chats in this folder. Changing a chat's model does not change this default.": "",
 	"user": "",
 	"User": "",
 	"User Activity": "",