Merge pull request #413 from ollama-webui/main

dev

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

@@ -27,7 +27,7 @@
 					>
 						{#if model in modelfiles}
 							<img
-								src={modelfiles[model]?.imageUrl}
+								src={modelfiles[model]?.imageUrl ?? '/ollama-dark.png'}
 								alt="modelfile"
 								class=" w-20 mb-2 rounded-full {models.length > 1
 									? ' border-[5px] border-white dark:border-gray-800'

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

@@ -88,6 +88,7 @@
 				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';
@@ -284,7 +285,7 @@
 									</div>
 								</div>
 							{:else}
-								{@html marked(message.content.replace('\\\\', '\\\\\\'))}
+								{@html marked(message.content.replaceAll('\\', '\\\\'))}
 							{/if}
 
 							{#if message.done}

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

@@ -24,6 +24,8 @@
 
 		editElement.style.height = '';
 		editElement.style.height = `${editElement.scrollHeight}px`;
+
+		editElement?.focus();
 	};
 
 	const editMessageConfirmHandler = async () => {
@@ -43,7 +45,9 @@
 	<ProfileImage src={user?.profile_image_url ?? '/user.png'} />
 
 	<div class="w-full overflow-hidden">
-		<Name>You</Name>
+		<div class="user-message">
+			<Name>You</Name>
+		</div>
 
 		<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"
@@ -145,7 +149,7 @@
 						{/if}
 
 						<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:bg-gray-800 transition edit-user-message-button"
 							on:click={() => {
 								editMessageHandler();
 							}}

src/lib/components/chat/ModelSelector.svelte

 <script lang="ts">
-	import { models, showSettings, settings } from '$lib/stores';
+	import { setDefaultModels } from '$lib/apis/configs';
+	import { models, showSettings, settings, user } from '$lib/stores';
+	import { onMount, tick } from 'svelte';
 	import toast from 'svelte-french-toast';
 
 	export let selectedModels = [''];
 	export let disabled = false;
 
-	const saveDefaultModel = () => {
+	const saveDefaultModel = async () => {
 		const hasEmptyModel = selectedModels.filter((it) => it === '');
 		if (hasEmptyModel.length) {
 			toast.error('Choose a model before saving...');
@@ -13,8 +15,19 @@
 		}
 		settings.set({ ...$settings, models: selectedModels });
 		localStorage.setItem('settings', JSON.stringify($settings));
+
+		if ($user.role === 'admin') {
+			console.log('setting default models globally');
+			await setDefaultModels(localStorage.token, selectedModels.join(','));
+		}
 		toast.success('Default model updated');
 	};
+
+	$: if (selectedModels.length > 0 && $models.length > 0) {
+		selectedModels = selectedModels.map((model) =>
+			$models.map((m) => m.name).includes(model) ? model : ''
+		);
+	}
 </script>
 
 <div class="flex flex-col my-2">

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

@@ -12,7 +12,8 @@
 		top_k: '',
 		top_p: '',
 		tfs_z: '',
-		num_ctx: ''
+		num_ctx: '',
+		num_predict: ''
 	};
 </script>
 
@@ -507,4 +508,49 @@
 			</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/SettingsModal.svelte

@@ -7,19 +7,30 @@
 	import { config, models, settings, user, chats } from '$lib/stores';
 	import { splitStream, getGravatarURL } from '$lib/utils';
 
-	import { getOllamaVersion } from '$lib/apis/ollama';
-	import { createNewChat, deleteAllChats, getAllChats, getChatList } from '$lib/apis/chats';
 	import {
-		WEB_UI_VERSION,
-		OLLAMA_API_BASE_URL,
-		WEBUI_API_BASE_URL,
-		WEBUI_BASE_URL
-	} from '$lib/constants';
+		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';
 
 	export let show = false;
 
@@ -33,7 +44,8 @@
 	let selectedTab = 'general';
 
 	// General
-	let API_BASE_URL = OLLAMA_API_BASE_URL;
+	let API_BASE_URL = '';
+	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
 	let theme = 'dark';
 	let notificationEnabled = false;
 	let system = '';
@@ -53,7 +65,8 @@
 		top_p: '',
 		stop: '',
 		tfs_z: '',
-		num_ctx: ''
+		num_ctx: '',
+		num_predict: ''
 	};
 
 	// Models
@@ -72,17 +85,21 @@
 
 	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 OPENAI_API_KEY = '';
-	let OPENAI_API_BASE_URL = '';
+	let titleAutoGenerateModel = '';
 
 	// Chats
-
+	let saveChatHistory = true;
 	let importFiles;
 	let showDeleteConfirm = false;
 
@@ -134,22 +151,23 @@
 	// About
 	let ollamaVersion = '';
 
-	const checkOllamaConnection = async () => {
-		if (API_BASE_URL === '') {
-			API_BASE_URL = OLLAMA_API_BASE_URL;
-		}
-		const _models = await getModels(API_BASE_URL, 'ollama');
+	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);
-
-			saveSettings({
-				API_BASE_URL: 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 toggleTheme = async () => {
 		if (theme === 'dark') {
 			theme = 'light';
@@ -218,73 +236,72 @@
 		}
 	};
 
-	const toggleAuthHeader = async () => {
-		authEnabled = !authEnabled;
+	const toggleSaveChatHistory = async () => {
+		saveChatHistory = !saveChatHistory;
+		console.log(saveChatHistory);
+
+		if (saveChatHistory === false) {
+			await goto('/');
+		}
+		saveSettings({ saveChatHistory: saveChatHistory });
 	};
 
 	const pullModelHandler = async () => {
 		modelTransferring = true;
-		const res = await fetch(`${API_BASE_URL}/pull`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'text/event-stream',
-				...($settings.authHeader && { Authorization: $settings.authHeader }),
-				...($user && { Authorization: `Bearer ${localStorage.token}` })
-			},
-			body: JSON.stringify({
-				name: modelTag
-			})
-		});
 
-		const reader = res.body
-			.pipeThrough(new TextDecoderStream())
-			.pipeThrough(splitStream('\n'))
-			.getReader();
+		const res = await pullModel(localStorage.token, modelTag);
 
-		while (true) {
-			const { value, done } = await reader.read();
-			if (done) break;
+		if (res) {
+			const reader = res.body
+				.pipeThrough(new TextDecoderStream())
+				.pipeThrough(splitStream('\n'))
+				.getReader();
 
-			try {
-				let lines = value.split('\n');
+			while (true) {
+				const { value, done } = await reader.read();
+				if (done) break;
 
-				for (const line of lines) {
-					if (line !== '') {
-						console.log(line);
-						let data = JSON.parse(line);
-						console.log(data);
+				try {
+					let lines = value.split('\n');
 
-						if (data.error) {
-							throw data.error;
-						}
+					for (const line of lines) {
+						if (line !== '') {
+							console.log(line);
+							let data = JSON.parse(line);
+							console.log(data);
 
-						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;
+							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 {
-									pullProgress = 100;
+									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);
 				}
-			} catch (error) {
-				console.log(error);
-				toast.error(error);
 			}
 		}
 
@@ -405,21 +422,11 @@
 		}
 
 		if (uploaded) {
-			const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/create`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'text/event-stream',
-					...($settings.authHeader && { Authorization: $settings.authHeader }),
-					...($user && { Authorization: `Bearer ${localStorage.token}` })
-				},
-				body: JSON.stringify({
-					name: `${name}:latest`,
-					modelfile: `FROM @${modelFileDigest}\n${modelFileContent}`
-				})
-			}).catch((err) => {
-				console.log(err);
-				return null;
-			});
+			const res = await createModel(
+				localStorage.token,
+				`${name}:latest`,
+				`FROM @${modelFileDigest}\n${modelFileContent}`
+			);
 
 			if (res && res.ok) {
 				const reader = res.body
@@ -485,124 +492,35 @@
 	};
 
 	const deleteModelHandler = async () => {
-		const res = await fetch(`${API_BASE_URL}/delete`, {
-			method: 'DELETE',
-			headers: {
-				'Content-Type': 'text/event-stream',
-				...($settings.authHeader && { Authorization: $settings.authHeader }),
-				...($user && { Authorization: `Bearer ${localStorage.token}` })
-			},
-			body: JSON.stringify({
-				name: deleteModelTag
-			})
+		const res = await deleteModel(localStorage.token, deleteModelTag).catch((error) => {
+			toast.error(error);
 		});
 
-		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 !== '' && line !== 'null') {
-						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) {
-						}
-					} else {
-						toast.success(`Deleted ${deleteModelTag}`);
-					}
-				}
-			} catch (error) {
-				console.log(error);
-				toast.error(error);
-			}
+		if (res) {
+			toast.success(`Deleted ${deleteModelTag}`);
 		}
 
 		deleteModelTag = '';
 		models.set(await getModels());
 	};
 
-	const getModels = async (url = '', type = 'all') => {
-		let models = [];
-		const res = await fetch(`${url ? url : $settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/tags`, {
-			method: 'GET',
-			headers: {
-				Accept: 'application/json',
-				'Content-Type': 'application/json',
-				...($settings.authHeader && { Authorization: $settings.authHeader }),
-				...($user && { Authorization: `Bearer ${localStorage.token}` })
-			}
-		})
-			.then(async (res) => {
-				if (!res.ok) throw await res.json();
-				return res.json();
-			})
-			.catch((error) => {
+	const getModels = async (type = 'all') => {
+		const models = [];
+		models.push(
+			...(await getOllamaModels(localStorage.token).catch((error) => {
+				toast.error(error);
+				return [];
+			}))
+		);
+
+		// If OpenAI API Key exists
+		if (type === 'all' && OPENAI_API_KEY) {
+			const openAIModels = await getOpenAIModels(localStorage.token).catch((error) => {
 				console.log(error);
-				if ('detail' in error) {
-					toast.error(error.detail);
-				} else {
-					toast.error('Server connection failed');
-				}
 				return null;
 			});
-		console.log(res);
-		models.push(...(res?.models ?? []));
-
-		// If OpenAI API Key exists
-		if (type === 'all' && $settings.OPENAI_API_KEY) {
-			const API_BASE_URL = $settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1';
 
-			// Validate OPENAI_API_KEY
-			const openaiModelRes = await fetch(`${API_BASE_URL}/models`, {
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
-				}
-			})
-				.then(async (res) => {
-					if (!res.ok) throw await res.json();
-					return res.json();
-				})
-				.catch((error) => {
-					console.log(error);
-					toast.error(`OpenAI: ${error?.error?.message ?? 'Network Problem'}`);
-					return null;
-				});
-
-			const openAIModels = Array.isArray(openaiModelRes)
-				? openaiModelRes
-				: openaiModelRes?.data ?? null;
-
-			models.push(
-				...(openAIModels
-					? [
-							{ name: 'hr' },
-							...openAIModels
-								.map((model) => ({ name: model.id, external: true }))
-								.filter((model) =>
-									API_BASE_URL.includes('openai') ? model.name.includes('gpt') : true
-								)
-					  ]
-					: [])
-			);
+			models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
 		}
 
 		return models;
@@ -634,15 +552,20 @@
 	};
 
 	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;
 
-		API_BASE_URL = settings.API_BASE_URL ?? OLLAMA_API_BASE_URL;
 		system = settings.system ?? '';
-
 		requestFormat = settings.requestFormat ?? '';
 
 		options.seed = settings.seed ?? 0;
@@ -657,10 +580,10 @@
 		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 		speechAutoSend = settings.speechAutoSend ?? false;
 		responseAutoCopy = settings.responseAutoCopy ?? false;
-
+		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 		gravatarEmail = settings.gravatarEmail ?? '';
-		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
-		OPENAI_API_BASE_URL = settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1';
+
+		saveChatHistory = settings.saveChatHistory ?? true;
 
 		authEnabled = settings.authHeader !== undefined ? true : false;
 		if (authEnabled) {
@@ -668,10 +591,7 @@
 			authContent = settings.authHeader.split(' ')[1];
 		}
 
-		ollamaVersion = await getOllamaVersion(
-			API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token
-		).catch((error) => {
+		ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => {
 			return '';
 		});
 	});
@@ -755,55 +675,57 @@
 					<div class=" self-center">Advanced</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 ===
-					'models'
-						? 'bg-gray-200 dark:bg-gray-700'
-						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
-					on:click={() => {
-						selectedTab = 'models';
-					}}
-				>
-					<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
-								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">Models</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'
+							? 'bg-gray-200 dark:bg-gray-700'
+							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+						on:click={() => {
+							selectedTab = 'models';
+						}}
+					>
+						<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
+									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">Models</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'
-						? 'bg-gray-200 dark:bg-gray-700'
-						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
-					on:click={() => {
-						selectedTab = 'external';
-					}}
-				>
-					<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
-								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">External</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'
+							? 'bg-gray-200 dark:bg-gray-700'
+							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+						on:click={() => {
+							selectedTab = 'external';
+						}}
+					>
+						<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
+									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">External</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 ===
@@ -944,41 +866,72 @@
 							<div class=" py-0.5 flex w-full justify-between">
 								<div class=" self-center text-xs font-medium">Theme</div>
 
-								<button
+								<!-- <button
 									class="p-1 px-3 text-xs flex rounded transition"
 									on:click={() => {
 										toggleTheme();
 									}}
 								>
-									{#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>
+									
+								</button> -->
 
-										<span class="ml-2 self-center"> Dark </span>
-									{:else}
-										<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"> Light </span>
-									{/if}
-								</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>
@@ -1002,51 +955,51 @@
 							</div>
 						</div>
 
-						<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:8080/ollama/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={() => {
-										checkOllamaConnection();
-									}}
-								>
-									<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"
+						{#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}
 										/>
-									</svg>
-								</button>
-							</div>
+									</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">
-								The field above should be set to <span
-									class=" text-gray-500 dark:text-gray-300 font-medium">'/ollama/api'</span
-								>;
-								<a
-									class=" text-gray-500 dark:text-gray-300 font-medium"
-									href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
-									target="_blank"
-								>
-									Click here for help.
-								</a>
+								<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>
-						</div>
+						{/if}
 
 						<hr class=" dark:border-gray-700" />
 
@@ -1064,7 +1017,6 @@
 								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 								on:click={() => {
 									saveSettings({
-										API_BASE_URL: API_BASE_URL === '' ? OLLAMA_API_BASE_URL : API_BASE_URL,
 										system: system !== '' ? system : undefined
 									});
 									show = false;
@@ -1132,7 +1084,8 @@
 											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_ctx: options.num_ctx !== '' ? options.num_ctx : undefined,
+											num_predict: options.num_predict !== '' ? options.num_predict : undefined
 										}
 									});
 									show = false;
@@ -1219,7 +1172,7 @@
 										<div class=" mb-2 text-xs">Pull Progress</div>
 										<div class="w-full rounded-full dark:bg-gray-800">
 											<div
-												class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+												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}%
@@ -1454,10 +1407,12 @@
 					<form
 						class="flex flex-col h-full justify-between space-y-3 text-sm"
 						on:submit|preventDefault={() => {
-							saveSettings({
-								OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined,
-								OPENAI_API_BASE_URL: OPENAI_API_BASE_URL !== '' ? OPENAI_API_BASE_URL : undefined
-							});
+							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
+							// });
 							show = false;
 						}}
 					>
@@ -1514,10 +1469,6 @@
 					<form
 						class="flex flex-col h-full justify-between space-y-3 text-sm"
 						on:submit|preventDefault={() => {
-							saveSettings({
-								gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
-								gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined
-							});
 							show = false;
 						}}
 					>
@@ -1527,7 +1478,7 @@
 
 								<div>
 									<div class=" py-0.5 flex w-full justify-between">
-										<div class=" self-center text-xs font-medium">Title Auto Generation</div>
+										<div class=" self-center text-xs font-medium">Title Auto-Generation</div>
 
 										<button
 											class="p-1 px-3 text-xs flex rounded transition"
@@ -1589,6 +1540,54 @@
 							</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>
@@ -1611,7 +1610,7 @@
 										target="_blank">Gravatar.</a
 									>
 								</div>
-							</div>
+							</div> -->
 						</div>
 
 						<div class="flex justify-end pt-3 text-sm font-medium">
@@ -1626,6 +1625,64 @@
 				{: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"

src/lib/components/common/Modal.svelte

@@ -3,8 +3,18 @@
 	import { fade, blur } from 'svelte/transition';
 
 	export let show = true;
+	export let size = 'md';
+
 	let mounted = false;
 
+	const sizeToWidth = (size) => {
+		if (size === 'sm') {
+			return 'w-[30rem]';
+		} else {
+			return 'w-[40rem]';
+		}
+	};
+
 	onMount(() => {
 		mounted = true;
 	});
@@ -28,7 +38,9 @@
 		}}
 	>
 		<div
-			class="m-auto rounded-xl max-w-full w-[40rem] mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
+			class="m-auto rounded-xl max-w-full {sizeToWidth(
+				size
+			)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
 			transition:fade={{ delay: 100, duration: 200 }}
 			on:click={(e) => {
 				e.stopPropagation();

src/lib/components/layout/Navbar.svelte

 <script lang="ts">
-	import { getChatById } from '$lib/apis/chats';
-	import { chatId, db, modelfiles } from '$lib/stores';
 	import toast from 'svelte-french-toast';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { getChatById } from '$lib/apis/chats';
+	import { chatId, modelfiles } from '$lib/stores';
 
 	export let initNewChat: Function;
 	export let title: string = 'Ollama Web UI';
@@ -33,6 +36,21 @@
 			false
 		);
 	};
+
+	const downloadChat = async () => {
+		const chat = (await getChatById(localStorage.token, $chatId)).chat;
+		console.log('download', chat);
+
+		const chatText = chat.messages.reduce((a, message, i, arr) => {
+			return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`;
+		}, '');
+
+		let blob = new Blob([chatText], {
+			type: 'text/plain'
+		});
+
+		saveAs(blob, `chat-${chat.title}.txt`);
+	};
 </script>
 
 <nav
@@ -69,7 +87,30 @@
 			</div>
 
 			{#if shareEnabled}
-				<div class="pl-2">
+				<div class="pl-2 flex space-x-1.5">
+					<button
+						class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
+						on:click={async () => {
+							downloadChat();
+						}}
+					>
+						<div class=" m-auto self-center">
+							<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>
+						</div>
+					</button>
+
 					<button
 						class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
 						on:click={async () => {
@@ -79,15 +120,15 @@
 						<div class=" m-auto self-center">
 							<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="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"
+									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 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
+									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>
 						</div>

src/lib/components/layout/Sidebar.svelte

@@ -6,7 +6,7 @@
 
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { user, chats, showSettings, chatId } from '$lib/stores';
+	import { user, chats, settings, showSettings, chatId } from '$lib/stores';
 	import { onMount } from 'svelte';
 	import { deleteChatById, getChatList, updateChatById } from '$lib/apis/chats';
 
@@ -49,6 +49,12 @@
 		await deleteChatById(localStorage.token, id);
 		await chats.set(await getChatList(localStorage.token));
 	};
+
+	const saveSettings = async (updated) => {
+		await settings.set({ ...$settings, ...updated });
+		localStorage.setItem('settings', JSON.stringify($settings));
+		location.href = '/';
+	};
 </script>
 
 <div
@@ -100,7 +106,7 @@
 		</div>
 
 		{#if $user?.role === 'admin'}
-			<div class="px-2.5 flex justify-center my-1">
+			<div class="px-2.5 flex justify-center mt-1">
 				<button
 					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
 					on:click={async () => {
@@ -129,255 +135,326 @@
 					</div>
 				</button>
 			</div>
-		{/if}
-
-		<div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2">
-			<div class="flex w-full">
-				<div class="self-center pl-3 py-2 rounded-l bg-gray-950">
-					<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="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
 
-				<input
-					class="w-full rounded-r py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
-					placeholder="Search"
-					bind:value={search}
-				/>
+			<div class="px-2.5 flex justify-center mb-1">
+				<button
+					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
+					on:click={async () => {
+						goto('/prompts');
+					}}
+				>
+					<div class="self-center">
+						<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.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
 
-				<!-- <div class="self-center pr-3 py-2  bg-gray-900">
-					<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="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
-						/>
-					</svg>
-				</div> -->
+					<div class="flex self-center">
+						<div class=" self-center font-medium text-sm">Prompts</div>
+					</div>
+				</button>
 			</div>
-		</div>
+		{/if}
 
-		<div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
-			{#each $chats.filter((chat) => {
-				if (search === '') {
-					return true;
-				} else {
-					let title = chat.title.toLowerCase();
+		<div class="relative flex flex-col flex-1 overflow-y-auto">
+			{#if !($settings.saveChatHistory ?? true)}
+				<div class="absolute z-40 w-full h-full bg-black/90 flex justify-center">
+					<div class=" text-left px-5 py-2">
+						<div class=" font-medium">Chat History is off for this browser.</div>
+						<div class="text-xs mt-2">
+							When history is turned off, new chats on this browser won't appear in your history on
+							any of your devices. <span class=" font-semibold"
+								>This setting does not sync across browsers or devices.</span
+							>
+						</div>
 
-					if (title.includes(search)) {
-						return true;
-					} else {
-						return false;
-					}
-				}
-			}) as chat, i}
-				<div class=" w-full pr-2 relative">
-					<button
-						class=" w-full flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 {chat.id ===
-						$chatId
-							? 'bg-gray-900'
-							: ''} transition whitespace-nowrap text-ellipsis"
-						on:click={() => {
-							// goto(`/c/${chat.id}`);
-							if (chat.id !== chatTitleEditId) {
-								chatTitleEditId = null;
-								chatTitle = '';
-							}
-
-							if (chat.id !== $chatId) {
-								loadChat(chat.id);
-							}
-						}}
-					>
-						<div class=" flex self-center flex-1">
-							<div class=" self-center mr-3">
+						<div class="mt-3">
+							<button
+								class="flex justify-center items-center space-x-1.5 px-3 py-2.5 rounded-lg text-xs bg-gray-200 hover:bg-gray-300 transition text-gray-800 font-medium w-full"
+								type="button"
+								on:click={() => {
+									saveSettings({
+										saveChatHistory: true
+									});
+								}}
+							>
 								<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"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-3 h-3"
 								>
 									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+										fill-rule="evenodd"
+										d="M8 1a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0v-6.5A.75.75 0 0 1 8 1ZM4.11 3.05a.75.75 0 0 1 0 1.06 5.5 5.5 0 1 0 7.78 0 .75.75 0 0 1 1.06-1.06 7 7 0 1 1-9.9 0 .75.75 0 0 1 1.06 0Z"
+										clip-rule="evenodd"
 									/>
 								</svg>
-							</div>
-							<div
-								class=" text-left self-center overflow-hidden {chat.id === $chatId
-									? 'w-[120px]'
-									: 'w-[180px]'} "
-							>
-								{#if chatTitleEditId === chat.id}
-									<input bind:value={chatTitle} class=" bg-transparent w-full" />
-								{:else}
-									{chat.title}
-								{/if}
-							</div>
+
+								<div>Enable Chat History</div>
+							</button>
 						</div>
-					</button>
+					</div>
+				</div>
+			{/if}
 
-					{#if chat.id === $chatId}
-						<div class=" absolute right-[22px] top-[10px]">
-							{#if chatTitleEditId === chat.id}
-								<div class="flex self-center space-x-1.5">
-									<button
-										class=" self-center hover:text-white transition"
-										on:click={() => {
-											editChatTitle(chat.id, chatTitle);
-											chatTitleEditId = null;
-											chatTitle = '';
-										}}
+			<div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2">
+				<div class="flex w-full" id="chat-search">
+					<div class="self-center pl-3 py-2 rounded-l bg-gray-950">
+						<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="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+
+					<input
+						class="w-full rounded-r py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
+						placeholder="Search"
+						bind:value={search}
+					/>
+
+					<!-- <div class="self-center pr-3 py-2  bg-gray-900">
+						<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="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+							/>
+						</svg>
+					</div> -->
+				</div>
+			</div>
+
+			<div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
+				{#each $chats.filter((chat) => {
+					if (search === '') {
+						return true;
+					} else {
+						let title = chat.title.toLowerCase();
+
+						if (title.includes(search)) {
+							return true;
+						} else {
+							return false;
+						}
+					}
+				}) as chat, i}
+					<div class=" w-full pr-2 relative">
+						<button
+							class=" w-full flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 {chat.id ===
+							$chatId
+								? 'bg-gray-900'
+								: ''} transition whitespace-nowrap text-ellipsis"
+							on:click={() => {
+								// goto(`/c/${chat.id}`);
+								if (chat.id !== chatTitleEditId) {
+									chatTitleEditId = null;
+									chatTitle = '';
+								}
+
+								if (chat.id !== $chatId) {
+									loadChat(chat.id);
+								}
+							}}
+						>
+							<div class=" flex self-center flex-1">
+								<div class=" self-center mr-3">
+									<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"
 									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+										/>
+									</svg>
+								</div>
+								<div
+									class=" text-left self-center overflow-hidden {chat.id === $chatId
+										? 'w-[120px]'
+										: 'w-[180px]'} "
+								>
+									{#if chatTitleEditId === chat.id}
+										<input bind:value={chatTitle} class=" bg-transparent w-full" />
+									{:else}
+										{chat.title}
+									{/if}
+								</div>
+							</div>
+						</button>
+
+						{#if chat.id === $chatId}
+							<div class=" absolute right-[22px] top-[10px]">
+								{#if chatTitleEditId === chat.id}
+									<div class="flex self-center space-x-1.5">
+										<button
+											class=" self-center hover:text-white transition"
+											on:click={() => {
+												editChatTitle(chat.id, chatTitle);
+												chatTitleEditId = null;
+												chatTitle = '';
+											}}
 										>
-											<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=" self-center hover:text-white transition"
-										on:click={() => {
-											chatTitleEditId = null;
-											chatTitle = '';
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
+											<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=" self-center hover:text-white transition"
+											on:click={() => {
+												chatTitleEditId = null;
+												chatTitle = '';
+											}}
 										>
-											<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>
-							{:else if chatDeleteId === chat.id}
-								<div class="flex self-center space-x-1.5">
-									<button
-										class=" self-center hover:text-white transition"
-										on:click={() => {
-											deleteChat(chat.id);
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
+											<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>
+								{:else if chatDeleteId === chat.id}
+									<div class="flex self-center space-x-1.5">
+										<button
+											class=" self-center hover:text-white transition"
+											on:click={() => {
+												deleteChat(chat.id);
+											}}
 										>
-											<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=" self-center hover:text-white transition"
-										on:click={() => {
-											chatDeleteId = null;
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
+											<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=" self-center hover:text-white transition"
+											on:click={() => {
+												chatDeleteId = null;
+											}}
 										>
-											<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>
-							{:else}
-								<div class="flex self-center space-x-1.5">
-									<button
-										id="delete-chat-button"
-										class=" hidden"
-										on:click={() => {
-											deleteChat(chat.id);
-										}}
-									/>
-									<button
-										class=" self-center hover:text-white transition"
-										on:click={() => {
-											chatTitle = chat.title;
-											chatTitleEditId = chat.id;
-											// editChatTitle(chat.id, 'a');
-										}}
-									>
-										<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"
+											<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>
+								{:else}
+									<div class="flex self-center space-x-1.5">
+										<button
+											id="delete-chat-button"
+											class=" hidden"
+											on:click={() => {
+												deleteChat(chat.id);
+											}}
+										/>
+										<button
+											class=" self-center hover:text-white transition"
+											on:click={() => {
+												chatTitle = chat.title;
+												chatTitleEditId = chat.id;
+												// editChatTitle(chat.id, 'a');
+											}}
 										>
-											<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>
-									</button>
-									<button
-										class=" self-center hover:text-white transition"
-										on:click={() => {
-											chatDeleteId = chat.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"
+											<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>
+										</button>
+										<button
+											class=" self-center hover:text-white transition"
+											on:click={() => {
+												chatDeleteId = chat.id;
+											}}
 										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-											/>
-										</svg>
-									</button>
-								</div>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			{/each}
+											<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 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+												/>
+											</svg>
+										</button>
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
 		</div>
 
 		<div class="px-2.5">

src/lib/constants.ts

-import { dev, browser } from '$app/environment';
-import { PUBLIC_API_BASE_URL } from '$env/static/public';
-
-export const OLLAMA_API_BASE_URL = dev
-	? `http://${location.hostname}:8080/ollama/api`
-	: PUBLIC_API_BASE_URL === ''
-	? browser
-		? `http://${location.hostname}:11434/api`
-		: `http://localhost:11434/api`
-	: PUBLIC_API_BASE_URL;
+import { dev } from '$app/environment';
 
 export const WEBUI_BASE_URL = dev ? `http://${location.hostname}:8080` : ``;
+
 export const WEBUI_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1`;
+export const OLLAMA_API_BASE_URL = `${WEBUI_BASE_URL}/ollama/api`;
+export const OPENAI_API_BASE_URL = `${WEBUI_BASE_URL}/openai/api`;
 
 export const WEB_UI_VERSION = 'v1.0.0-alpha-static';
 

src/lib/stores/index.ts

@@ -5,10 +5,14 @@ export const config = writable(undefined);
 export const user = writable(undefined);
 
 // Frontend
-export const db = writable(undefined);
+export const theme = writable('dark');
+
 export const chatId = writable('');
+
 export const chats = writable([]);
 export const models = writable([]);
 export const modelfiles = writable([]);
+export const prompts = writable([]);
+
 export const settings = writable({});
 export const showSettings = writable(false);

src/lib/utils/index.ts

@@ -21,7 +21,7 @@ export const splitStream = (splitOn) => {
 };
 
 export const convertMessagesToHistory = (messages) => {
-	let history = {
+	const history = {
 		messages: {},
 		currentId: null
 	};
@@ -111,3 +111,19 @@ export const checkVersion = (required, current) => {
 				caseFirst: 'upper'
 		  }) < 0;
 };
+
+export const findWordIndices = (text) => {
+	const regex = /\[([^\]]+)\]/g;
+	const matches = [];
+	let match;
+
+	while ((match = regex.exec(text)) !== null) {
+		matches.push({
+			word: match[1],
+			startIndex: match.index,
+			endIndex: regex.lastIndex - 1
+		});
+	}
+
+	return matches;
+};

src/routes/(app)/+layout.svelte

@@ -9,11 +9,12 @@
 
 	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
 	import { getModelfiles } from '$lib/apis/modelfiles';
+	import { getPrompts } from '$lib/apis/prompts';
 
 	import { getOpenAIModels } from '$lib/apis/openai';
 
-	import { user, showSettings, settings, models, modelfiles } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL, REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
+	import { user, showSettings, settings, models, modelfiles, prompts } from '$lib/stores';
+	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
 
 	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
@@ -31,36 +32,28 @@
 	const getModels = async () => {
 		let models = [];
 		models.push(
-			...(await getOllamaModels(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-				localStorage.token
-			).catch((error) => {
+			...(await getOllamaModels(localStorage.token).catch((error) => {
 				toast.error(error);
 				return [];
 			}))
 		);
-		// If OpenAI API Key exists
-		if ($settings.OPENAI_API_KEY) {
-			const openAIModels = await getOpenAIModels(
-				$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1',
-				$settings.OPENAI_API_KEY
-			).catch((error) => {
-				console.log(error);
-				toast.error(error);
-				return null;
-			});
 
-			models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
-		}
+		// $settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1',
+		// 		$settings.OPENAI_API_KEY
+
+		const openAIModels = await getOpenAIModels(localStorage.token).catch((error) => {
+			console.log(error);
+			return null;
+		});
+
+		models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
+
 		return models;
 	};
 
 	const setOllamaVersion = async (version: string = '') => {
 		if (version === '') {
-			version = await getOllamaVersion(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-				localStorage.token
-			).catch((error) => {
+			version = await getOllamaVersion(localStorage.token).catch((error) => {
 				return '';
 			});
 		}
@@ -101,6 +94,9 @@
 			console.log();
 			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
 			await modelfiles.set(await getModelfiles(localStorage.token));
+
+			await prompts.set(await getPrompts(localStorage.token));
+
 			console.log($modelfiles);
 
 			modelfiles.subscribe(async () => {

src/routes/(app)/+page.svelte

@@ -6,8 +6,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	import { models, modelfiles, user, settings, db, chats, chatId } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
+	import { models, modelfiles, user, settings, chats, chatId, config } from '$lib/stores';
 
 	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
 	import { copyToClipboard, splitStream } from '$lib/utils';
@@ -17,6 +16,7 @@
 	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
 	import Navbar from '$lib/components/layout/Navbar.svelte';
 	import { createNewChat, getChatList, updateChatById } from '$lib/apis/chats';
+	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
 
 	let stopResponseFlag = false;
 	let autoScroll = true;
@@ -90,9 +90,18 @@
 			messages: {},
 			currentId: null
 		};
-		selectedModels = $page.url.searchParams.get('models')
-			? $page.url.searchParams.get('models')?.split(',')
-			: $settings.models ?? [''];
+
+		console.log($config);
+
+		if ($page.url.searchParams.get('models')) {
+			selectedModels = $page.url.searchParams.get('models')?.split(',');
+		} else if ($settings?.models) {
+			selectedModels = $settings?.models;
+		} else if ($config?.default_models) {
+			selectedModels = $config?.default_models.split(',');
+		} else {
+			selectedModels = [''];
+		}
 
 		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 		settings.set({
@@ -109,10 +118,14 @@
 		await Promise.all(
 			selectedModels.map(async (model) => {
 				console.log(model);
-				if ($models.filter((m) => m.name === model)[0].external) {
+				const modelTag = $models.filter((m) => m.name === model).at(0);
+
+				if (modelTag?.external) {
 					await sendPromptOpenAI(model, prompt, parentId, _chatId);
-				} else {
+				} else if (modelTag) {
 					await sendPromptOllama(model, prompt, parentId, _chatId);
+				} else {
+					toast.error(`Model ${model} not found`);
 				}
 			})
 		);
@@ -150,36 +163,32 @@
 		// Scroll down
 		window.scrollTo({ top: document.body.scrollHeight });
 
-		const res = await generateChatCompletion(
-			$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token,
-			{
-				model: model,
-				messages: [
-					$settings.system
-						? {
-								role: 'system',
-								content: $settings.system
-						  }
-						: undefined,
-					...messages
-				]
-					.filter((message) => message)
-					.map((message) => ({
-						role: message.role,
-						content: message.content,
-						...(message.files && {
-							images: message.files
-								.filter((file) => file.type === 'image')
-								.map((file) => file.url.slice(file.url.indexOf(',') + 1))
-						})
-					})),
-				options: {
-					...($settings.options ?? {})
-				},
-				format: $settings.requestFormat ?? undefined
-			}
-		);
+		const res = await generateChatCompletion(localStorage.token, {
+			model: model,
+			messages: [
+				$settings.system
+					? {
+							role: 'system',
+							content: $settings.system
+					  }
+					: undefined,
+				...messages
+			]
+				.filter((message) => message)
+				.map((message) => ({
+					role: message.role,
+					content: message.content,
+					...(message.files && {
+						images: message.files
+							.filter((file) => file.type === 'image')
+							.map((file) => file.url.slice(file.url.indexOf(',') + 1))
+					})
+				})),
+			options: {
+				...($settings.options ?? {})
+			},
+			format: $settings.requestFormat ?? undefined
+		});
 
 		if (res && res.ok) {
 			const reader = res.body
@@ -271,11 +280,13 @@
 			}
 
 			if ($chatId == _chatId) {
-				chat = await updateChatById(localStorage.token, _chatId, {
-					messages: messages,
-					history: history
-				});
-				await chats.set(await getChatList(localStorage.token));
+				if ($settings.saveChatHistory ?? true) {
+					chat = await updateChatById(localStorage.token, _chatId, {
+						messages: messages,
+						history: history
+					});
+					await chats.set(await getChatList(localStorage.token));
+				}
 			}
 		} else {
 			if (res !== null) {
@@ -313,185 +324,173 @@
 	};
 
 	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
-		if ($settings.OPENAI_API_KEY) {
-			if (models) {
-				let responseMessageId = uuidv4();
-
-				let responseMessage = {
-					parentId: parentId,
-					id: responseMessageId,
-					childrenIds: [],
-					role: 'assistant',
-					content: '',
-					model: model
-				};
-
-				history.messages[responseMessageId] = responseMessage;
-				history.currentId = responseMessageId;
-				if (parentId !== null) {
-					history.messages[parentId].childrenIds = [
-						...history.messages[parentId].childrenIds,
-						responseMessageId
-					];
-				}
+		let responseMessageId = uuidv4();
 
-				window.scrollTo({ top: document.body.scrollHeight });
+		let responseMessage = {
+			parentId: parentId,
+			id: responseMessageId,
+			childrenIds: [],
+			role: 'assistant',
+			content: '',
+			model: model
+		};
 
-				const res = await fetch(
-					`${$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1'}/chat/completions`,
-					{
-						method: 'POST',
-						headers: {
-							Authorization: `Bearer ${$settings.OPENAI_API_KEY}`,
-							'Content-Type': 'application/json'
-						},
-						body: JSON.stringify({
-							model: model,
-							stream: true,
-							messages: [
-								$settings.system
-									? {
-											role: 'system',
-											content: $settings.system
-									  }
-									: undefined,
-								...messages
-							]
-								.filter((message) => message)
-								.map((message) => ({
-									role: message.role,
-									...(message.files
-										? {
-												content: [
-													{
-														type: 'text',
-														text: message.content
-													},
-													...message.files
-														.filter((file) => file.type === 'image')
-														.map((file) => ({
-															type: 'image_url',
-															image_url: {
-																url: file.url
-															}
-														}))
-												]
-										  }
-										: { content: message.content })
-								})),
-							temperature: $settings.temperature ?? undefined,
-							top_p: $settings.top_p ?? undefined,
-							num_ctx: $settings.num_ctx ?? undefined,
-							frequency_penalty: $settings.repeat_penalty ?? undefined
-						})
-					}
-				).catch((err) => {
-					console.log(err);
-					return null;
-				});
-
-				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 || stopResponseFlag || _chatId !== $chatId) {
-							responseMessage.done = true;
-							messages = messages;
-							break;
-						}
+		history.messages[responseMessageId] = responseMessage;
+		history.currentId = responseMessageId;
+		if (parentId !== null) {
+			history.messages[parentId].childrenIds = [
+				...history.messages[parentId].childrenIds,
+				responseMessageId
+			];
+		}
 
-						try {
-							let lines = value.split('\n');
-
-							for (const line of lines) {
-								if (line !== '') {
-									console.log(line);
-									if (line === 'data: [DONE]') {
-										responseMessage.done = true;
-										messages = messages;
-									} else {
-										let data = JSON.parse(line.replace(/^data: /, ''));
-										console.log(data);
-
-										if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
-											continue;
-										} else {
-											responseMessage.content += data.choices[0].delta.content ?? '';
-											messages = messages;
-										}
-									}
-								}
-							}
-						} catch (error) {
-							console.log(error);
-						}
+		window.scrollTo({ top: document.body.scrollHeight });
 
-						if ($settings.notificationEnabled && !document.hasFocus()) {
-							const notification = new Notification(`OpenAI ${model}`, {
-								body: responseMessage.content,
-								icon: '/favicon.png'
-							});
-						}
+		const res = await generateOpenAIChatCompletion(localStorage.token, {
+			model: model,
+			stream: true,
+			messages: [
+				$settings.system
+					? {
+							role: 'system',
+							content: $settings.system
+					  }
+					: undefined,
+				...messages
+			]
+				.filter((message) => message)
+				.map((message) => ({
+					role: message.role,
+					...(message.files
+						? {
+								content: [
+									{
+										type: 'text',
+										text: message.content
+									},
+									...message.files
+										.filter((file) => file.type === 'image')
+										.map((file) => ({
+											type: 'image_url',
+											image_url: {
+												url: file.url
+											}
+										}))
+								]
+						  }
+						: { content: message.content })
+				})),
+			seed: $settings?.options?.seed ?? undefined,
+			stop: $settings?.options?.stop ?? undefined,
+			temperature: $settings?.options?.temperature ?? undefined,
+			top_p: $settings?.options?.top_p ?? undefined,
+			num_ctx: $settings?.options?.num_ctx ?? undefined,
+			frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+			max_tokens: $settings?.options?.num_predict ?? undefined
+		});
 
-						if ($settings.responseAutoCopy) {
-							copyToClipboard(responseMessage.content);
-						}
+		if (res && res.ok) {
+			const reader = res.body
+				.pipeThrough(new TextDecoderStream())
+				.pipeThrough(splitStream('\n'))
+				.getReader();
 
-						if (autoScroll) {
-							window.scrollTo({ top: document.body.scrollHeight });
-						}
-					}
+			while (true) {
+				const { value, done } = await reader.read();
+				if (done || stopResponseFlag || _chatId !== $chatId) {
+					responseMessage.done = true;
+					messages = messages;
+					break;
+				}
 
-					if ($chatId == _chatId) {
-						chat = await updateChatById(localStorage.token, _chatId, {
-							messages: messages,
-							history: history
-						});
-						await chats.set(await getChatList(localStorage.token));
-					}
-				} else {
-					if (res !== null) {
-						const error = await res.json();
-						console.log(error);
-						if ('detail' in error) {
-							toast.error(error.detail);
-							responseMessage.content = error.detail;
-						} else {
-							if ('message' in error.error) {
-								toast.error(error.error.message);
-								responseMessage.content = error.error.message;
+				try {
+					let lines = value.split('\n');
+
+					for (const line of lines) {
+						if (line !== '') {
+							console.log(line);
+							if (line === 'data: [DONE]') {
+								responseMessage.done = true;
+								messages = messages;
 							} else {
-								toast.error(error.error);
-								responseMessage.content = error.error;
+								let data = JSON.parse(line.replace(/^data: /, ''));
+								console.log(data);
+
+								if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
+									continue;
+								} else {
+									responseMessage.content += data.choices[0].delta.content ?? '';
+									messages = messages;
+								}
 							}
 						}
-					} else {
-						toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
-						responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
 					}
+				} catch (error) {
+					console.log(error);
+				}
 
-					responseMessage.error = true;
-					responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
-					responseMessage.done = true;
-					messages = messages;
+				if ($settings.notificationEnabled && !document.hasFocus()) {
+					const notification = new Notification(`OpenAI ${model}`, {
+						body: responseMessage.content,
+						icon: '/favicon.png'
+					});
 				}
 
-				stopResponseFlag = false;
-				await tick();
+				if ($settings.responseAutoCopy) {
+					copyToClipboard(responseMessage.content);
+				}
 
 				if (autoScroll) {
 					window.scrollTo({ top: document.body.scrollHeight });
 				}
+			}
 
-				if (messages.length == 2) {
-					window.history.replaceState(history.state, '', `/c/${_chatId}`);
-					await setChatTitle(_chatId, userPrompt);
+			if ($chatId == _chatId) {
+				if ($settings.saveChatHistory ?? true) {
+					chat = await updateChatById(localStorage.token, _chatId, {
+						messages: messages,
+						history: history
+					});
+					await chats.set(await getChatList(localStorage.token));
+				}
+			}
+		} else {
+			if (res !== null) {
+				const error = await res.json();
+				console.log(error);
+				if ('detail' in error) {
+					toast.error(error.detail);
+					responseMessage.content = error.detail;
+				} else {
+					if ('message' in error.error) {
+						toast.error(error.error.message);
+						responseMessage.content = error.error.message;
+					} else {
+						toast.error(error.error);
+						responseMessage.content = error.error;
+					}
 				}
+			} else {
+				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
+				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
 			}
+
+			responseMessage.error = true;
+			responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
+			responseMessage.done = true;
+			messages = messages;
+		}
+
+		stopResponseFlag = false;
+		await tick();
+
+		if (autoScroll) {
+			window.scrollTo({ top: document.body.scrollHeight });
+		}
+
+		if (messages.length == 2) {
+			window.history.replaceState(history.state, '', `/c/${_chatId}`);
+			await setChatTitle(_chatId, userPrompt);
 		}
 	};
 
@@ -532,20 +531,24 @@
 
 			// Create new chat if only one message in messages
 			if (messages.length == 1) {
-				chat = await createNewChat(localStorage.token, {
-					id: $chatId,
-					title: 'New Chat',
-					models: selectedModels,
-					system: $settings.system ?? undefined,
-					options: {
-						...($settings.options ?? {})
-					},
-					messages: messages,
-					history: history,
-					timestamp: Date.now()
-				});
-				await chats.set(await getChatList(localStorage.token));
-				await chatId.set(chat.id);
+				if ($settings.saveChatHistory ?? true) {
+					chat = await createNewChat(localStorage.token, {
+						id: $chatId,
+						title: 'New Chat',
+						models: selectedModels,
+						system: $settings.system ?? undefined,
+						options: {
+							...($settings.options ?? {})
+						},
+						messages: messages,
+						history: history,
+						timestamp: Date.now()
+					});
+					await chats.set(await getChatList(localStorage.token));
+					await chatId.set(chat.id);
+				} else {
+					await chatId.set('local');
+				}
 				await tick();
 			}
 
@@ -579,9 +582,8 @@
 	const generateChatTitle = async (_chatId, userPrompt) => {
 		if ($settings.titleAutoGenerate ?? true) {
 			const title = await generateTitle(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
 				localStorage.token,
-				selectedModels[0],
+				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
 			);
 
@@ -598,8 +600,10 @@
 			title = _title;
 		}
 
-		chat = await updateChatById(localStorage.token, _chatId, { title: _title });
-		await chats.set(await getChatList(localStorage.token));
+		if ($settings.saveChatHistory ?? true) {
+			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
+			await chats.set(await getChatList(localStorage.token));
+		}
 	};
 </script>
 

src/routes/(app)/admin/+page.svelte

@@ -7,10 +7,17 @@
 	import toast from 'svelte-french-toast';
 
 	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
+	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
+	import EditUserModal from '$lib/components/admin/EditUserModal.svelte';
 
 	let loaded = false;
 	let users = [];
 
+	let selectedUser = null;
+
+	let signUpEnabled = true;
+	let showEditUserModal = false;
+
 	const updateRoleHandler = async (id, role) => {
 		const res = await updateUserRole(localStorage.token, id, role).catch((error) => {
 			toast.error(error);
@@ -22,6 +29,17 @@
 		}
 	};
 
+	const editUserPasswordHandler = async (id, password) => {
+		const res = await deleteUserById(localStorage.token, id).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+		if (res) {
+			users = await getUsers(localStorage.token);
+			toast.success('Successfully updated');
+		}
+	};
+
 	const deleteUserHandler = async (id) => {
 		const res = await deleteUserById(localStorage.token, id).catch((error) => {
 			toast.error(error);
@@ -32,16 +50,33 @@
 		}
 	};
 
+	const toggleSignUpEnabled = async () => {
+		signUpEnabled = await toggleSignUpEnabledStatus(localStorage.token);
+	};
+
 	onMount(async () => {
 		if ($user?.role !== 'admin') {
 			await goto('/');
 		} else {
 			users = await getUsers(localStorage.token);
+
+			signUpEnabled = await getSignUpEnabledStatus(localStorage.token);
 		}
 		loaded = true;
 	});
 </script>
 
+{#key selectedUser}
+	<EditUserModal
+		bind:show={showEditUserModal}
+		{selectedUser}
+		sessionUser={$user}
+		on:save={async () => {
+			users = await getUsers(localStorage.token);
+		}}
+	/>
+{/key}
+
 <div
 	class=" bg-white dark:bg-gray-800 dark:text-gray-100 min-h-screen w-full flex justify-center font-mona"
 >
@@ -49,7 +84,52 @@
 		<div class="w-full max-w-3xl px-10 md:px-16 min-h-screen flex flex-col">
 			<div class="py-10 w-full">
 				<div class=" flex flex-col justify-center">
-					<div class=" text-2xl font-semibold">Users ({users.length})</div>
+					<div class=" flex justify-between items-center">
+						<div class=" text-2xl font-semibold">Users ({users.length})</div>
+						<div>
+							<button
+								class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg"
+								type="button"
+								on:click={() => {
+									toggleSignUpEnabled();
+								}}
+							>
+								{#if signUpEnabled}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
+										/>
+									</svg>
+
+									<div class=" text-xs">
+										New Sign Up <span class=" font-semibold">Enabled</span>
+									</div>
+								{: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="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+
+									<div class=" text-xs">
+										New Sign Up <span class=" font-semibold">Disabled</span>
+									</div>
+								{/if}
+							</button>
+						</div>
+					</div>
 					<div class=" text-gray-500 text-xs font-medium mt-1">
 						Click on the user role cell in the table to change a user's role.
 					</div>
@@ -100,7 +180,28 @@
 												}}>{user.role}</button
 											>
 										</td>
-										<td class="px-6 py-4 text-center flex justify-center">
+										<td class="px-6 py-4 space-x-1 text-center flex justify-center">
+											<button
+												class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
+												on:click={async () => {
+													showEditUserModal = !showEditUserModal;
+													selectedUser = user;
+												}}
+											>
+												<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.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											</button>
+
 											<button
 												class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
 												on:click={async () => {

src/routes/(app)/c/[id]/+page.svelte

@@ -6,10 +6,11 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	import { models, modelfiles, user, settings, db, chats, chatId } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
+	import { models, modelfiles, user, settings, chats, chatId } from '$lib/stores';
 
 	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
+	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
+
 	import { copyToClipboard, splitStream } from '$lib/utils';
 
 	import MessageInput from '$lib/components/chat/MessageInput.svelte';
@@ -136,17 +137,20 @@
 		await Promise.all(
 			selectedModels.map(async (model) => {
 				console.log(model);
-				if ($models.filter((m) => m.name === model)[0].external) {
+				const modelTag = $models.filter((m) => m.name === model).at(0);
+
+				if (modelTag?.external) {
 					await sendPromptOpenAI(model, prompt, parentId, _chatId);
-				} else {
+				} else if (modelTag) {
 					await sendPromptOllama(model, prompt, parentId, _chatId);
+				} else {
+					toast.error(`Model ${model} not found`);
 				}
 			})
 		);
 
 		await chats.set(await getChatList(localStorage.token));
 	};
-
 	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
 		// Create response message
 		let responseMessageId = uuidv4();
@@ -177,36 +181,32 @@
 		// Scroll down
 		window.scrollTo({ top: document.body.scrollHeight });
 
-		const res = await generateChatCompletion(
-			$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token,
-			{
-				model: model,
-				messages: [
-					$settings.system
-						? {
-								role: 'system',
-								content: $settings.system
-						  }
-						: undefined,
-					...messages
-				]
-					.filter((message) => message)
-					.map((message) => ({
-						role: message.role,
-						content: message.content,
-						...(message.files && {
-							images: message.files
-								.filter((file) => file.type === 'image')
-								.map((file) => file.url.slice(file.url.indexOf(',') + 1))
-						})
-					})),
-				options: {
-					...($settings.options ?? {})
-				},
-				format: $settings.requestFormat ?? undefined
-			}
-		);
+		const res = await generateChatCompletion(localStorage.token, {
+			model: model,
+			messages: [
+				$settings.system
+					? {
+							role: 'system',
+							content: $settings.system
+					  }
+					: undefined,
+				...messages
+			]
+				.filter((message) => message)
+				.map((message) => ({
+					role: message.role,
+					content: message.content,
+					...(message.files && {
+						images: message.files
+							.filter((file) => file.type === 'image')
+							.map((file) => file.url.slice(file.url.indexOf(',') + 1))
+					})
+				})),
+			options: {
+				...($settings.options ?? {})
+			},
+			format: $settings.requestFormat ?? undefined
+		});
 
 		if (res && res.ok) {
 			const reader = res.body
@@ -340,185 +340,171 @@
 	};
 
 	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
-		if ($settings.OPENAI_API_KEY) {
-			if (models) {
-				let responseMessageId = uuidv4();
-
-				let responseMessage = {
-					parentId: parentId,
-					id: responseMessageId,
-					childrenIds: [],
-					role: 'assistant',
-					content: '',
-					model: model
-				};
-
-				history.messages[responseMessageId] = responseMessage;
-				history.currentId = responseMessageId;
-				if (parentId !== null) {
-					history.messages[parentId].childrenIds = [
-						...history.messages[parentId].childrenIds,
-						responseMessageId
-					];
-				}
+		let responseMessageId = uuidv4();
 
-				window.scrollTo({ top: document.body.scrollHeight });
-
-				const res = await fetch(
-					`${$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1'}/chat/completions`,
-					{
-						method: 'POST',
-						headers: {
-							Authorization: `Bearer ${$settings.OPENAI_API_KEY}`,
-							'Content-Type': 'application/json'
-						},
-						body: JSON.stringify({
-							model: model,
-							stream: true,
-							messages: [
-								$settings.system
-									? {
-											role: 'system',
-											content: $settings.system
-									  }
-									: undefined,
-								...messages
-							]
-								.filter((message) => message)
-								.map((message) => ({
-									role: message.role,
-									...(message.files
-										? {
-												content: [
-													{
-														type: 'text',
-														text: message.content
-													},
-													...message.files
-														.filter((file) => file.type === 'image')
-														.map((file) => ({
-															type: 'image_url',
-															image_url: {
-																url: file.url
-															}
-														}))
-												]
-										  }
-										: { content: message.content })
-								})),
-							temperature: $settings.temperature ?? undefined,
-							top_p: $settings.top_p ?? undefined,
-							num_ctx: $settings.num_ctx ?? undefined,
-							frequency_penalty: $settings.repeat_penalty ?? undefined
-						})
-					}
-				).catch((err) => {
-					console.log(err);
-					return null;
-				});
+		let responseMessage = {
+			parentId: parentId,
+			id: responseMessageId,
+			childrenIds: [],
+			role: 'assistant',
+			content: '',
+			model: model
+		};
 
-				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 || stopResponseFlag || _chatId !== $chatId) {
-							responseMessage.done = true;
-							messages = messages;
-							break;
-						}
+		history.messages[responseMessageId] = responseMessage;
+		history.currentId = responseMessageId;
+		if (parentId !== null) {
+			history.messages[parentId].childrenIds = [
+				...history.messages[parentId].childrenIds,
+				responseMessageId
+			];
+		}
 
-						try {
-							let lines = value.split('\n');
-
-							for (const line of lines) {
-								if (line !== '') {
-									console.log(line);
-									if (line === 'data: [DONE]') {
-										responseMessage.done = true;
-										messages = messages;
-									} else {
-										let data = JSON.parse(line.replace(/^data: /, ''));
-										console.log(data);
-
-										if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
-											continue;
-										} else {
-											responseMessage.content += data.choices[0].delta.content ?? '';
-											messages = messages;
-										}
-									}
-								}
-							}
-						} catch (error) {
-							console.log(error);
-						}
+		window.scrollTo({ top: document.body.scrollHeight });
 
-						if ($settings.notificationEnabled && !document.hasFocus()) {
-							const notification = new Notification(`OpenAI ${model}`, {
-								body: responseMessage.content,
-								icon: '/favicon.png'
-							});
-						}
+		const res = await generateOpenAIChatCompletion(localStorage.token, {
+			model: model,
+			stream: true,
+			messages: [
+				$settings.system
+					? {
+							role: 'system',
+							content: $settings.system
+					  }
+					: undefined,
+				...messages
+			]
+				.filter((message) => message)
+				.map((message) => ({
+					role: message.role,
+					...(message.files
+						? {
+								content: [
+									{
+										type: 'text',
+										text: message.content
+									},
+									...message.files
+										.filter((file) => file.type === 'image')
+										.map((file) => ({
+											type: 'image_url',
+											image_url: {
+												url: file.url
+											}
+										}))
+								]
+						  }
+						: { content: message.content })
+				})),
+			seed: $settings?.options?.seed ?? undefined,
+			stop: $settings?.options?.stop ?? undefined,
+			temperature: $settings?.options?.temperature ?? undefined,
+			top_p: $settings?.options?.top_p ?? undefined,
+			num_ctx: $settings?.options?.num_ctx ?? undefined,
+			frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+			max_tokens: $settings?.options?.num_predict ?? undefined
+		});
 
-						if ($settings.responseAutoCopy) {
-							copyToClipboard(responseMessage.content);
-						}
+		if (res && res.ok) {
+			const reader = res.body
+				.pipeThrough(new TextDecoderStream())
+				.pipeThrough(splitStream('\n'))
+				.getReader();
 
-						if (autoScroll) {
-							window.scrollTo({ top: document.body.scrollHeight });
-						}
-					}
+			while (true) {
+				const { value, done } = await reader.read();
+				if (done || stopResponseFlag || _chatId !== $chatId) {
+					responseMessage.done = true;
+					messages = messages;
+					break;
+				}
 
-					if ($chatId == _chatId) {
-						chat = await updateChatById(localStorage.token, _chatId, {
-							messages: messages,
-							history: history
-						});
-						await chats.set(await getChatList(localStorage.token));
-					}
-				} else {
-					if (res !== null) {
-						const error = await res.json();
-						console.log(error);
-						if ('detail' in error) {
-							toast.error(error.detail);
-							responseMessage.content = error.detail;
-						} else {
-							if ('message' in error.error) {
-								toast.error(error.error.message);
-								responseMessage.content = error.error.message;
+				try {
+					let lines = value.split('\n');
+
+					for (const line of lines) {
+						if (line !== '') {
+							console.log(line);
+							if (line === 'data: [DONE]') {
+								responseMessage.done = true;
+								messages = messages;
 							} else {
-								toast.error(error.error);
-								responseMessage.content = error.error;
+								let data = JSON.parse(line.replace(/^data: /, ''));
+								console.log(data);
+
+								if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
+									continue;
+								} else {
+									responseMessage.content += data.choices[0].delta.content ?? '';
+									messages = messages;
+								}
 							}
 						}
-					} else {
-						toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
-						responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
 					}
+				} catch (error) {
+					console.log(error);
+				}
 
-					responseMessage.error = true;
-					responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
-					responseMessage.done = true;
-					messages = messages;
+				if ($settings.notificationEnabled && !document.hasFocus()) {
+					const notification = new Notification(`OpenAI ${model}`, {
+						body: responseMessage.content,
+						icon: '/favicon.png'
+					});
 				}
 
-				stopResponseFlag = false;
-				await tick();
+				if ($settings.responseAutoCopy) {
+					copyToClipboard(responseMessage.content);
+				}
 
 				if (autoScroll) {
 					window.scrollTo({ top: document.body.scrollHeight });
 				}
+			}
 
-				if (messages.length == 2) {
-					window.history.replaceState(history.state, '', `/c/${_chatId}`);
-					await setChatTitle(_chatId, userPrompt);
+			if ($chatId == _chatId) {
+				chat = await updateChatById(localStorage.token, _chatId, {
+					messages: messages,
+					history: history
+				});
+				await chats.set(await getChatList(localStorage.token));
+			}
+		} else {
+			if (res !== null) {
+				const error = await res.json();
+				console.log(error);
+				if ('detail' in error) {
+					toast.error(error.detail);
+					responseMessage.content = error.detail;
+				} else {
+					if ('message' in error.error) {
+						toast.error(error.error.message);
+						responseMessage.content = error.error.message;
+					} else {
+						toast.error(error.error);
+						responseMessage.content = error.error;
+					}
 				}
+			} else {
+				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
+				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
 			}
+
+			responseMessage.error = true;
+			responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
+			responseMessage.done = true;
+			messages = messages;
+		}
+
+		stopResponseFlag = false;
+		await tick();
+
+		if (autoScroll) {
+			window.scrollTo({ top: document.body.scrollHeight });
+		}
+
+		if (messages.length == 2) {
+			window.history.replaceState(history.state, '', `/c/${_chatId}`);
+			await setChatTitle(_chatId, userPrompt);
 		}
 	};
 
@@ -605,12 +591,7 @@
 
 	const generateChatTitle = async (_chatId, userPrompt) => {
 		if ($settings.titleAutoGenerate ?? true) {
-			const title = await generateTitle(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-				localStorage.token,
-				selectedModels[0],
-				userPrompt
-			);
+			const title = await generateTitle(localStorage.token, selectedModels[0], userPrompt);
 
 			if (title) {
 				await setChatTitle(_chatId, title);
@@ -628,6 +609,12 @@
 		chat = await updateChatById(localStorage.token, _chatId, { title: _title });
 		await chats.set(await getChatList(localStorage.token));
 	};
+
+	onMount(async () => {
+		if (!($settings.saveChatHistory ?? true)) {
+			await goto('/');
+		}
+	});
 </script>
 
 <svelte:window

src/routes/(app)/modelfiles/+page.svelte

@@ -6,7 +6,6 @@
 	import { onMount } from 'svelte';
 
 	import { modelfiles, settings, user } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
 	import { createModel, deleteModel } from '$lib/apis/ollama';
 	import {
 		createNewModelfile,
@@ -20,11 +19,7 @@
 	const deleteModelHandler = async (tagName) => {
 		let success = null;
 
-		success = await deleteModel(
-			$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token,
-			tagName
-		);
+		success = await deleteModel(localStorage.token, tagName);
 
 		if (success) {
 			toast.success(`Deleted ${tagName}`);
@@ -44,7 +39,7 @@
 
 		const url = 'https://ollamahub.com';
 
-		const tab = await window.open(`${url}/create`, '_blank');
+		const tab = await window.open(`${url}/modelfiles/create`, '_blank');
 		window.addEventListener(
 			'message',
 			(event) => {
@@ -254,6 +249,30 @@
 							</svg>
 						</div>
 					</button>
+
+					<button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							saveModelfiles($modelfiles);
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Export Modelfiles</div>
+
+						<div class=" self-center">
+							<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="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>
+					</button>
 				</div>
 
 				{#if localModelfiles.length > 0}

src/routes/(app)/modelfiles/create/+page.svelte

@@ -2,8 +2,7 @@
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-french-toast';
 	import { goto } from '$app/navigation';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
-	import { settings, db, user, config, modelfiles, models } from '$lib/stores';
+	import { settings, user, config, modelfiles, models } from '$lib/stores';
 
 	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
 	import { splitStream } from '$lib/utils';
@@ -51,7 +50,8 @@
 		top_k: '',
 		top_p: '',
 		tfs_z: '',
-		num_ctx: ''
+		num_ctx: '',
+		num_predict: ''
 	};
 
 	let modelfileCreator = null;
@@ -73,6 +73,7 @@ ${options.top_k !== '' ? `PARAMETER top_k ${options.top_k}` : ''}
 ${options.top_p !== '' ? `PARAMETER top_p ${options.top_p}` : ''}
 ${options.tfs_z !== '' ? `PARAMETER tfs_z ${options.tfs_z}` : ''}
 ${options.num_ctx !== '' ? `PARAMETER num_ctx ${options.num_ctx}` : ''}
+${options.num_predict !== '' ? `PARAMETER num_predict ${options.num_predict}` : ''}
 SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 	}
 
@@ -130,12 +131,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 			Object.keys(categories).filter((category) => categories[category]).length > 0 &&
 			!$models.includes(tagName)
 		) {
-			const res = await createModel(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-				localStorage.token,
-				tagName,
-				content
-			);
+			const res = await createModel(localStorage.token, tagName, content);
 
 			if (res) {
 				const reader = res.body
@@ -639,7 +635,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 						<div class=" text-sm font-semibold mb-2">Pull Progress</div>
 						<div class="w-full rounded-full dark:bg-gray-800">
 							<div
-								class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+								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}%

src/routes/(app)/modelfiles/edit/+page.svelte

@@ -6,9 +6,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 
-	import { settings, db, user, config, modelfiles } from '$lib/stores';
-
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
+	import { settings, user, config, modelfiles } from '$lib/stores';
 	import { splitStream } from '$lib/utils';
 
 	import { createModel } from '$lib/apis/ollama';
@@ -104,12 +102,7 @@
 			content !== '' &&
 			Object.keys(categories).filter((category) => categories[category]).length > 0
 		) {
-			const res = await createModel(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-				localStorage.token,
-				tagName,
-				content
-			);
+			const res = await createModel(localStorage.token, tagName, content);
 
 			if (res) {
 				const reader = res.body

src/routes/(app)/prompts/+page.svelte

+<script lang="ts">
+	import toast from 'svelte-french-toast';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { onMount } from 'svelte';
+	import { prompts } from '$lib/stores';
+	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
+	import { error } from '@sveltejs/kit';
+
+	let importFiles = '';
+	let query = '';
+
+	const sharePrompt = async (prompt) => {
+		toast.success('Redirecting you to OllamaHub');
+
+		const url = 'https://ollamahub.com';
+
+		const tab = await window.open(`${url}/prompts/create`, '_blank');
+		window.addEventListener(
+			'message',
+			(event) => {
+				if (event.origin !== url) return;
+				if (event.data === 'loaded') {
+					tab.postMessage(JSON.stringify(prompt), '*');
+				}
+			},
+			false
+		);
+	};
+
+	const deletePrompt = async (command) => {
+		await deletePromptByCommand(localStorage.token, command);
+		await prompts.set(await getPrompts(localStorage.token));
+	};
+</script>
+
+<div class="min-h-screen w-full flex justify-center dark:text-white">
+	<div class=" py-2.5 flex flex-col justify-between w-full">
+		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
+			<div class="mb-6 flex justify-between items-center">
+				<div class=" text-2xl font-semibold self-center">My Prompts</div>
+			</div>
+
+			<div class=" flex w-full space-x-2">
+				<div class="flex flex-1">
+					<div class=" self-center ml-1 mr-3">
+						<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="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+					<input
+						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+						bind:value={query}
+						placeholder="Search Prompt"
+					/>
+				</div>
+
+				<div>
+					<a
+						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+						href="/prompts/create"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
+
+			{#if $prompts.length === 0}
+				<div />
+			{:else}
+				{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
+					<hr class=" dark:border-gray-700 my-2.5" />
+					<div class=" flex space-x-4 cursor-pointer w-full mb-3">
+						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
+							<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
+								<div class=" flex-1 self-center pl-5">
+									<div class=" font-bold">{prompt.command}</div>
+									<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
+										{prompt.title}
+									</div>
+								</div>
+							</a>
+						</div>
+						<div class="flex flex-row space-x-1 self-center">
+							<a
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}
+							>
+								<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>
+							</a>
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								on:click={() => {
+									sharePrompt(prompt);
+								}}
+							>
+								<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="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+									/>
+								</svg>
+							</button>
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								on:click={() => {
+									deletePrompt(prompt.command);
+								}}
+							>
+								<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 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+				{/each}
+			{/if}
+
+			<hr class=" dark:border-gray-700 my-2.5" />
+
+			<div class=" flex justify-between w-full mb-3">
+				<div class="flex space-x-2">
+					<input
+						id="prompts-import-input"
+						bind:files={importFiles}
+						type="file"
+						accept=".json"
+						hidden
+						on:change={() => {
+							console.log(importFiles);
+
+							const reader = new FileReader();
+							reader.onload = async (event) => {
+								const savedPrompts = JSON.parse(event.target.result);
+								console.log(savedPrompts);
+
+								for (const prompt of savedPrompts) {
+									await createNewPrompt(
+										localStorage.token,
+										prompt.command.charAt(0) === '/' ? prompt.command.slice(1) : prompt.command,
+										prompt.title,
+										prompt.content
+									).catch((error) => {
+										toast.error(error);
+										return null;
+									});
+								}
+
+								await prompts.set(await getPrompts(localStorage.token));
+							};
+
+							reader.readAsText(importFiles[0]);
+						}}
+					/>
+
+					<button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							document.getElementById('prompts-import-input')?.click();
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Import Prompts</div>
+
+						<div class=" self-center">
+							<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>
+					</button>
+
+					<button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							// document.getElementById('modelfiles-import-input')?.click();
+							let blob = new Blob([JSON.stringify($prompts)], {
+								type: 'application/json'
+							});
+							saveAs(blob, `prompts-export-${Date.now()}.json`);
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Export Prompts</div>
+
+						<div class=" self-center">
+							<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>
+					</button>
+
+					<!-- <button
+						on:click={() => {
+							loadDefaultPrompts();
+						}}
+					>
+						dd
+					</button> -->
+				</div>
+			</div>
+
+			<div class=" my-16">
+				<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div>
+
+				<a
+					class=" flex space-x-4 cursor-pointer w-full mb-3"
+					href="https://ollamahub.com/?type=prompts"
+					target="_blank"
+				>
+					<div class=" self-center w-10">
+						<div
+							class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="currentColor"
+								class="w-6"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+					</div>
+
+					<div class=" self-center">
+						<div class=" font-bold">Discover a prompt</div>
+						<div class=" text-sm">Discover, download, and explore custom Prompts</div>
+					</div>
+				</a>
+			</div>
+		</div>
+	</div>
+</div>