From 8a9f8627017bd0a74cbd647891552b26e56aabb7 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 8 Sep 2025 19:07:00 +0400
Subject: [PATCH] refac

---
 src/lib/components/AddConnectionModal.svelte  | 130 ++++++++++++------
 src/lib/components/AddServerModal.svelte      |   7 -
 .../Connections/OllamaConnection.svelte       |   1 +
 .../Connections/OpenAIConnection.svelte       |   8 +-
 .../Settings/Connections/Connection.svelte    |   6 -
 5 files changed, 91 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/AddConnectionModal.svelte b/src/lib/components/AddConnectionModal.svelte
index fd19c0b302..02784a7abb 100644
--- a/src/lib/components/AddConnectionModal.svelte
+++ b/src/lib/components/AddConnectionModal.svelte
@@ -31,6 +31,7 @@
 
 	let url = '';
 	let key = '';
+	let auth_type = 'bearer';
 
 	let connectionType = 'external';
 	let azure = false;
@@ -73,6 +74,7 @@
 			{
 				url,
 				key,
+				auth_type,
 				config: {
 					azure: azure,
 					api_version: apiVersion
@@ -140,6 +142,7 @@
 		const connection = {
 			url,
 			key,
+			auth_type,
 			config: {
 				enable: enable,
 				tags: tags,
@@ -157,6 +160,7 @@
 
 		url = '';
 		key = '';
+		auth_type = 'bearer';
 		prefixId = '';
 		tags = [];
 		modelIds = [];
@@ -167,6 +171,8 @@
 			url = connection.url;
 			key = connection.key;
 
+			auth_type = connection.auth_type ?? 'bearer';
+
 			enable = connection.config?.enable ?? true;
 			tags = connection.config?.tags ?? [];
 			prefixId = connection.config?.prefix_id ?? '';
@@ -305,23 +311,63 @@
 
 						<div class="flex gap-2 mt-2">
 							<div class="flex flex-col w-full">
-								<div
-									class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
+								<label
+									for="select-bearer-or-session"
+									class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+									>{$i18n.t('Auth')}</label
 								>
-									{$i18n.t('Key')}
-								</div>
 
-								<div class="flex-1">
-									<SensitiveInput
-										inputClassName={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
-										bind:value={key}
-										placeholder={$i18n.t('API Key')}
-										required={false}
-									/>
+								<div class="flex gap-2">
+									<div class="flex-shrink-0 self-start">
+										<select
+											id="select-bearer-or-session"
+											class={`w-full text-sm bg-transparent pr-5 ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											bind:value={auth_type}
+										>
+											<option value="none">{$i18n.t('None')}</option>
+											<option value="bearer">{$i18n.t('Bearer')}</option>
+
+											{#if !ollama}
+												<option value="session">{$i18n.t('Session')}</option>
+												{#if !direct}
+													<option value="oauth">{$i18n.t('OAuth')}</option>
+												{/if}
+											{/if}
+										</select>
+									</div>
+
+									<div class="flex flex-1 items-center">
+										{#if auth_type === 'bearer'}
+											<SensitiveInput
+												bind:value={key}
+												placeholder={$i18n.t('API Key')}
+												required={false}
+											/>
+										{:else if auth_type === 'none'}
+											<div
+												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+											>
+												{$i18n.t('No authentication')}
+											</div>
+										{:else if auth_type === 'session'}
+											<div
+												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+											>
+												{$i18n.t('Forwards system user session credentials to authenticate')}
+											</div>
+										{:else if auth_type === 'oauth'}
+											<div
+												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+											>
+												{$i18n.t('Forwards system user OAuth access token to authenticate')}
+											</div>
+										{/if}
+									</div>
 								</div>
 							</div>
+						</div>
 
+						<div class="flex gap-2 mt-2">
 							<div class="flex flex-col w-full">
 								<label
 									for="prefix-id-input"
@@ -397,35 +443,7 @@
 							</div>
 						{/if}
 
-						<div class="flex gap-2 mt-2">
-							<div class="flex flex-col w-full">
-								<div
-									class={`mb-0.5 text-xs text-gray-500
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
-								>
-									{$i18n.t('Tags')}
-								</div>
-
-								<div class="flex-1">
-									<Tags
-										bind:tags
-										on:add={(e) => {
-											tags = [
-												...tags,
-												{
-													name: e.detail
-												}
-											];
-										}}
-										on:delete={(e) => {
-											tags = tags.filter((tag) => tag.name !== e.detail);
-										}}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
+						<hr class=" border-gray-50 dark:border-gray-850 my-2.5 w-full" />
 
 						<div class="flex flex-col w-full">
 							<div class="mb-1 flex justify-between">
@@ -512,6 +530,36 @@
 						</div>
 					</div>
 
+					<hr class=" border-gray-50 dark:border-gray-850 my-2.5 w-full" />
+
+					<div class="flex gap-2">
+						<div class="flex flex-col w-full">
+							<div
+								class={`mb-0.5 text-xs text-gray-500
+								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
+							>
+								{$i18n.t('Tags')}
+							</div>
+
+							<div class="flex-1 mt-0.5">
+								<Tags
+									bind:tags
+									on:add={(e) => {
+										tags = [
+											...tags,
+											{
+												name: e.detail
+											}
+										];
+									}}
+									on:delete={(e) => {
+										tags = tags.filter((tag) => tag.name !== e.detail);
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+
 					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
 						{#if edit}
 							<button
diff --git a/src/lib/components/AddServerModal.svelte b/src/lib/components/AddServerModal.svelte
index 6863c8cbb8..fdd905aef0 100644
--- a/src/lib/components/AddServerModal.svelte
+++ b/src/lib/components/AddServerModal.svelte
@@ -288,7 +288,6 @@
 
 											{#if !direct}
 												<option value="oauth">{$i18n.t('OAuth')}</option>
-												<option value="request_headers">{$i18n.t('Request Headers')}</option>
 											{/if}
 										</select>
 									</div>
@@ -312,12 +311,6 @@
 											>
 												{$i18n.t('Forwards system user OAuth access token to authenticate')}
 											</div>
-										{:else if auth_type === 'request_headers'}
-											<div
-												class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-											>
-												{$i18n.t('Forwards system user headers to authenticate')}
-											</div>
 										{/if}
 									</div>
 								</div>
diff --git a/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte b/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
index 48976f0769..3e25965391 100644
--- a/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
+++ b/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
@@ -71,6 +71,7 @@
 			class="w-full text-sm bg-transparent outline-hidden"
 			placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
 			bind:value={url}
+			readonly={true}
 		/>
 	</Tooltip>
 
diff --git a/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte b/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
index b82e47be76..a4c2ada059 100644
--- a/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
+++ b/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
@@ -69,6 +69,7 @@
 					placeholder={$i18n.t('API Base URL')}
 					bind:value={url}
 					autocomplete="off"
+					readonly={true}
 				/>
 
 				{#if pipeline}
@@ -94,13 +95,6 @@
 					</div>
 				{/if}
 			</div>
-
-			<SensitiveInput
-				inputClassName=" outline-hidden bg-transparent w-full"
-				placeholder={$i18n.t('API Key')}
-				required={false}
-				bind:value={key}
-			/>
 		</div>
 	</Tooltip>
 
diff --git a/src/lib/components/chat/Settings/Connections/Connection.svelte b/src/lib/components/chat/Settings/Connections/Connection.svelte
index ea9089f2f1..c8a5ec152a 100644
--- a/src/lib/components/chat/Settings/Connections/Connection.svelte
+++ b/src/lib/components/chat/Settings/Connections/Connection.svelte
@@ -72,12 +72,6 @@
 					autocomplete="off"
 				/>
 			</div>
-
-			<SensitiveInput
-				inputClassName="bg-transparent w-full"
-				placeholder={$i18n.t('API Key')}
-				bind:value={key}
-			/>
 		</div>
 	</Tooltip>