refac: styling

src/lib/apis/index.ts

@@ -8,17 +8,26 @@ import { toast } from 'svelte-sonner';
 export const getModels = async (
 	token: string = '',
 	connections: object | null = null,
-	base: boolean = false
+	base: boolean = false,
+	refresh: boolean = false
 ) => {
+	const searchParams = new URLSearchParams();
+	if (refresh) {
+		searchParams.append('refresh', 'true');
+	}
+
 	let error = null;
-	const res = await fetch(`${WEBUI_BASE_URL}/api/models${base ? '/base' : ''}`, {
+	const res = await fetch(
+		`${WEBUI_BASE_URL}/api/models${base ? '/base' : ''}?${searchParams.toString()}`,
+		{
 			method: 'GET',
 			headers: {
 				Accept: 'application/json',
 				'Content-Type': 'application/json',
 				...(token && { authorization: `Bearer ${token}` })
 			}
-	})
+		}
+	)
 		.then(async (res) => {
 			if (!res.ok) throw await res.json();
 			return res.json();

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

@@ -25,7 +25,9 @@
 	const getModels = async () => {
 		const models = await _getModels(
 			localStorage.token,
-			$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
+			$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null),
+			false,
+			true
 		);
 		return models;
 	};
@@ -216,8 +218,13 @@
 <form class="flex flex-col h-full justify-between text-sm" on:submit|preventDefault={submitHandler}>
 	<div class=" overflow-y-scroll scrollbar-hidden h-full">
 		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && directConnectionsConfig !== null}
+			<div class="mb-3.5">
+				<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
+
+				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+
 				<div class="my-2">
-				<div class="mt-2 space-y-2 pr-1.5">
+					<div class="mt-2 space-y-2">
 						<div class="flex justify-between items-center text-sm">
 							<div class="  font-medium">{$i18n.t('OpenAI API')}</div>
 
@@ -234,11 +241,9 @@
 						</div>
 
 						{#if ENABLE_OPENAI_API}
-						<hr class=" border-gray-100 dark:border-gray-850" />
-
 							<div class="">
 								<div class="flex justify-between items-center">
-								<div class="font-medium">{$i18n.t('Manage OpenAI API Connections')}</div>
+									<div class="font-medium text-xs">{$i18n.t('Manage OpenAI API Connections')}</div>
 
 									<Tooltip content={$i18n.t(`Add Connection`)}>
 										<button
@@ -271,7 +276,8 @@
 
 												let newConfig = {};
 												OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
-												newConfig[newIdx] = OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
+													newConfig[newIdx] =
+														OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
 												});
 												OPENAI_API_CONFIGS = newConfig;
 												updateOpenAIHandler();
@@ -284,9 +290,7 @@
 					</div>
 				</div>
 
-			<hr class=" border-gray-100 dark:border-gray-850" />
+				<div class=" my-2">
-
-			<div class="pr-1.5 my-2">
 					<div class="flex justify-between items-center text-sm mb-2">
 						<div class="  font-medium">{$i18n.t('Ollama API')}</div>
 
@@ -301,11 +305,9 @@
 					</div>
 
 					{#if ENABLE_OLLAMA_API}
-					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
-
 						<div class="">
 							<div class="flex justify-between items-center">
-							<div class="font-medium">{$i18n.t('Manage Ollama API Connections')}</div>
+								<div class="font-medium text-xs">{$i18n.t('Manage Ollama API Connections')}</div>
 
 								<Tooltip content={$i18n.t(`Add Connection`)}>
 									<button
@@ -335,7 +337,8 @@
 
 												let newConfig = {};
 												OLLAMA_BASE_URLS.forEach((url, newIdx) => {
-												newConfig[newIdx] = OLLAMA_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
+													newConfig[newIdx] =
+														OLLAMA_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
 												});
 												OLLAMA_API_CONFIGS = newConfig;
 											}}
@@ -358,9 +361,7 @@
 					{/if}
 				</div>
 
-			<hr class=" border-gray-100 dark:border-gray-850" />
+				<div class="my-2">
-
-			<div class="pr-1.5 my-2">
 					<div class="flex justify-between items-center text-sm">
 						<div class="  font-medium">{$i18n.t('Direct Connections')}</div>
 
@@ -376,8 +377,7 @@
 						</div>
 					</div>
 
-				<div class="mt-1.5">
+					<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-					<div class="text-xs text-gray-500">
 						{$i18n.t(
 							'Direct Connections allow users to connect to their own OpenAI compatible API endpoints.'
 						)}

src/lib/components/workspace/Prompts.svelte

@@ -378,6 +378,6 @@
 	{/if}
 {:else}
 	<div class="w-full h-full flex justify-center items-center">
-		<Spinner />
+		<Spinner className="size-5" />
 	</div>
 {/if}