From d5b91fb0847379d8fb67cf0e1c305a4504aec84b Mon Sep 17 00:00:00 2001
From: Jun Siang Cheah <git@jscheah.me>
Date: Tue, 25 Jun 2024 14:00:02 +0800
Subject: [PATCH 1/2] feat: hide all API keys by default in admin settings

---
 .../components/admin/Settings/Audio.svelte    | 116 +++++++-
 .../admin/Settings/Connections.svelte         |  46 ++-
 .../admin/Settings/Documents.svelte           |  99 +++++--
 .../components/admin/Settings/Images.svelte   |  57 +++-
 .../admin/Settings/WebSearch.svelte           | 271 ++++++++++++++++--
 src/lib/i18n/locales/ar-BH/translation.json   |   1 -
 src/lib/i18n/locales/bg-BG/translation.json   |   1 -
 src/lib/i18n/locales/bn-BD/translation.json   |   1 -
 src/lib/i18n/locales/ca-ES/translation.json   |   1 -
 src/lib/i18n/locales/ceb-PH/translation.json  |   1 -
 src/lib/i18n/locales/de-DE/translation.json   |   1 -
 src/lib/i18n/locales/dg-DG/translation.json   |   1 -
 src/lib/i18n/locales/en-GB/translation.json   |   1 -
 src/lib/i18n/locales/en-US/translation.json   |   1 -
 src/lib/i18n/locales/es-ES/translation.json   |   1 -
 src/lib/i18n/locales/fa-IR/translation.json   |   1 -
 src/lib/i18n/locales/fi-FI/translation.json   |   1 -
 src/lib/i18n/locales/fr-CA/translation.json   |   1 -
 src/lib/i18n/locales/fr-FR/translation.json   |   1 -
 src/lib/i18n/locales/he-IL/translation.json   |   1 -
 src/lib/i18n/locales/hi-IN/translation.json   |   1 -
 src/lib/i18n/locales/hr-HR/translation.json   |   1 -
 src/lib/i18n/locales/it-IT/translation.json   |   1 -
 src/lib/i18n/locales/ja-JP/translation.json   |   1 -
 src/lib/i18n/locales/ka-GE/translation.json   |   1 -
 src/lib/i18n/locales/ko-KR/translation.json   |   1 -
 src/lib/i18n/locales/lt-LT/translation.json   |   1 -
 src/lib/i18n/locales/nb-NO/translation.json   |   1 -
 src/lib/i18n/locales/nl-NL/translation.json   |   1 -
 src/lib/i18n/locales/pa-IN/translation.json   |   1 -
 src/lib/i18n/locales/pl-PL/translation.json   |   1 -
 src/lib/i18n/locales/pt-BR/translation.json   |   1 -
 src/lib/i18n/locales/pt-PT/translation.json   |   1 -
 src/lib/i18n/locales/ru-RU/translation.json   |   1 -
 src/lib/i18n/locales/sr-RS/translation.json   |   1 -
 src/lib/i18n/locales/sv-SE/translation.json   |   1 -
 src/lib/i18n/locales/tk-TW/translation.json   |   1 -
 src/lib/i18n/locales/tr-TR/translation.json   |   1 -
 src/lib/i18n/locales/uk-UA/translation.json   |   1 -
 src/lib/i18n/locales/vi-VN/translation.json   |   1 -
 src/lib/i18n/locales/zh-CN/translation.json   |   1 -
 src/lib/i18n/locales/zh-TW/translation.json   |   1 -
 42 files changed, 525 insertions(+), 101 deletions(-)

diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index 1ca97bff8..45413e100 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -18,11 +18,13 @@
 	let TTS_ENGINE = '';
 	let TTS_MODEL = '';
 	let TTS_VOICE = '';
+	let showTTSKey = false;
 
 	let STT_OPENAI_API_BASE_URL = '';
 	let STT_OPENAI_API_KEY = '';
 	let STT_ENGINE = '';
 	let STT_MODEL = '';
+	let showSTTKey = false;
 
 	let voices = [];
 	let models = [];
@@ -137,18 +139,60 @@
 					<div>
 						<div class="mt-1 flex gap-2 mb-1">
 							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+								class="flex-1 w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 								placeholder={$i18n.t('API Base URL')}
 								bind:value={STT_OPENAI_API_BASE_URL}
 								required
 							/>
 
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-								placeholder={$i18n.t('API Key')}
-								bind:value={STT_OPENAI_API_KEY}
-								required
-							/>
+							<div class="flex flex-1">
+								<input
+									class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+									placeholder={$i18n.t('API Key')}
+									bind:value={STT_OPENAI_API_KEY}
+									required
+									{...{ type: showSTTKey ? 'text' : 'password' }}
+								/>
+								<button
+									class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+									on:click={(e) => {
+										e.preventDefault();
+										showSTTKey = !showSTTKey;
+									}}
+								>
+									{#if showSTTKey}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+												clip-rule="evenodd"
+											/>
+											<path
+												d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+											/>
+										</svg>
+									{:else}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+											<path
+												fill-rule="evenodd"
+												d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									{/if}
+								</button>
+							</div>
 						</div>
 					</div>
 
@@ -198,7 +242,7 @@
 							}}
 						>
 							<option value="">{$i18n.t('Web API')}</option>
-							<option value="openai">{$i18n.t('Open AI')}</option>
+							<option value="openai">{$i18n.t('OpenAI')}</option>
 						</select>
 					</div>
 				</div>
