Merge pull request #408 from ollama-webui/main

rag

src/lib/components/admin/EditUserModal.svelte

+<script lang="ts">
+	import toast from 'svelte-french-toast';
+	import dayjs from 'dayjs';
+	import { createEventDispatcher } from 'svelte';
+	import { onMount } from 'svelte';
+
+	import { updateUserById } from '$lib/apis/users';
+	import Modal from '../common/Modal.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let show = false;
+	export let selectedUser;
+	export let sessionUser;
+
+	let _user = {
+		profile_image_url: '',
+		name: '',
+		email: '',
+		password: ''
+	};
+
+	const submitHandler = async () => {
+		const res = await updateUserById(localStorage.token, selectedUser.id, _user).catch((error) => {
+			toast.error(error);
+		});
+
+		if (res) {
+			dispatch('save');
+			show = false;
+		}
+	};
+
+	onMount(() => {
+		if (selectedUser) {
+			_user = selectedUser;
+			_user.password = '';
+		}
+	});
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
+			<div class=" text-lg font-medium self-center">Edit User</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<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>
+		<hr class=" dark:border-gray-800" />
+
+		<div class="flex flex-col md:flex-row w-full p-5 md:space-x-4 dark:text-gray-200">
+			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+				<form
+					class="flex flex-col w-full"
+					on:submit|preventDefault={() => {
+						submitHandler();
+					}}
+				>
+					<div class=" flex items-center rounded-md py-2 px-4 w-full">
+						<div class=" self-center mr-5">
+							<img
+								src={selectedUser.profile_image_url}
+								class=" max-w-[55px] object-cover rounded-full"
+								alt="User profile"
+							/>
+						</div>
+
+						<div>
+							<div class=" self-center capitalize font-semibold">{selectedUser.name}</div>
+
+							<div class="text-xs text-gray-500">
+								Created at {dayjs(selectedUser.timestamp * 1000).format('MMMM DD, YYYY')}
+							</div>
+						</div>
+					</div>
+
+					<hr class=" dark:border-gray-800 my-3 w-full" />
+
+					<div class=" flex flex-col space-y-1.5">
+						<div class="flex flex-col w-full">
+							<div class=" mb-1 text-xs text-gray-500">Email</div>
+
+							<div class="flex-1">
+								<input
+									class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 disabled:text-gray-500 dark:disabled:text-gray-500 outline-none"
+									type="email"
+									bind:value={_user.email}
+									autocomplete="off"
+									required
+									disabled={_user.id == sessionUser.id}
+								/>
+							</div>
+						</div>
+
+						<div class="flex flex-col w-full">
+							<div class=" mb-1 text-xs text-gray-500">Name</div>
+
+							<div class="flex-1">
+								<input
+									class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+									type="text"
+									bind:value={_user.name}
+									autocomplete="off"
+									required
+								/>
+							</div>
+						</div>
+
+						<div class="flex flex-col w-full">
+							<div class=" mb-1 text-xs text-gray-500">New Password</div>
+
+							<div class="flex-1">
+								<input
+									class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+									type="password"
+									bind:value={_user.password}
+									autocomplete="new-password"
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex justify-end pt-3 text-sm font-medium">
+						<button
+							class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
+							type="submit"
+						>
+							Save
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</Modal>
+
+<style>
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		/* display: none; <- Crashes Chrome on hover */
+		-webkit-appearance: none;
+		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+	}
+
+	.tabs::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari and Opera */
+	}
+
+	.tabs {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield; /* Firefox */
+	}
+</style>

src/lib/components/chat/MessageInput/Suggestions.svelte

@@ -7,7 +7,7 @@
 	{#each suggestionPrompts as prompt, promptIdx}
 		<div class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px]">
 			<button
-				class=" flex-1 flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
+				class=" flex-1 flex justify-between w-full h-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
 				on:click={() => {
 					submitPrompt(prompt.content);
 				}}
@@ -17,7 +17,9 @@
 						<div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div>
 						<div class="text-sm text-gray-500">{prompt.title[1]}</div>
 					{:else}
-						<div class=" self-center text-sm font-medium dark:text-gray-300">{prompt.content}</div>
+						<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
+							{prompt.content}
+						</div>
 					{/if}
 				</div>
 

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/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,7 @@
 	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;
@@ -88,6 +99,7 @@
 	let titleAutoGenerateModel = '';
 
 	// Chats
+	let saveChatHistory = true;
 	let importFiles;
 	let showDeleteConfirm = false;
 
@@ -139,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';
@@ -223,24 +236,22 @@
 		}
 	};
 
