refac: connections

src/lib/apis/openai/index.ts

@@ -241,33 +241,62 @@ export const getOpenAIModels = async (token: string, urlIdx?: number) => {
 export const verifyOpenAIConnection = async (
 	token: string = '',
 	url: string = 'https://api.openai.com/v1',
-	key: string = ''
+	key: string = '',
+	direct: boolean = false
 ) => {
+	if (!url) {
+		throw 'OpenAI: URL is required';
+	}
+
 	let error = null;
+	let res = null;
 
-	const res = await fetch(`${OPENAI_API_BASE_URL}/verify`, {
-		method: 'POST',
-		headers: {
-			Accept: 'application/json',
-			Authorization: `Bearer ${token}`,
-			'Content-Type': 'application/json'
-		},
-		body: JSON.stringify({
-			url,
-			key
+	if (direct) {
+		res = await fetch(`${url}/models`, {
+			method: 'GET',
+			headers: {
+				Accept: 'application/json',
+				Authorization: `Bearer ${key}`,
+				'Content-Type': 'application/json'
+			}
 		})
-	})
-		.then(async (res) => {
-			if (!res.ok) throw await res.json();
-			return res.json();
+			.then(async (res) => {
+				if (!res.ok) throw await res.json();
+				return res.json();
+			})
+			.catch((err) => {
+				error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
+				return [];
+			});
+
+		if (error) {
+			throw error;
+		}
+	} else {
+		res = await fetch(`${OPENAI_API_BASE_URL}/verify`, {
+			method: 'POST',
+			headers: {
+				Accept: 'application/json',
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				url,
+				key
+			})
 		})
-		.catch((err) => {
-			error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
-			return [];
-		});
-
-	if (error) {
-		throw error;
+			.then(async (res) => {
+				if (!res.ok) throw await res.json();
+				return res.json();
+			})
+			.catch((err) => {
+				error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
+				return [];
+			});
+
+		if (error) {
+			throw error;
+		}
 	}
 
 	return res;

src/lib/components/AddConnectionModal.svelte

@@ -20,7 +20,9 @@
 
 	export let show = false;
 	export let edit = false;
+
 	export let ollama = false;
+	export let direct = false;
 
 	export let connection = null;
 
@@ -46,9 +48,11 @@
 	};
 
 	const verifyOpenAIHandler = async () => {
-		const res = await verifyOpenAIConnection(localStorage.token, url, key).catch((error) => {
-			toast.error(`${error}`);
-		});
+		const res = await verifyOpenAIConnection(localStorage.token, url, key, direct).catch(
+			(error) => {
+				toast.error(`${error}`);
+			}
+		);
 
 		if (res) {
 			toast.success($i18n.t('Server connection verified'));

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

@@ -14,6 +14,8 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Connection from './Connections/Connection.svelte';
 
+	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
+
 	const getModels = async () => {
 		const models = await _getModels(localStorage.token);
 		return models;
@@ -25,82 +27,73 @@
 
 	onMount(async () => {});
 
+	const addConnectionHandler = async (connection) => {};
+
 	const submitHandler = async () => {};
 	const updateHandler = async () => {};
 </script>
 
-<!-- <AddConnectionModal
-	bind:show={showConnectionModal}
-	onSubmit={addConnectionHandler}
-/> -->
+<AddConnectionModal direct bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
 
 <form class="flex flex-col h-full justify-between text-sm" on:submit|preventDefault={submitHandler}>
 	<div class=" overflow-y-scroll scrollbar-hidden h-full">
 		<div class="my-2">
-			<div class="space-y-2 pr-1.5">
-				<div class="flex justify-between items-center text-sm">
-					<div class="  font-medium">{$i18n.t('Direct Connections')}</div>
+			<div class="pr-1.5">
+				<div class="">
+					<div class="flex justify-between items-center">
+						<div class="font-medium">{$i18n.t('Manage Direct Connections')}</div>
+
+						<Tooltip content={$i18n.t(`Add Connection`)}>
+							<button
+								class="px-1"
+								on:click={() => {
+									showConnectionModal = true;
+								}}
+								type="button"
+							>
+								<Plus />
+							</button>
+						</Tooltip>
+					</div>
+
+					<div class="flex flex-col gap-1.5 mt-1.5">
+						{#each config?.OPENAI_API_BASE_URLS ?? [] as url, idx}
+							<Connection
+								bind:url
+								bind:key={config.OPENAI_API_KEYS[idx]}
+								bind:config={config.OPENAI_API_CONFIGS[idx]}
+								onSubmit={() => {
+									updateHandler();
+								}}
+								onDelete={() => {
+									config.OPENAI_API_BASE_URLS = config.OPENAI_API_BASE_URLS.filter(
+										(url, urlIdx) => idx !== urlIdx
+									);
+									config.OPENAI_API_KEYS = config.OPENAI_API_KEYS.filter(
+										(key, keyIdx) => idx !== keyIdx
+									);
+
+									let newConfig = {};
+									config.OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
+										newConfig[newIdx] =
+											config.OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
+									});
+									config.OPENAI_API_CONFIGS = newConfig;
+								}}
+							/>
+						{/each}
+					</div>
 				</div>
 
+				<hr class=" border-gray-50 dark:border-gray-850" />
+
 				<div class="mt-1.5">
 					<div class="text-xs text-gray-500">
 						{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
 					</div>
 				</div>
-
-				{#if false}
-					<hr class=" border-gray-50 dark:border-gray-850" />
-
-					<div class="">
-						<div class="flex justify-between items-center">
-							<div class="font-medium">{$i18n.t('Manage Connections')}</div>
-
-							<Tooltip content={$i18n.t(`Add Connection`)}>
-								<button
-									class="px-1"
-									on:click={() => {
-										showConnectionModal = true;
-									}}
-									type="button"
-								>
-									<Plus />
-								</button>
-							</Tooltip>
-						</div>
-
-						<div class="flex flex-col gap-1.5 mt-1.5">
-							{#each config?.OPENAI_API_BASE_URLS ?? [] as url, idx}
-								<Connection
-									bind:url
-									bind:key={config.OPENAI_API_KEYS[idx]}
-									bind:config={config.OPENAI_API_CONFIGS[idx]}
-									onSubmit={() => {
-										updateHandler();
-									}}
-									onDelete={() => {
-										config.OPENAI_API_BASE_URLS = config.OPENAI_API_BASE_URLS.filter(
-											(url, urlIdx) => idx !== urlIdx
-										);
-										config.OPENAI_API_KEYS = config.OPENAI_API_KEYS.filter(
-											(key, keyIdx) => idx !== keyIdx
-										);
-
-										let newConfig = {};
-										config.OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
-											newConfig[newIdx] =
-												config.OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
-										});
-										config.OPENAI_API_CONFIGS = newConfig;
-									}}
-								/>
-							{/each}
-						</div>
-					</div>
-				{/if}
 			</div>
 		</div>
-
-		<hr class=" border-gray-50 dark:border-gray-850" />
 	</div>
 
 	<div class="flex justify-end pt-3 text-sm font-medium">