{#if webConfig} {#if webConfig.ENABLE_WEB_SEARCH_CONFIRMATION}

</AdminSettingField>
				{/if}

<AdminSettingRow
					label={$i18n.t('Web Search Engine')}
					description={$i18n.t('Choose the provider used for web search queries.')}
				>
					<SettingsSelect
						bind:value={webConfig.WEB_SEARCH_ENGINE}
						placeholder={$i18n.t('Select a engine')}
						required
					>
						<option disabled selected value="">{$i18n.t('Select a engine')}</option>
						{#each webSearchEngines as engine}
							{#if engine === 'duckduckgo' || engine === 'ddgs'}
								<option value={engine}>DDGS</option>
							{:else if engine === 'serphouse'}
								<option value={engine}>SERPHouse</option>
							{:else}
								<option value={engine}>{engine}</option>
							{/if}
						{/each}
					</SettingsSelect>
				</AdminSettingRow>

{#if webConfig.WEB_SEARCH_ENGINE !== ''}
					{#if webConfig.WEB_SEARCH_ENGINE === 'ollama_cloud'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Ollama Cloud API Key')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<SensitiveInput
											variant="settings"
											placeholder={$i18n.t('Enter Ollama Cloud API Key')}
											bind:value={webConfig.OLLAMA_CLOUD_WEB_SEARCH_API_KEY}
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'perplexity_search'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Perplexity Search API URL')}
								</div>

<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Perplexity API Key')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<SensitiveInput
											variant="settings"
											placeholder={$i18n.t('Enter Perplexity API Key')}
											bind:value={webConfig.PERPLEXITY_API_KEY}
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'searxng'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-left text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Searxng Query URL')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder={$i18n.t('Enter Searxng Query URL')}
											bind:value={webConfig.SEARXNG_QUERY_URL}
											autocomplete="off"
											required
										/>
									</div>
								</div>
							</div>
							<div class="mb-2.5 flex w-full flex-col">
								<div class=" self-left text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Searxng search language (all, en, es, de, fr, etc.)')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder={$i18n.t('Enter Searxng search language')}
											bind:value={webConfig.SEARXNG_LANGUAGE}
											autocomplete="off"
											required
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'yacy'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Yacy Instance URL')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder={$i18n.t('Enter Yacy URL (e.g. http://yacy.example.com:8090)')}
											bind:value={webConfig.YACY_QUERY_URL}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
						<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 text-gray-600 dark:text-gray-400 mb-1">
										{$i18n.t('Yacy Username')}
									</div>

<div class="w-full">
									<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
										{$i18n.t('Yacy Password')}
									</div>

<SensitiveInput
										variant="settings"
										placeholder={$i18n.t('Enter Yacy Password')}
										bind:value={webConfig.YACY_PASSWORD}
									/>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'google_pse'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Google PSE API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Google PSE API Key')}
									bind:value={webConfig.GOOGLE_PSE_API_KEY}
								/>
							</div>
							<div class="mt-1.5">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Google PSE Engine Id')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder={$i18n.t('Enter Google PSE Engine Id')}
											bind:value={webConfig.GOOGLE_PSE_ENGINE_ID}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'brave'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Brave Search API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Brave Search API Key')}
									bind:value={webConfig.BRAVE_SEARCH_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'brave_llm_context'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Brave Search API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Brave Search API Key')}
									bind:value={webConfig.BRAVE_SEARCH_API_KEY}
								/>
							</div>
							<div class="mt-1.5">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Context Tokens')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="number"
											min="1024"
											max="32768"
											step="1024"
											placeholder={$i18n.t('Max tokens to retrieve (1024-32768, default 8192)')}
											bind:value={webConfig.BRAVE_SEARCH_CONTEXT_TOKENS}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'kagi'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Kagi Search API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Kagi Search API Key')}
									bind:value={webConfig.KAGI_SEARCH_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'mojeek'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Mojeek Search API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Mojeek Search API Key')}
									bind:value={webConfig.MOJEEK_SEARCH_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'bocha'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Bocha Search API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Bocha Search API Key')}
									bind:value={webConfig.BOCHA_SEARCH_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'serpstack'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Serpstack API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Serpstack API Key')}
									bind:value={webConfig.SERPSTACK_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'serper'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Serper API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Serper API Key')}
									bind:value={webConfig.SERPER_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'serphouse'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('SERPHouse API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter SERPHouse API Key')}
									bind:value={webConfig.SERPHOUSE_API_KEY}
								/>
							</div>
							<div class="mt-1.5">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('SERPHouse Domain')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder="google.com"
											bind:value={webConfig.SERPHOUSE_DOMAIN}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'serply'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Serply API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Serply API Key')}
									bind:value={webConfig.SERPLY_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'tavily'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Tavily API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Tavily API Key')}
									bind:value={webConfig.TAVILY_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'searchapi'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('SearchApi API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter SearchApi API Key')}
									bind:value={webConfig.SEARCHAPI_API_KEY}
								/>
							</div>
							<div class="mt-1.5">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('SearchApi Engine')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder={$i18n.t('Enter SearchApi Engine')}
											bind:value={webConfig.SEARCHAPI_ENGINE}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'serpapi'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('SerpApi API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter SerpApi API Key')}
									bind:value={webConfig.SERPAPI_API_KEY}
								/>
							</div>
							<div class="mt-1.5">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('SerpApi Engine')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="text"
											placeholder={$i18n.t('Enter SerpApi Engine')}
											bind:value={webConfig.SERPAPI_ENGINE}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'jina'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Jina API Base URL')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Jina API Key')}
									bind:value={webConfig.JINA_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'bing'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Bing Search V7 Endpoint')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Bing Search V7 Subscription Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Bing Search V7 Subscription Key')}
									bind:value={webConfig.BING_SEARCH_V7_SUBSCRIPTION_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'exa'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Exa API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Exa API Key')}
									bind:value={webConfig.EXA_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'perplexity'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Perplexity API Key')}
								</div>

<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class="self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Perplexity Model')}
								</div>
								<input
									list="perplexity-model-list"
									class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
									bind:value={webConfig.PERPLEXITY_MODEL}
								/>

<datalist id="perplexity-model-list">
									<option value="sonar">{$i18n.t('Sonar')}</option>
									<option value="sonar-pro">{$i18n.t('Sonar Pro')}</option>
									<option value="sonar-reasoning">{$i18n.t('Sonar Reasoning')}</option>
									<option value="sonar-reasoning-pro">{$i18n.t('Sonar Reasoning Pro')}</option>
									<option value="sonar-deep-research">{$i18n.t('Sonar Deep Research')}</option>
								</datalist>
							</div>
						</div>

<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Perplexity Search Context Usage')}
								</div>
								<SettingsSelect
									bind:value={webConfig.PERPLEXITY_SEARCH_CONTEXT_USAGE}
									className="w-full"
								>
									<option value="low">{$i18n.t('Low')}</option>
									<option value="medium">{$i18n.t('Medium')}</option>
									<option value="high">{$i18n.t('High')}</option>
								</SettingsSelect>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'microsoft_web_iq'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Microsoft Web IQ API Base URL')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Microsoft Web IQ API Key')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Language')}
								</div>

<input
									class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
									type="text"
									placeholder={$i18n.t('Enter language')}
									bind:value={webConfig.MICROSOFT_WEB_IQ_LANGUAGE}
									autocomplete="off"
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'sougou'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Sougou Search API sID')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Sougou Search API sID')}
									bind:value={webConfig.SOUGOU_API_SID}
								/>
							</div>
						</div>
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Sougou Search API SK')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Sougou Search API SK')}
									bind:value={webConfig.SOUGOU_API_SK}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'firecrawl'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Firecrawl API Base URL')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Firecrawl API Key')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Firecrawl Timeout (s)')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
											type="number"
											placeholder={$i18n.t('Enter Firecrawl Timeout')}
											bind:value={webConfig.FIRECRAWL_TIMEOUT}
											autocomplete="off"
										/>
									</div>
								</div>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'external'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('External Web Search URL')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('External Web Search API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter External Web Search API Key')}
									bind:value={webConfig.EXTERNAL_WEB_SEARCH_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'yandex'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Yandex Web Search URL')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Yandex Web Search API Key')}
								</div>

<div class="mb-2.5">
								<div class=" mb-1 text-xs text-gray-600 dark:text-gray-400">
									{$i18n.t('Yandex Web Search config')}
								</div>

<Tooltip
									content={$i18n.t(
										'Leave empty to use the default config, or enter a valid json (see https://yandex.cloud/en/docs/search-api/api-ref/WebSearch/search#yandex.cloud.searchapi.v2.WebSearchRequest)'
									)}
									placement="top-start"
								>
									<Textarea
										className={textareaClass}
										bind:value={webConfig.YANDEX_WEB_SEARCH_CONFIG}
										placeholder={$i18n.t(
											'Leave empty to use the default config, or enter a valid json (see https://yandex.cloud/en/docs/search-api/api-ref/WebSearch/search#yandex.cloud.searchapi.v2.WebSearchRequest)'
										)}
									/>
								</Tooltip>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'youcom'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('You.com API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter You.com API Key')}
									bind:value={webConfig.YOUCOM_API_KEY}
								/>
							</div>
						</div>
					{:else if webConfig.WEB_SEARCH_ENGINE === 'linkup'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Linkup API Key')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Parameters')}
								</div>