-	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 res = await pullModel(localStorage.token, modelTag);
+
+		if (res) {
 			const reader = res.body
 				.pipeThrough(new TextDecoderStream())
 				.pipeThrough(splitStream('\n'))
@@ -292,6 +303,7 @@
 					toast.error(error);
 				}
 			}
+		}
 
 		modelTag = '';
 		modelTransferring = false;
@@ -410,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
@@ -490,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 {
+		if (res) {
 			toast.success(`Deleted ${deleteModelTag}`);
 		}
-				}
-			} catch (error) {
-				console.log(error);
-				toast.error(error);
-			}
-		}
 
 		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) => {
-				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 ?? []));
+	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' && $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) => {
+		if (type === 'all' && OPENAI_API_KEY) {
+			const openAIModels = await getOpenAIModels(localStorage.token).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;
@@ -639,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;
@@ -659,25 +577,21 @@
 		options = { ...options, ...settings.options };
 		options.stop = (settings?.options?.stop ?? []).join(',');
 
-		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
-		OPENAI_API_BASE_URL = settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1';
-
 		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 		speechAutoSend = settings.speechAutoSend ?? false;
 		responseAutoCopy = settings.responseAutoCopy ?? false;
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 		gravatarEmail = settings.gravatarEmail ?? '';
 
+		saveChatHistory = settings.saveChatHistory ?? true;
+
 		authEnabled = settings.authHeader !== undefined ? true : false;
 		if (authEnabled) {
 			authType = settings.authHeader.split(' ')[0];
 			authContent = settings.authHeader.split(' ')[1];
 		}
 
-		ollamaVersion = await getOllamaVersion(
-			API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token
-		).catch((error) => {
+		ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => {
 			return '';
 		});
 	});
@@ -787,7 +701,6 @@
 						</div>
 						<div class=" self-center">Models</div>
 					</button>
-				{/if}
 
 					<button
 						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
@@ -812,6 +725,7 @@
 						</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 ===
@@ -1041,6 +955,7 @@
 							</div>
 						</div>
 
+						{#if $user.role === 'admin'}
 							<hr class=" dark:border-gray-700" />
 							<div>
 								<div class=" mb-2.5 text-sm font-medium">Ollama API URL</div>
@@ -1048,14 +963,14 @@
 									<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)"
+											placeholder="Enter URL (e.g. http://localhost:11434/api)"
 											bind:value={API_BASE_URL}
 										/>
 									</div>
 									<button
 										class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
 										on:click={() => {
-										checkOllamaConnection();
+											updateOllamaAPIUrlHandler();
 										}}
 									>
 										<svg
@@ -1074,11 +989,9 @@
 								</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
-								>;
+									Trouble accessing Ollama?
 									<a
-									class=" text-gray-500 dark:text-gray-300 font-medium"
+										class=" text-gray-300 font-medium"
 										href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
 										target="_blank"
 									>
@@ -1086,6 +999,7 @@
 									</a>
 								</div>
 							</div>
+						{/if}
 
 						<hr class=" dark:border-gray-700" />
 
@@ -1103,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;
@@ -1259,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}%
@@ -1494,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;
 						}}
 					>
@@ -1710,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/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
@@ -159,6 +165,48 @@
 			</div>
 		{/if}
 
+		<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>
+
+						<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"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-3 h-3"
+								>
+									<path
+										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>Enable Chat History</div>
+							</button>
+						</div>
+					</div>
+				</div>
+			{/if}
+
 			<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">
@@ -407,6 +455,7 @@
 					</div>
 				{/each}
 			</div>
+		</div>
 
 		<div class="px-2.5">
 			<hr class=" border-gray-900 mb-1 w-full" />

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/utils/index.ts