@@ -207,18 +251,60 @@
 					<div>
 						<div class="mt-1 flex gap-2 mb-1">
 							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+								class="flex-1 w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 								placeholder={$i18n.t('API Base URL')}
 								bind:value={TTS_OPENAI_API_BASE_URL}
 								required
 							/>
 
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-								placeholder={$i18n.t('API Key')}
-								bind:value={TTS_OPENAI_API_KEY}
-								required
-							/>
+							<div class="flex-1 flex">
+								<input
+									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+									placeholder={$i18n.t('API Key')}
+									bind:value={TTS_OPENAI_API_KEY}
+									required
+									{...{ type: showTTSKey ? 'text' : 'password' }}
+								/>
+								<button
+									class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+									on:click={(e) => {
+										e.preventDefault();
+										showTTSKey = !showTTSKey;
+									}}
+								>
+									{#if showSTTKey}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+												clip-rule="evenodd"
+											/>
+											<path
+												d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+											/>
+										</svg>
+									{:else}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+											<path
+												fill-rule="evenodd"
+												d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									{/if}
+								</button>
+							</div>
 						</div>
 					</div>
 				{/if}
diff --git a/src/lib/components/admin/Settings/Connections.svelte b/src/lib/components/admin/Settings/Connections.svelte
index 909a07581..5a45ef1d4 100644
--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { models, user } from '$lib/stores';
 	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
+
 	const dispatch = createEventDispatcher();
 
 	import {
@@ -37,6 +38,7 @@
 
 	let OPENAI_API_KEYS = [''];
 	let OPENAI_API_BASE_URLS = [''];
+	let showAPIKeys = [false];
 
 	let pipelineUrls = {};
 
@@ -228,13 +230,53 @@
 										{/if}
 									</div>
 
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('API Key')}
 											bind:value={OPENAI_API_KEYS[idx]}
 											autocomplete="off"
+											{...{ type: showAPIKeys[idx] ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showAPIKeys[idx] = !showAPIKeys[idx];
+											}}
+										>
+											{#if showAPIKeys[idx]}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 									<div class="self-center flex items-center">
 										{#if idx === 0}
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 20373b830..0528cffaa 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -41,6 +41,7 @@
 	let pdfExtractImages = true;
 
 	let OpenAIKey = '';
+	let showOpenAIKey = false;
 	let OpenAIUrl = '';
 	let OpenAIBatchSize = 1;
 
@@ -280,24 +281,28 @@
 								viewBox="0 0 24 24"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
-								><style>
+							>
+								<style>
 									.spinner_ajPY {
 										transform-origin: center;
 										animation: spinner_AtaB 0.75s infinite linear;
 									}
+
 									@keyframes spinner_AtaB {
 										100% {
 											transform: rotate(360deg);
 										}
 									}
-								</style><path
+								</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
+								/>
+								<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
-							>
+								/>
+							</svg>
 						</div>
 					{/if}
 				</button>
@@ -330,18 +335,60 @@
 			{#if embeddingEngine === 'openai'}
 				<div class="my-0.5 flex gap-2">
 					<input
-						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+						class="flex-1 w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 						placeholder={$i18n.t('API Base URL')}
 						bind:value={OpenAIUrl}
 						required
 					/>
 
-					<input
-						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-						placeholder={$i18n.t('API Key')}
-						bind:value={OpenAIKey}
-						required
-					/>
+					<div class="flex-1 flex">
+						<input
+							class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+							placeholder={$i18n.t('API Key')}
+							bind:value={OpenAIKey}
+							required
+							{...{ type: showOpenAIKey ? 'text' : 'password' }}
+						/>
+						<button
+							class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+							on:click={(e) => {
+								e.preventDefault();
+								showOpenAIKey = !showOpenAIKey;
+							}}
+						>
+							{#if showOpenAIKey}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+										clip-rule="evenodd"
+									/>
+									<path
+										d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+									<path
+										fill-rule="evenodd"
+										d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
 				</div>
 				<div class="flex mt-0.5 space-x-2">
 					<div class=" self-center text-xs font-medium">{$i18n.t('Embedding Batch Size')}</div>
@@ -439,24 +486,28 @@
 										viewBox="0 0 24 24"
 										fill="currentColor"
 										xmlns="http://www.w3.org/2000/svg"
-										><style>
+									>
+										<style>
 											.spinner_ajPY {
 												transform-origin: center;
 												animation: spinner_AtaB 0.75s infinite linear;
 											}
+
 											@keyframes spinner_AtaB {
 												100% {
 													transform: rotate(360deg);
 												}
 											}
-										</style><path
+										</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
+										/>
+										<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
-									>
+										/>
+									</svg>
 								</div>
 							{:else}
 								<svg
@@ -512,24 +563,28 @@
 										viewBox="0 0 24 24"
 										fill="currentColor"
 										xmlns="http://www.w3.org/2000/svg"
-										><style>
+									>
+										<style>
 											.spinner_ajPY {
 												transform-origin: center;
 												animation: spinner_AtaB 0.75s infinite linear;
 											}
+
 											@keyframes spinner_AtaB {
 												100% {
 													transform: rotate(360deg);
 												}
 											}
-										</style><path
+										</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
+										/>
+										<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
-									>
+										/>
+									</svg>
 								</div>
 							{:else}
 								<svg
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index a6401031c..7433c901b 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -34,6 +34,7 @@
 
 	let OPENAI_API_BASE_URL = '';
 	let OPENAI_API_KEY = '';
+	let showOpenAIKey = false;
 
 	let selectedModel = '';
 	let models = null;
@@ -333,18 +334,60 @@
 
 				<div class="flex gap-2 mb-1">
 					<input
-						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+						class="flex-1 w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 						placeholder={$i18n.t('API Base URL')}
 						bind:value={OPENAI_API_BASE_URL}
 						required
 					/>
 
-					<input
-						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-						placeholder={$i18n.t('API Key')}
-						bind:value={OPENAI_API_KEY}
-						required
-					/>
+					<div class="flex-1 flex">
+						<input
+							class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+							placeholder={$i18n.t('API Key')}
+							bind:value={OPENAI_API_KEY}
+							required
+							{...{ type: showOpenAIKey ? 'text' : 'password' }}
+						/>
+						<button
+							class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+							on:click={(e) => {
+								e.preventDefault();
+								showOpenAIKey = !showOpenAIKey;
+							}}
+						>
+							{#if showOpenAIKey}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+										clip-rule="evenodd"
+									/>
+									<path
+										d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+									<path
+										fill-rule="evenodd"
+										d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
 				</div>
 			</div>
 		{/if}
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index 4c4202388..15a5257cb 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -22,6 +22,7 @@
 		'tavily',
 		'jina'
 	];
+	let showApiKey = false;
 
 	let youtubeLanguage = 'en';
 	let youtubeTranslation = null;
@@ -116,14 +117,53 @@
 								</div>
 
 								<div class="flex w-full">
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('Enter Google PSE API Key')}
 											bind:value={webConfig.search.google_pse_api_key}
 											autocomplete="off"
+											{...{ type: showApiKey ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showApiKey = !showApiKey;
+											}}
+										>
+											{#if showApiKey}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 								</div>
 							</div>
@@ -151,14 +191,53 @@
 								</div>
 
 								<div class="flex w-full">
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('Enter Brave Search API Key')}
 											bind:value={webConfig.search.brave_search_api_key}
 											autocomplete="off"
+											{...{ type: showApiKey ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showApiKey = !showApiKey;
+											}}
+										>
+											{#if showApiKey}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 								</div>
 							</div>
@@ -169,14 +248,53 @@
 								</div>
 
 								<div class="flex w-full">
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('Enter Serpstack API Key')}
 											bind:value={webConfig.search.serpstack_api_key}
 											autocomplete="off"
+											{...{ type: showApiKey ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showApiKey = !showApiKey;
+											}}
+										>
+											{#if showApiKey}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 								</div>
 							</div>
@@ -187,14 +305,53 @@
 								</div>
 
 								<div class="flex w-full">
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('Enter Serper API Key')}
 											bind:value={webConfig.search.serper_api_key}
 											autocomplete="off"
+											{...{ type: showApiKey ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showApiKey = !showApiKey;
+											}}
+										>
+											{#if showApiKey}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 								</div>
 							</div>
@@ -205,14 +362,53 @@
 								</div>
 
 								<div class="flex w-full">
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('Enter Serply API Key')}
 											bind:value={webConfig.search.serply_api_key}
 											autocomplete="off"
+											{...{ type: showApiKey ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showApiKey = !showApiKey;
+											}}
+										>
+											{#if showApiKey}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 								</div>
 							</div>
@@ -223,14 +419,53 @@
 								</div>
 
 								<div class="flex w-full">
-									<div class="flex-1">
+									<div class="flex-1 flex">
 										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
+											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 											placeholder={$i18n.t('Enter Tavily API Key')}
 											bind:value={webConfig.search.tavily_api_key}
 											autocomplete="off"
+											{...{ type: showApiKey ? 'text' : 'password' }}
 										/>
+										<button
+											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
+											on:click={(e) => {
+												e.preventDefault();
+												showApiKey = !showApiKey;
+											}}
+										>
+											{#if showApiKey}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+														clip-rule="evenodd"
+													/>
+													<path
+														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+													<path
+														fill-rule="evenodd"
+														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											{/if}
+										</button>
 									</div>
 								</div>
 							</div>
diff --git a/src/lib/i18n/locales/ar-BH/translation.json b/src/lib/i18n/locales/ar-BH/translation.json
index d9c68c6cb..4b6b705c9 100644
--- a/src/lib/i18n/locales/ar-BH/translation.json
+++ b/src/lib/i18n/locales/ar-BH/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "خطاء! أنت تستخدم طريقة غير مدعومة (الواجهة الأمامية فقط). يرجى تقديم واجهة WebUI من الواجهة الخلفية.",
 	"Open": "فتح",
-	"Open AI": "AI فتح",
 	"Open AI (Dall-E)": "AI (Dall-E) فتح",
 	"Open new chat": "فتح محادثة جديده",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/bg-BG/translation.json b/src/lib/i18n/locales/bg-BG/translation.json
index 9fdb2a4ce..f56cc5206 100644
--- a/src/lib/i18n/locales/bg-BG/translation.json
+++ b/src/lib/i18n/locales/bg-BG/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Упс! Използвате неподдържан метод (само фронтенд). Моля, сервирайте WebUI от бекенда.",
 	"Open": "Отвори",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Отвори нов чат",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/bn-BD/translation.json b/src/lib/i18n/locales/bn-BD/translation.json
index b76409820..ef21b6470 100644
--- a/src/lib/i18n/locales/bn-BD/translation.json
+++ b/src/lib/i18n/locales/bn-BD/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "আপনি একটা আনসাপোর্টেড পদ্ধতি (শুধু ফ্রন্টএন্ড) ব্যবহার করছেন। দয়া করে WebUI ব্যাকএন্ড থেকে চালনা করুন।",
 	"Open": "খোলা",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "নতুন চ্যাট খুলুন",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/ca-ES/translation.json b/src/lib/i18n/locales/ca-ES/translation.json
index df39ecab5..338de64e7 100644
--- a/src/lib/i18n/locales/ca-ES/translation.json
+++ b/src/lib/i18n/locales/ca-ES/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "Ui! Hi ha hagut un error en la resposta anterior. Torna a provar-ho o contacta amb un administrador",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Ui! Estàs utilitzant un mètode no suportat (només frontend). Si us plau, serveix la WebUI des del backend.",
 	"Open": "Obre",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Obre un xat nou",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/ceb-PH/translation.json b/src/lib/i18n/locales/ceb-PH/translation.json
index 805475e98..8b0c0679b 100644
--- a/src/lib/i18n/locales/ceb-PH/translation.json
+++ b/src/lib/i18n/locales/ceb-PH/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! ",
 	"Open": "Bukas",
-	"Open AI": "Buksan ang AI",
 	"Open AI (Dall-E)": "Buksan ang AI (Dall-E)",
 	"Open new chat": "Ablihi ang bag-ong diskusyon",
 	"OpenAI": "",
diff --git a/src/lib/i18n/locales/de-DE/translation.json b/src/lib/i18n/locales/de-DE/translation.json
index b5b29042f..856e40e4f 100644
--- a/src/lib/i18n/locales/de-DE/translation.json
+++ b/src/lib/i18n/locales/de-DE/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Hoppla! du verwendest eine nicht unterstützte Methode (nur Frontend). Bitte stelle die WebUI vom Backend aus bereit.",
 	"Open": "Öffne",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Neuen Chat öffnen",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/dg-DG/translation.json b/src/lib/i18n/locales/dg-DG/translation.json
index 13a513da5..41adcb8e2 100644
--- a/src/lib/i18n/locales/dg-DG/translation.json
+++ b/src/lib/i18n/locales/dg-DG/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.",
 	"Open": "Open",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Open new bark",
 	"OpenAI": "",
diff --git a/src/lib/i18n/locales/en-GB/translation.json b/src/lib/i18n/locales/en-GB/translation.json
index d3a869e83..8988f7626 100644
--- a/src/lib/i18n/locales/en-GB/translation.json
+++ b/src/lib/i18n/locales/en-GB/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "",
 	"Open": "",
-	"Open AI": "",
 	"Open AI (Dall-E)": "",
 	"Open new chat": "",
 	"OpenAI": "",
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index d3a869e83..8988f7626 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "",
 	"Open": "",
-	"Open AI": "",
 	"Open AI (Dall-E)": "",
 	"Open new chat": "",
 	"OpenAI": "",
diff --git a/src/lib/i18n/locales/es-ES/translation.json b/src/lib/i18n/locales/es-ES/translation.json
index 186e888a1..0a4badd6f 100644
--- a/src/lib/i18n/locales/es-ES/translation.json
+++ b/src/lib/i18n/locales/es-ES/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "¡Ups! Estás utilizando un método no compatible (solo frontend). Por favor ejecute la WebUI desde el backend.",
 	"Open": "Abrir",
-	"Open AI": "Abrir AI",
 	"Open AI (Dall-E)": "Abrir AI (Dall-E)",
 	"Open new chat": "Abrir nuevo chat",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/fa-IR/translation.json b/src/lib/i18n/locales/fa-IR/translation.json
index e87698310..a5e3fe1e6 100644
--- a/src/lib/i18n/locales/fa-IR/translation.json
+++ b/src/lib/i18n/locales/fa-IR/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "اوه! شما از یک روش پشتیبانی نشده (فقط frontend) استفاده می کنید. لطفاً WebUI را از بکند اجرا کنید.",
 	"Open": "باز",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "باز کردن گپ جدید",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/fi-FI/translation.json b/src/lib/i18n/locales/fi-FI/translation.json
index 79d58a8b6..c76e0c33f 100644
--- a/src/lib/i18n/locales/fi-FI/translation.json
+++ b/src/lib/i18n/locales/fi-FI/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Hupsista! Käytät ei-tuettua menetelmää. WebUI pitää palvella backendista.",
 	"Open": "Avaa",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Avaa uusi keskustelu",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/fr-CA/translation.json b/src/lib/i18n/locales/fr-CA/translation.json
index c77376ddb..ae25cfb49 100644
--- a/src/lib/i18n/locales/fr-CA/translation.json
+++ b/src/lib/i18n/locales/fr-CA/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oups ! Vous utilisez une méthode non prise en charge (frontal uniquement). Veuillez servir WebUI depuis le backend.",
 	"Open": "Ouvrir",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Ouvrir une nouvelle discussion",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/fr-FR/translation.json b/src/lib/i18n/locales/fr-FR/translation.json
index 21094f09c..c40d172b7 100644
--- a/src/lib/i18n/locales/fr-FR/translation.json
+++ b/src/lib/i18n/locales/fr-FR/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oups ! Vous utilisez une méthode non-supportée (frontend uniquement). Veuillez également servir WebUI depuis le backend.",
 	"Open": "Ouvrir",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Ouvrir un nouveau chat",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/he-IL/translation.json b/src/lib/i18n/locales/he-IL/translation.json
index da855f755..6d0e75c85 100644
--- a/src/lib/i18n/locales/he-IL/translation.json
+++ b/src/lib/i18n/locales/he-IL/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "אופס! אתה משתמש בשיטה לא נתמכת (רק חזית). אנא שרת את ממשק המשתמש האינטרנטי מהשרת האחורי.",
 	"Open": "פתח",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "פתח צ'אט חדש",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/hi-IN/translation.json b/src/lib/i18n/locales/hi-IN/translation.json
index fd40d5498..0531a350a 100644
--- a/src/lib/i18n/locales/hi-IN/translation.json
+++ b/src/lib/i18n/locales/hi-IN/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "उफ़! आप एक असमर्थित विधि (केवल फ्रंटएंड) का उपयोग कर रहे हैं। कृपया बैकएंड से WebUI सर्वे करें।",
 	"Open": "खोलें",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "नई चैट खोलें",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/hr-HR/translation.json b/src/lib/i18n/locales/hr-HR/translation.json
index f0ebde409..16a02e5ff 100644
--- a/src/lib/i18n/locales/hr-HR/translation.json
+++ b/src/lib/i18n/locales/hr-HR/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Ups! Koristite nepodržanu metodu (samo frontend). Molimo poslužite WebUI s backend-a.",
 	"Open": "Otvoreno",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Otvorite novi razgovor",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/it-IT/translation.json b/src/lib/i18n/locales/it-IT/translation.json
index 60cc2e407..3dc667b5a 100644
--- a/src/lib/i18n/locales/it-IT/translation.json
+++ b/src/lib/i18n/locales/it-IT/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Ops! Stai utilizzando un metodo non supportato (solo frontend). Si prega di servire la WebUI dal backend.",
 	"Open": "Apri",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Apri nuova chat",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/ja-JP/translation.json b/src/lib/i18n/locales/ja-JP/translation.json
index 30f4897cd..031db5c01 100644
--- a/src/lib/i18n/locales/ja-JP/translation.json
+++ b/src/lib/i18n/locales/ja-JP/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "おっと！ サポートされていない方法 (フロントエンドのみ) を使用しています。バックエンドから WebUI を提供してください。",
 	"Open": "開く",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "新しいチャットを開く",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/ka-GE/translation.json b/src/lib/i18n/locales/ka-GE/translation.json
index fd668ce78..0e6079c9a 100644
--- a/src/lib/i18n/locales/ka-GE/translation.json
+++ b/src/lib/i18n/locales/ka-GE/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "უპს! თქვენ იყენებთ მხარდაუჭერელ მეთოდს (მხოლოდ frontend). გთხოვთ, მოემსახუროთ WebUI-ს ბექენდიდან",
 	"Open": "ღია",
-	"Open AI": "ღია AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "ახალი მიმოწერის გახსნა",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/ko-KR/translation.json b/src/lib/i18n/locales/ko-KR/translation.json
index 984b9bbb6..8d68d9fd3 100644
--- a/src/lib/i18n/locales/ko-KR/translation.json
+++ b/src/lib/i18n/locales/ko-KR/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "이런! 지원되지 않는 방식(프론트엔드만)을 사용하고 계십니다. 백엔드에서 WebUI를 제공해주세요.",
 	"Open": "열기",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "OpenAI(Dall-E)",
 	"Open new chat": "새 채팅 열기",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/lt-LT/translation.json b/src/lib/i18n/locales/lt-LT/translation.json
index 9d9bcabcf..203669953 100644
--- a/src/lib/i18n/locales/lt-LT/translation.json
+++ b/src/lib/i18n/locales/lt-LT/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Naudojate nepalaikomą (front-end) web ui rėžimą. Prašau serviruokite WebUI iš back-end",
 	"Open": "Atverti",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Atverti naują pokalbį",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/nb-NO/translation.json b/src/lib/i18n/locales/nb-NO/translation.json
index 8e57c4da5..ff21e8eab 100644
--- a/src/lib/i18n/locales/nb-NO/translation.json
+++ b/src/lib/i18n/locales/nb-NO/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! Du bruker en ikke-støttet metode (kun frontend). Vennligst server WebUI fra backend.",
 	"Open": "Åpne",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Åpne ny chat",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/nl-NL/translation.json b/src/lib/i18n/locales/nl-NL/translation.json
index b4de94d85..6d9f9a0a9 100644
--- a/src/lib/i18n/locales/nl-NL/translation.json
+++ b/src/lib/i18n/locales/nl-NL/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! Je gebruikt een niet-ondersteunde methode (alleen frontend). Serveer de WebUI vanuit de backend.",
 	"Open": "Open",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Open nieuwe chat",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/pa-IN/translation.json b/src/lib/i18n/locales/pa-IN/translation.json
index 41f5128d7..56aa10e76 100644
--- a/src/lib/i18n/locales/pa-IN/translation.json
+++ b/src/lib/i18n/locales/pa-IN/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "ਓਹੋ! ਤੁਸੀਂ ਇੱਕ ਅਣਸਮਰਥਿਤ ਢੰਗ ਵਰਤ ਰਹੇ ਹੋ (ਸਿਰਫ਼ ਫਰੰਟਐਂਡ)। ਕਿਰਪਾ ਕਰਕੇ ਵੈਬਯੂਆਈ ਨੂੰ ਬੈਕਐਂਡ ਤੋਂ ਸਰਵ ਕਰੋ।",
 	"Open": "ਖੋਲ੍ਹੋ",
-	"Open AI": "ਓਪਨ ਏਆਈ",
 	"Open AI (Dall-E)": "ਓਪਨ ਏਆਈ (ਡਾਲ-ਈ)",
 	"Open new chat": "ਨਵੀਂ ਗੱਲਬਾਤ ਖੋਲ੍ਹੋ",
 	"OpenAI": "ਓਪਨਏਆਈ",
diff --git a/src/lib/i18n/locales/pl-PL/translation.json b/src/lib/i18n/locales/pl-PL/translation.json
index 44baeba86..0b7d48ee2 100644
--- a/src/lib/i18n/locales/pl-PL/translation.json
+++ b/src/lib/i18n/locales/pl-PL/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Ups! Używasz nieobsługiwanej metody (tylko interfejs front-end). Proszę obsłużyć interfejs WebUI z poziomu backendu.",
 	"Open": "Otwórz",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Otwórz nowy czat",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/pt-BR/translation.json b/src/lib/i18n/locales/pt-BR/translation.json
index 419c2119b..fdfdec2cf 100644
--- a/src/lib/i18n/locales/pt-BR/translation.json
+++ b/src/lib/i18n/locales/pt-BR/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Opa! Você está usando um método não suportado (somente frontend). Por favor, sirva o WebUI a partir do backend.",
 	"Open": "Abrir",
-	"Open AI": "OpenAI",
 	"Open AI (Dall-E)": "OpenAI (Dall-E)",
 	"Open new chat": "Abrir novo bate-papo",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/pt-PT/translation.json b/src/lib/i18n/locales/pt-PT/translation.json
index ca81b9501..9c165d2fa 100644
--- a/src/lib/i18n/locales/pt-PT/translation.json
+++ b/src/lib/i18n/locales/pt-PT/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Epá! Você está a usar um método não suportado (somente frontend). Por favor, sirva o WebUI a partir do backend.",
 	"Open": "Abrir",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Abrir nova conversa",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/ru-RU/translation.json b/src/lib/i18n/locales/ru-RU/translation.json
index 8664b78c4..fe841e9e8 100644
--- a/src/lib/i18n/locales/ru-RU/translation.json
+++ b/src/lib/i18n/locales/ru-RU/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Упс! Вы используете неподдерживаемый метод (только фронтенд). Пожалуйста, обслуживайте веб-интерфейс из бэкенда.",
 	"Open": "Открыть",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Открыть новый чат",
 	"OpenAI": "Open AI",
diff --git a/src/lib/i18n/locales/sr-RS/translation.json b/src/lib/i18n/locales/sr-RS/translation.json
index 26ec244d2..5999048ba 100644
--- a/src/lib/i18n/locales/sr-RS/translation.json
+++ b/src/lib/i18n/locales/sr-RS/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Упс! Користите неподржани метод (само фронтенд). Молимо вас да покренете WebUI са бекенда.",
 	"Open": "Отвори",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Покрени ново ћаскање",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/sv-SE/translation.json b/src/lib/i18n/locales/sv-SE/translation.json
index 50ba68cd8..480c9983d 100644
--- a/src/lib/i18n/locales/sv-SE/translation.json
+++ b/src/lib/i18n/locales/sv-SE/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Hoppsan! Du använder en ej stödd metod (endast frontend). Vänligen servera WebUI från backend.",
 	"Open": "Öppna",
-	"Open AI": "Öppna AI",
 	"Open AI (Dall-E)": "Öppna AI (Dall-E)",
 	"Open new chat": "Öppna ny chatt",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/tk-TW/translation.json b/src/lib/i18n/locales/tk-TW/translation.json
index d3a869e83..8988f7626 100644
--- a/src/lib/i18n/locales/tk-TW/translation.json
+++ b/src/lib/i18n/locales/tk-TW/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "",
 	"Open": "",
-	"Open AI": "",
 	"Open AI (Dall-E)": "",
 	"Open new chat": "",
 	"OpenAI": "",
diff --git a/src/lib/i18n/locales/tr-TR/translation.json b/src/lib/i18n/locales/tr-TR/translation.json
index a6b49afa8..d047442b1 100644
--- a/src/lib/i18n/locales/tr-TR/translation.json
+++ b/src/lib/i18n/locales/tr-TR/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Hop! Desteklenmeyen bir yöntem kullanıyorsunuz (yalnızca önyüz). Lütfen WebUI'yi arkayüzden sunun.",
 	"Open": "Aç",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Yeni sohbet aç",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/uk-UA/translation.json b/src/lib/i18n/locales/uk-UA/translation.json
index e259160a1..a027c414e 100644
--- a/src/lib/i18n/locales/uk-UA/translation.json
+++ b/src/lib/i18n/locales/uk-UA/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "Упс! У попередній відповіді сталася помилка. Будь ласка, спробуйте ще раз або зверніться до адміністратора.",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Упс! Ви використовуєте непідтримуваний метод (тільки для фронтенду). Будь ласка, обслуговуйте WebUI з бекенду.",
 	"Open": "Відкрити",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Відкрити новий чат",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/vi-VN/translation.json b/src/lib/i18n/locales/vi-VN/translation.json
index 9aeaaee0f..dfece640c 100644
--- a/src/lib/i18n/locales/vi-VN/translation.json
+++ b/src/lib/i18n/locales/vi-VN/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Rất tiếc! Bạn đang sử dụng một phương thức không được hỗ trợ (chỉ dành cho frontend). Vui lòng cung cấp phương thức cho WebUI từ phía backend.",
 	"Open": "Mở",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "Mở nội dung chat mới",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/zh-CN/translation.json b/src/lib/i18n/locales/zh-CN/translation.json
index c8d9dccb2..cab82495a 100644
--- a/src/lib/i18n/locales/zh-CN/translation.json
+++ b/src/lib/i18n/locales/zh-CN/translation.json
@@ -401,7 +401,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "糟糕！之前的回复出现了错误。请重试或联系管理员。",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "糟糕！你正在使用不被支持的方法（仅前端）。请从后端提供 WebUI 服务。",
 	"Open": "打开",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "打开新对话",
 	"OpenAI": "OpenAI",
diff --git a/src/lib/i18n/locales/zh-TW/translation.json b/src/lib/i18n/locales/zh-TW/translation.json
index 7808ba96c..36785a0f9 100644
--- a/src/lib/i18n/locales/zh-TW/translation.json
+++ b/src/lib/i18n/locales/zh-TW/translation.json
@@ -397,7 +397,6 @@
 	"Oops! There was an error in the previous response. Please try again or contact admin.": "哎呀！先前的回應發生錯誤。請重試或聯絡管理員",
 	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "哎呀！您正在使用不支援的方法（僅有前端）。請從後端提供 WebUI。",
 	"Open": "開啟",
-	"Open AI": "Open AI",
 	"Open AI (Dall-E)": "Open AI (Dall-E)",
 	"Open new chat": "開啟新聊天",
 	"OpenAI": "OpenAI",

From f8f69431288ae668218ef1e368626cfa55dd75ad Mon Sep 17 00:00:00 2001
From: Jun Siang Cheah <git@jscheah.me>
Date: Tue, 25 Jun 2024 20:15:29 +0800
Subject: [PATCH 2/2] refac: use new SensitiveInput component

---
 .../components/admin/Settings/Audio.svelte    | 101 +-----
 .../admin/Settings/Connections.svelte         |  51 +--
 .../admin/Settings/Documents.svelte           |  51 +--
 .../components/admin/Settings/Images.svelte   |  61 +---
 .../admin/Settings/WebSearch.svelte           | 308 +-----------------
 .../components/chat/Settings/Account.svelte   |  99 +-----
 .../components/common/SensitiveInput.svelte   |  62 ++++
 7 files changed, 82 insertions(+), 651 deletions(-)
 create mode 100644 src/lib/components/common/SensitiveInput.svelte

diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index 45413e100..a390d317c 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -5,6 +5,7 @@
 	import { toast } from 'svelte-sonner';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import { getBackendConfig } from '$lib/apis';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -18,13 +19,11 @@
 	let TTS_ENGINE = '';
 	let TTS_MODEL = '';
 	let TTS_VOICE = '';
-	let showTTSKey = false;
 
 	let STT_OPENAI_API_BASE_URL = '';
 	let STT_OPENAI_API_KEY = '';
 	let STT_ENGINE = '';
 	let STT_MODEL = '';
-	let showSTTKey = false;
 
 	let voices = [];
 	let models = [];
@@ -145,54 +144,7 @@
 								required
 							/>
 
-							<div class="flex flex-1">
-								<input
-									class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-									placeholder={$i18n.t('API Key')}
-									bind:value={STT_OPENAI_API_KEY}
-									required
-									{...{ type: showSTTKey ? 'text' : 'password' }}
-								/>
-								<button
-									class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-									on:click={(e) => {
-										e.preventDefault();
-										showSTTKey = !showSTTKey;
-									}}
-								>
-									{#if showSTTKey}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-												clip-rule="evenodd"
-											/>
-											<path
-												d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-											/>
-										</svg>
-									{:else}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-											<path
-												fill-rule="evenodd"
-												d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									{/if}
-								</button>
-							</div>
+							<SensitiveInput placeholder={$i18n.t('API Key')} bind:value={STT_OPENAI_API_KEY} />
 						</div>
 					</div>
 
@@ -257,54 +209,7 @@
 								required
 							/>
 
-							<div class="flex-1 flex">
-								<input
-									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-									placeholder={$i18n.t('API Key')}
-									bind:value={TTS_OPENAI_API_KEY}
-									required
-									{...{ type: showTTSKey ? 'text' : 'password' }}
-								/>
-								<button
-									class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-									on:click={(e) => {
-										e.preventDefault();
-										showTTSKey = !showTTSKey;
-									}}
-								>
-									{#if showSTTKey}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-												clip-rule="evenodd"
-											/>
-											<path
-												d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-											/>
-										</svg>
-									{:else}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-											<path
-												fill-rule="evenodd"
-												d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									{/if}
-								</button>
-							</div>
+							<SensitiveInput placeholder={$i18n.t('API Key')} bind:value={TTS_OPENAI_API_KEY} />
 						</div>
 					</div>
 				{/if}
diff --git a/src/lib/components/admin/Settings/Connections.svelte b/src/lib/components/admin/Settings/Connections.svelte
index 5a45ef1d4..9f81bc639 100644
--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -25,6 +25,7 @@
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { getModels as _getModels } from '$lib/apis';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -38,7 +39,6 @@
 
 	let OPENAI_API_KEYS = [''];
 	let OPENAI_API_BASE_URLS = [''];
-	let showAPIKeys = [false];
 
 	let pipelineUrls = {};
 
@@ -230,54 +230,7 @@
 										{/if}
 									</div>
 
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('API Key')}
-											bind:value={OPENAI_API_KEYS[idx]}
-											autocomplete="off"
-											{...{ type: showAPIKeys[idx] ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showAPIKeys[idx] = !showAPIKeys[idx];
-											}}
-										>
-											{#if showAPIKeys[idx]}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
+									<SensitiveInput placeholder={$i18n.t('API Key')} value={OPENAI_API_KEYS[idx]} />
 									<div class="self-center flex items-center">
 										{#if idx === 0}
 											<button
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 0528cffaa..575014b13 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -20,6 +20,7 @@
 	import { documents, models } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -41,7 +42,6 @@
 	let pdfExtractImages = true;
 
 	let OpenAIKey = '';
-	let showOpenAIKey = false;
 	let OpenAIUrl = '';
 	let OpenAIBatchSize = 1;
 
@@ -341,54 +341,7 @@
 						required
 					/>
 
-					<div class="flex-1 flex">
-						<input
-							class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							placeholder={$i18n.t('API Key')}
-							bind:value={OpenAIKey}
-							required
-							{...{ type: showOpenAIKey ? 'text' : 'password' }}
-						/>
-						<button
-							class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-							on:click={(e) => {
-								e.preventDefault();
-								showOpenAIKey = !showOpenAIKey;
-							}}
-						>
-							{#if showOpenAIKey}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-										clip-rule="evenodd"
-									/>
-									<path
-										d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-									/>
-								</svg>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-									<path
-										fill-rule="evenodd"
-										d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							{/if}
-						</button>
-					</div>
+					<SensitiveInput placeholder={$i18n.t('API Key')} bind:value={OpenAIKey} />
 				</div>
 				<div class="flex mt-0.5 space-x-2">
 					<div class=" self-center text-xs font-medium">{$i18n.t('Embedding Batch Size')}</div>
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index 7433c901b..ecfcea8cc 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -19,6 +19,7 @@
 		updateOpenAIConfig
 	} from '$lib/apis/images';
 	import { getBackendConfig } from '$lib/apis';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -34,7 +35,6 @@
 
 	let OPENAI_API_BASE_URL = '';
 	let OPENAI_API_KEY = '';
-	let showOpenAIKey = false;
 
 	let selectedModel = '';
 	let models = null;
@@ -277,15 +277,7 @@
 			</div>
 
 			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Api Auth String')}</div>
-			<div class="flex w-full">
-				<div class="flex-1 mr-2">
-					<input
-						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-						placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
-						bind:value={AUTOMATIC1111_API_AUTH}
-					/>
-				</div>
-			</div>
+			<SensitiveInput placeholder={$i18n.t('Enter api auth string (e.g. username:password)')} bind:value={AUTOMATIC1111_API_AUTH} />
 
 			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
 				{$i18n.t('Include `--api-auth` flag when running stable-diffusion-webui')}
@@ -340,54 +332,7 @@
 						required
 					/>
 
-					<div class="flex-1 flex">
-						<input
-							class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							placeholder={$i18n.t('API Key')}
-							bind:value={OPENAI_API_KEY}
-							required
-							{...{ type: showOpenAIKey ? 'text' : 'password' }}
-						/>
-						<button
-							class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-							on:click={(e) => {
-								e.preventDefault();
-								showOpenAIKey = !showOpenAIKey;
-							}}
-						>
-							{#if showOpenAIKey}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-										clip-rule="evenodd"
-									/>
-									<path
-										d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-									/>
-								</svg>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-									<path
-										fill-rule="evenodd"
-										d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							{/if}
-						</button>
-					</div>
+					<SensitiveInput placeholder={$i18n.t('API Key')} bind:value={OPENAI_API_KEY} />
 				</div>
 			</div>
 		{/if}
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index 15a5257cb..4aa3379ec 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -5,6 +5,7 @@
 	import { documents, models } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -22,7 +23,6 @@
 		'tavily',
 		'jina'
 	];
-	let showApiKey = false;
 
 	let youtubeLanguage = 'en';
 	let youtubeTranslation = null;
@@ -116,56 +116,7 @@
 									{$i18n.t('Google PSE API Key')}
 								</div>
 
-								<div class="flex w-full">
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('Enter Google PSE API Key')}
-											bind:value={webConfig.search.google_pse_api_key}
-											autocomplete="off"
-											{...{ type: showApiKey ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showApiKey = !showApiKey;
-											}}
-										>
-											{#if showApiKey}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
-								</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">
@@ -190,56 +141,7 @@
 									{$i18n.t('Brave Search API Key')}
 								</div>
 
-								<div class="flex w-full">
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('Enter Brave Search API Key')}
-											bind:value={webConfig.search.brave_search_api_key}
-											autocomplete="off"
-											{...{ type: showApiKey ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showApiKey = !showApiKey;
-											}}
-										>
-											{#if showApiKey}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
-								</div>
+								<SensitiveInput placeholder={$i18n.t('Enter Brave Search API Key')} bind:value={webConfig.search.brave_search_api_key} />
 							</div>
 						{:else if webConfig.search.engine === 'serpstack'}
 							<div>
@@ -247,56 +149,7 @@
 									{$i18n.t('Serpstack API Key')}
 								</div>
 
-								<div class="flex w-full">
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('Enter Serpstack API Key')}
-											bind:value={webConfig.search.serpstack_api_key}
-											autocomplete="off"
-											{...{ type: showApiKey ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showApiKey = !showApiKey;
-											}}
-										>
-											{#if showApiKey}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
-								</div>
+								<SensitiveInput placeholder={$i18n.t('Enter Serpstack API Key')} bind:value={webConfig.search.serpstack_api_key} />
 							</div>
 						{:else if webConfig.search.engine === 'serper'}
 							<div>
@@ -304,56 +157,7 @@
 									{$i18n.t('Serper API Key')}
 								</div>
 
-								<div class="flex w-full">
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('Enter Serper API Key')}
-											bind:value={webConfig.search.serper_api_key}
-											autocomplete="off"
-											{...{ type: showApiKey ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showApiKey = !showApiKey;
-											}}
-										>
-											{#if showApiKey}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
-								</div>
+								<SensitiveInput placeholder={$i18n.t('Enter Serper API Key')} bind:value={webConfig.search.serper_api_key} />
 							</div>
 						{:else if webConfig.search.engine === 'serply'}
 							<div>
@@ -361,56 +165,7 @@
 									{$i18n.t('Serply API Key')}
 								</div>
 
-								<div class="flex w-full">
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('Enter Serply API Key')}
-											bind:value={webConfig.search.serply_api_key}
-											autocomplete="off"
-											{...{ type: showApiKey ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showApiKey = !showApiKey;
-											}}
-										>
-											{#if showApiKey}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
-								</div>
+								<SensitiveInput placeholder={$i18n.t('Enter Serply API Key')} bind:value={webConfig.search.serply_api_key} />
 							</div>
 						{:else if webConfig.search.engine === 'tavily'}
 							<div>
@@ -418,56 +173,7 @@
 									{$i18n.t('Tavily API Key')}
 								</div>
 
-								<div class="flex w-full">
-									<div class="flex-1 flex">
-										<input
-											class="w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											placeholder={$i18n.t('Enter Tavily API Key')}
-											bind:value={webConfig.search.tavily_api_key}
-											autocomplete="off"
-											{...{ type: showApiKey ? 'text' : 'password' }}
-										/>
-										<button
-											class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-											on:click={(e) => {
-												e.preventDefault();
-												showApiKey = !showApiKey;
-											}}
-										>
-											{#if showApiKey}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-													/>
-												</svg>
-											{:else}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="w-4 h-4"
-												>
-													<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-													<path
-														fill-rule="evenodd"
-														d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											{/if}
-										</button>
-									</div>
-								</div>
+								<SensitiveInput placeholder={$i18n.t('Enter Tavily API Key')} bind:value={webConfig.search.tavily_api_key} />
 							</div>
 						{/if}
 					</div>
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 1ed5beac8..177bacb75 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -11,6 +11,7 @@
 	import { copyToClipboard } from '$lib/utils';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -21,11 +22,9 @@
 
 	let showAPIKeys = false;
 
-	let showJWTToken = false;
 	let JWTTokenCopied = false;
 
 	let APIKey = '';
-	let showAPIKey = false;
 	let APIKeyCopied = false;
 
 	let profileImageInputElement: HTMLInputElement;
@@ -255,53 +254,7 @@
 					</div>
 
 					<div class="flex mt-2">
-						<div class="flex w-full">
-							<input
-								class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-none"
-								type={showJWTToken ? 'text' : 'password'}
-								value={localStorage.token}
-								disabled
-							/>
-
-							<button
-								class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-								on:click={() => {
-									showJWTToken = !showJWTToken;
-								}}
-							>
-								{#if showJWTToken}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-											clip-rule="evenodd"
-										/>
-										<path
-											d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-										/>
-									</svg>
-								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-										<path
-											fill-rule="evenodd"
-											d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
-								{/if}
-							</button>
-						</div>
+						<SensitiveInput value={localStorage.token} readOnly={true} />
 
 						<button
 							class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
@@ -355,53 +308,7 @@
 
 					<div class="flex mt-2">
 						{#if APIKey}
-							<div class="flex w-full">
-								<input
-									class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-none"
-									type={showAPIKey ? 'text' : 'password'}
-									value={APIKey}
-									disabled
-								/>
-
-								<button
-									class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
-									on:click={() => {
-										showAPIKey = !showAPIKey;
-									}}
-								>
-									{#if showAPIKey}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-												clip-rule="evenodd"
-											/>
-											<path
-												d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-											/>
-										</svg>
-									{:else}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-											<path
-												fill-rule="evenodd"
-												d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									{/if}
-								</button>
-							</div>
+							<SensitiveInput value={APIKey} readOnly={true} />
 
 							<button
 								class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
diff --git a/src/lib/components/common/SensitiveInput.svelte b/src/lib/components/common/SensitiveInput.svelte
new file mode 100644
index 000000000..c046e9db1
--- /dev/null
+++ b/src/lib/components/common/SensitiveInput.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	export let value: string;
+	export let placeholder = "";
+	export let readOnly = false;
+	export let outerClassName = 'flex flex-1';
+	export let inputClassName =
+		'w-full rounded-l-lg py-2 pl-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none';
+	export let showButtonClassName = 'px-2 transition rounded-r-lg bg-white dark:bg-gray-850';
+
+	let show = false;
+</script>
+
+<div class={outerClassName}>
+	<input
+		class={inputClassName}
+		{placeholder}
+		bind:value
+		required={!readOnly}
+		disabled={readOnly}
+		autocomplete="off"
+		{...{ type: show ? 'text' : 'password' }}
+	/>
+	<button
+		class={showButtonClassName}
+		on:click={(e) => {
+			e.preventDefault();
+			show = !show;
+		}}
+	>
+		{#if show}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				class="w-4 h-4"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+					clip-rule="evenodd"
+				/>
+				<path
+					d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+				/>
+			</svg>
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				class="w-4 h-4"
+			>
+				<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+				<path
+					fill-rule="evenodd"
+					d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</button>
+</div>