Merge pull request #897 from open-webui/main

dev

src/lib/components/chat/Messages/CodeBlock.svelte

+<script lang="ts">
+	import { copyToClipboard } from '$lib/utils';
+	import hljs from 'highlight.js';
+	import 'highlight.js/styles/github-dark.min.css';
+
+	export let lang = '';
+	export let code = '';
+
+	let copied = false;
+
+	const copyCode = async () => {
+		copied = true;
+		await copyToClipboard(code);
+
+		setTimeout(() => {
+			copied = false;
+		}, 1000);
+	};
+
+	$: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : '';
+</script>
+
+{#if code}
+	<div class="mb-4">
+		<div
+			class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
+		>
+			<div class="p-1">{@html lang}</div>
+			<button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
+				>{copied ? 'Copied' : 'Copy Code'}</button
+			>
+		</div>
+
+		<pre class=" rounded-b-lg hljs p-4 px-5 overflow-x-auto rounded-t-none"><code
+				class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code
+			></pre>
+	</div>
+{/if}

src/lib/components/chat/Messages/Name.svelte

-<div class=" self-center font-bold mb-0.5 capitalize">
+<div class=" self-center font-bold mb-0.5 capitalize line-clamp-1">
 	<slot />
 </div>

src/lib/components/chat/Messages/Placeholder.svelte

 <script lang="ts">
+	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { onMount } from 'svelte';
 
 	export let models = [];
@@ -16,9 +17,9 @@
 </script>
 
 {#if models.length > 0}
-	<div class="m-auto text-center max-w-md pb-56 px-2">
+	<div class="m-auto text-center max-w-md px-2">
 		<div class="flex justify-center mt-8">
-			<div class="flex -space-x-10">
+			<div class="flex -space-x-4 mb-1">
 				{#each models as model, modelIdx}
 					<button
 						on:click={() => {
@@ -27,20 +28,18 @@
 					>
 						{#if model in modelfiles}
 							<img
-								src={modelfiles[model]?.imageUrl ?? '/ollama-dark.png'}
+								src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
 								alt="modelfile"
-								class=" w-20 mb-2 rounded-full {models.length > 1
-									? ' border-[5px] border-white dark:border-gray-800'
-									: ''}"
+								class=" w-14 rounded-full border-[1px] border-gray-200 dark:border-none"
 								draggable="false"
 							/>
 						{:else}
 							<img
-								src={models.length === 1 ? '/ollama.png' : 'ollama-dark.png'}
-								class=" w-20 mb-2 {models.length === 1
-									? 'invert-[10%] dark:invert-[100%]'
-									: 'border-[5px] border-white dark:border-gray-800'}  rounded-full"
-								alt="ollama"
+								src={models.length === 1
+									? `${WEBUI_BASE_URL}/static/favicon.png`
+									: `${WEBUI_BASE_URL}/static/favicon.png`}
+								class=" w-14 rounded-full border-[1px] border-gray-200 dark:border-none"
+								alt="logo"
 								draggable="false"
 							/>
 						{/if}
@@ -58,7 +57,7 @@
 				</div>
 				{#if modelfile.user}
 					<div class="mt-0.5 text-sm font-normal text-gray-500 dark:text-gray-500">
-						By <a href="https://ollamahub.com/m/{modelfile.user.username}"
+						By <a href="https://openwebui.com/m/{modelfile.user.username}"
 							>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
 						>
 					</div>

src/lib/components/chat/Messages/ResponseMessage.svelte

 <script lang="ts">
+	import toast from 'svelte-french-toast';
+	import dayjs from 'dayjs';
 	import { marked } from 'marked';
-
 	import tippy from 'tippy.js';
-	import hljs from 'highlight.js';
-	import 'highlight.js/styles/github-dark.min.css';
 	import auto_render from 'katex/dist/contrib/auto-render.mjs';
 	import 'katex/dist/katex.min.css';
 
+	import { createEventDispatcher } from 'svelte';
+	import { onMount, tick } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	import { config, settings } from '$lib/stores';
+	import { synthesizeOpenAISpeech } from '$lib/apis/openai';
+	import { imageGenerations } from '$lib/apis/images';
+	import { extractSentences } from '$lib/utils';
+
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import Skeleton from './Skeleton.svelte';
-	import { onMount, tick } from 'svelte';
+	import CodeBlock from './CodeBlock.svelte';
+	import Image from '$lib/components/common/Image.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	export let modelfiles = [];
 	export let message;
@@ -24,13 +35,34 @@
 	export let rateMessage: Function;
 
 	export let copyToClipboard: Function;
+	export let continueGeneration: Function;
 	export let regenerateResponse: Function;
 
 	let edit = false;
 	let editedContent = '';
 
 	let tooltipInstance = null;
+
+	let sentencesAudio = {};
 	let speaking = null;
+	let speakingIdx = null;
+
+	let loadingSpeech = false;
+	let generatingImage = false;
+
+	$: tokens = marked.lexer(message.content);
+
+	const renderer = new marked.Renderer();
+
+	// For code blocks with simple backticks
+	renderer.codespan = (code) => {
+		return `<code>${code.replaceAll('&amp;', '&')}</code>`;
+	};
+
+	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		extensions: any;
+	};
 
 	$: if (message) {
 		renderStyling();
@@ -40,22 +72,27 @@
 		await tick();
 
 		if (tooltipInstance) {
-			tooltipInstance[0].destroy();
+			tooltipInstance[0]?.destroy();
 		}
 
 		renderLatex();
-		hljs.highlightAll();
-		createCopyCodeBlockButton();
 
 		if (message.info) {
 			tooltipInstance = tippy(`#info-${message.id}`, {
-				content: `<span class="text-xs" id="tooltip-${message.id}">token/s: ${
+				content: `<span class="text-xs" id="tooltip-${message.id}">response_token/s: ${
 					`${
 						Math.round(
 							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
 						) / 100
 					} tokens` ?? 'N/A'
 				}<br/>
+					prompt_token/s: ${
+						Math.round(
+							((message.info.prompt_eval_count ?? 0) /
+								(message.info.prompt_eval_duration / 1000000000)) *
+								100
+						) / 100 ?? 'N/A'
+					} tokens<br/>
                     total_duration: ${
 											Math.round(((message.info.total_duration ?? 0) / 1000000) * 100) / 100 ??
 											'N/A'
@@ -77,71 +114,6 @@
 		}
 	};
 
-	const createCopyCodeBlockButton = () => {
-		// use a class selector if available
-		let blocks = document.querySelectorAll('pre');
-
-		blocks.forEach((block) => {
-			// only add button if browser supports Clipboard API
-
-			if (block.childNodes.length < 2 && block.id !== 'user-message') {
-				let code = block.querySelector('code');
-				code.style.borderTopRightRadius = 0;
-				code.style.borderTopLeftRadius = 0;
-				code.style.whiteSpace = 'pre';
-
-				let topBarDiv = document.createElement('div');
-				topBarDiv.style.backgroundColor = '#202123';
-				topBarDiv.style.overflowX = 'auto';
-				topBarDiv.style.display = 'flex';
-				topBarDiv.style.justifyContent = 'space-between';
-				topBarDiv.style.padding = '0 1rem';
-				topBarDiv.style.paddingTop = '4px';
-				topBarDiv.style.borderTopRightRadius = '8px';
-				topBarDiv.style.borderTopLeftRadius = '8px';
-
-				let langDiv = document.createElement('div');
-
-				let codeClassNames = code?.className.split(' ');
-				langDiv.textContent =
-					codeClassNames[0] === 'hljs' ? codeClassNames[1].slice(9) : codeClassNames[0].slice(9);
-				langDiv.style.color = 'white';
-				langDiv.style.margin = '4px';
-				langDiv.style.fontSize = '0.75rem';
-
-				let button = document.createElement('button');
-				button.className = 'copy-code-button';
-				button.textContent = 'Copy Code';
-				button.style.background = 'none';
-				button.style.fontSize = '0.75rem';
-				button.style.border = 'none';
-				button.style.margin = '4px';
-				button.style.cursor = 'pointer';
-				button.style.color = '#ddd';
-				button.addEventListener('click', () => copyCode(block, button));
-
-				topBarDiv.appendChild(langDiv);
-				topBarDiv.appendChild(button);
-
-				block.prepend(topBarDiv);
-			}
-		});
-
-		async function copyCode(block, button) {
-			let code = block.querySelector('code');
-			let text = code.innerText;
-
-			await copyToClipboard(text);
-
-			// visual feedback that task is completed
-			button.innerText = 'Copied!';
-
-			setTimeout(() => {
-				button.innerText = 'Copy Code';
-			}, 1000);
-		}
-	};
-
 	const renderLatex = () => {
 		let chatMessageElements = document.getElementsByClassName('chat-assistant');
 		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];
@@ -151,10 +123,11 @@
 				// customised options
 				// • auto-render specific keys, e.g.:
 				delimiters: [
-					{ left: '$$', right: '$$', display: true },
-					// { left: '$', right: '$', display: false },
-					{ left: '\\(', right: '\\)', display: true },
-					{ left: '\\[', right: '\\]', display: true }
+					{ left: '$$', right: '$$', display: false },
+					{ left: '$', right: '$', display: false },
+					{ left: '\\(', right: '\\)', display: false },
+					{ left: '\\[', right: '\\]', display: false },
+					{ left: '[ ', right: ' ]', display: false }
 				],
 				// • rendering keys, e.g.:
 				throwOnError: false
@@ -162,14 +135,110 @@
 		}
 	};
 
+	const playAudio = (idx) => {
+		return new Promise((res) => {
+			speakingIdx = idx;
+			const audio = sentencesAudio[idx];
+			audio.play();
+			audio.onended = async (e) => {
+				await new Promise((r) => setTimeout(r, 300));
+
+				if (Object.keys(sentencesAudio).length - 1 === idx) {
+					speaking = null;
+
+					if ($settings.conversationMode) {
+						document.getElementById('voice-input-button')?.click();
+					}
+				}
+
+				res(e);
+			};
+		});
+	};
+
 	const toggleSpeakMessage = async () => {
 		if (speaking) {
 			speechSynthesis.cancel();
+
+			sentencesAudio[speakingIdx].pause();
+			sentencesAudio[speakingIdx].currentTime = 0;
+
 			speaking = null;
+			speakingIdx = null;
 		} else {
 			speaking = true;
-			const speak = new SpeechSynthesisUtterance(message.content);
-			speechSynthesis.speak(speak);
+
+			if ($settings?.audio?.TTSEngine === 'openai') {
+				loadingSpeech = true;
+
+				const sentences = extractSentences(message.content).reduce((mergedTexts, currentText) => {
+					const lastIndex = mergedTexts.length - 1;
+					if (lastIndex >= 0) {
+						const previousText = mergedTexts[lastIndex];
+						const wordCount = previousText.split(/\s+/).length;
+						if (wordCount < 2) {
+							mergedTexts[lastIndex] = previousText + ' ' + currentText;
+						} else {
+							mergedTexts.push(currentText);
+						}
+					} else {
+						mergedTexts.push(currentText);
+					}
+					return mergedTexts;
+				}, []);
+
+				console.log(sentences);
+
+				sentencesAudio = sentences.reduce((a, e, i, arr) => {
+					a[i] = null;
+					return a;
+				}, {});
+
+				let lastPlayedAudioPromise = Promise.resolve(); // Initialize a promise that resolves immediately
+
+				for (const [idx, sentence] of sentences.entries()) {
+					const res = await synthesizeOpenAISpeech(
+						localStorage.token,
+						$settings?.audio?.speaker,
+						sentence
+					).catch((error) => {
+						toast.error(error);
+						return null;
+					});
+
+					if (res) {
+						const blob = await res.blob();
+						const blobUrl = URL.createObjectURL(blob);
+						const audio = new Audio(blobUrl);
+						sentencesAudio[idx] = audio;
+						loadingSpeech = false;
+
+						lastPlayedAudioPromise = lastPlayedAudioPromise.then(() => playAudio(idx));
+					}
+				}
+			} else {
+				let voices = [];
+				const getVoicesLoop = setInterval(async () => {
+					voices = await speechSynthesis.getVoices();
+					if (voices.length > 0) {
+						clearInterval(getVoicesLoop);
+
+						const voice =
+							voices?.filter((v) => v.name === $settings?.audio?.speaker)?.at(0) ?? undefined;
+
+						const speak = new SpeechSynthesisUtterance(message.content);
+
+						speak.onend = () => {
+							speaking = null;
+							if ($settings.conversationMode) {
+								document.getElementById('voice-input-button')?.click();
+							}
+						};
+						speak.voice = voice;
+						speechSynthesis.speak(speak);
+					}
+				}, 100);
+			}
 		}
 	};
 
@@ -185,6 +254,10 @@
 	};
 
 	const editMessageConfirmHandler = async () => {
+		if (editedContent === '') {
+			editedContent = ' ';
+		}
+
 		confirmEditResponseMessage(message.id, editedContent);
 
 		edit = false;
@@ -201,174 +274,105 @@
 		renderStyling();
 	};
 
+	const generateImage = async (message) => {
+		generatingImage = true;
+		const res = await imageGenerations(localStorage.token, message.content);
+		console.log(res);
+
+		if (res) {
+			message.files = res.images.map((image) => ({
+				type: 'image',
+				url: `data:image/png;base64,${image}`
+			}));
+
+			dispatch('save', message);
+		}
+
+		generatingImage = false;
+	};
+
 	onMount(async () => {
 		await tick();
 		renderStyling();
 	});
 </script>
 
-<div class=" flex w-full message-{message.id}">
-	<ProfileImage src={modelfiles[message.model]?.imageUrl ?? '/favicon.png'} />
-
-	<div class="w-full overflow-hidden">
-		<Name>
-			{#if message.model in modelfiles}
-				{modelfiles[message.model]?.title}
+{#key message.id}
+	<div class=" flex w-full message-{message.id}">
+		<ProfileImage
+			src={modelfiles[message.model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+		/>
+
+		<div class="w-full overflow-hidden">
+			<Name>
+				{#if message.model in modelfiles}
+					{modelfiles[message.model]?.title}
+				{:else}
+					{message.model ? ` ${message.model}` : ''}
+				{/if}
+
+				{#if message.timestamp}
+					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
+						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:mm')}
+					</span>
+				{/if}
+			</Name>
+
+			{#if message.content === ''}
+				<Skeleton />
 			{:else}
-				Ollama <span class=" text-gray-500 text-sm font-medium"
-					>{message.model ? ` ${message.model}` : ''}</span
-				>
-			{/if}
-		</Name>
-
-		{#if message.content === ''}
-			<Skeleton />
-		{:else}
-			<div
-				class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
-			>
-				<div>
-					{#if edit === true}
-						<div class=" w-full">
-							<textarea
-								id="message-edit-{message.id}"
-								class=" bg-transparent outline-none w-full resize-none"
-								bind:value={editedContent}
-								on:input={(e) => {
-									e.target.style.height = `${e.target.scrollHeight}px`;
-								}}
-							/>
-
-							<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
-								<button
-									class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
-									on:click={() => {
-										editMessageConfirmHandler();
-									}}
-								>
-									Save
-								</button>
-
-								<button
-									class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-									on:click={() => {
-										cancelEditMessage();
-									}}
-								>
-									Cancel
-								</button>
+				{#if message.files}
+					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
+						{#each message.files as file}
+							<div>
+								{#if file.type === 'image'}
+									<Image src={file.url} />
+								{/if}
 							</div>
-						</div>
-					{:else}
-						<div class="w-full">
-							{#if message?.error === true}
-								<div
-									class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="w-5 h-5 self-center"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-										/>
-									</svg>
-
-									<div class=" self-center">
-										{message.content}
-									</div>
-								</div>
-							{:else}
-								{@html marked(message.content.replaceAll('\\', '\\\\'))}
-							{/if}
-
-							{#if message.done}
-								<div class=" flex justify-start space-x-1 -mt-2">
-									{#if siblings.length > 1}
-										<div class="flex self-center">
-											<button
-												class="self-center"
-												on:click={() => {
-													showPreviousMessage(message);
-												}}
-											>
-												<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="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
-
-											<div class="text-xs font-bold self-center">
-												{siblings.indexOf(message.id) + 1} / {siblings.length}
-											</div>
+						{/each}
+					</div>
+				{/if}
 
-											<button
-												class="self-center"
-												on:click={() => {
-													showNextMessage(message);
-												}}
-											>
-												<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="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
-										</div>
-									{/if}
+				<div
+					class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-li:-mb-4 whitespace-pre-line"
+				>
+					<div>
+						{#if edit === true}
+							<div class=" w-full">
+								<textarea
+									id="message-edit-{message.id}"
+									class=" bg-transparent outline-none w-full resize-none"
+									bind:value={editedContent}
+									on:input={(e) => {
+										e.target.style.height = `${e.target.scrollHeight}px`;
+									}}
+								/>
 
+								<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
 									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+										class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
 										on:click={() => {
-											editMessageHandler();
+											editMessageConfirmHandler();
 										}}
 									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-											/>
-										</svg>
+										Save
 									</button>
 
 									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
+										class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
 										on:click={() => {
-											copyToClipboard(message.content);
+											cancelEditMessage();
 										}}
+									>
+										Cancel
+									</button>
+								</div>
+							</div>
+						{:else}
+							<div class="w-full">
+								{#if message?.error === true}
+									<div
+										class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
 									>
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
@@ -376,74 +380,96 @@
 											viewBox="0 0 24 24"
 											stroke-width="1.5"
 											stroke="currentColor"
-											class="w-4 h-4"
+											class="w-5 h-5 self-center"
 										>
 											<path
 												stroke-linecap="round"
 												stroke-linejoin="round"
-												d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+												d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
 											/>
 										</svg>
-									</button>
 
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
-											? 'bg-gray-100 dark:bg-gray-900'
-											: ''} transition"
-										on:click={() => {
-											rateMessage(message.id, 1);
-										}}
-									>
-										<svg
-											stroke="currentColor"
-											fill="none"
-											stroke-width="2"
-											viewBox="0 0 24 24"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											class="w-4 h-4"
-											xmlns="http://www.w3.org/2000/svg"
-											><path
-												d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-											/></svg
-										>
-									</button>
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
-											? 'bg-gray-100 dark:bg-gray-900'
-											: ''} transition"
-										on:click={() => {
-											rateMessage(message.id, -1);
-										}}
-									>
-										<svg
-											stroke="currentColor"
-											fill="none"
-											stroke-width="2"
-											viewBox="0 0 24 24"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											class="w-4 h-4"
-											xmlns="http://www.w3.org/2000/svg"
-											><path
-												d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
-											/></svg
-										>
-									</button>
+										<div class=" self-center">
+											{message.content}
+										</div>
+									</div>
+								{:else}
+									{#each tokens as token}
+										{#if token.type === 'code'}
+											<!-- {token.text} -->
+											<CodeBlock lang={token.lang} code={token.text} />
+										{:else}
+											{@html marked.parse(token.raw, {
+												...defaults,
+												gfm: true,
+												breaks: true,
+												renderer
+											})}
+										{/if}
+									{/each}
+									<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
+								{/if}
 
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-										on:click={() => {
-											toggleSpeakMessage(message);
-										}}
+								{#if message.done}
+									<div
+										class=" flex justify-start space-x-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
 									>
-										{#if speaking}
+										{#if siblings.length > 1}
+											<div class="flex self-center min-w-fit">
+												<button
+													class="self-center dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														showPreviousMessage(message);
+													}}
+												>
+													<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="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												</button>
+
+												<div class="text-xs font-bold self-center min-w-fit dark:text-gray-100">
+													{siblings.indexOf(message.id) + 1} / {siblings.length}
+												</div>
+
+												<button
+													class="self-center dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														showNextMessage(message);
+													}}
+												>
+													<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="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												</button>
+											</div>
+										{/if}
+
+										<button
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+											on:click={() => {
+												editMessageHandler();
+											}}
+										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
 												fill="none"
@@ -455,10 +481,19 @@
 												<path
 													stroke-linecap="round"
 													stroke-linejoin="round"
-													d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
+													d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
 												/>
 											</svg>
-										{:else}
+										</button>
+
+										<button
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition copy-response-button"
+											on:click={() => {
+												copyToClipboard(message.content);
+											}}
+										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
 												fill="none"
@@ -470,69 +505,298 @@
 												<path
 													stroke-linecap="round"
 													stroke-linejoin="round"
-													d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+													d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
 												/>
 											</svg>
-										{/if}
-									</button>
+										</button>
 
-									{#if message.info}
 										<button
-											class=" {isLastMessage
+											class="{isLastMessage
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
+												: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
+												? 'bg-gray-100 dark:bg-gray-800'
+												: ''} dark:hover:text-white hover:text-black transition"
 											on:click={() => {
-												console.log(message);
+												rateMessage(message.id, 1);
 											}}
-											id="info-{message.id}"
 										>
 											<svg
-												xmlns="http://www.w3.org/2000/svg"
+												stroke="currentColor"
 												fill="none"
+												stroke-width="2"
 												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
+												stroke-linecap="round"
+												stroke-linejoin="round"
 												class="w-4 h-4"
+												xmlns="http://www.w3.org/2000/svg"
+												><path
+													d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+												/></svg
 											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-												/>
-											</svg>
 										</button>
-									{/if}
-
-									{#if isLastMessage}
 										<button
-											type="button"
 											class="{isLastMessage
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-											on:click={regenerateResponse}
+												: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
+												? 'bg-gray-100 dark:bg-gray-800'
+												: ''} dark:hover:text-white hover:text-black transition"
+											on:click={() => {
+												rateMessage(message.id, -1);
+											}}
 										>
 											<svg
-												xmlns="http://www.w3.org/2000/svg"
+												stroke="currentColor"
 												fill="none"
+												stroke-width="2"
 												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
+												stroke-linecap="round"
+												stroke-linejoin="round"
 												class="w-4 h-4"
+												xmlns="http://www.w3.org/2000/svg"
+												><path
+													d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+												/></svg
 											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-												/>
-											</svg>
 										</button>
-									{/if}
-								</div>
-							{/if}
-						</div>
-					{/if}
+
+										<button
+											id="speak-button-{message.id}"
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+											on:click={() => {
+												if (!loadingSpeech) {
+													toggleSpeakMessage(message);
+												}
+											}}
+										>
+											{#if loadingSpeech}
+												<svg
+													class=" w-4 h-4"
+													fill="currentColor"
+													viewBox="0 0 24 24"
+													xmlns="http://www.w3.org/2000/svg"
+													><style>
+														.spinner_S1WN {
+															animation: spinner_MGfb 0.8s linear infinite;
+															animation-delay: -0.8s;
+														}
+														.spinner_Km9P {
+															animation-delay: -0.65s;
+														}
+														.spinner_JApP {
+															animation-delay: -0.5s;
+														}
+														@keyframes spinner_MGfb {
+															93.75%,
+															100% {
+																opacity: 0.2;
+															}
+														}
+													</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
+														class="spinner_S1WN spinner_Km9P"
+														cx="12"
+														cy="12"
+														r="3"
+													/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /></svg
+												>
+											{:else if speaking}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+													/>
+												</svg>
+											{/if}
+										</button>
+
+										{#if $config.images}
+											<button
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													if (!generatingImage) {
+														generateImage(message);
+													}
+												}}
+											>
+												{#if generatingImage}
+													<svg
+														class=" w-4 h-4"
+														fill="currentColor"
+														viewBox="0 0 24 24"
+														xmlns="http://www.w3.org/2000/svg"
+														><style>
+															.spinner_S1WN {
+																animation: spinner_MGfb 0.8s linear infinite;
+																animation-delay: -0.8s;
+															}
+															.spinner_Km9P {
+																animation-delay: -0.65s;
+															}
+															.spinner_JApP {
+																animation-delay: -0.5s;
+															}
+															@keyframes spinner_MGfb {
+																93.75%,
+																100% {
+																	opacity: 0.2;
+																}
+															}
+														</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
+															class="spinner_S1WN spinner_Km9P"
+															cx="12"
+															cy="12"
+															r="3"
+														/><circle
+															class="spinner_S1WN spinner_JApP"
+															cx="20"
+															cy="12"
+															r="3"
+														/></svg
+													>
+												{:else}
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="1.5"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+														/>
+													</svg>
+												{/if}
+											</button>
+										{/if}
+
+										{#if message.info}
+											<button
+												class=" {isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
+												on:click={() => {
+													console.log(message);
+												}}
+												id="info-{message.id}"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+													/>
+												</svg>
+											</button>
+										{/if}
+
+										{#if isLastMessage}
+											<button
+												type="button"
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
+												on:click={() => {
+													continueGeneration();
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
+													/>
+												</svg>
+											</button>
+
+											<button
+												type="button"
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
+												on:click={regenerateResponse}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+													/>
+												</svg>
+											</button>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
-</div>
+{/key}
+
+<style>
+	.buttons::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari and Opera */
+	}
+
+	.buttons {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+</style>

src/lib/components/chat/Messages/UserMessage.svelte

 <script lang="ts">
-	import { tick } from 'svelte';
+	import dayjs from 'dayjs';
+
+	import { tick, createEventDispatcher } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
+	import { modelfiles, settings } from '$lib/stores';
+
+	const dispatch = createEventDispatcher();
 
 	export let user;
 	export let message;
 	export let siblings;
+	export let isFirstMessage: boolean;
 
 	export let confirmEditMessage: Function;
 	export let showPreviousMessage: Function;
@@ -39,14 +45,40 @@
 		edit = false;
 		editedContent = '';
 	};
+
+	const deleteMessageHandler = async () => {
+		dispatch('delete', message.id);
+	};
 </script>
 
 <div class=" flex w-full">
-	<ProfileImage src={user?.profile_image_url ?? '/user.png'} />
+	<ProfileImage
+		src={message.user
+			? $modelfiles.find((modelfile) => modelfile.tagName === message.user)?.imageUrl ?? '/user.png'
+			: user?.profile_image_url ?? '/user.png'}
+	/>
 
 	<div class="w-full overflow-hidden">
 		<div class="user-message">
-			<Name>You</Name>
+			<Name>
+				{#if message.user}
+					{#if $modelfiles.map((modelfile) => modelfile.tagName).includes(message.user)}
+						{$modelfiles.find((modelfile) => modelfile.tagName === message.user)?.title}
+					{:else}
+						You <span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
+					{/if}
+				{:else if $settings.showUsername}
+					{user.name}
+				{:else}
+					You
+				{/if}
+
+				{#if message.timestamp}
+					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
+						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:mm')}
+					</span>
+				{/if}
+			</Name>
 		</div>
 
 		<div
@@ -59,8 +91,14 @@
 							{#if file.type === 'image'}
 								<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
 							{:else if file.type === 'doc'}
-								<div
-									class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none"
+								<button
+									class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none text-left"
+									type="button"
+									on:click={() => {
+										if (file?.url) {
+											window.open(file?.url, '_blank').focus();
+										}
+									}}
 								>
 									<div class="p-2.5 bg-red-400 text-white rounded-lg">
 										<svg
@@ -87,7 +125,36 @@
 
 										<div class=" text-gray-500 text-sm">Document</div>
 									</div>
-								</div>
+								</button>
+							{:else if file.type === 'collection'}
+								<button
+									class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none text-left"
+									type="button"
+								>
+									<div class="p-2.5 bg-red-400 text-white rounded-lg">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 24 24"
+											fill="currentColor"
+											class="w-6 h-6"
+										>
+											<path
+												d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
+											/>
+											<path
+												d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
+											/>
+										</svg>
+									</div>
+
+									<div class="flex flex-col justify-center -space-y-0.5">
+										<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
+											{file?.title ?? `#${file.name}`}
+										</div>
+
+										<div class=" text-gray-500 text-sm">Collection</div>
+									</div>
+								</button>
 							{/if}
 						</div>
 					{/each}
@@ -129,11 +196,11 @@
 				<div class="w-full">
 					<pre id="user-message">{message.content}</pre>
 
-					<div class=" flex justify-start space-x-1">
+					<div class=" flex justify-start space-x-1 text-gray-700 dark:text-gray-500">
 						{#if siblings.length > 1}
 							<div class="flex self-center">
 								<button
-									class="self-center"
+									class="self-center dark:hover:text-white hover:text-black transition"
 									on:click={() => {
 										showPreviousMessage(message);
 									}}
@@ -152,12 +219,12 @@
 									</svg>
 								</button>
 
-								<div class="text-xs font-bold self-center">
+								<div class="text-xs font-bold self-center dark:text-gray-100">
 									{siblings.indexOf(message.id) + 1} / {siblings.length}
 								</div>
 
 								<button
-									class="self-center"
+									class="self-center dark:hover:text-white hover:text-black transition"
 									on:click={() => {
 										showNextMessage(message);
 									}}
@@ -179,7 +246,7 @@
 						{/if}
 
 						<button
-							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition edit-user-message-button"
+							class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition edit-user-message-button"
 							on:click={() => {
 								editMessageHandler();
 							}}
@@ -201,7 +268,7 @@
 						</button>
 
 						<button
-							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
+							class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
 							on:click={() => {
 								copyToClipboard(message.content);
 							}}
@@ -221,6 +288,30 @@
 								/>
 							</svg>
 						</button>
+
+						{#if !isFirstMessage}
+							<button
+								class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
+								on:click={() => {
+									deleteMessageHandler();
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+									/>
+								</svg>
+							</button>
+						{/if}
 					</div>
 				</div>
 			{/if}

src/lib/components/chat/ModelSelector.svelte

@@ -45,7 +45,10 @@
 					{#if model.name === 'hr'}
 						<hr />
 					{:else}
-						<option value={model.name} class="text-gray-700 text-lg">{model.name}</option>
+						<option value={model.name} class="text-gray-700 text-lg"
+							>{model.name +
+								`${model.size ? ` (${(model.size / 1024 ** 3).toFixed(1)}GB)` : ''}`}</option
+						>
 					{/if}
 				{/each}
 			</select>
@@ -55,11 +58,9 @@
 					class="  self-center {selectedModelIdx === 0
 						? 'mr-3'
 						: 'mr-7'} disabled:text-gray-600 disabled:hover:text-gray-600"
-					disabled={selectedModels.length === 3 || disabled}
+					{disabled}
 					on:click={() => {
-						if (selectedModels.length < 3) {
-							selectedModels = [...selectedModels, ''];
-						}
+						selectedModels = [...selectedModels, ''];
 					}}
 				>
 					<svg

src/lib/components/chat/Settings/About.svelte

+<script lang="ts">
+	import { getOllamaVersion } from '$lib/apis/ollama';
+	import { WEBUI_VERSION } from '$lib/constants';
+	import { WEBUI_NAME, config, showChangelog } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	let ollamaVersion = '';
+	onMount(async () => {
+		ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => {
+			return '';
+		});
+	});
+</script>
+
+<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 flex space-x-2 items-center">
+				<div>
+					{$WEBUI_NAME} Version
+				</div>
+			</div>
+			<div class="flex w-full">
+				<div class="flex-1 text-xs text-gray-700 dark:text-gray-200 flex space-x-1.5 items-center">
+					<div>
+						v{WEBUI_VERSION}
+					</div>
+
+					<button
+						class=" underline flex items-center space-x-1 text-xs text-gray-500 dark:text-gray-500"
+						on:click={() => {
+							showChangelog.set(true);
+						}}
+					>
+						<div>See what's new</div>
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<hr class=" dark:border-gray-700" />
+
+		<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>
+
+		<hr class=" dark:border-gray-700" />
+
+		<div class="flex space-x-1">
+			<a href="https://discord.gg/5rJgQTnV4s" target="_blank">
+				<img
+					alt="Discord"
+					src="https://img.shields.io/badge/Discord-Open_WebUI-blue?logo=discord&logoColor=white"
+				/>
+			</a>
+
+			<a href="https://twitter.com/OpenWebUI" target="_blank">
+				<img
+					alt="X (formerly Twitter) Follow"
+					src="https://img.shields.io/twitter/follow/OpenWebUI"
+				/>
+			</a>
+
+			<a href="https://github.com/open-webui/open-webui" target="_blank">
+				<img
+					alt="Github Repo"
+					src="https://img.shields.io/github/stars/open-webui/open-webui?style=social&label=Star us on Github"
+				/>
+			</a>
+		</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>

src/lib/components/chat/Settings/Account.svelte

+<script lang="ts">
+	import toast from 'svelte-french-toast';
+	import { onMount } from 'svelte';
+
+	import { user } from '$lib/stores';
+	import { updateUserProfile } from '$lib/apis/auths';
+
+	import UpdatePassword from './Account/UpdatePassword.svelte';
+	import { getGravatarUrl } from '$lib/apis/utils';
+	import { copyToClipboard } from '$lib/utils';
+
+	export let saveHandler: Function;
+
+	let profileImageUrl = '';
+	let name = '';
+	let showJWTToken = false;
+	let JWTTokenCopied = false;
+
+	const submitHandler = async () => {
+		const updatedUser = await updateUserProfile(localStorage.token, name, profileImageUrl).catch(
+			(error) => {
+				toast.error(error);
+			}
+		);
+
+		if (updatedUser) {
+			await user.set(updatedUser);
+			return true;
+		}
+		return false;
+	};
+
+	onMount(() => {
+		name = $user.name;
+		profileImageUrl = $user.profile_image_url;
+	});
+</script>
+
+<div class="flex flex-col h-full justify-between text-sm">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+		<input
+			id="profile-image-input"
+			type="file"
+			hidden
+			accept="image/*"
+			on:change={(e) => {
+				const files = e?.target?.files ?? [];
+				let reader = new FileReader();
+				reader.onload = (event) => {
+					let originalImageUrl = `${event.target.result}`;
+
+					const img = new Image();
+					img.src = originalImageUrl;
+
+					img.onload = function () {
+						const canvas = document.createElement('canvas');
+						const ctx = canvas.getContext('2d');
+
+						// Calculate the aspect ratio of the image
+						const aspectRatio = img.width / img.height;
+
+						// Calculate the new width and height to fit within 100x100
+						let newWidth, newHeight;
+						if (aspectRatio > 1) {
+							newWidth = 100 * aspectRatio;
+							newHeight = 100;
+						} else {
+							newWidth = 100;
+							newHeight = 100 / aspectRatio;
+						}
+
+						// Set the canvas size
+						canvas.width = 100;
+						canvas.height = 100;
+
+						// Calculate the position to center the image
+						const offsetX = (100 - newWidth) / 2;
+						const offsetY = (100 - newHeight) / 2;
+
+						// Draw the image on the canvas
+						ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
+
+						// Get the base64 representation of the compressed image
+						const compressedSrc = canvas.toDataURL('image/jpeg');
+
+						// Display the compressed image
+						profileImageUrl = compressedSrc;
+
+						e.target.files = null;
+					};
+				};
+
+				if (
+					files.length > 0 &&
+					['image/gif', 'image/jpeg', 'image/png'].includes(files[0]['type'])
+				) {
+					reader.readAsDataURL(files[0]);
+				}
+			}}
+		/>
+
+		<div class=" mb-2.5 text-sm font-medium">Profile</div>
+
+		<div class="flex space-x-5">
+			<div class="flex flex-col">
+				<div class="self-center">
+					<button
+						class="relative rounded-full dark:bg-gray-700"
+						type="button"
+						on:click={() => {
+							document.getElementById('profile-image-input')?.click();
+						}}
+					>
+						<img
+							src={profileImageUrl !== '' ? profileImageUrl : '/user.png'}
+							alt="profile"
+							class=" rounded-full w-16 h-16 object-cover"
+						/>
+
+						<div
+							class="absolute flex justify-center rounded-full bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gray-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"
+						>
+							<div class="my-auto text-gray-100">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									class="w-5 h-5"
+								>
+									<path
+										d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
+									/>
+								</svg>
+							</div>
+						</div>
+					</button>
+				</div>
+				<button
+					class=" text-xs text-gray-600"
+					on:click={async () => {
+						const url = await getGravatarUrl($user.email);
+
+						profileImageUrl = url;
+					}}>Use Gravatar</button
+				>
+			</div>
+
+			<div class="flex-1">
+				<div class="flex flex-col w-full">
+					<div class=" mb-1 text-xs text-gray-500">Name</div>
+
+					<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"
+							type="text"
+							bind:value={name}
+							required
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<hr class=" dark:border-gray-700 my-4" />
+		<UpdatePassword />
+
+		<hr class=" dark:border-gray-700 my-4" />
+
+		<div class=" w-full justify-between">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">JWT Token</div>
+			</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 dark:text-gray-300 dark:bg-gray-800 outline-none"
+						type={showJWTToken ? 'text' : 'password'}
+						value={localStorage.token}
+						disabled
+					/>
+
+					<button
+						class="dark:bg-gray-800 px-2 transition rounded-r-lg"
+						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>
+
+				<button
+					class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
+					on:click={() => {
+						copyToClipboard(localStorage.token);
+						JWTTokenCopied = true;
+						setTimeout(() => {
+							JWTTokenCopied = false;
+						}, 2000);
+					}}
+				>
+					{#if JWTTokenCopied}
+						<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>
+					{:else}
+						<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="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
+								clip-rule="evenodd"
+							/>
+							<path
+								fill-rule="evenodd"
+								d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					{/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={async () => {
+				const res = await submitHandler();
+
+				if (res) {
+					saveHandler();
+				}
+			}}
+		>
+			Save
+		</button>
+	</div>
+</div>

src/lib/components/chat/Settings/Account/UpdatePassword.svelte

+<script lang="ts">
+	import toast from 'svelte-french-toast';
+	import { updateUserPassword } from '$lib/apis/auths';
+
+	let show = false;
+	let currentPassword = '';
+	let newPassword = '';
+	let newPasswordConfirm = '';
+
+	const updatePasswordHandler = async () => {
+		if (newPassword === newPasswordConfirm) {
+			const res = await updateUserPassword(localStorage.token, currentPassword, newPassword).catch(
+				(error) => {
+					toast.error(error);
+					return null;
+				}
+			);
+
+			if (res) {
+				toast.success('Successfully updated.');
+			}
+
+			currentPassword = '';
+			newPassword = '';
+			newPasswordConfirm = '';
+		} else {
+			toast.error(
+				`The passwords you entered don't quite match. Please double-check and try again.`
+			);
+			newPassword = '';
+			newPasswordConfirm = '';
+		}
+	};
+</script>
+
+<form
+	class="flex flex-col text-sm"
+	on:submit|preventDefault={() => {
+		updatePasswordHandler();
+	}}
+>
+	<div class="flex justify-between items-center text-sm">
+		<div class="  font-medium">Change Password</div>
+		<button
+			class=" text-xs font-medium text-gray-500"
+			type="button"
+			on:click={() => {
+				show = !show;
+			}}>{show ? 'Hide' : 'Show'}</button
+		>
+	</div>
+
+	{#if show}
+		<div class=" py-2.5 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-1">
+					<input
+						class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+						type="password"
+						bind:value={currentPassword}
+						autocomplete="current-password"
+						required
+					/>
+				</div>
+			</div>
+
+			<div class="flex flex-col w-full">
+				<div class=" mb-1 text-xs text-gray-500">New Password</div>
+
+				<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"
+						type="password"
+						bind:value={newPassword}
+						autocomplete="new-password"
+						required
+					/>
+				</div>
+			</div>
+
+			<div class="flex flex-col w-full">
+				<div class=" mb-1 text-xs text-gray-500">Confirm Password</div>
+
+				<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"
+						type="password"
+						bind:value={newPasswordConfirm}
+						autocomplete="off"
+						required
+					/>
+				</div>
+			</div>
+		</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>
+	{/if}
+</form>

src/lib/components/chat/Settings/Advanced.svelte

 <script lang="ts">
-	export let options = {
+	import { createEventDispatcher, onMount } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import AdvancedParams from './Advanced/AdvancedParams.svelte';
+	export let saveSettings: Function;
+
+	// Advanced
+	let requestFormat = '';
+	let keepAlive = null;
+
+	let options = {
 		// Advanced
 		seed: 0,
-		stop: '',
 		temperature: '',
 		repeat_penalty: '',
 		repeat_last_n: '',
@@ -11,546 +20,134 @@
 		mirostat_tau: '',
 		top_k: '',
 		top_p: '',
+		stop: '',
 		tfs_z: '',
 		num_ctx: '',
 		num_predict: ''
 	};
-</script>
-
-<div class=" space-y-3 text-xs">
-	<div>
-		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" w-20 text-xs font-medium self-center">Seed</div>
-			<div class=" flex-1 self-center">
-				<input
-					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
-					type="number"
-					placeholder="Enter Seed"
-					bind:value={options.seed}
-					autocomplete="off"
-					min="0"
-				/>
-			</div>
-		</div>
-	</div>
-
-	<div>
-		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" w-20 text-xs font-medium self-center">Stop Sequence</div>
-			<div class=" flex-1 self-center">
-				<input
-					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
-					type="text"
-					placeholder="Enter Stop Sequence"
-					bind:value={options.stop}
-					autocomplete="off"
-				/>
-			</div>
-		</div>
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Temperature</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.temperature = options.temperature === '' ? 0.8 : '';
-				}}
-			>
-				{#if options.temperature === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.temperature !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="1"
-						step="0.05"
-						bind:value={options.temperature}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.temperature}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="1"
-						step="0.05"
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.mirostat = options.mirostat === '' ? 0 : '';
-				}}
-			>
-				{#if options.mirostat === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.mirostat !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="2"
-						step="1"
-						bind:value={options.mirostat}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.mirostat}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="2"
-						step="1"
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat Eta</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.mirostat_eta = options.mirostat_eta === '' ? 0.1 : '';
-				}}
-			>
-				{#if options.mirostat_eta === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.mirostat_eta !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="1"
-						step="0.05"
-						bind:value={options.mirostat_eta}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.mirostat_eta}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="1"
-						step="0.05"
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
 
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat Tau</div>
+	const toggleRequestFormat = async () => {
+		if (requestFormat === '') {
+			requestFormat = 'json';
+		} else {
+			requestFormat = '';
+		}
 
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.mirostat_tau = options.mirostat_tau === '' ? 5.0 : '';
-				}}
-			>
-				{#if options.mirostat_tau === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.mirostat_tau !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="10"
-						step="0.5"
-						bind:value={options.mirostat_tau}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.mirostat_tau}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="10"
-						step="0.5"
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Top K</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.top_k = options.top_k === '' ? 40 : '';
-				}}
-			>
-				{#if options.top_k === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.top_k !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="100"
-						step="0.5"
-						bind:value={options.top_k}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.top_k}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="100"
-						step="0.5"
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Top P</div>
+		saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined });
+	};
 
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.top_p = options.top_p === '' ? 0.9 : '';
-				}}
-			>
-				{#if options.top_p === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
+	onMount(() => {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+
+		requestFormat = settings.requestFormat ?? '';
+		keepAlive = settings.keepAlive ?? null;
+
+		options.seed = settings.seed ?? 0;
+		options.temperature = settings.temperature ?? '';
+		options.repeat_penalty = settings.repeat_penalty ?? '';
+		options.top_k = settings.top_k ?? '';
+		options.top_p = settings.top_p ?? '';
+		options.num_ctx = settings.num_ctx ?? '';
+		options = { ...options, ...settings.options };
+		options.stop = (settings?.options?.stop ?? []).join(',');
+	});
+</script>
 
-		{#if options.top_p !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="1"
-						step="0.05"
-						bind:value={options.top_p}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.top_p}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="1"
-						step="0.05"
-					/>
-				</div>
+<div class="flex flex-col h-full justify-between text-sm">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+		<div class=" text-sm font-medium">Parameters</div>
+
+		<AdvancedParams bind:options />
+		<hr class=" dark:border-gray-700" />
+
+		<div class=" py-1 w-full justify-between">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Keep Alive</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					type="button"
+					on:click={() => {
+						keepAlive = keepAlive === null ? '5m' : null;
+					}}
+				>
+					{#if keepAlive === null}
+						<span class="ml-2 self-center"> Default </span>
+					{:else}
+						<span class="ml-2 self-center"> Custom </span>
+					{/if}
+				</button>
 			</div>
-		{/if}
-	</div>
 
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Repeat Penalty</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.repeat_penalty = options.repeat_penalty === '' ? 1.1 : '';
-				}}
-			>
-				{#if options.repeat_penalty === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.repeat_penalty !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="2"
-						step="0.05"
-						bind:value={options.repeat_penalty}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
+			{#if keepAlive !== null}
+				<div class="flex mt-1 space-x-2">
 					<input
-						bind:value={options.repeat_penalty}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="2"
-						step="0.05"
+						class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+						type="text"
+						placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
+						bind:value={keepAlive}
 					/>
 				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Repeat Last N</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.repeat_last_n = options.repeat_last_n === '' ? 64 : '';
-				}}
-			>
-				{#if options.repeat_last_n === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
+			{/if}
 		</div>
 
-		{#if options.repeat_last_n !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="-1"
-						max="128"
-						step="1"
-						bind:value={options.repeat_last_n}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.repeat_last_n}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="-1"
-						max="128"
-						step="1"
-					/>
-				</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'}
+						<!-- <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            class="w-4 h-4 self-center"
+                        >
+                            <path
+                                d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
+                            />
+                        </svg> -->
+						<span class="ml-2 self-center"> JSON </span>
+					{/if}
+				</button>
 			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Tfs Z</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.tfs_z = options.tfs_z === '' ? 1 : '';
-				}}
-			>
-				{#if options.tfs_z === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
-
-		{#if options.tfs_z !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="0"
-						max="2"
-						step="0.05"
-						bind:value={options.tfs_z}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div>
-					<input
-						bind:value={options.tfs_z}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="0"
-						max="2"
-						step="0.05"
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Context Length</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.num_ctx = options.num_ctx === '' ? 2048 : '';
-				}}
-			>
-				{#if options.num_ctx === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
 		</div>
-
-		{#if options.num_ctx !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="1"
-						max="16000"
-						step="1"
-						bind:value={options.num_ctx}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div class="">
-					<input
-						bind:value={options.num_ctx}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="1"
-						max="16000"
-						step="1"
-					/>
-				</div>
-			</div>
-		{/if}
 	</div>
-	<div class=" py-0.5 w-full justify-between">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Max Tokens</div>
-
-			<button
-				class="p-1 px-3 text-xs flex rounded transition"
-				type="button"
-				on:click={() => {
-					options.num_predict = options.num_predict === '' ? 128 : '';
-				}}
-			>
-				{#if options.num_predict === ''}
-					<span class="ml-2 self-center"> Default </span>
-				{:else}
-					<span class="ml-2 self-center"> Custom </span>
-				{/if}
-			</button>
-		</div>
 
-		{#if options.num_predict !== ''}
-			<div class="flex mt-0.5 space-x-2">
-				<div class=" flex-1">
-					<input
-						id="steps-range"
-						type="range"
-						min="-2"
-						max="16000"
-						step="1"
-						bind:value={options.num_predict}
-						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-					/>
-				</div>
-				<div class="">
-					<input
-						bind:value={options.num_predict}
-						type="number"
-						class=" bg-transparent text-center w-14"
-						min="-2"
-						max="16000"
-						step="1"
-					/>
-				</div>
-			</div>
-		{/if}
+	<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
+					},
+					keepAlive: keepAlive ? (isNaN(keepAlive) ? keepAlive : parseInt(keepAlive)) : undefined
+				});
+
+				dispatch('save');
+			}}
+		>
+			Save
+		</button>
 	</div>
 </div>

src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte

+<script lang="ts">
+	export let options = {
+		// Advanced
+		seed: 0,
+		stop: '',
+		temperature: '',
+		repeat_penalty: '',
+		repeat_last_n: '',
+		mirostat: '',
+		mirostat_eta: '',
+		mirostat_tau: '',
+		top_k: '',
+		top_p: '',
+		tfs_z: '',
+		num_ctx: '',
+		num_predict: ''
+	};
+</script>
+
+<div class=" space-y-3 text-xs">
+	<div>
+		<div class=" py-0.5 flex w-full justify-between">
+			<div class=" w-20 text-xs font-medium self-center">Seed</div>
+			<div class=" flex-1 self-center">
+				<input
+					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+					type="number"
+					placeholder="Enter Seed"
+					bind:value={options.seed}
+					autocomplete="off"
+					min="0"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<div>
+		<div class=" py-0.5 flex w-full justify-between">
+			<div class=" w-20 text-xs font-medium self-center">Stop Sequence</div>
+			<div class=" flex-1 self-center">
+				<input
+					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+					type="text"
+					placeholder="Enter Stop Sequence"
+					bind:value={options.stop}
+					autocomplete="off"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Temperature</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.temperature = options.temperature === '' ? 0.8 : '';
+				}}
+			>
+				{#if options.temperature === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.temperature !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="1"
+						step="0.05"
+						bind:value={options.temperature}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.temperature}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="1"
+						step="0.05"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Mirostat</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.mirostat = options.mirostat === '' ? 0 : '';
+				}}
+			>
+				{#if options.mirostat === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.mirostat !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="2"
+						step="1"
+						bind:value={options.mirostat}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.mirostat}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="2"
+						step="1"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Mirostat Eta</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.mirostat_eta = options.mirostat_eta === '' ? 0.1 : '';
+				}}
+			>
+				{#if options.mirostat_eta === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.mirostat_eta !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="1"
+						step="0.05"
+						bind:value={options.mirostat_eta}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.mirostat_eta}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="1"
+						step="0.05"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Mirostat Tau</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.mirostat_tau = options.mirostat_tau === '' ? 5.0 : '';
+				}}
+			>
+				{#if options.mirostat_tau === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.mirostat_tau !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="10"
+						step="0.5"
+						bind:value={options.mirostat_tau}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.mirostat_tau}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="10"
+						step="0.5"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Top K</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.top_k = options.top_k === '' ? 40 : '';
+				}}
+			>
+				{#if options.top_k === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.top_k !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="100"
+						step="0.5"
+						bind:value={options.top_k}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.top_k}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="100"
+						step="0.5"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Top P</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.top_p = options.top_p === '' ? 0.9 : '';
+				}}
+			>
+				{#if options.top_p === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.top_p !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="1"
+						step="0.05"
+						bind:value={options.top_p}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.top_p}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="1"
+						step="0.05"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Repeat Penalty</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.repeat_penalty = options.repeat_penalty === '' ? 1.1 : '';
+				}}
+			>
+				{#if options.repeat_penalty === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.repeat_penalty !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="2"
+						step="0.05"
+						bind:value={options.repeat_penalty}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.repeat_penalty}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="2"
+						step="0.05"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Repeat Last N</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.repeat_last_n = options.repeat_last_n === '' ? 64 : '';
+				}}
+			>
+				{#if options.repeat_last_n === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.repeat_last_n !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="-1"
+						max="128"
+						step="1"
+						bind:value={options.repeat_last_n}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.repeat_last_n}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="-1"
+						max="128"
+						step="1"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Tfs Z</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.tfs_z = options.tfs_z === '' ? 1 : '';
+				}}
+			>
+				{#if options.tfs_z === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.tfs_z !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="0"
+						max="2"
+						step="0.05"
+						bind:value={options.tfs_z}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div>
+					<input
+						bind:value={options.tfs_z}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="0"
+						max="2"
+						step="0.05"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Context Length</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.num_ctx = options.num_ctx === '' ? 2048 : '';
+				}}
+			>
+				{#if options.num_ctx === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.num_ctx !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="1"
+						max="16000"
+						step="1"
+						bind:value={options.num_ctx}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div class="">
+					<input
+						bind:value={options.num_ctx}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="1"
+						max="16000"
+						step="1"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+	<div class=" py-0.5 w-full justify-between">
+		<div class="flex w-full justify-between">
+			<div class=" self-center text-xs font-medium">Max Tokens</div>
+
+			<button
+				class="p-1 px-3 text-xs flex rounded transition"
+				type="button"
+				on:click={() => {
+					options.num_predict = options.num_predict === '' ? 128 : '';
+				}}
+			>
+				{#if options.num_predict === ''}
+					<span class="ml-2 self-center"> Default </span>
+				{:else}
+					<span class="ml-2 self-center"> Custom </span>
+				{/if}
+			</button>
+		</div>
+
+		{#if options.num_predict !== ''}
+			<div class="flex mt-0.5 space-x-2">
+				<div class=" flex-1">
+					<input
+						id="steps-range"
+						type="range"
+						min="-2"
+						max="16000"
+						step="1"
+						bind:value={options.num_predict}
+						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+					/>
+				</div>
+				<div class="">
+					<input
+						bind:value={options.num_predict}
+						type="number"
+						class=" bg-transparent text-center w-14"
+						min="-2"
+						max="16000"
+						step="1"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

src/lib/components/chat/Settings/Audio.svelte

+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import toast from 'svelte-french-toast';
+	const dispatch = createEventDispatcher();
+
+	export let saveSettings: Function;
+
+	// Audio
+
+	let STTEngines = ['', 'openai'];
+	let STTEngine = '';
+
+	let conversationMode = false;
+	let speechAutoSend = false;
+	let responseAutoPlayback = false;
+
+	let TTSEngines = ['', 'openai'];
+	let TTSEngine = '';
+
+	let voices = [];
+	let speaker = '';
+
+	const getOpenAIVoices = () => {
+		voices = [
+			{ name: 'alloy' },
+			{ name: 'echo' },
+			{ name: 'fable' },
+			{ name: 'onyx' },
+			{ name: 'nova' },
+			{ name: 'shimmer' }
+		];
+	};
+
+	const getWebAPIVoices = () => {
+		const getVoicesLoop = setInterval(async () => {
+			voices = await speechSynthesis.getVoices();
+
+			// do your loop
+			if (voices.length > 0) {
+				clearInterval(getVoicesLoop);
+			}
+		}, 100);
+	};
+
+	const toggleConversationMode = async () => {
+		conversationMode = !conversationMode;
+
+		if (conversationMode) {
+			responseAutoPlayback = true;
+			speechAutoSend = true;
+		}
+
+		saveSettings({
+			conversationMode: conversationMode,
+			responseAutoPlayback: responseAutoPlayback,
+			speechAutoSend: speechAutoSend
+		});
+	};
+
+	const toggleResponseAutoPlayback = async () => {
+		responseAutoPlayback = !responseAutoPlayback;
+		saveSettings({ responseAutoPlayback: responseAutoPlayback });
+	};
+
+	const toggleSpeechAutoSend = async () => {
+		speechAutoSend = !speechAutoSend;
+		saveSettings({ speechAutoSend: speechAutoSend });
+	};
+
+	onMount(async () => {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+
+		conversationMode = settings.conversationMode ?? false;
+		speechAutoSend = settings.speechAutoSend ?? false;
+		responseAutoPlayback = settings.responseAutoPlayback ?? false;
+
+		STTEngine = settings?.audio?.STTEngine ?? '';
+		TTSEngine = settings?.audio?.TTSEngine ?? '';
+		speaker = settings?.audio?.speaker ?? '';
+
+		if (TTSEngine === 'openai') {
+			getOpenAIVoices();
+		} else {
+			getWebAPIVoices();
+		}
+	});
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={() => {
+		saveSettings({
+			audio: {
+				STTEngine: STTEngine !== '' ? STTEngine : undefined,
+				TTSEngine: TTSEngine !== '' ? TTSEngine : undefined,
+				speaker: speaker !== '' ? speaker : undefined
+			}
+		});
+		dispatch('save');
+	}}
+>
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+		<div>
+			<div class=" mb-1 text-sm font-medium">STT Settings</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Speech-to-Text Engine</div>
+				<div class="flex items-center relative">
+					<select
+						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+						bind:value={STTEngine}
+						placeholder="Select a mode"
+						on:change={(e) => {
+							if (e.target.value !== '') {
+								navigator.mediaDevices.getUserMedia({ audio: true }).catch(function (err) {
+									toast.error(`Permission denied when accessing microphone: ${err}`);
+									STTEngine = '';
+								});
+							}
+						}}
+					>
+						<option value="">Default (Web API)</option>
+						<option value="whisper-local">Whisper (Local)</option>
+					</select>
+				</div>
+			</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Conversation Mode</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						toggleConversationMode();
+					}}
+					type="button"
+				>
+					{#if conversationMode === true}
+						<span class="ml-2 self-center">On</span>
+					{:else}
+						<span class="ml-2 self-center">Off</span>
+					{/if}
+				</button>
+			</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Auto-send input after 3 sec.</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=" mb-1 text-sm font-medium">TTS Settings</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Text-to-Speech Engine</div>
+				<div class="flex items-center relative">
+					<select
+						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+						bind:value={TTSEngine}
+						placeholder="Select a mode"
+						on:change={(e) => {
+							if (e.target.value === 'openai') {
+								getOpenAIVoices();
+								speaker = 'alloy';
+							} else {
+								getWebAPIVoices();
+								speaker = '';
+							}
+						}}
+					>
+						<option value="">Default (Web API)</option>
+						<option value="openai">Open AI</option>
+					</select>
+				</div>
+			</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Auto-playback response</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						toggleResponseAutoPlayback();
+					}}
+					type="button"
+				>
+					{#if responseAutoPlayback === true}
+						<span class="ml-2 self-center">On</span>
+					{:else}
+						<span class="ml-2 self-center">Off</span>
+					{/if}
+				</button>
+			</div>
+		</div>
+
+		<hr class=" dark:border-gray-700" />
+
+		{#if TTSEngine === ''}
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
+				<div class="flex w-full">
+					<div class="flex-1">
+						<select
+							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+							bind:value={speaker}
+							placeholder="Select a voice"
+						>
+							<option value="" selected>Default</option>
+							{#each voices.filter((v) => v.localService === true) as voice}
+								<option value={voice.name} class="bg-gray-100 dark:bg-gray-700">{voice.name}</option
+								>
+							{/each}
+						</select>
+					</div>
+				</div>
+			</div>
+		{:else if TTSEngine === 'openai'}
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
+				<div class="flex w-full">
+					<div class="flex-1">
+						<select
+							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+							bind:value={speaker}
+							placeholder="Select a voice"
+						>
+							{#each voices as voice}
+								<option value={voice.name} class="bg-gray-100 dark:bg-gray-700">{voice.name}</option
+								>
+							{/each}
+						</select>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</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>

src/lib/components/chat/Settings/Chats.svelte

+<script lang="ts">
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { resetVectorDB } from '$lib/apis/rag';
+	import { chats, user } from '$lib/stores';
+
+	import {
+		createNewChat,
+		deleteAllChats,
+		getAllChats,
+		getAllUserChats,
+		getChatList
+	} from '$lib/apis/chats';
+	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import toast from 'svelte-french-toast';
+
+	export let saveSettings: Function;
+	// Chats
+	let saveChatHistory = true;
+	let importFiles;
+	let showDeleteConfirm = false;
+
+	$: if (importFiles) {
+		console.log(importFiles);
+
+		let reader = new FileReader();
+		reader.onload = (event) => {
+			let chats = JSON.parse(event.target.result);
+			console.log(chats);
+			if (getImportOrigin(chats) == 'openai') {
+				try {
+					chats = convertOpenAIChats(chats);
+				} catch (error) {
+					console.log('Unable to import chats:', error);
+				}
+			}
+			importChats(chats);
+		};
+
+		if (importFiles.length > 0) {
+			reader.readAsText(importFiles[0]);
+		}
+	}
+
+	const importChats = async (_chats) => {
+		for (const chat of _chats) {
+			console.log(chat);
+
+			if (chat.chat) {
+				await createNewChat(localStorage.token, chat.chat);
+			} else {
+				await createNewChat(localStorage.token, chat);
+			}
+		}
+
+		await chats.set(await getChatList(localStorage.token));
+	};
+
+	const exportChats = async () => {
+		let blob = new Blob([JSON.stringify(await getAllChats(localStorage.token))], {
+			type: 'application/json'
+		});
+		saveAs(blob, `chat-export-${Date.now()}.json`);
+	};
+
+	const exportAllUserChats = async () => {
+		let blob = new Blob([JSON.stringify(await getAllUserChats(localStorage.token))], {
+			type: 'application/json'
+		});
+		saveAs(blob, `all-chats-export-${Date.now()}.json`);
+	};
+
+	const deleteChats = async () => {
+		await goto('/');
+		await deleteAllChats(localStorage.token);
+		await chats.set(await getChatList(localStorage.token));
+	};
+
+	const toggleSaveChatHistory = async () => {
+		saveChatHistory = !saveChatHistory;
+		console.log(saveChatHistory);
+
+		if (saveChatHistory === false) {
+			await goto('/');
+		}
+		saveSettings({ saveChatHistory: saveChatHistory });
+	};
+
+	onMount(async () => {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+
+		saveChatHistory = settings.saveChatHistory ?? true;
+	});
+</script>
+
+<div class="flex flex-col h-full justify-between space-y-3 text-sm">
+	<div class=" space-y-2">
+		<div
+			class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition"
+		>
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-sm font-medium">Chat History</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					type="button"
+					on:click={() => {
+						toggleSaveChatHistory();
+					}}
+				>
+					{#if saveChatHistory === true}
+						<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>
+
+						<span class="ml-2 self-center"> On </span>
+					{:else}
+						<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>
+
+						<span class="ml-2 self-center">Off</span>
+					{/if}
+				</button>
+			</div>
+
+			<div class="text-xs text-left w-full font-medium mt-0.5">
+				This setting does not sync across browsers or devices.
+			</div>
+		</div>
+
+		<hr class=" dark:border-gray-700" />
+
+		<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>
+
+		<hr class=" dark:border-gray-700" />
+
+		{#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
+							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 2H4Zm7 7a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h4.5A.75.75 0 0 1 11 9Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+				<div class=" self-center text-sm font-medium">Delete Chats</div>
+			</button>
+		{/if}
+
+		{#if $user?.role === 'admin'}
+			<hr class=" dark:border-gray-700" />
+
+			<button
+				class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+				on:click={() => {
+					exportAllUserChats();
+				}}
+			>
+				<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-2V6ZM8.75 7.75a.75.75 0 0 0-1.5 0v2.69L6.03 9.22a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V7.75Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+				<div class=" self-center text-sm font-medium">Export All Chats (All Users)</div>
+			</button>
+
+			<hr class=" dark:border-gray-700" />
+
+			<button
+				class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+				on:click={() => {
+					const res = resetVectorDB(localStorage.token).catch((error) => {
+						toast.error(error);
+						return null;
+					});
+
+					if (res) {
+						toast.success('Success');
+					}
+				}}
+			>
+				<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="M3.5 2A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 12.5 4H9.621a1.5 1.5 0 0 1-1.06-.44L7.439 2.44A1.5 1.5 0 0 0 6.38 2H3.5Zm6.75 7.75a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0 0 1.5h4.5Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+				<div class=" self-center text-sm font-medium">Reset Vector Storage</div>
+			</button>
+		{/if}
+	</div>
+</div>

src/lib/components/chat/Settings/Connections.svelte

+<script lang="ts">
+	import { models, user } from '$lib/stores';
+	import { createEventDispatcher, onMount } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import { getOllamaAPIUrl, updateOllamaAPIUrl } from '$lib/apis/ollama';
+	import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai';
+	import toast from 'svelte-french-toast';
+
+	export let getModels: Function;
+
+	// External
+	let API_BASE_URL = '';
+
+	let OPENAI_API_KEY = '';
+	let OPENAI_API_BASE_URL = '';
+
+	const updateOpenAIHandler = async () => {
+		OPENAI_API_BASE_URL = await updateOpenAIUrl(localStorage.token, OPENAI_API_BASE_URL);
+		OPENAI_API_KEY = await updateOpenAIKey(localStorage.token, OPENAI_API_KEY);
+
+		await models.set(await getModels());
+	};
+
+	const updateOllamaAPIUrlHandler = async () => {
+		API_BASE_URL = await updateOllamaAPIUrl(localStorage.token, API_BASE_URL);
+		const _models = await getModels('ollama');
+
+		if (_models.length > 0) {
+			toast.success('Server connection verified');
+			await models.set(_models);
+		}
+	};
+
+	onMount(async () => {
+		if ($user.role === 'admin') {
+			API_BASE_URL = await getOllamaAPIUrl(localStorage.token);
+			OPENAI_API_BASE_URL = await getOpenAIUrl(localStorage.token);
+			OPENAI_API_KEY = await getOpenAIKey(localStorage.token);
+		}
+	});
+</script>
+
+<form
+	class="flex flex-col h-full space-y-3 text-sm"
+	on:submit|preventDefault={() => {
+		updateOpenAIHandler();
+		dispatch('save');
+
+		// saveSettings({
+		// 	OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined,
+		// 	OPENAI_API_BASE_URL: OPENAI_API_BASE_URL !== '' ? OPENAI_API_BASE_URL : undefined
+		// });
+	}}
+>
+	<div>
+		<div class=" mb-2.5 text-sm font-medium">Ollama API URL</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 URL (e.g. http://localhost:11434/api)"
+					bind:value={API_BASE_URL}
+				/>
+			</div>
+			<button
+				class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
+				on:click={() => {
+					updateOllamaAPIUrlHandler();
+				}}
+				type="button"
+			>
+				<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="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+			Trouble accessing Ollama?
+			<a
+				class=" text-gray-300 font-medium"
+				href="https://github.com/open-webui/open-webui#troubleshooting"
+				target="_blank"
+			>
+				Click here for help.
+			</a>
+		</div>
+	</div>
+
+	<hr class=" dark:border-gray-700" />
+
+	<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>
+
+		<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 Base URL"
+						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 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>

src/lib/components/chat/Settings/General.svelte

+<script lang="ts">
+	import toast from 'svelte-french-toast';
+	import { createEventDispatcher, onMount } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import { models, user } from '$lib/stores';
+
+	import AdvancedParams from './Advanced/AdvancedParams.svelte';
+
+	export let saveSettings: Function;
+	export let getModels: Function;
+
+	// General
+	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
+	let theme = 'dark';
+	let notificationEnabled = false;
+	let system = '';
+
+	let showAdvanced = false;
+
+	const toggleNotification = async () => {
+		const permission = await Notification.requestPermission();
+
+		if (permission === 'granted') {
+			notificationEnabled = !notificationEnabled;
+			saveSettings({ notificationEnabled: notificationEnabled });
+		} else {
+			toast.error(
+				'Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.'
+			);
+		}
+	};
+
+	// Advanced
+	let requestFormat = '';
+	let keepAlive = null;
+
+	let options = {
+		// Advanced
+		seed: 0,
+		temperature: '',
+		repeat_penalty: '',
+		repeat_last_n: '',
+		mirostat: '',
+		mirostat_eta: '',
+		mirostat_tau: '',
+		top_k: '',
+		top_p: '',
+		stop: '',
+		tfs_z: '',
+		num_ctx: '',
+		num_predict: ''
+	};
+
+	const toggleRequestFormat = async () => {
+		if (requestFormat === '') {
+			requestFormat = 'json';
+		} else {
+			requestFormat = '';
+		}
+
+		saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined });
+	};
+
+	onMount(async () => {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+
+		theme = localStorage.theme ?? 'dark';
+		notificationEnabled = settings.notificationEnabled ?? false;
+		system = settings.system ?? '';
+
+		requestFormat = settings.requestFormat ?? '';
+		keepAlive = settings.keepAlive ?? null;
+
+		options.seed = settings.seed ?? 0;
+		options.temperature = settings.temperature ?? '';
+		options.repeat_penalty = settings.repeat_penalty ?? '';
+		options.top_k = settings.top_k ?? '';
+		options.top_p = settings.top_p ?? '';
+		options.num_ctx = settings.num_ctx ?? '';
+		options = { ...options, ...settings.options };
+		options.stop = (settings?.options?.stop ?? []).join(',');
+	});
+</script>
+
+<div class="flex flex-col h-full justify-between text-sm">
+	<div class="  pr-1.5 overflow-y-scroll max-h-[21rem]">
+		<div class="">
+			<div class=" mb-1 text-sm font-medium">WebUI Settings</div>
+
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Theme</div>
+				<div class="flex items-center relative">
+					<div class=" absolute right-16">
+						{#if theme === 'dark'}
+							<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="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						{:else if theme === 'light'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4 self-center"
+							>
+								<path
+									d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
+								/>
+							</svg>
+						{/if}
+					</div>
+
+					<select
+						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
+						bind:value={theme}
+						placeholder="Select a theme"
+						on:change={(e) => {
+							localStorage.theme = theme;
+
+							themes
+								.filter((e) => e !== theme)
+								.forEach((e) => {
+									e.split(' ').forEach((e) => {
+										document.documentElement.classList.remove(e);
+									});
+								});
+
+							theme.split(' ').forEach((e) => {
+								document.documentElement.classList.add(e);
+							});
+
+							console.log(theme);
+						}}
+					>
+						<option value="dark">Dark</option>
+						<option value="light">Light</option>
+						<option value="rose-pine dark">Rosé Pine</option>
+						<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
+					</select>
+				</div>
+			</div>
+
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Notification</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleNotification();
+						}}
+						type="button"
+					>
+						{#if notificationEnabled === 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 my-3" />
+
+		<div>
+			<div class=" my-2.5 text-sm font-medium">System Prompt</div>
+			<textarea
+				bind:value={system}
+				class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
+				rows="4"
+			/>
+		</div>
+
+		<div class="mt-2 space-y-3 pr-1.5">
+			<div class="flex justify-between items-center text-sm">
+				<div class="  font-medium">Advanced Parameters</div>
+				<button
+					class=" text-xs font-medium text-gray-500"
+					type="button"
+					on:click={() => {
+						showAdvanced = !showAdvanced;
+					}}>{showAdvanced ? 'Hide' : 'Show'}</button
+				>
+			</div>
+
+			{#if showAdvanced}
+				<AdvancedParams bind:options />
+				<hr class=" dark:border-gray-700" />
+
+				<div class=" py-1 w-full justify-between">
+					<div class="flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">Keep Alive</div>
+
+						<button
+							class="p-1 px-3 text-xs flex rounded transition"
+							type="button"
+							on:click={() => {
+								keepAlive = keepAlive === null ? '5m' : null;
+							}}
+						>
+							{#if keepAlive === null}
+								<span class="ml-2 self-center"> Default </span>
+							{:else}
+								<span class="ml-2 self-center"> Custom </span>
+							{/if}
+						</button>
+					</div>
+
+					{#if keepAlive !== null}
+						<div class="flex mt-1 space-x-2">
+							<input
+								class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+								type="text"
+								placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
+								bind:value={keepAlive}
+							/>
+						</div>
+					{/if}
+				</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'}
+								<!-- <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            class="w-4 h-4 self-center"
+                        >
+                            <path
+                                d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
+                            />
+                        </svg> -->
+								<span class="ml-2 self-center"> JSON </span>
+							{/if}
+						</button>
+					</div>
+				</div>
+			{/if}
+		</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({
+					system: system !== '' ? system : undefined,
+					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
+					},
+					keepAlive: keepAlive ? (isNaN(keepAlive) ? keepAlive : parseInt(keepAlive)) : undefined
+				});
+				dispatch('save');
+			}}
+		>
+			Save
+		</button>
+	</div>
+</div>

src/lib/components/chat/Settings/Images.svelte

+<script lang="ts">
+	import toast from 'svelte-french-toast';
+
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { config, user } from '$lib/stores';
+	import {
+		getAUTOMATIC1111Url,
+		getDefaultDiffusionModel,
+		getDiffusionModels,
+		getImageGenerationEnabledStatus,
+		getImageSize,
+		toggleImageGenerationEnabledStatus,
+		updateAUTOMATIC1111Url,
+		updateDefaultDiffusionModel,
+		updateImageSize
+	} from '$lib/apis/images';
+	import { getBackendConfig } from '$lib/apis';
+	const dispatch = createEventDispatcher();
+
+	export let saveSettings: Function;
+
+	let loading = false;
+
+	let enableImageGeneration = true;
+	let AUTOMATIC1111_BASE_URL = '';
+
+	let selectedModel = '';
+	let models = [];
+
+	let imageSize = '';
+
+	const getModels = async () => {
+		models = await getDiffusionModels(localStorage.token).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+		selectedModel = await getDefaultDiffusionModel(localStorage.token);
+	};
+
+	const updateAUTOMATIC1111UrlHandler = async () => {
+		const res = await updateAUTOMATIC1111Url(localStorage.token, AUTOMATIC1111_BASE_URL).catch(
+			(error) => {
+				toast.error(error);
+				return null;
+			}
+		);
+
+		if (res) {
+			AUTOMATIC1111_BASE_URL = res;
+
+			await getModels();
+
+			if (models) {
+				toast.success('Server connection verified');
+			}
+		} else {
+			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
+		}
+	};
+	const toggleImageGeneration = async () => {
+		if (AUTOMATIC1111_BASE_URL) {
+			enableImageGeneration = await toggleImageGenerationEnabledStatus(localStorage.token).catch(
+				(error) => {
+					toast.error(error);
+					return false;
+				}
+			);
+
+			if (enableImageGeneration) {
+				config.set(await getBackendConfig(localStorage.token));
+				getModels();
+			}
+		} else {
+			enableImageGeneration = false;
+			toast.error('AUTOMATIC1111_BASE_URL not provided');
+		}
+	};
+
+	onMount(async () => {
+		if ($user.role === 'admin') {
+			enableImageGeneration = await getImageGenerationEnabledStatus(localStorage.token);
+			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
+
+			if (enableImageGeneration && AUTOMATIC1111_BASE_URL) {
+				imageSize = await getImageSize(localStorage.token);
+				getModels();
+			}
+		}
+	});
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={async () => {
+		loading = true;
+		await updateDefaultDiffusionModel(localStorage.token, selectedModel);
+		await updateImageSize(localStorage.token, imageSize).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+
+		dispatch('save');
+		loading = false;
+	}}
+>
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[21rem]">
+		<div>
+			<div class=" mb-1 text-sm font-medium">Image Settings</div>
+
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Image Generation (Experimental)</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleImageGeneration();
+						}}
+						type="button"
+					>
+						{#if enableImageGeneration === 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 class=" mb-2.5 text-sm font-medium">AUTOMATIC1111 Base URL</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 URL (e.g. http://127.0.0.1:7860/)"
+					bind:value={AUTOMATIC1111_BASE_URL}
+				/>
+			</div>
+			<button
+				class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
+				type="button"
+				on:click={() => {
+					// updateOllamaAPIUrlHandler();
+
+					updateAUTOMATIC1111UrlHandler();
+				}}
+			>
+				<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="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+			Include `--api` flag when running stable-diffusion-webui
+			<a
+				class=" text-gray-300 font-medium"
+				href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
+				target="_blank"
+			>
+				(e.g. `sh webui.sh --api`)
+			</a>
+		</div>
+
+		{#if enableImageGeneration}
+			<hr class=" dark:border-gray-700" />
+
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">Set Default 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={selectedModel}
+							placeholder="Select a model"
+						>
+							{#if !selectedModel}
+								<option value="" disabled selected>Select a model</option>
+							{/if}
+							{#each models as model}
+								<option value={model.title} class="bg-gray-100 dark:bg-gray-700"
+									>{model.model_name}</option
+								>
+							{/each}
+						</select>
+					</div>
+				</div>
+			</div>
+
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">Set Image Size</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 Image Size (e.g. 512x512)"
+							bind:value={imageSize}
+						/>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</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 flex flex-row space-x-1 items-center {loading
+				? ' cursor-not-allowed'
+				: ''}"
+			type="submit"
+			disabled={loading}
+		>
+			Save
+
+			{#if loading}
+				<div class="ml-2 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>
+			{/if}
+		</button>
+	</div>
+</form>

src/lib/components/chat/Settings/Interface.svelte

+<script lang="ts">
+	import { getBackendConfig } from '$lib/apis';
+	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
+	import { config, models, user } from '$lib/stores';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import toast from 'svelte-french-toast';
+	const dispatch = createEventDispatcher();
+
+	export let saveSettings: Function;
+
+	// Addons
+	let titleAutoGenerate = true;
+	let responseAutoCopy = false;
+	let titleAutoGenerateModel = '';
+	let fullScreenMode = false;
+	let titleGenerationPrompt = '';
+
+	// Interface
+	let promptSuggestions = [];
+	let showUsername = false;
+
+	const toggleFullScreenMode = async () => {
+		fullScreenMode = !fullScreenMode;
+		saveSettings({ fullScreenMode: fullScreenMode });
+	};
+
+	const toggleShowUsername = async () => {
+		showUsername = !showUsername;
+		saveSettings({ showUsername: showUsername });
+	};
+
+	const toggleTitleAutoGenerate = async () => {
+		titleAutoGenerate = !titleAutoGenerate;
+		saveSettings({ titleAutoGenerate: titleAutoGenerate });
+	};
+
+	const toggleResponseAutoCopy = async () => {
+		const permission = await navigator.clipboard
+			.readText()
+			.then(() => {
+				return 'granted';
+			})
+			.catch(() => {
+				return '';
+			});
+
+		console.log(permission);
+
+		if (permission === 'granted') {
+			responseAutoCopy = !responseAutoCopy;
+			saveSettings({ responseAutoCopy: responseAutoCopy });
+		} else {
+			toast.error(
+				'Clipboard write permission denied. Please check your browser settings to grant the necessary access.'
+			);
+		}
+	};
+
+	const updateInterfaceHandler = async () => {
+		if ($user.role === 'admin') {
+			promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
+			await config.set(await getBackendConfig());
+		}
+
+		saveSettings({
+			titleGenerationPrompt: titleGenerationPrompt ? titleGenerationPrompt : undefined
+		});
+	};
+
+	onMount(async () => {
+		if ($user.role === 'admin') {
+			promptSuggestions = $config?.default_prompt_suggestions;
+		}
+
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+
+		titleAutoGenerate = settings.titleAutoGenerate ?? true;
+		responseAutoCopy = settings.responseAutoCopy ?? false;
+		showUsername = settings.showUsername ?? false;
+		fullScreenMode = settings.fullScreenMode ?? false;
+		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
+		titleGenerationPrompt =
+			settings.titleGenerationPrompt ??
+			`Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}`;
+	});
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={() => {
+		updateInterfaceHandler();
+		dispatch('save');
+	}}
+>
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
+		<div>
+			<div class=" mb-1 text-sm font-medium">WebUI Add-ons</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">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>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Full Screen Mode</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleFullScreenMode();
+						}}
+						type="button"
+					>
+						{#if fullScreenMode === 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">
+						Display the username instead of "You" in the Chat
+					</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleShowUsername();
+						}}
+						type="button"
+					>
+						{#if showUsername === 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">Set Title Auto-Generation 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={titleAutoGenerateModel}
+						placeholder="Select a model"
+					>
+						<option value="" selected>Current Model</option>
+						{#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-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition"
+					on:click={() => {
+						saveSettings({
+							titleAutoGenerateModel:
+								titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined
+						});
+					}}
+					type="button"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="w-3.5 h-3.5"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</button>
+			</div>
+			<div class="mt-3">
+				<div class=" mb-2.5 text-sm font-medium">Title Generation Prompt</div>
+				<textarea
+					bind:value={titleGenerationPrompt}
+					class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
+					rows="3"
+				/>
+			</div>
+		</div>
+
+		{#if $user.role === 'admin'}
+			<hr class=" dark:border-gray-700" />
+
+			<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+				<div class="flex w-full justify-between mb-2">
+					<div class=" self-center text-sm font-semibold">Default Prompt Suggestions</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						type="button"
+						on:click={() => {
+							if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
+								promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
+							}
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="flex flex-col space-y-1">
+					{#each promptSuggestions as prompt, promptIdx}
+						<div class=" flex border dark:border-gray-600 rounded-lg">
+							<div class="flex flex-col flex-1">
+								<div class="flex border-b dark:border-gray-600 w-full">
+									<input
+										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
+										placeholder="Title (e.g. Tell me a fun fact)"
+										bind:value={prompt.title[0]}
+									/>
+
+									<input
+										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
+										placeholder="Subtitle (e.g. about the Roman Empire)"
+										bind:value={prompt.title[1]}
+									/>
+								</div>
+
+								<input
+									class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
+									placeholder="Prompt (e.g. Tell me a fun fact about the Roman Empire)"
+									bind:value={prompt.content}
+								/>
+							</div>
+
+							<button
+								class="px-2"
+								type="button"
+								on:click={() => {
+									promptSuggestions.splice(promptIdx, 1);
+									promptSuggestions = promptSuggestions;
+								}}
+							>
+								<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>
+					{/each}
+				</div>
+
+				{#if promptSuggestions.length > 0}
+					<div class="text-xs text-left w-full mt-2">
+						Adjusting these settings will apply changes universally to all users.
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</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>

src/lib/components/chat/Settings/Models.svelte

+<script lang="ts">
+	import queue from 'async/queue';
+	import toast from 'svelte-french-toast';
+
+	import { createModel, deleteModel, pullModel } from '$lib/apis/ollama';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_NAME, models, user } from '$lib/stores';
+	import { splitStream } from '$lib/utils';
+
+	export let getModels: Function;
+
+	// Models
+	const MAX_PARALLEL_DOWNLOADS = 3;
+	const modelDownloadQueue = queue(
+		(task: { modelName: string }, cb) =>
+			pullModelHandlerProcessor({ modelName: task.modelName, callback: cb }),
+		MAX_PARALLEL_DOWNLOADS
+	);
+	let modelDownloadStatus: Record<string, any> = {};
+
+	let modelTransferring = false;
+	let modelTag = '';
+	let digest = '';
+	let pullProgress = null;
+
+	let modelUploadMode = 'file';
+	let modelInputFile = '';
+	let modelFileUrl = '';
+	let modelFileContent = `TEMPLATE """{{ .System }}\nUSER: {{ .Prompt }}\nASSSISTANT: """\nPARAMETER num_ctx 4096\nPARAMETER stop "</s>"\nPARAMETER stop "USER:"\nPARAMETER stop "ASSSISTANT:"`;
+	let modelFileDigest = '';
+	let uploadProgress = null;
+
+	let deleteModelTag = '';
+
+	const pullModelHandler = async () => {
+		const sanitizedModelTag = modelTag.trim();
+		if (modelDownloadStatus[sanitizedModelTag]) {
+			toast.error(`Model '${sanitizedModelTag}' is already in queue for downloading.`);
+			return;
+		}
+		if (Object.keys(modelDownloadStatus).length === 3) {
+			toast.error('Maximum of 3 models can be downloaded simultaneously. Please try again later.');
+			return;
+		}
+
+		modelTransferring = true;
+
+		modelDownloadQueue.push(
+			{ modelName: sanitizedModelTag },
+			async (data: { modelName: string; success: boolean; error?: Error }) => {
+				const { modelName } = data;
+				// Remove the downloaded model
+				delete modelDownloadStatus[modelName];
+
+				console.log(data);
+
+				if (!data.success) {
+					toast.error(data.error);
+				} else {
+					toast.success(`Model '${modelName}' has been successfully downloaded.`);
+
+					const notification = new Notification($WEBUI_NAME, {
+						body: `Model '${modelName}' has been successfully downloaded.`,
+						icon: `${WEBUI_BASE_URL}/static/favicon.png`
+					});
+
+					models.set(await getModels());
+				}
+			}
+		);
+
+		modelTag = '';
+		modelTransferring = false;
+	};
+
+	const uploadModelHandler = async () => {
+		modelTransferring = true;
+		uploadProgress = 0;
+
+		let uploaded = false;
+		let fileResponse = null;
+		let name = '';
+
+		if (modelUploadMode === 'file') {
+			const file = modelInputFile[0];
+			const formData = new FormData();
+			formData.append('file', file);
+
+			fileResponse = await fetch(`${WEBUI_API_BASE_URL}/utils/upload`, {
+				method: 'POST',
+				headers: {
+					...($user && { Authorization: `Bearer ${localStorage.token}` })
+				},
+				body: formData
+			}).catch((error) => {
+				console.log(error);
+				return null;
+			});
+		} else {
+			fileResponse = await fetch(`${WEBUI_API_BASE_URL}/utils/download?url=${modelFileUrl}`, {
+				method: 'GET',
+				headers: {
+					...($user && { Authorization: `Bearer ${localStorage.token}` })
+				}
+			}).catch((error) => {
+				console.log(error);
+				return null;
+			});
+		}
+
+		if (fileResponse && fileResponse.ok) {
+			const reader = fileResponse.body
+				.pipeThrough(new TextDecoderStream())
+				.pipeThrough(splitStream('\n'))
+				.getReader();
+
+			while (true) {
+				const { value, done } = await reader.read();
+				if (done) break;
+
+				try {
+					let lines = value.split('\n');
+
+					for (const line of lines) {
+						if (line !== '') {
+							let data = JSON.parse(line.replace(/^data: /, ''));
+
+							if (data.progress) {
+								uploadProgress = data.progress;
+							}
+
+							if (data.error) {
+								throw data.error;
+							}
+
+							if (data.done) {
+								modelFileDigest = data.blob;
+								name = data.name;
+								uploaded = true;
+							}
+						}
+					}
+				} catch (error) {
+					console.log(error);
+				}
+			}
+		}
+
+		if (uploaded) {
+			const res = await createModel(
+				localStorage.token,
+				`${name}:latest`,
+				`FROM @${modelFileDigest}\n${modelFileContent}`
+			);
+
+			if (res && res.ok) {
+				const reader = res.body
+					.pipeThrough(new TextDecoderStream())
+					.pipeThrough(splitStream('\n'))
+					.getReader();
+
+				while (true) {
+					const { value, done } = await reader.read();
+					if (done) break;
+
+					try {
+						let lines = value.split('\n');
+
+						for (const line of lines) {
+							if (line !== '') {
+								console.log(line);
+								let data = JSON.parse(line);
+								console.log(data);
+
+								if (data.error) {
+									throw data.error;
+								}
+								if (data.detail) {
+									throw data.detail;
+								}
+
+								if (data.status) {
+									if (
+										!data.digest &&
+										!data.status.includes('writing') &&
+										!data.status.includes('sha256')
+									) {
+										toast.success(data.status);
+									} else {
+										if (data.digest) {
+											digest = data.digest;
+
+											if (data.completed) {
+												pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
+											} else {
+												pullProgress = 100;
+											}
+										}
+									}
+								}
+							}
+						}
+					} catch (error) {
+						console.log(error);
+						toast.error(error);
+					}
+				}
+			}
+		}
+
+		modelFileUrl = '';
+		modelInputFile = '';
+		modelTransferring = false;
+		uploadProgress = null;
+
+		models.set(await getModels());
+	};
+
+	const deleteModelHandler = async () => {
+		const res = await deleteModel(localStorage.token, deleteModelTag).catch((error) => {
+			toast.error(error);
+		});
+
+		if (res) {
+			toast.success(`Deleted ${deleteModelTag}`);
+		}
+
+		deleteModelTag = '';
+		models.set(await getModels());
+	};
+
+	const pullModelHandlerProcessor = async (opts: { modelName: string; callback: Function }) => {
+		const res = await pullModel(localStorage.token, opts.modelName).catch((error) => {
+			opts.callback({ success: false, error, modelName: opts.modelName });
+			return null;
+		});
+
+		if (res) {
+			const reader = res.body
+				.pipeThrough(new TextDecoderStream())
+				.pipeThrough(splitStream('\n'))
+				.getReader();
+
+			while (true) {
+				try {
+					const { value, done } = await reader.read();
+					if (done) break;
+
+					let lines = value.split('\n');
+
+					for (const line of lines) {
+						if (line !== '') {
+							let data = JSON.parse(line);
+							if (data.error) {
+								throw data.error;
+							}
+							if (data.detail) {
+								throw data.detail;
+							}
+							if (data.status) {
+								if (data.digest) {
+									let downloadProgress = 0;
+									if (data.completed) {
+										downloadProgress = Math.round((data.completed / data.total) * 1000) / 10;
+									} else {
+										downloadProgress = 100;
+									}
+									modelDownloadStatus[opts.modelName] = {
+										pullProgress: downloadProgress,
+										digest: data.digest
+									};
+								} else {
+									toast.success(data.status);
+								}
+							}
+						}
+					}
+				} catch (error) {
+					console.log(error);
+					if (typeof error !== 'string') {
+						error = error.message;
+					}
+					opts.callback({ success: false, error, modelName: opts.modelName });
+				}
+			}
+			opts.callback({ success: true, modelName: opts.modelName });
+		}
+	};
+</script>
+
+<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.com</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 mb-1 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.com/library"
+					target="_blank">click here.</a
+				>
+			</div>
+
+			{#if Object.keys(modelDownloadStatus).length > 0}
+				{#each Object.keys(modelDownloadStatus) as model}
+					<div class="flex flex-col">
+						<div class="font-medium mb-1">{model}</div>
+						<div class="">
+							<div
+								class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
+								style="width: {Math.max(15, modelDownloadStatus[model].pullProgress ?? 0)}%"
+							>
+								{modelDownloadStatus[model].pullProgress ?? 0}%
+							</div>
+							<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
+								{modelDownloadStatus[model].digest}
+							</div>
+						</div>
+					</div>
+				{/each}
+			{/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>
+
+		<hr class=" dark:border-gray-700" />
+
+		<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 bg-gray-500 text-xs font-medium text-gray-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>

src/lib/components/chat/SettingsModal.svelte

 <script lang="ts">
 	import toast from 'svelte-french-toast';
-	import fileSaver from 'file-saver';
-	const { saveAs } = fileSaver;
+	import { models, settings, user } from '$lib/stores';
 
-	import { onMount } from 'svelte';
-	import { config, models, settings, user, chats } from '$lib/stores';
-	import { splitStream, getGravatarURL } from '$lib/utils';
+	import { getOllamaModels } from '$lib/apis/ollama';
+	import { getOpenAIModels } from '$lib/apis/openai';
 
-	import {
-		getOllamaVersion,
-		getOllamaModels,
-		getOllamaAPIUrl,
-		updateOllamaAPIUrl,
-		pullModel,
-		createModel,
-		deleteModel
-	} from '$lib/apis/ollama';
-	import { createNewChat, deleteAllChats, getAllChats, getChatList } from '$lib/apis/chats';
-	import { WEB_UI_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
-
-	import Advanced from './Settings/Advanced.svelte';
 	import Modal from '../common/Modal.svelte';
-	import { updateUserPassword } from '$lib/apis/auths';
-	import { goto } from '$app/navigation';
-	import Page from '../../../routes/(app)/+page.svelte';
-	import {
-		getOpenAIKey,
-		getOpenAIModels,
-		getOpenAIUrl,
-		updateOpenAIKey,
-		updateOpenAIUrl
-	} from '$lib/apis/openai';
-	import { resetVectorDB } from '$lib/apis/rag';
+	import Account from './Settings/Account.svelte';
+	import About from './Settings/About.svelte';
+	import Models from './Settings/Models.svelte';
+	import General from './Settings/General.svelte';
+	import Interface from './Settings/Interface.svelte';
+	import Audio from './Settings/Audio.svelte';
+	import Chats from './Settings/Chats.svelte';
+	import Connections from './Settings/Connections.svelte';
+	import Images from './Settings/Images.svelte';
 
 	export let show = false;
 
@@ -44,467 +27,6 @@
 
 	let selectedTab = 'general';
 
-	// General
-	let API_BASE_URL = '';
-	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
-	let theme = 'dark';
-	let notificationEnabled = false;
-	let system = '';
-
-	// Advanced
-	let requestFormat = '';
-	let options = {
-		// Advanced
-		seed: 0,
-		temperature: '',
-		repeat_penalty: '',
-		repeat_last_n: '',
-		mirostat: '',
-		mirostat_eta: '',
-		mirostat_tau: '',
-		top_k: '',
-		top_p: '',
-		stop: '',
-		tfs_z: '',
-		num_ctx: '',
-		num_predict: ''
-	};
-
-	// Models
-	let modelTransferring = false;
-
-	let modelTag = '';
-	let digest = '';
-	let pullProgress = null;
-
-	let modelUploadMode = 'file';
-	let modelInputFile = '';
-	let modelFileUrl = '';
-	let modelFileContent = `TEMPLATE """{{ .System }}\nUSER: {{ .Prompt }}\nASSSISTANT: """\nPARAMETER num_ctx 4096\nPARAMETER stop "</s>"\nPARAMETER stop "USER:"\nPARAMETER stop "ASSSISTANT:"`;
-	let modelFileDigest = '';
-	let uploadProgress = null;
-
-	let deleteModelTag = '';
-
-	// External
-
-	let OPENAI_API_KEY = '';
-	let OPENAI_API_BASE_URL = '';
-
-	// Addons
-	let titleAutoGenerate = true;
-	let speechAutoSend = false;
-	let responseAutoCopy = false;
-
-	let gravatarEmail = '';
-	let titleAutoGenerateModel = '';
-
-	// Chats
-	let saveChatHistory = true;
-	let importFiles;
-	let showDeleteConfirm = false;
-
-	const importChats = async (_chats) => {
-		for (const chat of _chats) {
-			console.log(chat);
-			await createNewChat(localStorage.token, chat);
-		}
-
-		await chats.set(await getChatList(localStorage.token));
-	};
-
-	const exportChats = async () => {
-		let blob = new Blob([JSON.stringify(await getAllChats(localStorage.token))], {
-			type: 'application/json'
-		});
-		saveAs(blob, `chat-export-${Date.now()}.json`);
-	};
-
-	$: if (importFiles) {
-		console.log(importFiles);
-
-		let reader = new FileReader();
-		reader.onload = (event) => {
-			let chats = JSON.parse(event.target.result);
-			console.log(chats);
-			importChats(chats);
-		};
-
-		reader.readAsText(importFiles[0]);
-	}
-
-	const deleteChats = async () => {
-		await goto('/');
-		await deleteAllChats(localStorage.token);
-		await chats.set(await getChatList(localStorage.token));
-	};
-
-	// Auth
-	let authEnabled = false;
-	let authType = 'Basic';
-	let authContent = '';
-
-	// Account
-	let currentPassword = '';
-	let newPassword = '';
-	let newPasswordConfirm = '';
-
-	// About
-	let ollamaVersion = '';
-
-	const updateOllamaAPIUrlHandler = async () => {
-		API_BASE_URL = await updateOllamaAPIUrl(localStorage.token, API_BASE_URL);
-		const _models = await getModels('ollama');
-
-		if (_models.length > 0) {
-			toast.success('Server connection verified');
-			await models.set(_models);
-		}
-	};
-
-	const updateOpenAIHandler = async () => {
-		OPENAI_API_BASE_URL = await updateOpenAIUrl(localStorage.token, OPENAI_API_BASE_URL);
-		OPENAI_API_KEY = await updateOpenAIKey(localStorage.token, OPENAI_API_KEY);
-
-		await models.set(await getModels());
-	};
-
-	const toggleTheme = async () => {
-		if (theme === 'dark') {
-			theme = 'light';
-		} else {
-			theme = 'dark';
-		}
-
-		localStorage.theme = theme;
-
-		document.documentElement.classList.remove(theme === 'dark' ? 'light' : 'dark');
-		document.documentElement.classList.add(theme);
-	};
-
-	const toggleRequestFormat = async () => {
-		if (requestFormat === '') {
-			requestFormat = 'json';
-		} else {
-			requestFormat = '';
-		}
-
-		saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined });
-	};
-
-	const toggleSpeechAutoSend = async () => {
-		speechAutoSend = !speechAutoSend;
-		saveSettings({ speechAutoSend: speechAutoSend });
-	};
-
-	const toggleTitleAutoGenerate = async () => {
-		titleAutoGenerate = !titleAutoGenerate;
-		saveSettings({ titleAutoGenerate: titleAutoGenerate });
-	};
-
-	const toggleNotification = async () => {
-		const permission = await Notification.requestPermission();
-
-		if (permission === 'granted') {
-			notificationEnabled = !notificationEnabled;
-			saveSettings({ notificationEnabled: notificationEnabled });
-		} else {
-			toast.error(
-				'Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.'
-			);
-		}
-	};
-
-	const toggleResponseAutoCopy = async () => {
-		const permission = await navigator.clipboard
-			.readText()
-			.then(() => {
-				return 'granted';
-			})
-			.catch(() => {
-				return '';
-			});
-
-		console.log(permission);
-
-		if (permission === 'granted') {
-			responseAutoCopy = !responseAutoCopy;
-			saveSettings({ responseAutoCopy: responseAutoCopy });
-		} else {
-			toast.error(
-				'Clipboard write permission denied. Please check your browser settings to grant the necessary access.'
-			);
-		}
-	};
-
-	const toggleSaveChatHistory = async () => {
-		saveChatHistory = !saveChatHistory;
-		console.log(saveChatHistory);
-
-		if (saveChatHistory === false) {
-			await goto('/');
-		}
-		saveSettings({ saveChatHistory: saveChatHistory });
-	};
-
-	const pullModelHandler = async () => {
-		modelTransferring = true;
-
-		const res = await pullModel(localStorage.token, modelTag);
-
-		if (res) {
-			const reader = res.body
-				.pipeThrough(new TextDecoderStream())
-				.pipeThrough(splitStream('\n'))
-				.getReader();
-
-			while (true) {
-				const { value, done } = await reader.read();
-				if (done) break;
-
-				try {
-					let lines = value.split('\n');
-
-					for (const line of lines) {
-						if (line !== '') {
-							console.log(line);
-							let data = JSON.parse(line);
-							console.log(data);
-
-							if (data.error) {
-								throw data.error;
-							}
-
-							if (data.detail) {
-								throw data.detail;
-							}
-							if (data.status) {
-								if (!data.digest) {
-									toast.success(data.status);
-
-									if (data.status === 'success') {
-										const notification = new Notification(`Ollama`, {
-											body: `Model '${modelTag}' has been successfully downloaded.`,
-											icon: '/favicon.png'
-										});
-									}
-								} else {
-									digest = data.digest;
-									if (data.completed) {
-										pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
-									} else {
-										pullProgress = 100;
-									}
-								}
-							}
-						}
-					}
-				} catch (error) {
-					console.log(error);
-					toast.error(error);
-				}
-			}
-		}
-
-		modelTag = '';
-		modelTransferring = false;
-
-		models.set(await getModels());
-	};
-
-	const calculateSHA256 = async (file) => {
-		console.log(file);
-		// Create a FileReader to read the file asynchronously
-		const reader = new FileReader();
-
-		// Define a promise to handle the file reading
-		const readFile = new Promise((resolve, reject) => {
-			reader.onload = () => resolve(reader.result);
-			reader.onerror = reject;
-		});
-
-		// Read the file as an ArrayBuffer
-		reader.readAsArrayBuffer(file);
-
-		try {
-			// Wait for the FileReader to finish reading the file
-			const buffer = await readFile;
-
-			// Convert the ArrayBuffer to a Uint8Array
-			const uint8Array = new Uint8Array(buffer);
-
-			// Calculate the SHA-256 hash using Web Crypto API
-			const hashBuffer = await crypto.subtle.digest('SHA-256', uint8Array);
-
-			// Convert the hash to a hexadecimal string
-			const hashArray = Array.from(new Uint8Array(hashBuffer));
-			const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('');
-
-			return `sha256:${hashHex}`;
-		} catch (error) {
-			console.error('Error calculating SHA-256 hash:', error);
-			throw error;
-		}
-	};
-
-	const uploadModelHandler = async () => {
-		modelTransferring = true;
-		uploadProgress = 0;
-
-		let uploaded = false;
-		let fileResponse = null;
-		let name = '';
-
-		if (modelUploadMode === 'file') {
-			const file = modelInputFile[0];
-			const formData = new FormData();
-			formData.append('file', file);
-
-			fileResponse = await fetch(`${WEBUI_API_BASE_URL}/utils/upload`, {
-				method: 'POST',
-				headers: {
-					...($settings.authHeader && { Authorization: $settings.authHeader }),
-					...($user && { Authorization: `Bearer ${localStorage.token}` })
-				},
-				body: formData
-			}).catch((error) => {
-				console.log(error);
-				return null;
-			});
-		} else {
-			fileResponse = await fetch(`${WEBUI_API_BASE_URL}/utils/download?url=${modelFileUrl}`, {
-				method: 'GET',
-				headers: {
-					...($settings.authHeader && { Authorization: $settings.authHeader }),
-					...($user && { Authorization: `Bearer ${localStorage.token}` })
-				}
-			}).catch((error) => {
-				console.log(error);
-				return null;
-			});
-		}
-
-		if (fileResponse && fileResponse.ok) {
-			const reader = fileResponse.body
-				.pipeThrough(new TextDecoderStream())
-				.pipeThrough(splitStream('\n'))
-				.getReader();
-
-			while (true) {
-				const { value, done } = await reader.read();
-				if (done) break;
-
-				try {
-					let lines = value.split('\n');
-
-					for (const line of lines) {
-						if (line !== '') {
-							let data = JSON.parse(line.replace(/^data: /, ''));
-
-							if (data.progress) {
-								uploadProgress = data.progress;
-							}
-
-							if (data.error) {
-								throw data.error;
-							}
-
-							if (data.done) {
-								modelFileDigest = data.blob;
-								name = data.name;
-								uploaded = true;
-							}
-						}
-					}
-				} catch (error) {
-					console.log(error);
-				}
-			}
-		}
-
-		if (uploaded) {
-			const res = await createModel(
-				localStorage.token,
-				`${name}:latest`,
-				`FROM @${modelFileDigest}\n${modelFileContent}`
-			);
-
-			if (res && res.ok) {
-				const reader = res.body
-					.pipeThrough(new TextDecoderStream())
-					.pipeThrough(splitStream('\n'))
-					.getReader();
-
-				while (true) {
-					const { value, done } = await reader.read();
-					if (done) break;
-
-					try {
-						let lines = value.split('\n');
-
-						for (const line of lines) {
-							if (line !== '') {
-								console.log(line);
-								let data = JSON.parse(line);
-								console.log(data);
-
-								if (data.error) {
-									throw data.error;
-								}
-								if (data.detail) {
-									throw data.detail;
-								}
-
-								if (data.status) {
-									if (
-										!data.digest &&
-										!data.status.includes('writing') &&
-										!data.status.includes('sha256')
-									) {
-										toast.success(data.status);
-									} else {
-										if (data.digest) {
-											digest = data.digest;
-
-											if (data.completed) {
-												pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
-											} else {
-												pullProgress = 100;
-											}
-										}
-									}
-								}
-							}
-						}
-					} catch (error) {
-						console.log(error);
-						toast.error(error);
-					}
-				}
-			}
-		}
-
-		modelFileUrl = '';
-		modelInputFile = '';
-		modelTransferring = false;
-		uploadProgress = null;
-
-		models.set(await getModels());
-	};
-
-	const deleteModelHandler = async () => {
-		const res = await deleteModel(localStorage.token, deleteModelTag).catch((error) => {
-			toast.error(error);
-		});
-
-		if (res) {
-			toast.success(`Deleted ${deleteModelTag}`);
-		}
-
-		deleteModelTag = '';
-		models.set(await getModels());
-	};
-
 	const getModels = async (type = 'all') => {
 		const models = [];
 		models.push(
@@ -514,88 +36,16 @@
 			}))
 		);
 
-		// If OpenAI API Key exists
-		if (type === 'all' && OPENAI_API_KEY) {
+		if (type === 'all') {
 			const openAIModels = await getOpenAIModels(localStorage.token).catch((error) => {
 				console.log(error);
 				return null;
 			});
-
 			models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
 		}
 
 		return models;
 	};
-
-	const updatePasswordHandler = async () => {
-		if (newPassword === newPasswordConfirm) {
-			const res = await updateUserPassword(localStorage.token, currentPassword, newPassword).catch(
-				(error) => {
-					toast.error(error);
-					return null;
-				}
-			);
-
-			if (res) {
-				toast.success('Successfully updated.');
-			}
-
-			currentPassword = '';
-			newPassword = '';
-			newPasswordConfirm = '';
-		} else {
-			toast.error(
-				`The passwords you entered don't quite match. Please double-check and try again.`
-			);
-			newPassword = '';
-			newPasswordConfirm = '';
-		}
-	};
-
-	onMount(async () => {
-		console.log('settings', $user.role === 'admin');
-		if ($user.role === 'admin') {
-			API_BASE_URL = await getOllamaAPIUrl(localStorage.token);
-			OPENAI_API_BASE_URL = await getOpenAIUrl(localStorage.token);
-			OPENAI_API_KEY = await getOpenAIKey(localStorage.token);
-		}
-
-		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
-		console.log(settings);
-
-		theme = localStorage.theme ?? 'dark';
-		notificationEnabled = settings.notificationEnabled ?? false;
-
-		system = settings.system ?? '';
-		requestFormat = settings.requestFormat ?? '';
-
-		options.seed = settings.seed ?? 0;
-		options.temperature = settings.temperature ?? '';
-		options.repeat_penalty = settings.repeat_penalty ?? '';
-		options.top_k = settings.top_k ?? '';
-		options.top_p = settings.top_p ?? '';
-		options.num_ctx = settings.num_ctx ?? '';
-		options = { ...options, ...settings.options };
-		options.stop = (settings?.options?.stop ?? []).join(',');
-
-		titleAutoGenerate = settings.titleAutoGenerate ?? true;
-		speechAutoSend = settings.speechAutoSend ?? false;
-		responseAutoCopy = settings.responseAutoCopy ?? false;
-		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
-		gravatarEmail = settings.gravatarEmail ?? '';
-
-		saveChatHistory = settings.saveChatHistory ?? true;
-
-		authEnabled = settings.authHeader !== undefined ? true : false;
-		if (authEnabled) {
-			authType = settings.authHeader.split(' ')[0];
-			authContent = settings.authHeader.split(' ')[1];
-		}
-
-		ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => {
-			return '';
-		});
-	});
 </script>
 
 <Modal bind:show>
@@ -652,113 +102,91 @@
 					<div class=" self-center">General</div>
 				</button>
 
-				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'advanced'
-						? 'bg-gray-200 dark:bg-gray-700'
-						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
-					on:click={() => {
-						selectedTab = 'advanced';
-					}}
-				>
-					<div class=" self-center mr-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center">Advanced</div>
-				</button>
-
 				{#if $user?.role === 'admin'}
 					<button
 						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-						'models'
+						'connections'
 							? 'bg-gray-200 dark:bg-gray-700'
 							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
 						on:click={() => {
-							selectedTab = 'models';
+							selectedTab = 'connections';
 						}}
 					>
 						<div class=" self-center mr-2">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
+								viewBox="0 0 16 16"
 								fill="currentColor"
 								class="w-4 h-4"
 							>
 								<path
-									fill-rule="evenodd"
-									d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
-									clip-rule="evenodd"
+									d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z"
 								/>
 							</svg>
 						</div>
-						<div class=" self-center">Models</div>
+						<div class=" self-center">Connections</div>
 					</button>
 
 					<button
 						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-						'external'
+						'models'
 							? 'bg-gray-200 dark:bg-gray-700'
 							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
 						on:click={() => {
-							selectedTab = 'external';
+							selectedTab = 'models';
 						}}
 					>
 						<div class=" self-center mr-2">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
+								viewBox="0 0 20 20"
 								fill="currentColor"
 								class="w-4 h-4"
 							>
 								<path
-									d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z"
+									fill-rule="evenodd"
+									d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
+									clip-rule="evenodd"
 								/>
 							</svg>
 						</div>
-						<div class=" self-center">External</div>
+						<div class=" self-center">Models</div>
 					</button>
 				{/if}
 
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'addons'
+					'interface'
 						? 'bg-gray-200 dark:bg-gray-700'
 						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
 					on:click={() => {
-						selectedTab = 'addons';
+						selectedTab = 'interface';
 					}}
 				>
 					<div class=" self-center mr-2">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
+							viewBox="0 0 16 16"
 							fill="currentColor"
 							class="w-4 h-4"
 						>
 							<path
-								d="M12 4.467c0-.405.262-.75.559-1.027.276-.257.441-.584.441-.94 0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953.29.265.544.6.544.994a.968.968 0 01-1.024.974 39.655 39.655 0 01-3.014-.306.75.75 0 00-.847.847c.14.993.242 1.999.306 3.014A.968.968 0 014.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9 1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441.276-.297.622-.559 1.027-.559a.997.997 0 011.004 1.03 39.747 39.747 0 01-.319 3.734.75.75 0 00.64.842c1.05.146 2.111.252 3.184.318A.97.97 0 0010 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94-.297.276-.559.622-.559 1.027a.998.998 0 001.03 1.005c1.337-.05 2.659-.162 3.961-.337a.75.75 0 00.644-.644c.175-1.302.288-2.624.337-3.961A.998.998 0 0016.967 12c-.405 0-.75.262-1.027.559-.257.276-.584.441-.94.441-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455.265.291.601.545.995.545a.97.97 0 00.976-1.024 41.159 41.159 0 00-.318-3.184.75.75 0 00-.842-.64c-1.228.164-2.473.271-3.734.319A.997.997 0 0112 4.467z"
+								fill-rule="evenodd"
+								d="M2 4.25A2.25 2.25 0 0 1 4.25 2h7.5A2.25 2.25 0 0 1 14 4.25v5.5A2.25 2.25 0 0 1 11.75 12h-1.312c.1.128.21.248.328.36a.75.75 0 0 1 .234.545v.345a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-.345a.75.75 0 0 1 .234-.545c.118-.111.228-.232.328-.36H4.25A2.25 2.25 0 0 1 2 9.75v-5.5Zm2.25-.75a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75h-7.5Z"
+								clip-rule="evenodd"
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Add-ons</div>
+					<div class=" self-center">Interface</div>
 				</button>
 
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'chats'
+					'audio'
 						? 'bg-gray-200 dark:bg-gray-700'
 						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
 					on:click={() => {
-						selectedTab = 'chats';
+						selectedTab = 'audio';
 					}}
 				>
 					<div class=" self-center mr-2">
@@ -769,43 +197,70 @@
 							class="w-4 h-4"
 						>
 							<path
-								fill-rule="evenodd"
-								d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-								clip-rule="evenodd"
+								d="M7.557 2.066A.75.75 0 0 1 8 2.75v10.5a.75.75 0 0 1-1.248.56L3.59 11H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.59l3.162-2.81a.75.75 0 0 1 .805-.124ZM12.95 3.05a.75.75 0 1 0-1.06 1.06 5.5 5.5 0 0 1 0 7.78.75.75 0 1 0 1.06 1.06 7 7 0 0 0 0-9.9Z"
+							/>
+							<path
+								d="M10.828 5.172a.75.75 0 1 0-1.06 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 1 0 1.06 1.06 4 4 0 0 0 0-5.656Z"
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Chats</div>
+					<div class=" self-center">Audio</div>
 				</button>
 
-				{#if !$config || ($config && !$config.auth)}
+				{#if $user.role === 'admin'}
 					<button
 						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-						'auth'
+						'images'
 							? 'bg-gray-200 dark:bg-gray-700'
 							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
 						on:click={() => {
-							selectedTab = 'auth';
+							selectedTab = 'images';
 						}}
 					>
 						<div class=" self-center mr-2">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
+								viewBox="0 0 16 16"
 								fill="currentColor"
 								class="w-4 h-4"
 							>
 								<path
 									fill-rule="evenodd"
-									d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+									d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
 									clip-rule="evenodd"
 								/>
 							</svg>
 						</div>
-						<div class=" self-center">Authentication</div>
+						<div class=" self-center">Images</div>
 					</button>
 				{/if}
 
+				<button
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					'chats'
+						? 'bg-gray-200 dark:bg-gray-700'
+						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+					on:click={() => {
+						selectedTab = 'chats';
+					}}
+				>
+					<div class=" self-center mr-2">
+						<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="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center">Chats</div>
+				</button>
+
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 					'account'
@@ -858,1242 +313,55 @@
 					<div class=" self-center">About</div>
 				</button>
 			</div>
-			<div class="flex-1 md:min-h-[340px]">
+			<div class="flex-1 md:min-h-[380px]">
 				{#if selectedTab === 'general'}
-					<div class="flex flex-col space-y-3">
-						<div>
-							<div class=" mb-1 text-sm font-medium">WebUI Settings</div>
-
-							<div class=" py-0.5 flex w-full justify-between">
-								<div class=" self-center text-xs font-medium">Theme</div>
-
-								<!-- <button
-									class="p-1 px-3 text-xs flex rounded transition"
-									on:click={() => {
-										toggleTheme();
-									}}
-								>
-									
-								</button> -->
-
-								<div class="flex items-center relative">
-									<div class=" absolute right-16">
-										{#if theme === 'dark'}
-											<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="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-										{:else if theme === 'light'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4 self-center"
-											>
-												<path
-													d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
-												/>
-											</svg>
-										{/if}
-									</div>
-
-									<select
-										class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
-										bind:value={theme}
-										placeholder="Select a theme"
-										on:change={(e) => {
-											localStorage.theme = theme;
-
-											themes
-												.filter((e) => e !== theme)
-												.forEach((e) => {
-													e.split(' ').forEach((e) => {
-														document.documentElement.classList.remove(e);
-													});
-												});
-
-											theme.split(' ').forEach((e) => {
-												document.documentElement.classList.add(e);
-											});
-
-											console.log(theme);
-										}}
-									>
-										<option value="dark">Dark</option>
-										<option value="light">Light</option>
-										<option value="rose-pine dark">Rosé Pine</option>
-										<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
-									</select>
-								</div>
-							</div>
-
-							<div>
-								<div class=" py-0.5 flex w-full justify-between">
-									<div class=" self-center text-xs font-medium">Notification</div>
-
-									<button
-										class="p-1 px-3 text-xs flex rounded transition"
-										on:click={() => {
-											toggleNotification();
-										}}
-										type="button"
-									>
-										{#if notificationEnabled === true}
-											<span class="ml-2 self-center">On</span>
-										{:else}
-											<span class="ml-2 self-center">Off</span>
-										{/if}
-									</button>
-								</div>
-							</div>
-						</div>
-
-						{#if $user.role === 'admin'}
-							<hr class=" dark:border-gray-700" />
-							<div>
-								<div class=" mb-2.5 text-sm font-medium">Ollama API URL</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 URL (e.g. http://localhost:11434/api)"
-											bind:value={API_BASE_URL}
-										/>
-									</div>
-									<button
-										class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
-										on:click={() => {
-											updateOllamaAPIUrlHandler();
-										}}
-									>
-										<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="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									</button>
-								</div>
-
-								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-									Trouble accessing Ollama?
-									<a
-										class=" text-gray-300 font-medium"
-										href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
-										target="_blank"
-									>
-										Click here for help.
-									</a>
-								</div>
-							</div>
-						{/if}
-
-						<hr class=" dark:border-gray-700" />
-
-						<div>
-							<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
-							<textarea
-								bind:value={system}
-								class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
-								rows="4"
-							/>
-						</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({
-										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>
-
-							<Advanced bind:options />
-							<hr class=" dark:border-gray-700" />
-
-							<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'}
-											<!-- <svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4 self-center"
-											>
-												<path
-													d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
-												/>
-											</svg> -->
-											<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>
+					<General
+						{getModels}
+						{saveSettings}
+						on:save={() => {
+							show = false;
+						}}
+					/>
 				{: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 bg-gray-500 text-xs font-medium text-gray-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>
-
-							<hr class=" dark:border-gray-700" />
-
-							<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={() => {
-							updateOpenAIHandler();
-
-							// saveSettings({
-							// 	OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined,
-							// 	OPENAI_API_BASE_URL: OPENAI_API_BASE_URL !== '' ? OPENAI_API_BASE_URL : undefined
-							// });
+					<Models {getModels} />
+				{:else if selectedTab === 'connections'}
+					<Connections
+						{getModels}
+						on:save={() => {
 							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>
-
-							<hr class=" dark:border-gray-700" />
-
-							<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 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 === 'addons'}
-					<form
-						class="flex flex-col h-full justify-between space-y-3 text-sm"
-						on:submit|preventDefault={() => {
+					/>
+				{:else if selectedTab === 'interface'}
+					<Interface
+						{saveSettings}
+						on:save={() => {
 							show = false;
 						}}
-					>
-						<div class=" space-y-3">
-							<div>
-								<div class=" mb-1 text-sm font-medium">WebUI Add-ons</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">Set Title Auto-Generation 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={titleAutoGenerateModel}
-											placeholder="Select a model"
-										>
-											<option value="" selected>Default</option>
-											{#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-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition"
-										on:click={() => {
-											saveSettings({
-												titleAutoGenerateModel:
-													titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined
-											});
-										}}
-										type="button"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="w-3.5 h-3.5"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									</button>
-								</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 justify-between rounded-md items-center py-2 px-3.5 w-full transition"
-							>
-								<div class="flex w-full justify-between">
-									<div class=" self-center text-sm font-medium">Chat History</div>
-
-									<button
-										class="p-1 px-3 text-xs flex rounded transition"
-										type="button"
-										on:click={() => {
-											toggleSaveChatHistory();
-										}}
-									>
-										{#if saveChatHistory === true}
-											<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>
-
-											<span class="ml-2 self-center"> On </span>
-										{:else}
-											<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>
-
-											<span class="ml-2 self-center">Off</span>
-										{/if}
-									</button>
-								</div>
-
-								<div class="text-xs text-left w-full font-medium mt-0.5">
-									This setting does not sync across browsers or devices.
-								</div>
-							</div>
-
-							<hr class=" dark:border-gray-700" />
-
-							<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>
-
-							<hr class=" dark:border-gray-700" />
-
-							{#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}
-
-							{#if $user?.role === 'admin'}
-								<hr class=" dark:border-gray-700" />
-
-								<button
-									class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-									on:click={() => {
-										const res = resetVectorDB(localStorage.token).catch((error) => {
-											toast.error(error);
-											return null;
-										});
-
-										if (res) {
-											toast.success('Success');
-										}
-									}}
-								>
-									<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="M3.5 2A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 12.5 4H9.621a1.5 1.5 0 0 1-1.06-.44L7.439 2.44A1.5 1.5 0 0 0 6.38 2H3.5Zm6.75 7.75a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0 0 1.5h4.5Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
-									</div>
-									<div class=" self-center text-sm font-medium">Reset Vector Storage</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
-							});
+					/>
+				{:else if selectedTab === 'audio'}
+					<Audio
+						{saveSettings}
+						on:save={() => {
 							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>
-
-											<span class="ml-2 self-center"> On </span>
-										{:else}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 24 24"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													d="M18 1.5c2.9 0 5.25 2.35 5.25 5.25v3.75a.75.75 0 01-1.5 0V6.75a3.75 3.75 0 10-7.5 0v3a3 3 0 013 3v6.75a3 3 0 01-3 3H3.75a3 3 0 01-3-3v-6.75a3 3 0 013-3h9v-3c0-2.9 2.35-5.25 5.25-5.25z"
-												/>
-											</svg>
-
-											<span class="ml-2 self-center">Off</span>
-										{/if}
-									</button>
-								</div>
-							</div>
-
-							{#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>
-
-								<hr class=" dark:border-gray-700" />
-
-								<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="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 === 'images'}
+					<Images
+						{saveSettings}
+						on:save={() => {
+							show = false;
+						}}
+					/>
+				{:else if selectedTab === 'chats'}
+					<Chats {saveSettings} />
 				{:else if selectedTab === 'account'}
-					<form
-						class="flex flex-col h-full text-sm"
-						on:submit|preventDefault={() => {
-							updatePasswordHandler();
+					<Account
+						saveHandler={() => {
+							show = false;
 						}}
-					>
-						<div class=" mb-2.5 font-medium">Change Password</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-1">
-									<input
-										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
-										type="password"
-										bind:value={currentPassword}
-										autocomplete="current-password"
-										required
-									/>
-								</div>
-							</div>
-
-							<div class="flex flex-col w-full">
-								<div class=" mb-1 text-xs text-gray-500">New Password</div>
-
-								<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"
-										type="password"
-										bind:value={newPassword}
-										autocomplete="new-password"
-										required
-									/>
-								</div>
-							</div>
-
-							<div class="flex flex-col w-full">
-								<div class=" mb-1 text-xs text-gray-500">Confirm Password</div>
-
-								<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"
-										type="password"
-										bind:value={newPasswordConfirm}
-										autocomplete="off"
-										required
-									/>
-								</div>
-							</div>
-						</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>
-
-							<hr class=" dark:border-gray-700" />
-
-							<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>
-
-							<hr class=" dark:border-gray-700" />
-
-							<div class="flex space-x-1">
-								<a href="https://discord.gg/5rJgQTnV4s" target="_blank">
-									<img
-										alt="Discord"
-										src="https://img.shields.io/badge/Discord-Ollama_Web_UI-blue?logo=discord&logoColor=white"
-									/>
-								</a>
-
-								<a href="https://github.com/ollama-webui/ollama-webui" target="_blank">
-									<img
-										alt="Github Repo"
-										src="https://img.shields.io/github/stars/ollama-webui/ollama-webui?style=social&label=Star us on Github"
-									/>
-								</a>
-							</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>
+					<About />
 				{/if}
 			</div>
 		</div>

src/lib/components/chat/ShareChatModal.svelte

+<script lang="ts">
+	import Modal from '../common/Modal.svelte';
+
+	export let downloadChat: Function;
+	export let shareChat: Function;
+
+	export let show = false;
+</script>
+
+<Modal bind:show size="xs">
+	<div class="px-4 pt-4 pb-5 w-full flex flex-col justify-center">
+		<button
+			class=" self-center px-8 py-1.5 w-full rounded-full text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white"
+			type="button"
+			on:click={() => {
+				shareChat();
+				show = false;
+			}}
+		>
+			Share to OpenWebUI Community
+		</button>
+
+		<div class="flex justify-center space-x-1 mt-1.5">
+			<div class=" self-center text-gray-400 text-xs font-medium">or</div>
+
+			<button
+				class=" self-center rounded-full text-xs font-medium text-gray-700 dark:text-gray-500 underline"
+				type="button"
+				on:click={() => {
+					downloadChat();
+					show = false;
+				}}
+			>
+				Download as a File
+			</button>
+		</div>
+	</div>
+</Modal>