refac

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

@@ -6,6 +6,7 @@
 	const i18n: any = getContext('i18n');
 
 	export let saveSettings: Function;
+	export let personalSettingsValue: Record<string, any> = {};
 
 	let interfaceSettings: any;
 </script>
@@ -21,7 +22,7 @@
 	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Interface')}</h2>
 
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
-		<InterfaceSettings bind:this={interfaceSettings} {saveSettings} />
+		<InterfaceSettings bind:this={interfaceSettings} {saveSettings} {personalSettingsValue} />
 	</div>
 
 	<div class="shrink-0 flex justify-end text-sm font-normal">

src/lib/components/chat/SettingsModal.svelte

@@ -5,7 +5,7 @@
 	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 { getUserSettings, updateUserSettings } from '$lib/apis/users';
 	import { getBackendConfig, getModels as _getModels } from '$lib/apis';
 
 	import Modal from '../common/Modal.svelte';
@@ -61,6 +61,18 @@
 	let modalShow = false;
 	let lastShow: boolean | string | SettingsModalRequest = false;
 	let tabState: Record<string, unknown> | null = null;
+	let personalUiSettings: Record<string, any> = {};
+
+	const loadPersonalUiSettings = async () => {
+		const userSettings = await getUserSettings(localStorage.token, true).catch((error) => {
+			console.error(error);
+			return null;
+		});
+		personalUiSettings =
+			userSettings?.ui && typeof userSettings.ui === 'object' && !Array.isArray(userSettings.ui)
+				? userSettings.ui
+				: {};
+	};
 
 	$: if (show !== lastShow) {
 		lastShow = show;
@@ -70,13 +82,18 @@
 			show = true;
 			lastShow = true;
 			modalShow = true;
+			loadPersonalUiSettings();
 		} else if (typeof show === 'string') {
 			selectedTab = show;
 			show = true;
 			lastShow = true;
 			modalShow = true;
+			loadPersonalUiSettings();
 		} else {
 			modalShow = show;
+			if (show) {
+				loadPersonalUiSettings();
+			}
 			if (!show) {
 				selectedTab = 'general';
 				tabState = null;
@@ -818,7 +835,9 @@
 		console.log(updated);
 		await settings.set({ ...$settings, ...updated });
 		await models.set(await getModels());
-		await updateUserSettings(localStorage.token, { ui: $settings });
+		const saved = await updateUserSettings(localStorage.token, { ui: $settings });
+		personalUiSettings =
+			saved?.ui && typeof saved.ui === 'object' && !Array.isArray(saved.ui) ? saved.ui : {};
 	};
 
 	const getModels = async () => {
@@ -1169,6 +1188,7 @@
 			{:else if selectedTab === 'interface'}
 				<Interface
 					{saveSettings}
+					personalSettingsValue={personalUiSettings}
 					on:save={() => {
 						toast.success($i18n.t('Settings saved successfully!'));
 					}}