<Textarea
									className={textareaClass}
									bind:value={webConfig.LINKUP_SEARCH_PARAMS}
									placeholder={`{\n  "depth": "standard",\n  "outputType": "sourcedAnswer"\n}`}
								/>
							</div>
						</div>
					{/if}

{#if webConfig.WEB_SEARCH_ENGINE === 'duckduckgo'}
						<div class="mb-2.5 flex w-full flex-col">
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('DDGS Backend')}
								</div>

<div class="flex w-full">
									<div class="flex-1">
										<SettingsSelect bind:value={webConfig.DDGS_BACKEND} className="w-full">
											<option value="auto">{$i18n.t('Auto (Random)')}</option>
											<option value="bing">{$i18n.t('Bing')}</option>
											<option value="brave">{$i18n.t('Brave')}</option>
											<option value="duckduckgo">{$i18n.t('DuckDuckGo')}</option>
											<option value="google">{$i18n.t('Google')}</option>
											<option value="grokipedia">{$i18n.t('Grokipedia')}</option>
											<option value="mojeek">{$i18n.t('Mojeek')}</option>
											<option value="wikipedia">{$i18n.t('Wikipedia')}</option>
											<option value="yahoo">{$i18n.t('Yahoo')}</option>
											<option value="yandex">{$i18n.t('Yandex')}</option>
										</SettingsSelect>
									</div>
								</div>
							</div>
						</div>
					{/if}
				{/if}

