refac: ollama connections

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

@@ -5,6 +5,7 @@
 
 	import { models } from '$lib/stores';
 	import { verifyOpenAIConnection } from '$lib/apis/openai';
+	import { verifyOllamaConnection } from '$lib/apis/ollama';
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
@@ -19,6 +20,7 @@
 
 	export let show = false;
 	export let edit = false;
+	export let ollama = false;
 
 	export let connection = null;
 
@@ -33,6 +35,16 @@
 
 	let loading = false;
 
+	const verifyOllamaHandler = async () => {
+		const res = await verifyOllamaConnection(localStorage.token, url, key).catch((error) => {
+			toast.error(error);
+		});
+
+		if (res) {
+			toast.success($i18n.t('Server connection verified'));
+		}
+	};
+
 	const verifyOpenAIHandler = async () => {
 		const res = await verifyOpenAIConnection(localStorage.token, url, key).catch((error) => {
 			toast.error(error);
@@ -43,6 +55,14 @@
 		}
 	};
 
+	const verifyHandler = () => {
+		if (ollama) {
+			verifyOllamaHandler();
+		} else {
+			verifyOpenAIHandler();
+		}
+	};
+
 	const addModelHandler = () => {
 		if (modelId) {
 			modelIds = [...modelIds, modelId];
@@ -53,7 +73,7 @@
 	const submitHandler = async () => {
 		loading = true;
 
-		if (!url || !key) {
+		if (!ollama && (!url || !key)) {
 			loading = false;
 			toast.error('URL and Key are required');
 			return;
@@ -159,7 +179,7 @@
 								<button
 									class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
 									on:click={() => {
-										verifyOpenAIHandler();
+										verifyHandler();
 									}}
 									type="button"
 								>
@@ -194,7 +214,7 @@
 										className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
 										bind:value={key}
 										placeholder={$i18n.t('API Key')}
-										required
+										required={!ollama}
 									/>
 								</div>
 							</div>
@@ -249,9 +269,15 @@
 								</div>
 							{:else}
 								<div class="text-gray-500 text-xs text-center py-2 px-10">
-									{$i18n.t('Leave empty to include all models from "{{URL}}/models" endpoint', {
-										URL: url
-									})}
+									{#if ollama}
+										{$i18n.t('Leave empty to include all models from "{{URL}}/api/tags" endpoint', {
+											URL: url
+										})}
+									{:else}
+										{$i18n.t('Leave empty to include all models from "{{URL}}/models" endpoint', {
+											URL: url
+										})}
+									{/if}
 								</div>
 							{/if}
 						</div>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { getContext, tick } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Cog6 from '$lib/components/icons/Cog6.svelte';
+	import AddConnectionModal from './AddConnectionModal.svelte';
+
+	export let onDelete = () => {};
+	export let onSubmit = () => {};
+
+	export let url = '';
+	export let config = {};
+
+	let showConfigModal = false;
+</script>
+
+<AddConnectionModal
+	ollama
+	edit
+	bind:show={showConfigModal}
+	connection={{
+		url,
+		key: config?.key ?? '',
+		config: config
+	}}
+	{onDelete}
+	onSubmit={(connection) => {
+		url = connection.url;
+		config = { ...connection.config, key: connection.key };
+		onSubmit(connection);
+	}}
+/>
+
+<div class="flex gap-1.5">
+	<Tooltip
+		className="w-full relative"
+		content={$i18n.t(`WebUI will make requests to "{{url}}/api/chat"`, {
+			url
+		})}
+		placement="top-start"
+	>
+		{#if !(config?.enable ?? true)}
+			<div
+				class="absolute top-0 bottom-0 left-0 right-0 opacity-60 bg-white dark:bg-gray-900 z-10"
+			></div>
+		{/if}
+
+		<input
+			class="w-full text-sm bg-transparent outline-none"
+			placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
+			bind:value={url}
+		/>
+	</Tooltip>
+
+	<div class="flex gap-1">
+		<Tooltip content={$i18n.t('Configure')} className="self-start">
+			<button
+				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+				on:click={() => {
+					showConfigModal = true;
+				}}
+				type="button"
+			>
+				<Cog6 />
+			</button>
+		</Tooltip>
+	</div>
+</div>

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

@@ -5,7 +5,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 	import Cog6 from '$lib/components/icons/Cog6.svelte';
-	import OpenAIConnectionModal from './OpenAIConnectionModal.svelte';
+	import AddConnectionModal from './AddConnectionModal.svelte';
 	import { connect } from 'socket.io-client';
 
 	export let onDelete = () => {};
@@ -20,7 +20,7 @@
 	let showConfigModal = false;
 </script>
 
-<OpenAIConnectionModal
+<AddConnectionModal
 	edit
 	bind:show={showConfigModal}
 	connection={{