refac

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

@@ -6,7 +6,7 @@
 	import { onMount, getContext, tick } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
+	import { config, models as _models, settings, user } from '$lib/stores';
 	import {
 		createNewModel,
 		deleteAllModels,
@@ -18,7 +18,6 @@
 		importModels
 	} from '$lib/apis/models';
 	import { copyToClipboard } from '$lib/utils';
-	import { page } from '$app/stores';
 	import { updateUserSettings } from '$lib/apis/users';
 
 	import { getModels } from '$lib/apis';
@@ -53,6 +52,8 @@
 
 	let shiftKey = false;
 
+	export let tabState: Record<string, unknown> | null = null;
+
 	let modelsImportInProgress = false;
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
@@ -73,6 +74,11 @@
 	let tags: string[] = [];
 	let selectedTag = '';
 
+	$: if (typeof tabState?.id === 'string' && tabState.id) {
+		selectedModelId = tabState.id;
+		tabState = null;
+	}
+
 	const perPage = 30;
 	let currentPage = 1;
 
@@ -399,11 +405,6 @@
 
 	onMount(async () => {
 		await init();
-		const id = $page.url.searchParams.get('id');
-
-		if (id) {
-			selectedModelId = id;
-		}
 
 		const onKeyDown = (event) => {
 			if (event.key === 'Shift') {

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

@@ -9,7 +9,7 @@
 	import PinSlash from '$lib/components/icons/PinSlash.svelte';
 	import Link from '$lib/components/icons/Link.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
-	import { config, settings, user } from '$lib/stores';
+	import { config, settings, showSettings, user } from '$lib/stores';
 	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
 
 	const i18n = getContext('i18n');
@@ -53,11 +53,11 @@
 						e.stopPropagation();
 						e.preventDefault();
 
-						goto(
-							model?.preset || model?.info?.base_model_id
-								? `/workspace/models/edit?id=${encodeURIComponent(model?.id ?? '')}`
-								: `/admin/settings/models?id=${encodeURIComponent(model?.id ?? '')}`
-						);
+						if (model?.preset || model?.info?.base_model_id) {
+							goto(`/workspace/models/edit?id=${encodeURIComponent(model?.id ?? '')}`);
+						} else {
+							showSettings.set({ tab: 'admin:models', state: { id: model?.id ?? null } });
+						}
 						show = false;
 					}}
 				>

src/lib/components/chat/Settings/General.svelte

@@ -306,10 +306,7 @@
 				</div>
 				<Textarea
 					bind:value={system}
-					className={'w-full text-sm outline-hidden resize-vertical' +
-						($settings.highContrastMode
-							? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden'
-							: '  dark:text-gray-300 ')}
+					className="w-full resize-vertical appearance-none bg-transparent text-sm outline-hidden focus:bg-transparent disabled:bg-transparent dark:text-gray-300"
 					rows="4"
 					placeholder={$i18n.t('Enter system prompt here')}
 				/>

src/lib/components/chat/SettingsModal.svelte

@@ -3,6 +3,7 @@
 	import type { Writable } from 'svelte/store';
 	import { toast } from 'svelte-sonner';
 	import { config, models, settings, user } from '$lib/stores';
+	import type { SettingsModalRequest } from '$lib/stores';
 	import { updateUserSettings } from '$lib/apis/users';
 	import { getBackendConfig, getModels as _getModels } from '$lib/apis';
 
@@ -51,13 +52,20 @@
 
 	const i18n: Writable<any> = getContext('i18n');
 
-	export let show: boolean | string = false;
+	export let show: boolean | string | SettingsModalRequest = false;
 	let modalShow = false;
-	let lastShow: boolean | string = false;
+	let lastShow: boolean | string | SettingsModalRequest = false;
+	let tabState: Record<string, unknown> | null = null;
 
 	$: if (show !== lastShow) {
 		lastShow = show;
-		if (typeof show === 'string') {
+		if (show && typeof show === 'object') {
+			selectedTab = show.tab;
+			tabState = show.state ?? null;
+			show = true;
+			lastShow = true;
+			modalShow = true;
+		} else if (typeof show === 'string') {
 			selectedTab = show;
 			show = true;
 			lastShow = true;
@@ -66,6 +74,7 @@
 			modalShow = show;
 			if (!show) {
 				selectedTab = 'general';
+				tabState = null;
 			}
 		}
 	}
@@ -74,6 +83,7 @@
 		show = false;
 		lastShow = false;
 		selectedTab = 'general';
+		tabState = null;
 	}
 
 	interface SettingsTab {
@@ -1130,7 +1140,7 @@
 					}}
 				/>
 			{:else if selectedTab === 'admin:models'}
-				<AdminModels />
+				<AdminModels bind:tabState />
 			{:else if selectedTab === 'admin:subagents'}
 				<AdminSubagents />
 			{:else if selectedTab === 'admin:evaluations'}

src/lib/stores/index.ts

@@ -111,9 +111,14 @@ export const chatRequestQueues: Writable<
 
 export const sidebarWidth = writable(245);
 
+export type SettingsModalRequest = {
+	tab: string;
+	state?: Record<string, unknown> | null;
+};
+
 export const showSidebar = writable(false);
 export const showSearch = writable(false);
-export const showSettings: Writable<boolean | string> = writable(false);
+export const showSettings: Writable<boolean | string | SettingsModalRequest> = writable(false);
 export const showChangelog = writable(false);
 
 export const showControls = writable(false);