{#if webConfig.ENABLE_WEB_SEARCH}
					<AdminSettingField
						label={$i18n.t('Search Limits')}
						description={$i18n.t('Control result volume and parallel search requests.')}
					>
						<div class="flex gap-2">
							<div class="w-full">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Search Result Count')}
								</div>

<div class="w-full">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									<Tooltip
										content={$i18n.t(
											'Limit concurrent search queries. 0 = unlimited (default). Set to 1 for sequential execution (recommended for APIs with strict rate limits like Brave free tier).'
										)}
										placement="top-start"
									>
										{$i18n.t('Concurrent Requests')}
									</Tooltip>
								</div>

<AdminSettingField
						label={$i18n.t('Domain Filter List')}
						description={$i18n.t('Restrict or exclude domains using a comma-separated list.')}
					>
						<input
							class={inputClass}
							placeholder={$i18n.t(
								'Enter domains separated by commas (e.g., example.com,site.org,!excludedsite.com)'
							)}
							bind:value={webConfig.WEB_SEARCH_DOMAIN_FILTER_LIST}
						/>
					</AdminSettingField>
				{/if}

<AdminSettingSection title={$i18n.t('Loader')}>
				<AdminSettingRow
					label={$i18n.t('Web Loader Engine')}
					description={$i18n.t('Choose how web result pages are fetched and read.')}
				>
					<SettingsSelect
						bind:value={webConfig.WEB_LOADER_ENGINE}
						placeholder={$i18n.t('Select a engine')}
					>
						<option value="">{$i18n.t('Default')}</option>
						{#each webLoaderEngines as engine}
							<option value={engine}>{engine}</option>
						{/each}
					</SettingsSelect>
				</AdminSettingRow>

{#if webConfig.WEB_LOADER_ENGINE === '' || webConfig.WEB_LOADER_ENGINE === 'safe_web'}
					<AdminSettingField
						label={$i18n.t('Timeout')}
						description={$i18n.t('Maximum time to wait while loading web content.')}
					>
						<input
							class={inputClass}
							placeholder={$i18n.t('Timeout')}
							bind:value={webConfig.WEB_LOADER_TIMEOUT}
						/>
					</AdminSettingField>

<AdminSettingRow
						label={$i18n.t('Verify SSL Certificate')}
						description={$i18n.t('Validate SSL certificates when fetching web content.')}
						let:labelId
					>
						<Switch
							bind:state={webConfig.ENABLE_WEB_LOADER_SSL_VERIFICATION}
							ariaLabelledbyId={labelId}
						/>
					</AdminSettingRow>
				{:else if webConfig.WEB_LOADER_ENGINE === 'playwright'}
					<div class="mb-2.5 flex w-full flex-col">
						<div>
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('Playwright WebSocket URL')}
							</div>

<div class="mt-2">
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('Playwright Timeout (ms)')}
							</div>

<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
										placeholder={$i18n.t('Enter Playwright Timeout')}
										bind:value={webConfig.PLAYWRIGHT_TIMEOUT}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>
					</div>
				{:else if webConfig.WEB_LOADER_ENGINE === 'firecrawl' && webConfig.WEB_SEARCH_ENGINE !== 'firecrawl'}
					<div class="mb-2.5 flex w-full flex-col">
						<div>
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('Firecrawl API Base URL')}
							</div>

