refac: connections

src/lib/apis/openai/index.ts

@@ -241,11 +241,39 @@ 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
 ) => {
-	let error = null;
+	if (!url) {
+		throw 'OpenAI: URL is required';
+	}
 
-	const res = await fetch(`${OPENAI_API_BASE_URL}/verify`, {
+	let error = null;
+	let res = null;
+
+	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();
+			})
+			.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',
@@ -269,6 +297,7 @@ export const verifyOpenAIConnection = async (
 		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) => {
+		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,35 +27,21 @@
 
 	onMount(async () => {});
 
+	const addConnectionHandler = async (connection) => {};
+
 	const submitHandler = async () => {};
 	const updateHandler = async () => {};
 </script>
 
-<!-- <AddConnectionModal
+<AddConnectionModal direct bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
-	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="pr-1.5">
-				<div class="flex justify-between items-center text-sm">
-					<div class="  font-medium">{$i18n.t('Direct Connections')}</div>
-				</div>
-
-				<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>
+						<div class="font-medium">{$i18n.t('Manage Direct Connections')}</div>
 
 						<Tooltip content={$i18n.t(`Add Connection`)}>
 							<button
@@ -96,11 +84,16 @@
 						{/each}
 					</div>
 				</div>
-				{/if}
-			</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>
+			</div>
+		</div>
 	</div>
 
 	<div class="flex justify-end pt-3 text-sm font-medium">