Settings

{#if !$config || ($config && !$config.auth)} {/if}

{#if selectedTab === 'general'}

WebUI Settings

Theme

Notification

Ollama API URL

The field above should be set to '/ollama/api'; Click here for help.

System Prompt

</div>

<div class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								on:click={() => {
									saveSettings({
										API_BASE_URL: API_BASE_URL === '' ? OLLAMA_API_BASE_URL : API_BASE_URL,
										system: system !== '' ? system : undefined
									});
									show = false;
								}}
							>
								Save
							</button>
						</div>
					</div>
				{:else if selectedTab === 'advanced'}
					<div class="flex flex-col h-full justify-between text-sm">
						<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-72">
							<div class=" text-sm font-medium">Parameters</div>

<div>
								<div class=" py-1 flex w-full justify-between">
									<div class=" self-center text-sm font-medium">Request Mode</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										on:click={() => {
											toggleRequestFormat();
										}}
									>
										{#if requestFormat === ''}
											<span class="ml-2 self-center"> Default </span>
										{:else if requestFormat === 'json'}
											
											<span class="ml-2 self-center"> JSON </span>
										{/if}
									</button>
								</div>
							</div>
						</div>

<div class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								on:click={() => {
									saveSettings({
										options: {
											seed: (options.seed !== 0 ? options.seed : undefined) ?? undefined,
											stop:
												options.stop !== '' ? options.stop.split(',').filter((e) => e) : undefined,
											temperature: options.temperature !== '' ? options.temperature : undefined,
											repeat_penalty:
												options.repeat_penalty !== '' ? options.repeat_penalty : undefined,
											repeat_last_n:
												options.repeat_last_n !== '' ? options.repeat_last_n : undefined,
											mirostat: options.mirostat !== '' ? options.mirostat : undefined,
											mirostat_eta: options.mirostat_eta !== '' ? options.mirostat_eta : undefined,
											mirostat_tau: options.mirostat_tau !== '' ? options.mirostat_tau : undefined,
											top_k: options.top_k !== '' ? options.top_k : undefined,
											top_p: options.top_p !== '' ? options.top_p : undefined,
											tfs_z: options.tfs_z !== '' ? options.tfs_z : undefined,
											num_ctx: options.num_ctx !== '' ? options.num_ctx : undefined,
											num_predict: options.num_predict !== '' ? options.num_predict : undefined
										}
									});
									show = false;
								}}
							>
								Save
							</button>
						</div>
					</div>
				{:else if selectedTab === 'models'}
					<div class="flex flex-col h-full justify-between text-sm">
						<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
							<div>
								<div class=" mb-2.5 text-sm font-medium">Pull a model from Ollama.ai</div>
								<div class="flex w-full">
									<div class="flex-1 mr-2">
										<input
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											placeholder="Enter model tag (e.g. mistral:7b)"
											bind:value={modelTag}
										/>
									</div>
									<button
										class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-700 disabled:cursor-not-allowed rounded transition"
										on:click={() => {
											pullModelHandler();
										}}
										disabled={modelTransferring}
									>
										{#if modelTransferring}
											<div class="self-center">
												<svg
													class=" w-4 h-4"
													viewBox="0 0 24 24"
													fill="currentColor"
													xmlns="http://www.w3.org/2000/svg"
													><style>
														.spinner_ajPY {
															transform-origin: center;
															animation: spinner_AtaB 0.75s infinite linear;
														}
														@keyframes spinner_AtaB {
															100% {
																transform: rotate(360deg);
															}
														}
													</style><path
														d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
														opacity=".25"
													/><path
														d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
														class="spinner_ajPY"
													/></svg
												>
											</div>
										{:else}
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
												/>
												<path
													d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
												/>
											</svg>
										{/if}
									</button>
								</div>

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
									To access the available model names for downloading, <a
										class=" text-gray-500 dark:text-gray-300 font-medium"
										href="https://ollama.ai/library"
										target="_blank">click here.</a
									>
								</div>

{#if pullProgress !== null}
									<div class="mt-2">
										<div class=" mb-2 text-xs">Pull Progress</div>
										<div class="w-full rounded-full dark:bg-gray-800">
											<div
												class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
												style="width: {Math.max(15, pullProgress ?? 0)}%"
											>
												{pullProgress ?? 0}%
											</div>
										</div>
										<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
											{digest}
										</div>
									</div>
								{/if}
							</div>
							<hr class=" dark:border-gray-700" />

<div>
								<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
								<div class="flex w-full">
									<div class="flex-1 mr-2">
										<select
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											bind:value={deleteModelTag}
											placeholder="Select a model"
										>
											{#if !deleteModelTag}
												<option value="" disabled selected>Select a model</option>
											{/if}
											{#each $models.filter((m) => m.size != null) as model}
												<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
													>{model.name +
														' (' +
														(model.size / 1024 ** 3).toFixed(1) +
														' GB)'}</option
												>
											{/each}
										</select>
									</div>
									<button
										class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
										on:click={() => {
											deleteModelHandler();
										}}
									>
										<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="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
								</div>
							</div>

<form
								on:submit|preventDefault={() => {
									uploadModelHandler();
								}}
							>
								<div class=" mb-2 flex w-full justify-between">
									<div class="  text-sm font-medium">
										Upload a GGUF model <a
											class=" text-xs font-medium text-gray-500 underline"
											href="https://github.com/jmorganca/ollama/blob/main/README.md#import-from-gguf"
											target="_blank">(Experimental)</a
										>
									</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										on:click={() => {
											if (modelUploadMode === 'file') {
												modelUploadMode = 'url';
											} else {
												modelUploadMode = 'file';
											}
										}}
										type="button"
									>
										{#if modelUploadMode === 'file'}
											<span class="ml-2 self-center">File Mode</span>
										{:else}
											<span class="ml-2 self-center">URL Mode</span>
										{/if}
									</button>
								</div>

<div class="flex w-full mb-1.5">
									<div class="flex flex-col w-full">
										{#if modelUploadMode === 'file'}
											<div
												class="flex-1 {modelInputFile && modelInputFile.length > 0 ? 'mr-2' : ''}"
											>
												<input
													id="model-upload-input"
													type="file"
													bind:files={modelInputFile}
													on:change={() => {
														console.log(modelInputFile);
													}}
													accept=".gguf"
													required
													hidden
												/>

<button
													type="button"
													class="w-full rounded text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-800"
													on:click={() => {
														document.getElementById('model-upload-input').click();
													}}
												>
													{#if modelInputFile && modelInputFile.length > 0}
														{modelInputFile[0].name}
													{:else}
														Click here to select
													{/if}
												</button>
											</div>
										{:else}
											<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
												<input
													class="w-full rounded text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-800 outline-none {modelFileUrl !==
													''
														? 'mr-2'
														: ''}"
													type="url"
													required
													bind:value={modelFileUrl}
													placeholder="Type HuggingFace Resolve (Download) URL"
												/>
											</div>
										{/if}
									</div>

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
										<button
											class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-700 disabled:cursor-not-allowed rounded transition"
											type="submit"
											disabled={modelTransferring}
										>
											{#if modelTransferring}
												<div class="self-center">
													<svg
														class=" w-4 h-4"
														viewBox="0 0 24 24"
														fill="currentColor"
														xmlns="http://www.w3.org/2000/svg"
														><style>
															.spinner_ajPY {
																transform-origin: center;
																animation: spinner_AtaB 0.75s infinite linear;
															}
															@keyframes spinner_AtaB {
																100% {
																	transform: rotate(360deg);
																}
															}
														</style><path
															d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
															opacity=".25"
														/><path
															d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
															class="spinner_ajPY"
														/></svg
													>
												</div>
											{:else}
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 16 16"
													fill="currentColor"
													class="w-4 h-4"
												>
													<path
														d="M7.25 10.25a.75.75 0 0 0 1.5 0V4.56l2.22 2.22a.75.75 0 1 0 1.06-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06l2.22-2.22v5.69Z"
													/>
													<path
														d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
													/>
												</svg>
											{/if}
										</button>
									{/if}
								</div>

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
									<div>
										<div>
											<div class=" my-2.5 text-sm font-medium">Modelfile Content</div>
											<textarea
												bind:value={modelFileContent}
												class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
												rows="6"
											/>
										</div>
									</div>
								{/if}
								<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
									To access the GGUF models available for downloading, <a
										class=" text-gray-500 dark:text-gray-300 font-medium"
										href="https://huggingface.co/models?search=gguf"
										target="_blank">click here.</a
									>
								</div>

{#if uploadProgress !== null}
									<div class="mt-2">
										<div class=" mb-2 text-xs">Upload Progress</div>
										<div class="w-full rounded-full dark:bg-gray-800">
											<div
												class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
												style="width: {Math.max(15, uploadProgress ?? 0)}%"
											>
												{uploadProgress ?? 0}%
											</div>
										</div>
										<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
											{modelFileDigest}
										</div>
									</div>
								{/if}
							</form>
						</div>
					</div>
				{:else if selectedTab === 'external'}
					<form
						class="flex flex-col h-full justify-between space-y-3 text-sm"
						on:submit|preventDefault={() => {
							saveSettings({
								OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined,
								OPENAI_API_BASE_URL: OPENAI_API_BASE_URL !== '' ? OPENAI_API_BASE_URL : undefined
							});
							show = false;
						}}
					>
						<div class=" space-y-3">
							<div>
								<div class=" mb-2.5 text-sm font-medium">OpenAI API Key</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											placeholder="Enter OpenAI API Key"
											bind:value={OPENAI_API_KEY}
											autocomplete="off"
										/>
									</div>
								</div>
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
									Adds optional support for online models.
								</div>
							</div>

<div>
								<div class=" mb-2.5 text-sm font-medium">OpenAI API Base URL</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											placeholder="Enter OpenAI API Key"
											bind:value={OPENAI_API_BASE_URL}
											autocomplete="off"
										/>
									</div>
								</div>
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
									WebUI will make requests to <span class=" text-gray-200"
										>'{OPENAI_API_BASE_URL}/chat'</span
									>
								</div>
							</div>
						</div>

<div>
									<div class=" py-0.5 flex w-full justify-between">
										<div class=" self-center text-xs font-medium">Title Auto Generation</div>

<button
											class="p-1 px-3 text-xs flex rounded transition"
											on:click={() => {
												toggleTitleAutoGenerate();
											}}
											type="button"
										>
											{#if titleAutoGenerate === true}
												<span class="ml-2 self-center">On</span>
											{:else}
												<span class="ml-2 self-center">Off</span>
											{/if}
										</button>
									</div>
								</div>

<div>
									<div class=" py-0.5 flex w-full justify-between">
										<div class=" self-center text-xs font-medium">Voice Input Auto-Send</div>

<button
											class="p-1 px-3 text-xs flex rounded transition"
											on:click={() => {
												toggleSpeechAutoSend();
											}}
											type="button"
										>
											{#if speechAutoSend === true}
												<span class="ml-2 self-center">On</span>
											{:else}
												<span class="ml-2 self-center">Off</span>
											{/if}
										</button>
									</div>
								</div>

<div>
									<div class=" py-0.5 flex w-full justify-between">
										<div class=" self-center text-xs font-medium">
											Response AutoCopy to Clipboard
										</div>

<button
											class="p-1 px-3 text-xs flex rounded transition"
											on:click={() => {
												toggleResponseAutoCopy();
											}}
											type="button"
										>
											{#if responseAutoCopy === true}
												<span class="ml-2 self-center">On</span>
											{:else}
												<span class="ml-2 self-center">Off</span>
											{/if}
										</button>
									</div>
								</div>
							</div>

<hr class=" dark:border-gray-700" />
							<div>
								<div class=" mb-2.5 text-sm font-medium">
									Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
								</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											placeholder="Enter Your Email"
											bind:value={gravatarEmail}
											autocomplete="off"
											type="email"
										/>
									</div>
								</div>
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
									Changes user profile image to match your <a
										class=" text-gray-500 dark:text-gray-300 font-medium"
										href="https://gravatar.com/"
										target="_blank">Gravatar.</a
									>
								</div>
							</div>
						</div>

<div class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								type="submit"
							>
								Save
							</button>
						</div>
					</form>
				{:else if selectedTab === 'chats'}
					<div class="flex flex-col h-full justify-between space-y-3 text-sm">
						<div class=" space-y-2">
							<div class="flex flex-col">
								<input
									id="chat-import-input"
									bind:files={importFiles}
									type="file"
									accept=".json"
									hidden
								/>
								<button
									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
									on:click={() => {
										document.getElementById('chat-import-input').click();
									}}
								>
									<div class=" self-center mr-3">
										<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="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
												clip-rule="evenodd"
											/>
										</svg>
									</div>
									<div class=" self-center text-sm font-medium">Import Chats</div>
								</button>
								<button
									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
									on:click={() => {
										exportChats();
									}}
								>
									<div class=" self-center mr-3">
										<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="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
												clip-rule="evenodd"
											/>
										</svg>
									</div>
									<div class=" self-center text-sm font-medium">Export Chats</div>
								</button>
							</div>

{#if showDeleteConfirm}
								<div
									class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition"
								>
									<div class="flex items-center space-x-3">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 16 16"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z"
											/>
											<path
												fill-rule="evenodd"
												d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
												clip-rule="evenodd"
											/>
										</svg>
										<span>Are you sure?</span>
									</div>

<div class="flex space-x-1.5 items-center">
										<button
											class="hover:text-white transition"
											on:click={() => {
												deleteChats();
												showDeleteConfirm = false;
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 20 20"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													fill-rule="evenodd"
													d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
													clip-rule="evenodd"
												/>
											</svg>
										</button>
										<button
											class="hover:text-white transition"
											on:click={() => {
												showDeleteConfirm = false;
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 20 20"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
												/>
											</svg>
										</button>
									</div>
								</div>
							{:else}
								<button
									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
									on:click={() => {
										showDeleteConfirm = true;
									}}
								>
									<div class=" self-center mr-3">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 16 16"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z"
											/>
											<path
												fill-rule="evenodd"
												d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
												clip-rule="evenodd"
											/>
										</svg>
									</div>
									<div class=" self-center text-sm font-medium">Delete All Chats</div>
								</button>
							{/if}
						</div>
					</div>
				{:else if selectedTab === 'auth'}
					<form
						class="flex flex-col h-full justify-between space-y-3 text-sm"
						on:submit|preventDefault={() => {
							console.log('auth save');
							saveSettings({
								authHeader: authEnabled ? `${authType} ${authContent}` : undefined
							});
							show = false;
						}}
					>
						<div class=" space-y-3">
							<div>
								<div class=" py-1 flex w-full justify-between">
									<div class=" self-center text-sm font-medium">Authorization Header</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										type="button"
										on:click={() => {
											toggleAuthHeader();
										}}
									>
										{#if authEnabled === true}
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 24 24"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													fill-rule="evenodd"
													d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
													clip-rule="evenodd"
												/>
											</svg>

{#if authEnabled}
								<hr class=" dark:border-gray-700" />

<div class="mt-2">
									<div class=" py-1 flex w-full space-x-2">
										<button
											class=" py-1 font-semibold flex rounded transition"
											on:click={() => {
												authType = authType === 'Basic' ? 'Bearer' : 'Basic';
											}}
											type="button"
										>
											{#if authType === 'Basic'}
												<span class="self-center mr-2">Basic</span>
											{:else if authType === 'Bearer'}
												<span class="self-center mr-2">Bearer</span>
											{/if}
										</button>

<div class="flex-1">
											<input
												class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
												placeholder="Enter Authorization Header Content"
												bind:value={authContent}
											/>
										</div>
									</div>
									<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
										Toggle between <span class=" text-gray-500 dark:text-gray-300 font-medium"
											>'Basic'</span
										>
										and <span class=" text-gray-500 dark:text-gray-300 font-medium">'Bearer'</span> by
										clicking on the label next to the input.
									</div>
								</div>

<div>
									<div class=" mb-2.5 text-sm font-medium">Preview Authorization Header</div>
									<textarea
										value={JSON.stringify({
											Authorization: `${authType} ${authContent}`
										})}
										class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
										rows="2"
										disabled
									/>
								</div>
							{/if}
						</div>

<div class=" space-y-1.5">
							<div class="flex flex-col w-full">
								<div class=" mb-1 text-xs text-gray-500">Current Password</div>

<div class="flex flex-col w-full">
								<div class=" mb-1 text-xs text-gray-500">New Password</div>

<div class="flex flex-col w-full">
								<div class=" mb-1 text-xs text-gray-500">Confirm Password</div>

<div class="mt-3 flex justify-end">
							<button
								class=" px-4 py-2 text-xs bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-100 transition rounded-md font-medium"
							>
								Update password
							</button>
						</div>
					</form>
				{:else if selectedTab === 'about'}
					<div class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
						<div class=" space-y-3">
							<div>
								<div class=" mb-2.5 text-sm font-medium">Ollama Web UI Version</div>
								<div class="flex w-full">
									<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
										{$config && $config.version ? $config.version : WEB_UI_VERSION}
									</div>
								</div>
							</div>

<div>
								<div class=" mb-2.5 text-sm font-medium">Ollama Version</div>
								<div class="flex w-full">
									<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
										{ollamaVersion ?? 'N/A'}
									</div>
								</div>
							</div>

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
								Created by <a
									class=" text-gray-500 dark:text-gray-300 font-medium"
									href="https://github.com/tjbck"
									target="_blank">Timothy J. Baek</a
								>
							</div>
						</div>
					</div>
				{/if}
			</div>
		</div>
	</div>
</Modal>

.tabs::-webkit-scrollbar {
		display: none; /* for Chrome, Safari and Opera */
	}

.tabs {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}

input[type='number'] {
		-moz-appearance: textfield; /* Firefox */
	}
</style>