<div class="mt-2">
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('Firecrawl API Key')}
							</div>

<SensitiveInput
								variant="settings"
								placeholder={$i18n.t('Enter Firecrawl API Key')}
								bind:value={webConfig.FIRECRAWL_API_KEY}
							/>
						</div>
					</div>
				{:else if webConfig.WEB_LOADER_ENGINE === 'tavily'}
					<div class="mb-2.5 flex w-full flex-col">
						<div>
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('Tavily Extract Depth')}
							</div>

{#if webConfig.WEB_SEARCH_ENGINE !== 'tavily'}
							<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Tavily API Key')}
								</div>

<SensitiveInput
									variant="settings"
									placeholder={$i18n.t('Enter Tavily API Key')}
									bind:value={webConfig.TAVILY_API_KEY}
								/>
							</div>
						{/if}
					</div>
				{:else if webConfig.WEB_LOADER_ENGINE === 'microsoft_web_iq'}
					<div class="mb-2.5 flex w-full flex-col">
						{#if webConfig.WEB_SEARCH_ENGINE !== 'microsoft_web_iq'}
							<div>
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Microsoft Web IQ API Base URL')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Microsoft Web IQ API Key')}
								</div>

<div class="mt-2">
								<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
									{$i18n.t('Language')}
								</div>

<input
									class="w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
									type="text"
									placeholder={$i18n.t('Enter language')}
									bind:value={webConfig.MICROSOFT_WEB_IQ_LANGUAGE}
									autocomplete="off"
								/>
							</div>
						{/if}
					</div>
				{:else if webConfig.WEB_LOADER_ENGINE === 'external'}
					<div class="mb-2.5 flex w-full flex-col">
						<div>
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('External Web Loader URL')}
							</div>

<div class="mt-2">
							<div class=" self-center text-xs text-gray-600 dark:text-gray-400 mb-1">
								{$i18n.t('External Web Loader API Key')}
							</div>

<SensitiveInput
								variant="settings"
								placeholder={$i18n.t('Enter External Web Loader API Key')}
								bind:value={webConfig.EXTERNAL_WEB_LOADER_API_KEY}
							/>
						</div>
					</div>
				{/if}

{$i18n.t('Web Search')}