refac: connections

This commit is contained in:
Timothy Jaeryang Baek 2025-02-11 23:21:09 -08:00
parent 689317c5b5
commit 862b5a947a
3 changed files with 110 additions and 84 deletions

View File

@ -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();
})
.catch((err) => {
error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
return [];
});
.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;
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
})
})
.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;

View File

@ -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'));

View File

@ -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">