From 40ddd172e0312aaa8e327d6c7e05c927bc95dfe2 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 26 Feb 2025 15:56:45 -0800
Subject: [PATCH] refac: web search settings ui

---
 .../admin/Settings/WebSearch.svelte           | 633 +++++++++---------
 1 file changed, 324 insertions(+), 309 deletions(-)

diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index 906530e5a..b7bd071f0 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -85,401 +85,416 @@
 >
 	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden h-full">
 		{#if webConfig}
-			<div>
-				<div class=" mb-1 text-sm font-medium">
-					{$i18n.t('Web Search')}
-				</div>
+			<div class="">
+				<div class="mb-3">
+					<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
 
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
+					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+
+					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-medium">
-							{$i18n.t('Enable Web Search')}
+							{$i18n.t('Web Search')}
+						</div>
+						<div class="flex items-center relative">
+							<Switch bind:state={webConfig.search.enabled} />
 						</div>
-
-						<Switch bind:state={webConfig.search.enabled} />
 					</div>
-				</div>
 
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">{$i18n.t('Web Search 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={webConfig.search.engine}
-							placeholder={$i18n.t('Select a engine')}
-							required
-						>
-							<option disabled selected value="">{$i18n.t('Select a engine')}</option>
-							{#each webSearchEngines as engine}
-								<option value={engine}>{engine}</option>
-							{/each}
-						</select>
+					<div class="  mb-2.5 flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">
+							{$i18n.t('Web Search 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={webConfig.search.engine}
+								placeholder={$i18n.t('Select a engine')}
+								required
+							>
+								<option disabled selected value="">{$i18n.t('Select a engine')}</option>
+								{#each webSearchEngines as engine}
+									<option value={engine}>{engine}</option>
+								{/each}
+							</select>
+						</div>
 					</div>
-				</div>
 
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
-						<Tooltip content={$i18n.t('Full Context Mode')} placement="top-start">
-							{$i18n.t('Bypass Embedding and Retrieval')}
-						</Tooltip>
-					</div>
-					<div class="flex items-center relative">
-						<Tooltip
-							content={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL
-								? 'Inject the entire content as context for comprehensive processing, this is recommended for complex queries.'
-								: 'Default to segmented retrieval for focused and relevant content extraction, this is recommended for most cases.'}
-						>
-							<Switch bind:state={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL} />
-						</Tooltip>
-					</div>
-				</div>
-
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">{$i18n.t('Trust Proxy Environment')}</div>
-					<div class="flex items-center relative">
-						<Tooltip
-							content={webConfig.search.trust_env
-								? 'Use proxy designated by http_proxy and https_proxy environment variables to fetch page contents'
-								: 'Use no proxy to fetch page contents.'}
-						>
-							<Switch bind:state={webConfig.search.trust_env} />
-						</Tooltip>
-					</div>
-				</div>
-
-				{#if webConfig.search.engine !== ''}
-					<div class="mt-1.5">
+					{#if webConfig.search.engine !== ''}
 						{#if webConfig.search.engine === 'searxng'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Searxng Query URL')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Searxng Query URL')}
+									</div>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-											type="text"
-											placeholder={$i18n.t('Enter Searxng Query URL')}
-											bind:value={webConfig.search.searxng_query_url}
-											autocomplete="off"
-										/>
+									<div class="flex w-full">
+										<div class="flex-1">
+											<input
+												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+												type="text"
+												placeholder={$i18n.t('Enter Searxng Query URL')}
+												bind:value={webConfig.search.searxng_query_url}
+												autocomplete="off"
+											/>
+										</div>
 									</div>
 								</div>
 							</div>
 						{:else if webConfig.search.engine === 'google_pse'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Google PSE API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Google PSE API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Google PSE API Key')}
-									bind:value={webConfig.search.google_pse_api_key}
-								/>
-							</div>
-							<div class="mt-1.5">
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Google PSE Engine Id')}
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Google PSE API Key')}
+										bind:value={webConfig.search.google_pse_api_key}
+									/>
 								</div>
+								<div class="mt-1.5">
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Google PSE Engine Id')}
+									</div>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-											type="text"
-											placeholder={$i18n.t('Enter Google PSE Engine Id')}
-											bind:value={webConfig.search.google_pse_engine_id}
-											autocomplete="off"
-										/>
+									<div class="flex w-full">
+										<div class="flex-1">
+											<input
+												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+												type="text"
+												placeholder={$i18n.t('Enter Google PSE Engine Id')}
+												bind:value={webConfig.search.google_pse_engine_id}
+												autocomplete="off"
+											/>
+										</div>
 									</div>
 								</div>
 							</div>
 						{:else if webConfig.search.engine === 'brave'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Brave Search API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Brave Search API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Brave Search API Key')}
-									bind:value={webConfig.search.brave_search_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Brave Search API Key')}
+										bind:value={webConfig.search.brave_search_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'kagi'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Kagi Search API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Kagi Search API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Kagi Search API Key')}
-									bind:value={webConfig.search.kagi_search_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Kagi Search API Key')}
+										bind:value={webConfig.search.kagi_search_api_key}
+									/>
+								</div>
+								.
 							</div>
 						{:else if webConfig.search.engine === 'mojeek'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Mojeek Search API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Mojeek Search API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Mojeek Search API Key')}
-									bind:value={webConfig.search.mojeek_search_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Mojeek Search API Key')}
+										bind:value={webConfig.search.mojeek_search_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'bocha'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Bocha Search API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Bocha Search API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Bocha Search API Key')}
-									bind:value={webConfig.search.bocha_search_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Bocha Search API Key')}
+										bind:value={webConfig.search.bocha_search_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'serpstack'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Serpstack API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Serpstack API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Serpstack API Key')}
-									bind:value={webConfig.search.serpstack_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Serpstack API Key')}
+										bind:value={webConfig.search.serpstack_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'serper'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Serper API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Serper API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Serper API Key')}
-									bind:value={webConfig.search.serper_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Serper API Key')}
+										bind:value={webConfig.search.serper_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'serply'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Serply API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Serply API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Serply API Key')}
-									bind:value={webConfig.search.serply_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Serply API Key')}
+										bind:value={webConfig.search.serply_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'searchapi'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('SearchApi API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('SearchApi API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter SearchApi API Key')}
-									bind:value={webConfig.search.searchapi_api_key}
-								/>
-							</div>
-							<div class="mt-1.5">
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('SearchApi Engine')}
+									<SensitiveInput
+										placeholder={$i18n.t('Enter SearchApi API Key')}
+										bind:value={webConfig.search.searchapi_api_key}
+									/>
 								</div>
+								<div class="mt-1.5">
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('SearchApi Engine')}
+									</div>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-											type="text"
-											placeholder={$i18n.t('Enter SearchApi Engine')}
-											bind:value={webConfig.search.searchapi_engine}
-											autocomplete="off"
-										/>
+									<div class="flex w-full">
+										<div class="flex-1">
+											<input
+												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+												type="text"
+												placeholder={$i18n.t('Enter SearchApi Engine')}
+												bind:value={webConfig.search.searchapi_engine}
+												autocomplete="off"
+											/>
+										</div>
 									</div>
 								</div>
 							</div>
 						{:else if webConfig.search.engine === 'serpapi'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('SerpApi API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('SerpApi API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter SerpApi API Key')}
-									bind:value={webConfig.search.serpapi_api_key}
-								/>
-							</div>
-							<div class="mt-1.5">
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('SerpApi Engine')}
+									<SensitiveInput
+										placeholder={$i18n.t('Enter SerpApi API Key')}
+										bind:value={webConfig.search.serpapi_api_key}
+									/>
 								</div>
+								<div class="mt-1.5">
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('SerpApi Engine')}
+									</div>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-											type="text"
-											placeholder={$i18n.t('Enter SerpApi Engine')}
-											bind:value={webConfig.search.serpapi_engine}
-											autocomplete="off"
-										/>
+									<div class="flex w-full">
+										<div class="flex-1">
+											<input
+												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+												type="text"
+												placeholder={$i18n.t('Enter SerpApi Engine')}
+												bind:value={webConfig.search.serpapi_engine}
+												autocomplete="off"
+											/>
+										</div>
 									</div>
 								</div>
 							</div>
 						{:else if webConfig.search.engine === 'tavily'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Tavily API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Tavily API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Tavily API Key')}
-									bind:value={webConfig.search.tavily_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Tavily API Key')}
+										bind:value={webConfig.search.tavily_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'jina'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Jina API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Jina API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Jina API Key')}
-									bind:value={webConfig.search.jina_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Jina API Key')}
+										bind:value={webConfig.search.jina_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'exa'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Exa API Key')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Exa API Key')}
+									</div>
 
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Exa API Key')}
-									bind:value={webConfig.search.exa_api_key}
-								/>
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Exa API Key')}
+										bind:value={webConfig.search.exa_api_key}
+									/>
+								</div>
 							</div>
 						{:else if webConfig.search.engine === 'bing'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Bing Search V7 Endpoint')}
-								</div>
+							<div class="mb-2.5 flex w-full flex-col">
+								<div>
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Bing Search V7 Endpoint')}
+									</div>
 
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-											type="text"
-											placeholder={$i18n.t('Enter Bing Search V7 Endpoint')}
-											bind:value={webConfig.search.bing_search_v7_endpoint}
-											autocomplete="off"
-										/>
+									<div class="flex w-full">
+										<div class="flex-1">
+											<input
+												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+												type="text"
+												placeholder={$i18n.t('Enter Bing Search V7 Endpoint')}
+												bind:value={webConfig.search.bing_search_v7_endpoint}
+												autocomplete="off"
+											/>
+										</div>
 									</div>
 								</div>
-							</div>
 
-							<div class="mt-2">
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Bing Search V7 Subscription Key')}
+								<div class="mt-2">
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Bing Search V7 Subscription Key')}
+									</div>
+
+									<SensitiveInput
+										placeholder={$i18n.t('Enter Bing Search V7 Subscription Key')}
+										bind:value={webConfig.search.bing_search_v7_subscription_key}
+									/>
 								</div>
-
-								<SensitiveInput
-									placeholder={$i18n.t('Enter Bing Search V7 Subscription Key')}
-									bind:value={webConfig.search.bing_search_v7_subscription_key}
-								/>
 							</div>
 						{/if}
-					</div>
-				{/if}
+					{/if}
 
-				{#if webConfig.search.enabled}
-					<div class="mt-2 flex gap-2 mb-1">
-						<div class="w-full">
-							<div class=" self-center text-xs font-medium mb-1">
-								{$i18n.t('Search Result Count')}
+					{#if webConfig.search.enabled}
+						<div class="mb-2.5 flex w-full flex-col">
+							<div class="flex gap-2">
+								<div class="w-full">
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Search Result Count')}
+									</div>
+
+									<input
+										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+										placeholder={$i18n.t('Search Result Count')}
+										bind:value={webConfig.search.result_count}
+										required
+									/>
+								</div>
+
+								<div class="w-full">
+									<div class=" self-center text-xs font-medium mb-1">
+										{$i18n.t('Concurrent Requests')}
+									</div>
+
+									<input
+										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+										placeholder={$i18n.t('Concurrent Requests')}
+										bind:value={webConfig.search.concurrent_requests}
+										required
+									/>
+								</div>
+							</div>
+						</div>
+
+						<div class="mb-2.5 flex w-full flex-col">
+							<div class="  text-xs font-medium mb-1">
+								{$i18n.t('Domain Filter List')}
 							</div>
 
 							<input
 								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-								placeholder={$i18n.t('Search Result Count')}
-								bind:value={webConfig.search.result_count}
-								required
+								placeholder={$i18n.t(
+									'Enter domains separated by commas (e.g., example.com,site.org)'
+								)}
+								bind:value={webConfig.search.domain_filter_list}
 							/>
 						</div>
+					{/if}
 
-						<div class="w-full">
-							<div class=" self-center text-xs font-medium mb-1">
-								{$i18n.t('Concurrent Requests')}
-							</div>
-
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-								placeholder={$i18n.t('Concurrent Requests')}
-								bind:value={webConfig.search.concurrent_requests}
-								required
-							/>
+					<div class="  mb-2.5 flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">
+							<Tooltip content={$i18n.t('Full Context Mode')} placement="top-start">
+								{$i18n.t('Bypass Embedding and Retrieval')}
+							</Tooltip>
+						</div>
+						<div class="flex items-center relative">
+							<Tooltip
+								content={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL
+									? 'Inject the entire content as context for comprehensive processing, this is recommended for complex queries.'
+									: 'Default to segmented retrieval for focused and relevant content extraction, this is recommended for most cases.'}
+							>
+								<Switch bind:state={webConfig.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL} />
+							</Tooltip>
 						</div>
 					</div>
 
-					<div class="mt-2">
-						<div class=" self-center text-xs font-medium mb-1">
-							{$i18n.t('Domain Filter List')}
+					<div class="  mb-2.5 flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">
+							{$i18n.t('Trust Proxy Environment')}
+						</div>
+						<div class="flex items-center relative">
+							<Tooltip
+								content={webConfig.search.trust_env
+									? 'Use proxy designated by http_proxy and https_proxy environment variables to fetch page contents'
+									: 'Use no proxy to fetch page contents.'}
+							>
+								<Switch bind:state={webConfig.search.trust_env} />
+							</Tooltip>
 						</div>
-
-						<input
-							class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-							placeholder={$i18n.t(
-								'Enter domains separated by commas (e.g., example.com,site.org)'
-							)}
-							bind:value={webConfig.search.domain_filter_list}
-						/>
 					</div>
-				{/if}
-			</div>
-
-			<hr class="border-gray-100 dark:border-gray-850 my-2" />
-
-			<div>
-				<div class=" mb-1 text-sm font-medium">
-					{$i18n.t('Web Loader Settings')}
 				</div>
 
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
+				<div class="mb-3">
+					<div class=" mb-2.5 text-base font-medium">{$i18n.t('Loader')}</div>
+
+					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+
+					<div class="  mb-2.5 flex w-full justify-between">
 						<div class=" self-center text-xs font-medium">
 							{$i18n.t('Bypass SSL verification for Websites')}
 						</div>
-
-						<button
-							class="p-1 px-3 text-xs flex rounded-sm transition"
-							on:click={() => {
-								webConfig.ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION =
-									!webConfig.ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION;
-								submitHandler();
-							}}
-							type="button"
-						>
-							{#if webConfig.ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION === false}
-								<span class="ml-2 self-center">{$i18n.t('On')}</span>
-							{:else}
-								<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-							{/if}
-						</button>
+						<div class="flex items-center relative">
+							<Switch bind:state={webConfig.ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION} />
+						</div>
 					</div>
-				</div>
 
-				<div class=" mt-2 mb-1 text-sm font-medium">
-					{$i18n.t('Youtube Loader Settings')}
-				</div>
-
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Language')}</div>
-						<div class=" flex-1 self-center">
+					<div class="  mb-2.5 flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">
+							{$i18n.t('Youtube Language')}
+						</div>
+						<div class="flex items-center relative">
 							<input
-								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+								class="flex-1 w-full rounded-lg text-sm bg-transparent outline-hidden"
 								type="text"
 								placeholder={$i18n.t('Enter language codes')}
 								bind:value={youtubeLanguage}
@@ -487,14 +502,14 @@
 							/>
 						</div>
 					</div>
-				</div>
 
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Proxy URL')}</div>
-						<div class=" flex-1 self-center">
+					<div class="  mb-2.5 flex flex-col w-full justify-between">
+						<div class=" mb-1 text-xs font-medium">
+							{$i18n.t('Youtube Proxy URL')}
+						</div>
+						<div class="flex items-center relative">
 							<input
-								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+								class="flex-1 w-full rounded-lg text-sm bg-transparent outline-hidden"
 								type="text"
 								placeholder={$i18n.t('Enter proxy URL (e.g. https://user:password@host:port)')}
 								bind:value={youtubeProxyUrl}