refac

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();
 									}}

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>