@@ -21,7 +21,7 @@ export const splitStream = (splitOn) => {
 };
 
 export const convertMessagesToHistory = (messages) => {
-	let history = {
+	const history = {
 		messages: {},
 		currentId: null
 	};
@@ -114,7 +114,7 @@ export const checkVersion = (required, current) => {
 
 export const findWordIndices = (text) => {
 	const regex = /\[([^\]]+)\]/g;
-	let matches = [];
+	const matches = [];
 	let match;
 
 	while ((match = regex.exec(text)) !== null) {

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

@@ -14,7 +14,7 @@
 	import { getOpenAIModels } from '$lib/apis/openai';
 
 	import { user, showSettings, settings, models, modelfiles, prompts } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL, REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
+	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';
@@ -32,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) => {
+
+		// $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);
-				toast.error(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 '';
 			});
 		}

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

@@ -7,7 +7,6 @@
 	import { page } from '$app/stores';
 
 	import { models, modelfiles, user, settings, chats, chatId, config } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
 
 	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;
@@ -163,10 +163,7 @@
 		// Scroll down
 		window.scrollTo({ top: document.body.scrollHeight });
 
-		const res = await generateChatCompletion(
-			$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token,
-			{
+		const res = await generateChatCompletion(localStorage.token, {
 			model: model,
 			messages: [
 				$settings.system
@@ -191,8 +188,7 @@
 				...($settings.options ?? {})
 			},
 			format: $settings.requestFormat ?? undefined
-			}
-		);
+		});
 
 		if (res && res.ok) {
 			const reader = res.body
@@ -284,12 +280,14 @@
 			}
 
 			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();
@@ -326,8 +324,6 @@
 	};
 
 	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
-		if ($settings.OPENAI_API_KEY) {
-			if (models) {
 		let responseMessageId = uuidv4();
 
 		let responseMessage = {
@@ -350,15 +346,7 @@
 
 		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({
+		const res = await generateOpenAIChatCompletion(localStorage.token, {
 			model: model,
 			stream: true,
 			messages: [
@@ -399,11 +387,6 @@
 			num_ctx: $settings?.options?.num_ctx ?? undefined,
 			frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
 			max_tokens: $settings?.options?.num_predict ?? undefined
-						})
-					}
-				).catch((err) => {
-					console.log(err);
-					return null;
 		});
 
 		if (res && res.ok) {
@@ -463,12 +446,14 @@
 			}
 
 			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();
@@ -507,8 +492,6 @@
 			window.history.replaceState(history.state, '', `/c/${_chatId}`);
 			await setChatTitle(_chatId, userPrompt);
 		}
-			}
-		}
 	};
 
 	const submitPrompt = async (userPrompt) => {
@@ -548,6 +531,7 @@
 
 			// Create new chat if only one message in messages
 			if (messages.length == 1) {
+				if ($settings.saveChatHistory ?? true) {
 					chat = await createNewChat(localStorage.token, {
 						id: $chatId,
 						title: 'New Chat',
@@ -562,6 +546,9 @@
 					});
 					await chats.set(await getChatList(localStorage.token));
 					await chatId.set(chat.id);
+				} else {
+					await chatId.set('local');
+				}
 				await tick();
 			}
 
@@ -595,7 +582,6 @@
 	const generateChatTitle = async (_chatId, userPrompt) => {
 		if ($settings.titleAutoGenerate ?? true) {
 			const title = await generateTitle(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
 				localStorage.token,
 				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
@@ -614,8 +600,10 @@
 			title = _title;
 		}
 
+		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

@@ -8,11 +8,15 @@
 
 	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) => {
@@ -25,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);
@@ -51,6 +66,17 @@
 	});
 </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"
 >
@@ -154,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

@@ -7,9 +7,10 @@
 	import { page } from '$app/stores';
 
 	import { models, modelfiles, user, settings, chats, chatId } from '$lib/stores';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
 
 	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';
@@ -180,10 +181,7 @@
 		// Scroll down
 		window.scrollTo({ top: document.body.scrollHeight });
 
-		const res = await generateChatCompletion(
-			$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-			localStorage.token,
-			{
+		const res = await generateChatCompletion(localStorage.token, {
 			model: model,
 			messages: [
 				$settings.system
@@ -208,8 +206,7 @@
 				...($settings.options ?? {})
 			},
 			format: $settings.requestFormat ?? undefined
-			}
-		);
+		});
 
 		if (res && res.ok) {
 			const reader = res.body
@@ -343,8 +340,6 @@
 	};
 
 	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
-		if ($settings.OPENAI_API_KEY) {
-			if (models) {
 		let responseMessageId = uuidv4();
 
 		let responseMessage = {
@@ -367,15 +362,7 @@
 
 		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({
+		const res = await generateOpenAIChatCompletion(localStorage.token, {
 			model: model,
 			stream: true,
 			messages: [
@@ -416,11 +403,6 @@
 			num_ctx: $settings?.options?.num_ctx ?? undefined,
 			frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
 			max_tokens: $settings?.options?.num_predict ?? undefined
-						})
-					}
-				).catch((err) => {
-					console.log(err);
-					return null;
 		});
 
 		if (res && res.ok) {
@@ -524,8 +506,6 @@
 			window.history.replaceState(history.state, '', `/c/${_chatId}`);
 			await setChatTitle(_chatId, userPrompt);
 		}
-			}
-		}
 	};
 
 	const submitPrompt = async (userPrompt) => {
@@ -611,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);
@@ -634,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}`);

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

@@ -2,7 +2,6 @@
 	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, user, config, modelfiles, models } from '$lib/stores';
 
 	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
@@ -132,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
@@ -641,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

@@ -7,8 +7,6 @@
 	import { page } from '$app/stores';
 
 	import { settings, user, config, modelfiles } from '$lib/stores';
-
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
 	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