From 3dc34c240291887ce6d68f55ff1ee315fefb356c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 10 May 2025 18:33:52 +0400
Subject: [PATCH] feat: external reranker settings ui

---
 .../admin/Settings/Documents.svelte           | 133 +++++++++++-------
 1 file changed, 85 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 108c6cb1d..a3a5299bc 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -645,6 +645,41 @@
 							</div>
 
 							{#if RAGConfig.ENABLE_RAG_HYBRID_SEARCH === true}
+								<div class="  mb-2.5 flex flex-col w-full justify-between">
+									<div class="flex w-full justify-between">
+										<div class=" self-center text-xs font-medium">
+											{$i18n.t('Reranking Engine')}
+										</div>
+										<div class="flex items-center relative">
+											<select
+												class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
+												bind:value={RAGConfig.RAG_RERANKING_ENGINE}
+												placeholder="Select a reranking model engine"
+											>
+												<option value="">{$i18n.t('Default (SentenceTransformers)')}</option>
+												<option value="external">{$i18n.t('External')}</option>
+											</select>
+										</div>
+									</div>
+
+									{#if RAGConfig.RAG_RERANKING_ENGINE === 'external'}
+										<div class="my-0.5 flex gap-2 pr-2">
+											<input
+												class="flex-1 w-full rounded-lg text-sm bg-transparent outline-hidden"
+												placeholder={$i18n.t('API Base URL')}
+												bind:value={RAGConfig.RAG_EXTERNAL_RERANKER_URL}
+												required
+											/>
+
+											<SensitiveInput
+												placeholder={$i18n.t('API Key')}
+												bind:value={RAGConfig.RAG_EXTERNAL_RERANKER_API_URL}
+												required={false}
+											/>
+										</div>
+									{/if}
+								</div>
+
 								<div class="  mb-2.5 flex flex-col w-full">
 									<div class=" mb-1 text-xs font-medium">{$i18n.t('Reranking Model')}</div>
 
@@ -656,62 +691,64 @@
 													placeholder={$i18n.t('Set reranking model (e.g. {{model}})', {
 														model: 'BAAI/bge-reranker-v2-m3'
 													})}
-													bind:value={rerankingModel}
+													bind:value={RAGConfig.RAG_RERANKING_MODEL}
 												/>
 											</div>
-											<button
-												class="px-2.5 bg-transparent text-gray-800 dark:bg-transparent dark:text-gray-100 rounded-lg transition"
-												on:click={() => {
-													rerankingModelUpdateHandler();
-												}}
-												disabled={updateRerankingModelLoading}
-											>
-												{#if updateRerankingModelLoading}
-													<div class="self-center">
-														<svg
-															class=" w-4 h-4"
-															viewBox="0 0 24 24"
-															fill="currentColor"
-															xmlns="http://www.w3.org/2000/svg"
-														>
-															<style>
-																.spinner_ajPY {
-																	transform-origin: center;
-																	animation: spinner_AtaB 0.75s infinite linear;
-																}
-
-																@keyframes spinner_AtaB {
-																	100% {
-																		transform: rotate(360deg);
+											{#if RAGConfig.RAG_RERANKING_ENGINE === ''}
+												<button
+													class="px-2.5 bg-transparent text-gray-800 dark:bg-transparent dark:text-gray-100 rounded-lg transition"
+													on:click={() => {
+														rerankingModelUpdateHandler();
+													}}
+													disabled={updateRerankingModelLoading}
+												>
+													{#if updateRerankingModelLoading}
+														<div class="self-center">
+															<svg
+																class=" w-4 h-4"
+																viewBox="0 0 24 24"
+																fill="currentColor"
+																xmlns="http://www.w3.org/2000/svg"
+															>
+																<style>
+																	.spinner_ajPY {
+																		transform-origin: center;
+																		animation: spinner_AtaB 0.75s infinite linear;
 																	}
-																}
-															</style>
+
+																	@keyframes spinner_AtaB {
+																		100% {
+																			transform: rotate(360deg);
+																		}
+																	}
+																</style>
+																<path
+																	d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+																	opacity=".25"
+																/>
+																<path
+																	d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+																	class="spinner_ajPY"
+																/>
+															</svg>
+														</div>
+													{:else}
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															viewBox="0 0 16 16"
+															fill="currentColor"
+															class="w-4 h-4"
+														>
 															<path
-																d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-																opacity=".25"
+																d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
 															/>
 															<path
-																d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-																class="spinner_ajPY"
+																d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
 															/>
 														</svg>
-													</div>
-												{:else}
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														viewBox="0 0 16 16"
-														fill="currentColor"
-														class="w-4 h-4"
-													>
-														<path
-															d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
-														/>
-														<path
-															d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
-														/>
-													</svg>
-												{/if}
-											</button>
+													{/if}
+												</button>
+											{/if}
 										</div>
 									</div>
 								</div>