From 436e3ff7de122961b8817e79a0d3f28f3b8c91ac Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 2 Apr 2025 20:42:23 -0700
Subject: [PATCH] refac

---
 src/lib/components/AddServerModal.svelte      | 15 ++++---
 src/lib/components/chat/Settings/Tools.svelte |  4 +-
 .../chat/Settings/Tools/Connection.svelte     | 45 ++++++++-----------
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/AddServerModal.svelte b/src/lib/components/AddServerModal.svelte
index ca07e8b88..d0f79c576 100644
--- a/src/lib/components/AddServerModal.svelte
+++ b/src/lib/components/AddServerModal.svelte
@@ -25,7 +25,7 @@
 	export let connection = null;
 
 	let url = '';
-	let openApiPath = '/openapi.json';
+	let path = '/openapi.json';
 
 	let auth_type = 'bearer';
 	let key = '';
@@ -42,6 +42,8 @@
 
 		const connection = {
 			url,
+			path,
+			auth_type,
 			key,
 			config: {
 				enable: enable
@@ -55,15 +57,18 @@
 
 		url = '';
 		key = '';
+		path = '/openapi.json';
+		auth_type = 'bearer';
+
 		enable = true;
 	};
 
 	const init = () => {
 		if (connection) {
 			url = connection.url;
-			openApiPath = connection.openApiPath ?? '/openapi.json';
+			path = connection?.path ?? '/openapi.json';
 
-			auth_type = connection.auth_type ?? 'bearer';
+			auth_type = connection?.auth_type ?? 'bearer';
 			key = connection?.key ?? '';
 
 			enable = connection.config?.enable ?? true;
@@ -137,7 +142,7 @@
 									<input
 										class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
 										type="text"
-										bind:value={openApiPath}
+										bind:value={path}
 										placeholder={$i18n.t('openapi.json Path')}
 										autocomplete="off"
 										required
@@ -155,7 +160,7 @@
 						<div class="text-xs text-gray-500 mt-1">
 							{$i18n.t(`WebUI will make requests to "{{url}}{{path}}"`, {
 								url: url,
-								path: openApiPath
+								path: path
 							})}
 						</div>
 
diff --git a/src/lib/components/chat/Settings/Tools.svelte b/src/lib/components/chat/Settings/Tools.svelte
index 7195fc699..bb207ce7f 100644
--- a/src/lib/components/chat/Settings/Tools.svelte
+++ b/src/lib/components/chat/Settings/Tools.svelte
@@ -74,9 +74,7 @@
 						<div class="flex flex-col gap-1.5">
 							{#each servers as server, idx}
 								<Connection
-									bind:url={server.url}
-									bind:key={server.key}
-									bind:config={server.config}
+									bind:connection={server}
 									onSubmit={() => {
 										updateHandler();
 									}}
diff --git a/src/lib/components/chat/Settings/Tools/Connection.svelte b/src/lib/components/chat/Settings/Tools/Connection.svelte
index 426b6a137..27dd1758c 100644
--- a/src/lib/components/chat/Settings/Tools/Connection.svelte
+++ b/src/lib/components/chat/Settings/Tools/Connection.svelte
@@ -11,11 +11,7 @@
 	export let onDelete = () => {};
 	export let onSubmit = () => {};
 
-	export let pipeline = false;
-
-	export let url = '';
-	export let key = '';
-	export let config = {};
+	export let connection = null;
 
 	let showConfigModal = false;
 	let showDeleteConfirmDialog = false;
@@ -25,19 +21,13 @@
 	edit
 	direct
 	bind:show={showConfigModal}
-	connection={{
-		url,
-		key,
-		config
-	}}
+	{connection}
 	onDelete={() => {
 		showDeleteConfirmDialog = true;
 	}}
-	onSubmit={(connection) => {
-		url = connection.url;
-		key = connection.key;
-		config = connection.config;
-		onSubmit(connection);
+	onSubmit={(c) => {
+		connection = c;
+		onSubmit(c);
 	}}
 />
 
@@ -52,12 +42,13 @@
 <div class="flex w-full gap-2 items-center">
 	<Tooltip
 		className="w-full relative"
-		content={$i18n.t(`WebUI will make requests to "{{url}}/openapi.json"`, {
-			url: url
+		content={$i18n.t(`WebUI will make requests to "{{url}}{{path}}"`, {
+			url: connection?.url,
+			path: connection?.path ?? '/openapi.json'
 		})}
 		placement="top-start"
 	>
-		{#if !(config?.enable ?? true)}
+		{#if !(connection?.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>
@@ -65,19 +56,21 @@
 		<div class="flex w-full">
 			<div class="flex-1 relative">
 				<input
-					class=" outline-hidden w-full bg-transparent {pipeline ? 'pr-8' : ''}"
+					class=" outline-hidden w-full bg-transparent"
 					placeholder={$i18n.t('API Base URL')}
-					bind:value={url}
+					bind:value={connection.url}
 					autocomplete="off"
 				/>
 			</div>
 
-			<SensitiveInput
-				inputClassName=" outline-hidden bg-transparent w-full"
-				placeholder={$i18n.t('API Key')}
-				bind:value={key}
-				required={false}
-			/>
+			{#if (connection?.auth_type ?? 'bearer') === 'bearer'}
+				<SensitiveInput
+					inputClassName=" outline-hidden bg-transparent w-full"
+					placeholder={$i18n.t('API Key')}
+					bind:value={connection.key}
+					required={false}
+				/>
+			{/if}
 		</div>
 	</Tooltip>