Merge branch 'dev' of https://github.com/open-webui/open-webui into feat/rtl-layout-chat-support

src/lib/utils/index.test.ts

+import { promptTemplate } from '$lib/utils/index';
+import { expect, test } from 'vitest';
+
+test('promptTemplate correctly replaces {{prompt}} placeholder', () => {
+	const template = 'Hello {{prompt}}!';
+	const prompt = 'world';
+	const expected = 'Hello world!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate correctly replaces {{prompt:start:<length>}} placeholder', () => {
+	const template = 'Hello {{prompt:start:3}}!';
+	const prompt = 'world';
+	const expected = 'Hello wor!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate correctly replaces {{prompt:end:<length>}} placeholder', () => {
+	const template = 'Hello {{prompt:end:3}}!';
+	const prompt = 'world';
+	const expected = 'Hello rld!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate correctly replaces {{prompt:middletruncate:<length>}} placeholder when prompt length is greater than length', () => {
+	const template = 'Hello {{prompt:middletruncate:4}}!';
+	const prompt = 'world';
+	const expected = 'Hello wo...ld!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate correctly replaces {{prompt:middletruncate:<length>}} placeholder when prompt length is less than or equal to length', () => {
+	const template = 'Hello {{prompt:middletruncate:5}}!';
+	const prompt = 'world';
+	const expected = 'Hello world!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate returns original template when no placeholders are present', () => {
+	const template = 'Hello world!';
+	const prompt = 'world';
+	const expected = 'Hello world!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate does not replace placeholders inside of replaced placeholders', () => {
+	const template = 'Hello {{prompt}}!';
+	const prompt = 'World, {{prompt}} injection';
+	const expected = 'Hello World, {{prompt}} injection!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});
+
+test('promptTemplate correctly replaces multiple placeholders', () => {
+	const template = 'Hello {{prompt}}! This is {{prompt:start:3}}!';
+	const prompt = 'world';
+	const expected = 'Hello world! This is wor!';
+	const actual = promptTemplate(template, prompt);
+	expect(actual).toBe(expected);
+});

src/lib/utils/index.ts

@@ -472,22 +472,39 @@ export const blobToFile = (blob, fileName) => {
 	return file;
 };
 
-export const promptTemplate = (template: string, prompt: string) => {
-	prompt = prompt.replace(/{{prompt}}|{{prompt:start:\d+}}|{{prompt:end:\d+}}/g, '');
-
-	template = template.replace(/{{prompt}}/g, prompt);
-
-	// Replace all instances of {{prompt:start:<length>}} with the first <length> characters of the prompt
-	template = template.replace(/{{prompt:start:(\d+)}}/g, (match, length) =>
-		prompt.substring(0, parseInt(length))
-	);
-
-	// Replace all instances of {{prompt:end:<length>}} with the last <length> characters of the prompt
-	template = template.replace(/{{prompt:end:(\d+)}}/g, (match, length) =>
-		prompt.slice(-parseInt(length))
+/**
+ * This function is used to replace placeholders in a template string with the provided prompt.
+ * The placeholders can be in the following formats:
+ * - `{{prompt}}`: This will be replaced with the entire prompt.
+ * - `{{prompt:start:<length>}}`: This will be replaced with the first <length> characters of the prompt.
+ * - `{{prompt:end:<length>}}`: This will be replaced with the last <length> characters of the prompt.
+ * - `{{prompt:middletruncate:<length>}}`: This will be replaced with the prompt truncated to <length> characters, with '...' in the middle.
+ *
+ * @param {string} template - The template string containing placeholders.
+ * @param {string} prompt - The string to replace the placeholders with.
+ * @returns {string} The template string with the placeholders replaced by the prompt.
+ */
+export const promptTemplate = (template: string, prompt: string): string => {
+	return template.replace(
+		/{{prompt}}|{{prompt:start:(\d+)}}|{{prompt:end:(\d+)}}|{{prompt:middletruncate:(\d+)}}/g,
+		(match, startLength, endLength, middleLength) => {
+			if (match === '{{prompt}}') {
+				return prompt;
+			} else if (match.startsWith('{{prompt:start:')) {
+				return prompt.substring(0, startLength);
+			} else if (match.startsWith('{{prompt:end:')) {
+				return prompt.slice(-endLength);
+			} else if (match.startsWith('{{prompt:middletruncate:')) {
+				if (prompt.length <= middleLength) {
+					return prompt;
+				}
+				const start = prompt.slice(0, Math.ceil(middleLength / 2));
+				const end = prompt.slice(-Math.floor(middleLength / 2));
+				return `${start}...${end}`;
+			}
+			return '';
+		}
 	);
-
-	return template;
 };
 
 export const approximateToHumanReadable = (nanoseconds: number) => {

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

@@ -557,166 +557,146 @@
 
 		scrollToBottom();
 
-		const [res, controller] = await generateOpenAIChatCompletion(
-			localStorage.token,
-			{
-				model: model.id,
-				stream: true,
-				messages: [
-					$settings.system
-						? {
-								role: 'system',
-								content: $settings.system
-						  }
-						: undefined,
-					...messages
-				]
-					.filter((message) => message)
-					.map((message, idx, arr) => ({
-						role: message.role,
-						...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
-						message.role === 'user'
+		try {
+			const [res, controller] = await generateOpenAIChatCompletion(
+				localStorage.token,
+				{
+					model: model.id,
+					stream: true,
+					messages: [
+						$settings.system
 							? {
-									content: [
-										{
-											type: 'text',
-											text:
-												arr.length - 1 !== idx
-													? message.content
-													: message?.raContent ?? message.content
-										},
-										...message.files
-											.filter((file) => file.type === 'image')
-											.map((file) => ({
-												type: 'image_url',
-												image_url: {
-													url: file.url
-												}
-											}))
-									]
+									role: 'system',
+									content: $settings.system
 							  }
-							: {
-									content:
-										arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
-							  })
-					})),
-				seed: $settings?.options?.seed ?? undefined,
-				stop:
-					$settings?.options?.stop ?? undefined
-						? $settings?.options?.stop.map((str) =>
-								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
-						  )
-						: 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,
-				docs: docs.length > 0 ? docs : undefined,
-				citations: docs.length > 0
-			},
-			model?.source?.toLowerCase() === 'litellm'
-				? `${LITELLM_API_BASE_URL}/v1`
-				: `${OPENAI_API_BASE_URL}`
-		);
-
-		// Wait until history/message have been updated
-		await tick();
+							: undefined,
+						...messages
+					]
+						.filter((message) => message)
+						.map((message, idx, arr) => ({
+							role: message.role,
+							...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
+							message.role === 'user'
+								? {
+										content: [
+											{
+												type: 'text',
+												text:
+													arr.length - 1 !== idx
+														? message.content
+														: message?.raContent ?? message.content
+											},
+											...message.files
+												.filter((file) => file.type === 'image')
+												.map((file) => ({
+													type: 'image_url',
+													image_url: {
+														url: file.url
+													}
+												}))
+										]
+								  }
+								: {
+										content:
+											arr.length - 1 !== idx
+												? message.content
+												: message?.raContent ?? message.content
+								  })
+						})),
+					seed: $settings?.options?.seed ?? undefined,
+					stop:
+						$settings?.options?.stop ?? undefined
+							? $settings.options.stop.map((str) =>
+									decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
+							  )
+							: 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,
+					docs: docs.length > 0 ? docs : undefined,
+					citations: docs.length > 0
+				},
+				model?.source?.toLowerCase() === 'litellm'
+					? `${LITELLM_API_BASE_URL}/v1`
+					: `${OPENAI_API_BASE_URL}`
+			);
 
-		scrollToBottom();
+			// Wait until history/message have been updated
+			await tick();
 
-		if (res && res.ok && res.body) {
-			const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
+			scrollToBottom();
 
-			for await (const update of textStream) {
-				const { value, done, citations } = update;
-				if (done || stopResponseFlag || _chatId !== $chatId) {
-					responseMessage.done = true;
-					messages = messages;
+			if (res && res.ok && res.body) {
+				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
 
-					if (stopResponseFlag) {
-						controller.abort('User: Stop Response');
+				for await (const update of textStream) {
+					const { value, done, citations, error } = update;
+					if (error) {
+						await handleOpenAIError(error, null, model, responseMessage);
+						break;
 					}
+					if (done || stopResponseFlag || _chatId !== $chatId) {
+						responseMessage.done = true;
+						messages = messages;
 
-					break;
-				}
+						if (stopResponseFlag) {
+							controller.abort('User: Stop Response');
+						}
 
-				if (citations) {
-					responseMessage.citations = citations;
-					continue;
-				}
+						break;
+					}
 
-				if (responseMessage.content == '' && value == '\n') {
-					continue;
-				} else {
-					responseMessage.content += value;
-					messages = messages;
-				}
+					if (citations) {
+						responseMessage.citations = citations;
+						continue;
+					}
 
-				if ($settings.notificationEnabled && !document.hasFocus()) {
-					const notification = new Notification(`OpenAI ${model}`, {
-						body: responseMessage.content,
-						icon: `${WEBUI_BASE_URL}/static/favicon.png`
-					});
-				}
+					if (responseMessage.content == '' && value == '\n') {
+						continue;
+					} else {
+						responseMessage.content += value;
+						messages = messages;
+					}
 
-				if ($settings.responseAutoCopy) {
-					copyToClipboard(responseMessage.content);
-				}
+					if ($settings.notificationEnabled && !document.hasFocus()) {
+						const notification = new Notification(`OpenAI ${model}`, {
+							body: responseMessage.content,
+							icon: `${WEBUI_BASE_URL}/static/favicon.png`
+						});
+					}
 
-				if ($settings.responseAutoPlayback) {
-					await tick();
-					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
-				}
+					if ($settings.responseAutoCopy) {
+						copyToClipboard(responseMessage.content);
+					}
 
-				if (autoScroll) {
-					scrollToBottom();
-				}
-			}
+					if ($settings.responseAutoPlayback) {
+						await tick();
+						document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+					}
 
-			if ($chatId == _chatId) {
-				if ($settings.saveChatHistory ?? true) {
-					chat = await updateChatById(localStorage.token, _chatId, {
-						messages: messages,
-						history: history
-					});
-					await chats.set(await getChatList(localStorage.token));
+					if (autoScroll) {
+						scrollToBottom();
+					}
 				}
-			}
-		} 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;
+
+				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 {
-				toast.error(
-					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-						provider: model.name ?? model.id
-					})
-				);
-				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-					provider: model.name ?? model.id
-				});
+				await handleOpenAIError(null, res, model, responseMessage);
 			}
-
-			responseMessage.error = true;
-			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-				provider: model.name ?? model.id
-			});
-			responseMessage.done = true;
-			messages = messages;
+		} catch (error) {
+			await handleOpenAIError(error, null, model, responseMessage);
 		}
+		messages = messages;
 
 		stopResponseFlag = false;
 		await tick();
@@ -733,6 +713,44 @@
 		}
 	};
 
+	const handleOpenAIError = async (error, res: Response | null, model, responseMessage) => {
+		let errorMessage = '';
+		let innerError;
+
+		if (error) {
+			innerError = error;
+		} else if (res !== null) {
+			innerError = await res.json();
+		}
+		console.error(innerError);
+		if ('detail' in innerError) {
+			toast.error(innerError.detail);
+			errorMessage = innerError.detail;
+		} else if ('error' in innerError) {
+			if ('message' in innerError.error) {
+				toast.error(innerError.error.message);
+				errorMessage = innerError.error.message;
+			} else {
+				toast.error(innerError.error);
+				errorMessage = innerError.error;
+			}
+		} else if ('message' in innerError) {
+			toast.error(innerError.message);
+			errorMessage = innerError.message;
+		}
+
+		responseMessage.error = true;
+		responseMessage.content =
+			$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: model.name ?? model.id
+			}) +
+			'\n' +
+			errorMessage;
+		responseMessage.done = true;
+
+		messages = messages;
+	};
+
 	const stopResponse = () => {
 		stopResponseFlag = true;
 		console.log('stopResponse');
@@ -865,7 +883,7 @@
 
 <div
 	class="min-h-screen max-h-screen {$showSidebar
-		? 'lg:max-w-[calc(100%-260px)]'
+		? 'md:max-w-[calc(100%-260px)]'
 		: ''} w-full max-w-full flex flex-col"
 >
 	<Navbar

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

 <script>
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
-	import { WEBUI_NAME, config, user } from '$lib/stores';
+	import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { onMount, getContext } from 'svelte';
 
@@ -12,6 +12,9 @@
 
 	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
 	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
+
+	import MenuLines from '$lib/components/icons/MenuLines.svelte';
+
 	import EditUserModal from '$lib/components/admin/EditUserModal.svelte';
 	import SettingsModal from '$lib/components/admin/SettingsModal.svelte';
 	import Pagination from '$lib/components/common/Pagination.svelte';
@@ -23,6 +26,7 @@
 	const i18n = getContext('i18n');
 
 	let loaded = false;
+	let tab = '';
 	let users = [];
 
 	let search = '';
@@ -102,252 +106,258 @@
 <UserChatsModal bind:show={showUserChatsModal} user={selectedUser} />
 <SettingsModal bind:show={showSettingsModal} />
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
+<div class=" flex flex-col w-full min-h-screen">
 	{#if loaded}
-		<div class=" flex flex-col justify-between w-full overflow-y-auto">
-			<div class=" mx-auto w-full">
-				<div class="w-full">
-					<div class=" flex flex-col justify-center">
-						<div class=" px-6 pt-4">
-							<div class=" flex justify-between items-center">
-								<div class="flex items-center text-2xl font-semibold">{$i18n.t('Dashboard')}</div>
-								<div>
-									<Tooltip content={$i18n.t('Admin Settings')}>
-										<button
-											class="flex items-center space-x-1 p-2 md:px-3 md:py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
-											type="button"
-											on:click={() => {
-												showSettingsModal = !showSettingsModal;
-											}}
-										>
-											<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="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-
-											<div class="hidden md:inline text-xs">{$i18n.t('Admin Settings')}</div>
-										</button>
-									</Tooltip>
-								</div>
-							</div>
+		<div class="px-4 pt-3 mt-0.5 mb-1">
+			<div class=" flex items-center gap-1">
+				<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
+					<button
+						id="sidebar-toggle-button"
+						class="cursor-pointer p-1 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+						on:click={() => {
+							showSidebar.set(!$showSidebar);
+						}}
+					>
+						<div class=" m-auto self-center">
+							<MenuLines />
 						</div>
+					</button>
+				</div>
+				<div class="flex items-center text-xl font-semibold">{$i18n.t('Dashboard')}</div>
+			</div>
+		</div>
 
-						<div class="px-6 flex text-sm gap-2.5">
-							<div class="py-3 border-b font-medium text-gray-100 cursor-pointer">
-								{$i18n.t('Overview')}
-							</div>
-							<!-- <div class="py-3 text-gray-300 cursor-pointer">Users</div> -->
-						</div>
+		<!-- <div class="px-4 my-1">
+			<div
+				class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
+			>
+				<button
+					class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
+						? 'bg-gray-50 dark:bg-gray-850'
+						: ''} transition"
+					type="button"
+					on:click={() => {
+						tab = '';
+					}}>{$i18n.t('Overview')}</button
+				>
+			</div>
+		</div> -->
 
-						<hr class=" mb-3 dark:border-gray-800" />
+		<hr class=" my-2 dark:border-gray-850" />
 
-						<div class="px-6">
-							<div class="mt-0.5 mb-3 gap-1 flex flex-col md:flex-row justify-between">
-								<div class="flex text-lg font-medium px-0.5">
-									{$i18n.t('All Users')}
-									<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
-									<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
-										>{users.length}</span
-									>
-								</div>
+		<div class="px-6">
+			<div class="mt-0.5 mb-3 gap-1 flex flex-col md:flex-row justify-between">
+				<div class="flex md:self-center text-lg font-medium px-0.5">
+					{$i18n.t('All Users')}
+					<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+					<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{users.length}</span>
+				</div>
 
-								<div class="flex gap-1">
-									<input
-										class="w-full md:w-60 rounded-xl py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-										placeholder={$i18n.t('Search')}
-										bind:value={search}
+				<div class="flex gap-1">
+					<input
+						class="w-full md:w-60 rounded-xl py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+						placeholder={$i18n.t('Search')}
+						bind:value={search}
+					/>
+
+					<div class="flex gap-0.5">
+						<Tooltip content="Add User">
+							<button
+								class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
+								on:click={() => {
+									showAddUserModal = !showAddUserModal;
+								}}
+							>
+								<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>
+							</button>
+						</Tooltip>
+
+						<Tooltip content={$i18n.t('Admin Settings')}>
+							<button
+								class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
+								on:click={() => {
+									showSettingsModal = !showSettingsModal;
+								}}
+							>
+								<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="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							</button>
+						</Tooltip>
+					</div>
+				</div>
+			</div>
 
-									<div>
-										<Tooltip content="Add User">
-											<button
-												class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
-												on:click={() => {
-													showAddUserModal = !showAddUserModal;
-												}}
-											>
-												<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>
-											</button>
-										</Tooltip>
-									</div>
-								</div>
-							</div>
-
-							<div class="scrollbar-hidden relative overflow-x-auto whitespace-nowrap">
-								<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
-									<thead
-										class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400"
+			<div class="scrollbar-hidden relative overflow-x-auto whitespace-nowrap">
+				<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
+					<thead
+						class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400"
+					>
+						<tr>
+							<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
+							<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
+							<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
+							<th scope="col" class="px-3 py-2"> {$i18n.t('Last Active')} </th>
+
+							<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>
+
+							<th scope="col" class="px-3 py-2 text-right" />
+						</tr>
+					</thead>
+					<tbody>
+						{#each users
+							.filter((user) => {
+								if (search === '') {
+									return true;
+								} else {
+									let name = user.name.toLowerCase();
+									const query = search.toLowerCase();
+									return name.includes(query);
+								}
+							})
+							.slice((page - 1) * 20, page * 20) as user}
+							<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 text-xs">
+								<td class="px-3 py-2 min-w-[7rem] w-28">
+									<button
+										class=" flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role ===
+											'admin' && 'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role ===
+											'user' && 'text-green-600 dark:text-green-200 bg-green-200/30'} {user.role ===
+											'pending' && 'text-gray-600 dark:text-gray-200 bg-gray-200/30'}"
+										on:click={() => {
+											if (user.role === 'user') {
+												updateRoleHandler(user.id, 'admin');
+											} else if (user.role === 'pending') {
+												updateRoleHandler(user.id, 'user');
+											} else {
+												updateRoleHandler(user.id, 'pending');
+											}
+										}}
 									>
-										<tr>
-											<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
-											<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
-											<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
-											<th scope="col" class="px-3 py-2"> {$i18n.t('Last Active')} </th>
-
-											<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>
-
-											<th scope="col" class="px-3 py-2 text-right" />
-										</tr>
-									</thead>
-									<tbody>
-										{#each users
-											.filter((user) => {
-												if (search === '') {
-													return true;
-												} else {
-													let name = user.name.toLowerCase();
-													const query = search.toLowerCase();
-													return name.includes(query);
-												}
-											})
-											.slice((page - 1) * 20, page * 20) as user}
-											<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 text-xs">
-												<td class="px-3 py-2 min-w-[7rem] w-28">
-													<button
-														class=" flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role ===
-															'admin' &&
-															'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role ===
-															'user' &&
-															'text-green-600 dark:text-green-200 bg-green-200/30'} {user.role ===
-															'pending' && 'text-gray-600 dark:text-gray-200 bg-gray-200/30'}"
-														on:click={() => {
-															if (user.role === 'user') {
-																updateRoleHandler(user.id, 'admin');
-															} else if (user.role === 'pending') {
-																updateRoleHandler(user.id, 'user');
-															} else {
-																updateRoleHandler(user.id, 'pending');
-															}
-														}}
+										<div
+											class="w-1 h-1 rounded-full {user.role === 'admin' &&
+												'bg-sky-600 dark:bg-sky-300'} {user.role === 'user' &&
+												'bg-green-600 dark:bg-green-300'} {user.role === 'pending' &&
+												'bg-gray-600 dark:bg-gray-300'}"
+										/>
+										{$i18n.t(user.role)}</button
+									>
+								</td>
+								<td class="px-3 py-2 font-medium text-gray-900 dark:text-white w-max">
+									<div class="flex flex-row w-max">
+										<img
+											class=" rounded-full w-6 h-6 object-cover mr-2.5"
+											src={user.profile_image_url}
+											alt="user"
+										/>
+
+										<div class=" font-medium self-center">{user.name}</div>
+									</div>
+								</td>
+								<td class=" px-3 py-2"> {user.email} </td>
+
+								<td class=" px-3 py-2">
+									{dayjs(user.last_active_at * 1000).fromNow()}
+								</td>
+
+								<td class=" px-3 py-2">
+									{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
+								</td>
+
+								<td class="px-3 py-2 text-right">
+									<div class="flex justify-end w-full">
+										{#if user.role !== 'admin'}
+											<Tooltip content={$i18n.t('Chats')}>
+												<button
+													class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+													on:click={async () => {
+														showUserChatsModal = !showUserChatsModal;
+														selectedUser = user;
+													}}
+												>
+													<ChatBubbles />
+												</button>
+											</Tooltip>
+
+											<Tooltip content={$i18n.t('Edit User')}>
+												<button
+													class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+													on:click={async () => {
+														showEditUserModal = !showEditUserModal;
+														selectedUser = user;
+													}}
+												>
+													<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"
 													>
-														<div
-															class="w-1 h-1 rounded-full {user.role === 'admin' &&
-																'bg-sky-600 dark:bg-sky-300'} {user.role === 'user' &&
-																'bg-green-600 dark:bg-green-300'} {user.role === 'pending' &&
-																'bg-gray-600 dark:bg-gray-300'}"
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
 														/>
-														{$i18n.t(user.role)}</button
+													</svg>
+												</button>
+											</Tooltip>
+
+											<Tooltip content={$i18n.t('Delete User')}>
+												<button
+													class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+													on:click={async () => {
+														deleteUserHandler(user.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"
 													>
-												</td>
-												<td class="px-3 py-2 font-medium text-gray-900 dark:text-white w-max">
-													<div class="flex flex-row w-max">
-														<img
-															class=" rounded-full w-6 h-6 object-cover mr-2.5"
-															src={user.profile_image_url}
-															alt="user"
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
 														/>
+													</svg>
+												</button>
+											</Tooltip>
+										{/if}
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
 
-														<div class=" font-medium self-center">{user.name}</div>
-													</div>
-												</td>
-												<td class=" px-3 py-2"> {user.email} </td>
-
-												<td class=" px-3 py-2">
-													{dayjs(user.last_active_at * 1000).fromNow()}
-												</td>
-
-												<td class=" px-3 py-2">
-													{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
-												</td>
-
-												<td class="px-3 py-2 text-right">
-													<div class="flex justify-end w-full">
-														{#if user.role !== 'admin'}
-															<Tooltip content={$i18n.t('Chats')}>
-																<button
-																	class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-																	on:click={async () => {
-																		showUserChatsModal = !showUserChatsModal;
-																		selectedUser = user;
-																	}}
-																>
-																	<ChatBubbles />
-																</button>
-															</Tooltip>
-
-															<Tooltip content={$i18n.t('Edit User')}>
-																<button
-																	class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-																	on:click={async () => {
-																		showEditUserModal = !showEditUserModal;
-																		selectedUser = user;
-																	}}
-																>
-																	<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.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
-																		/>
-																	</svg>
-																</button>
-															</Tooltip>
-
-															<Tooltip content={$i18n.t('Delete User')}>
-																<button
-																	class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-																	on:click={async () => {
-																		deleteUserHandler(user.id);
-																	}}
-																>
-																	<svg
-																		xmlns="http://www.w3.org/2000/svg"
-																		fill="none"
-																		viewBox="0 0 24 24"
-																		stroke-width="1.5"
-																		stroke="currentColor"
-																		class="w-4 h-4"
-																	>
-																		<path
-																			stroke-linecap="round"
-																			stroke-linejoin="round"
-																			d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-																		/>
-																	</svg>
-																</button>
-															</Tooltip>
-														{/if}
-													</div>
-												</td>
-											</tr>
-										{/each}
-									</tbody>
-								</table>
-							</div>
-
-							<div class=" text-gray-500 text-xs mt-2 text-right">
-								ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
-							</div>
-
-							<Pagination bind:page count={users.length} />
-						</div>
-					</div>
-				</div>
+			<div class=" text-gray-500 text-xs mt-2 text-right">
+				ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
 			</div>
+
+			<Pagination bind:page count={users.length} />
 		</div>
 	{/if}
 </div>

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

@@ -561,165 +561,144 @@
 
 		scrollToBottom();
 
-		const [res, controller] = await generateOpenAIChatCompletion(
-			localStorage.token,
-			{
-				model: model.id,
-				stream: true,
-				messages: [
-					$settings.system
-						? {
-								role: 'system',
-								content: $settings.system
-						  }
-						: undefined,
-					...messages
-				]
-					.filter((message) => message)
-					.map((message, idx, arr) => ({
-						role: message.role,
-						...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
-						message.role === 'user'
+		try {
+			const [res, controller] = await generateOpenAIChatCompletion(
+				localStorage.token,
+				{
+					model: model.id,
+					stream: true,
+					messages: [
+						$settings.system
 							? {
-									content: [
-										{
-											type: 'text',
-											text:
-												arr.length - 1 !== idx
-													? message.content
-													: message?.raContent ?? message.content
-										},
-										...message.files
-											.filter((file) => file.type === 'image')
-											.map((file) => ({
-												type: 'image_url',
-												image_url: {
-													url: file.url
-												}
-											}))
-									]
+									role: 'system',
+									content: $settings.system
 							  }
-							: {
-									content:
-										arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
-							  })
-					})),
-				seed: $settings?.options?.seed ?? undefined,
-				stop:
-					$settings?.options?.stop ?? undefined
-						? $settings.options.stop.map((str) =>
-								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
-						  )
-						: 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,
-				docs: docs.length > 0 ? docs : undefined,
-				citations: docs.length > 0
-			},
-			model?.source?.toLowerCase() === 'litellm'
-				? `${LITELLM_API_BASE_URL}/v1`
-				: `${OPENAI_API_BASE_URL}`
-		);
-
-		// Wait until history/message have been updated
-		await tick();
+							: undefined,
+						...messages
+					]
+						.filter((message) => message)
+						.map((message, idx, arr) => ({
+							role: message.role,
+							...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
+							message.role === 'user'
+								? {
+										content: [
+											{
+												type: 'text',
+												text:
+													arr.length - 1 !== idx
+														? message.content
+														: message?.raContent ?? message.content
+											},
+											...message.files
+												.filter((file) => file.type === 'image')
+												.map((file) => ({
+													type: 'image_url',
+													image_url: {
+														url: file.url
+													}
+												}))
+										]
+								  }
+								: {
+										content:
+											arr.length - 1 !== idx
+												? message.content
+												: message?.raContent ?? message.content
+								  })
+						})),
+					seed: $settings?.options?.seed ?? undefined,
+					stop:
+						$settings?.options?.stop ?? undefined
+							? $settings.options.stop.map((str) =>
+									decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
+							  )
+							: 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,
+					docs: docs.length > 0 ? docs : undefined,
+					citations: docs.length > 0
+				},
+				model?.source?.toLowerCase() === 'litellm'
+					? `${LITELLM_API_BASE_URL}/v1`
+					: `${OPENAI_API_BASE_URL}`
+			);
 
-		scrollToBottom();
+			// Wait until history/message have been updated
+			await tick();
 
-		if (res && res.ok && res.body) {
-			const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
+			scrollToBottom();
 
-			for await (const update of textStream) {
-				const { value, done, citations } = update;
-				if (done || stopResponseFlag || _chatId !== $chatId) {
-					responseMessage.done = true;
-					messages = messages;
+			if (res && res.ok && res.body) {
+				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
 
-					if (stopResponseFlag) {
-						controller.abort('User: Stop Response');
+				for await (const update of textStream) {
+					const { value, done, citations, error } = update;
+					if (error) {
+						await handleOpenAIError(error, null, model, responseMessage);
+						break;
 					}
+					if (done || stopResponseFlag || _chatId !== $chatId) {
+						responseMessage.done = true;
+						messages = messages;
 
-					break;
-				}
+						if (stopResponseFlag) {
+							controller.abort('User: Stop Response');
+						}
 
-				if (citations) {
-					responseMessage.citations = citations;
-					continue;
-				}
+						break;
+					}
 
-				if (responseMessage.content == '' && value == '\n') {
-					continue;
-				} else {
-					responseMessage.content += value;
-					messages = messages;
-				}
+					if (citations) {
+						responseMessage.citations = citations;
+						continue;
+					}
 
-				if ($settings.notificationEnabled && !document.hasFocus()) {
-					const notification = new Notification(`OpenAI ${model}`, {
-						body: responseMessage.content,
-						icon: `${WEBUI_BASE_URL}/static/favicon.png`
-					});
-				}
+					if (responseMessage.content == '' && value == '\n') {
+						continue;
+					} else {
+						responseMessage.content += value;
+						messages = messages;
+					}
 
-				if ($settings.responseAutoCopy) {
-					copyToClipboard(responseMessage.content);
-				}
+					if ($settings.notificationEnabled && !document.hasFocus()) {
+						const notification = new Notification(`OpenAI ${model}`, {
+							body: responseMessage.content,
+							icon: `${WEBUI_BASE_URL}/static/favicon.png`
+						});
+					}
 
-				if ($settings.responseAutoPlayback) {
-					await tick();
-					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
-				}
+					if ($settings.responseAutoCopy) {
+						copyToClipboard(responseMessage.content);
+					}
 
-				if (autoScroll) {
-					scrollToBottom();
-				}
-			}
+					if ($settings.responseAutoPlayback) {
+						await tick();
+						document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+					}
 
-			if ($chatId == _chatId) {
-				if ($settings.saveChatHistory ?? true) {
-					chat = await updateChatById(localStorage.token, _chatId, {
-						messages: messages,
-						history: history
-					});
-					await chats.set(await getChatList(localStorage.token));
+					if (autoScroll) {
+						scrollToBottom();
+					}
 				}
-			}
-		} 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;
+
+				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 {
-				toast.error(
-					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-						provider: model.name ?? model.id
-					})
-				);
-				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-					provider: model.name ?? model.id
-				});
+				await handleOpenAIError(null, res, model, responseMessage);
 			}
-
-			responseMessage.error = true;
-			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-				provider: model.name ?? model.id
-			});
-			responseMessage.done = true;
-			messages = messages;
+		} catch (error) {
+			await handleOpenAIError(error, null, model, responseMessage);
 		}
 
 		stopResponseFlag = false;
@@ -737,6 +716,44 @@
 		}
 	};
 
+	const handleOpenAIError = async (error, res: Response | null, model, responseMessage) => {
+		let errorMessage = '';
+		let innerError;
+
+		if (error) {
+			innerError = error;
+		} else if (res !== null) {
+			innerError = await res.json();
+		}
+		console.error(innerError);
+		if ('detail' in innerError) {
+			toast.error(innerError.detail);
+			errorMessage = innerError.detail;
+		} else if ('error' in innerError) {
+			if ('message' in innerError.error) {
+				toast.error(innerError.error.message);
+				errorMessage = innerError.error.message;
+			} else {
+				toast.error(innerError.error);
+				errorMessage = innerError.error;
+			}
+		} else if ('message' in innerError) {
+			toast.error(innerError.message);
+			errorMessage = innerError.message;
+		}
+
+		responseMessage.error = true;
+		responseMessage.content =
+			$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: model.name ?? model.id
+			}) +
+			'\n' +
+			errorMessage;
+		responseMessage.done = true;
+
+		messages = messages;
+	};
+
 	const stopResponse = () => {
 		stopResponseFlag = true;
 		console.log('stopResponse');
@@ -876,7 +893,7 @@
 {#if loaded}
 	<div
 		class="min-h-screen max-h-screen {$showSidebar
-			? 'lg:max-w-[calc(100%-260px)]'
+			? 'md:max-w-[calc(100%-260px)]'
 			: ''} w-full max-w-full flex flex-col"
 	>
 		<Navbar

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

-<script lang="ts">
-	import { toast } from 'svelte-sonner';
-	import fileSaver from 'file-saver';
-	const { saveAs } = fileSaver;
-
-	import { onMount, getContext } from 'svelte';
-	import { WEBUI_NAME, documents } from '$lib/stores';
-	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
-
-	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS } from '$lib/constants';
-	import { uploadDocToVectorDB } from '$lib/apis/rag';
-	import { transformFileName } from '$lib/utils';
-
-	import Checkbox from '$lib/components/common/Checkbox.svelte';
-
-	import EditDocModal from '$lib/components/documents/EditDocModal.svelte';
-	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
-	import SettingsModal from '$lib/components/documents/SettingsModal.svelte';
-	import AddDocModal from '$lib/components/documents/AddDocModal.svelte';
-
-	const i18n = getContext('i18n');
-
-	let importFiles = '';
-
-	let inputFiles = '';
-	let query = '';
-	let documentsImportInputElement: HTMLInputElement;
-	let tags = [];
-
-	let showSettingsModal = false;
-	let showAddDocModal = false;
-	let showEditDocModal = false;
-	let selectedDoc;
-	let selectedTag = '';
-
-	let dragged = false;
-
-	const deleteDoc = async (name) => {
-		await deleteDocByName(localStorage.token, name);
-		await documents.set(await getDocs(localStorage.token));
-	};
-
-	const deleteDocs = async (docs) => {
-		const res = await Promise.all(
-			docs.map(async (doc) => {
-				return await deleteDocByName(localStorage.token, doc.name);
-			})
-		);
-
-		await documents.set(await getDocs(localStorage.token));
-	};
-
-	const uploadDoc = async (file) => {
-		const res = await uploadDocToVectorDB(localStorage.token, '', file).catch((error) => {
-			toast.error(error);
-			return null;
-		});
-
-		if (res) {
-			await createNewDoc(
-				localStorage.token,
-				res.collection_name,
-				res.filename,
-				transformFileName(res.filename),
-				res.filename
-			).catch((error) => {
-				toast.error(error);
-				return null;
-			});
-			await documents.set(await getDocs(localStorage.token));
-		}
-	};
-
-	onMount(() => {
-		documents.subscribe((docs) => {
-			tags = docs.reduce((a, e, i, arr) => {
-				return [...new Set([...a, ...(e?.content?.tags ?? []).map((tag) => tag.name)])];
-			}, []);
-		});
-		const dropZone = document.querySelector('body');
-
-		const onDragOver = (e) => {
-			e.preventDefault();
-			dragged = true;
-		};
-
-		const onDragLeave = () => {
-			dragged = false;
-		};
-
-		const onDrop = async (e) => {
-			e.preventDefault();
-			console.log(e);
-
-			if (e.dataTransfer?.files) {
-				let reader = new FileReader();
-
-				reader.onload = (event) => {
-					files = [
-						...files,
-						{
-							type: 'image',
-							url: `${event.target.result}`
-						}
-					];
-				};
-
-				const inputFiles = e.dataTransfer?.files;
-
-				if (inputFiles && inputFiles.length > 0) {
-					for (const file of inputFiles) {
-						console.log(file, file.name.split('.').at(-1));
-						if (
-							SUPPORTED_FILE_TYPE.includes(file['type']) ||
-							SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
-						) {
-							uploadDoc(file);
-						} else {
-							toast.error(
-								`Unknown File Type '${file['type']}', but accepting and treating as plain text`
-							);
-							uploadDoc(file);
-						}
-					}
-				} else {
-					toast.error($i18n.t(`File not found.`));
-				}
-			}
-
-			dragged = false;
-		};
-
-		dropZone?.addEventListener('dragover', onDragOver);
-		dropZone?.addEventListener('drop', onDrop);
-		dropZone?.addEventListener('dragleave', onDragLeave);
-
-		return () => {
-			dropZone?.removeEventListener('dragover', onDragOver);
-			dropZone?.removeEventListener('drop', onDrop);
-			dropZone?.removeEventListener('dragleave', onDragLeave);
-		};
-	});
-
-	let filteredDocs;
-
-	$: filteredDocs = $documents.filter(
-		(doc) =>
-			(selectedTag === '' ||
-				(doc?.content?.tags ?? []).map((tag) => tag.name).includes(selectedTag)) &&
-			(query === '' || doc.name.includes(query))
-	);
-</script>
-
-<svelte:head>
-	<title>{$i18n.t('Documents')} | {$WEBUI_NAME}</title>
-</svelte:head>
-
-{#if dragged}
-	<div
-		class="fixed w-full h-full flex z-50 touch-none pointer-events-none"
-		id="dropzone"
-		role="region"
-		aria-label="Drag and Drop Container"
-	>
-		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
-			<div class="m-auto pt-64 flex flex-col justify-center">
-				<div class="max-w-md">
-					<AddFilesPlaceholder>
-						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
-							Drop any files here to add to my documents
-						</div>
-					</AddFilesPlaceholder>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
-
-{#key selectedDoc}
-	<EditDocModal bind:show={showEditDocModal} {selectedDoc} />
-{/key}
-
-<AddDocModal bind:show={showAddDocModal} />
-
-<SettingsModal bind:show={showSettingsModal} />
-
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" flex flex-col justify-between w-full overflow-y-auto">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class="mb-6">
-				<div class="flex justify-between items-center">
-					<div class=" text-2xl font-semibold self-center">{$i18n.t('My Documents')}</div>
-
-					<div>
-						<button
-							class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
-							type="button"
-							on:click={() => {
-								showSettingsModal = !showSettingsModal;
-							}}
-						>
-							<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="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-
-							<div class=" text-xs">{$i18n.t('Document Settings')}</div>
-						</button>
-					</div>
-				</div>
-				<div class=" text-gray-500 text-xs mt-1">
-					ⓘ {$i18n.t("Use '#' in the prompt input to load and select your documents.")}
-				</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={$i18n.t('Search Documents')}
-					/>
-				</div>
-
-				<div>
-					<button
-						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
-						on:click={() => {
-							showAddDocModal = true;
-						}}
-					>
-						<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>
-					</button>
-				</div>
-			</div>
-
-			<!-- <div>
-				<div
-					class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600 {dragged &&
-						' dark:bg-gray-700'} "
-					role="region"
-					on:drop={onDrop}
-					on:dragover={onDragOver}
-					on:dragleave={onDragLeave}
-				>
-					<div class="  pointer-events-none">
-						<div class="text-center dark:text-white text-2xl font-semibold z-50">{$i18n.t('Add Files')}</div>
-
-						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
-							Drop any files here to add to my documents
-						</div>
-					</div>
-				</div>
-			</div> -->
-
-			<hr class=" dark:border-gray-700 my-2.5" />
-
-			{#if tags.length > 0}
-				<div class="px-2.5 pt-1 flex gap-1 flex-wrap">
-					<div class="ml-0.5 pr-3 my-auto flex items-center">
-						<Checkbox
-							state={filteredDocs.filter((doc) => doc?.selected === 'checked').length ===
-							filteredDocs.length
-								? 'checked'
-								: 'unchecked'}
-							indeterminate={filteredDocs.filter((doc) => doc?.selected === 'checked').length > 0 &&
-								filteredDocs.filter((doc) => doc?.selected === 'checked').length !==
-									filteredDocs.length}
-							on:change={(e) => {
-								if (e.detail === 'checked') {
-									filteredDocs = filteredDocs.map((doc) => ({ ...doc, selected: 'checked' }));
-								} else if (e.detail === 'unchecked') {
-									filteredDocs = filteredDocs.map((doc) => ({ ...doc, selected: 'unchecked' }));
-								}
-							}}
-						/>
-					</div>
-
-					{#if filteredDocs.filter((doc) => doc?.selected === 'checked').length === 0}
-						<button
-							class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-white"
-							on:click={async () => {
-								selectedTag = '';
-								// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
-							}}
-						>
-							<div class=" text-xs font-medium self-center line-clamp-1">{$i18n.t('all')}</div>
-						</button>
-
-						{#each tags as tag}
-							<button
-								class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-white"
-								on:click={async () => {
-									selectedTag = tag;
-									// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
-								}}
-							>
-								<div class=" text-xs font-medium self-center line-clamp-1">
-									#{tag}
-								</div>
-							</button>
-						{/each}
-					{:else}
-						<div class="flex-1 flex w-full justify-between items-center">
-							<div class="text-xs font-medium py-0.5 self-center mr-1">
-								{filteredDocs.filter((doc) => doc?.selected === 'checked').length} Selected
-							</div>
-
-							<div class="flex gap-1">
-								<!-- <button
-									class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-white"
-									on:click={async () => {
-										selectedTag = '';
-										// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
-									}}
-								>
-									<div class=" text-xs font-medium self-center line-clamp-1">add tags</div>
-								</button> -->
-
-								<button
-									class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-white"
-									on:click={async () => {
-										deleteDocs(filteredDocs.filter((doc) => doc.selected === 'checked'));
-										// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
-									}}
-								>
-									<div class=" text-xs font-medium self-center line-clamp-1">
-										{$i18n.t('delete')}
-									</div>
-								</button>
-							</div>
-						</div>
-					{/if}
-				</div>
-			{/if}
-
-			<div class="my-3 mb-5">
-				{#each filteredDocs as doc}
-					<button
-						class=" flex space-x-4 cursor-pointer text-left w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
-						on:click={() => {
-							if (doc?.selected === 'checked') {
-								doc.selected = 'unchecked';
-							} else {
-								doc.selected = 'checked';
-							}
-						}}
-					>
-						<div class="my-auto flex items-center">
-							<Checkbox state={doc?.selected ?? 'unchecked'} />
-						</div>
-						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-							<div class=" flex items-center space-x-3">
-								<div class="p-2.5 bg-red-400 text-white rounded-lg">
-									{#if doc}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 24 24"
-											fill="currentColor"
-											class="w-6 h-6"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
-												clip-rule="evenodd"
-											/>
-											<path
-												d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
-											/>
-										</svg>
-									{:else}
-										<svg
-											class=" w-6 h-6 translate-y-[0.5px]"
-											fill="currentColor"
-											viewBox="0 0 24 24"
-											xmlns="http://www.w3.org/2000/svg"
-											><style>
-												.spinner_qM83 {
-													animation: spinner_8HQG 1.05s infinite;
-												}
-												.spinner_oXPr {
-													animation-delay: 0.1s;
-												}
-												.spinner_ZTLf {
-													animation-delay: 0.2s;
-												}
-												@keyframes spinner_8HQG {
-													0%,
-													57.14% {
-														animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
-														transform: translate(0);
-													}
-													28.57% {
-														animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
-														transform: translateY(-6px);
-													}
-													100% {
-														transform: translate(0);
-													}
-												}
-											</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
-												class="spinner_qM83 spinner_oXPr"
-												cx="12"
-												cy="12"
-												r="2.5"
-											/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
-										>
-									{/if}
-								</div>
-								<div class=" self-center flex-1">
-									<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
-									<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
-										{doc.title}
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="flex flex-row space-x-1 self-center">
-							<button
-								class="self-center w-fit text-sm z-20 px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={async (e) => {
-									e.stopPropagation();
-									showEditDocModal = !showEditDocModal;
-									selectedDoc = doc;
-								}}
-							>
-								<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 w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-						type="button"
-						on:click={() => {
-							console.log('download file');
-						}}
-					>
-						<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>
-					</button> -->
-
-							<button
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={(e) => {
-									e.stopPropagation();
-
-									deleteDoc(doc.name);
-								}}
-							>
-								<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>
-					</button>
-				{/each}
-			</div>
-
-			<div class=" flex justify-end w-full mb-2">
-				<div class="flex space-x-2">
-					<input
-						id="documents-import-input"
-						bind:this={documentsImportInputElement}
-						bind:files={importFiles}
-						type="file"
-						accept=".json"
-						hidden
-						on:change={() => {
-							console.log(importFiles);
-
-							const reader = new FileReader();
-							reader.onload = async (event) => {
-								const savedDocs = JSON.parse(event.target.result);
-								console.log(savedDocs);
-
-								for (const doc of savedDocs) {
-									await createNewDoc(
-										localStorage.token,
-										doc.collection_name,
-										doc.filename,
-										doc.name,
-										doc.title
-									).catch((error) => {
-										toast.error(error);
-										return null;
-									});
-								}
-
-								await documents.set(await getDocs(localStorage.token));
-							};
-
-							reader.readAsText(importFiles[0]);
-						}}
-					/>
-
-					<button
-						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
-						on:click={() => {
-							documentsImportInputElement.click();
-						}}
-					>
-						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Documents Mapping')}</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="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
-						on:click={async () => {
-							let blob = new Blob([JSON.stringify($documents)], {
-								type: 'application/json'
-							});
-							saveAs(blob, `documents-mapping-export-${Date.now()}.json`);
-						}}
-					>
-						<div class=" self-center mr-2 font-medium">{$i18n.t('Export Documents Mapping')}</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>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

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

-<script lang="ts">
-	import { toast } from 'svelte-sonner';
-	import fileSaver from 'file-saver';
-	const { saveAs } = fileSaver;
-
-	import { onMount, getContext } from 'svelte';
-
-	import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores';
-	import { createModel, deleteModel } from '$lib/apis/ollama';
-	import {
-		createNewModelfile,
-		deleteModelfileByTagName,
-		getModelfiles
-	} from '$lib/apis/modelfiles';
-	import { goto } from '$app/navigation';
-
-	const i18n = getContext('i18n');
-
-	let localModelfiles = [];
-	let importFiles;
-	let modelfilesImportInputElement: HTMLInputElement;
-	const deleteModelHandler = async (tagName) => {
-		let success = null;
-
-		success = await deleteModel(localStorage.token, tagName).catch((err) => {
-			toast.error(err);
-			return null;
-		});
-
-		if (success) {
-			toast.success($i18n.t(`Deleted {{tagName}}`, { tagName }));
-		}
-
-		return success;
-	};
-
-	const deleteModelfile = async (tagName) => {
-		await deleteModelHandler(tagName);
-		await deleteModelfileByTagName(localStorage.token, tagName);
-		await modelfiles.set(await getModelfiles(localStorage.token));
-	};
-
-	const shareModelfile = async (modelfile) => {
-		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
-
-		const url = 'https://openwebui.com';
-
-		const tab = await window.open(`${url}/modelfiles/create`, '_blank');
-		window.addEventListener(
-			'message',
-			(event) => {
-				if (event.origin !== url) return;
-				if (event.data === 'loaded') {
-					tab.postMessage(JSON.stringify(modelfile), '*');
-				}
-			},
-			false
-		);
-	};
-
-	const saveModelfiles = async (modelfiles) => {
-		let blob = new Blob([JSON.stringify(modelfiles)], {
-			type: 'application/json'
-		});
-		saveAs(blob, `modelfiles-export-${Date.now()}.json`);
-	};
-
-	onMount(() => {
-		localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
-
-		if (localModelfiles) {
-			console.log(localModelfiles);
-		}
-	});
-</script>
-
-<svelte:head>
-	<title>
-		{$i18n.t('Modelfiles')} | {$WEBUI_NAME}
-	</title>
-</svelte:head>
-
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class="flex flex-col justify-between w-full overflow-y-auto">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-3">{$i18n.t('My Modelfiles')}</div>
-
-			<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/modelfiles/create">
-				<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">{$i18n.t('Create a modelfile')}</div>
-					<div class=" text-sm">{$i18n.t('Customize Ollama models for a specific purpose')}</div>
-				</div>
-			</a>
-
-			<hr class=" dark:border-gray-700" />
-
-			<div class=" my-2 mb-5">
-				{#each $modelfiles as modelfile}
-					<div
-						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
-					>
-						<a
-							class=" flex flex-1 space-x-4 cursor-pointer w-full"
-							href={`/?models=${encodeURIComponent(modelfile.tagName)}`}
-						>
-							<div class=" self-center w-10">
-								<div class=" rounded-full bg-stone-700">
-									<img
-										src={modelfile.imageUrl ?? '/user.png'}
-										alt="modelfile profile"
-										class=" rounded-full w-full h-auto object-cover"
-									/>
-								</div>
-							</div>
-
-							<div class=" flex-1 self-center">
-								<div class=" font-bold capitalize">{modelfile.title}</div>
-								<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
-									{modelfile.desc}
-								</div>
-							</div>
-						</a>
-						<div class="flex flex-row space-x-1 self-center">
-							<a
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								href={`/modelfiles/edit?tag=${encodeURIComponent(modelfile.tagName)}`}
-							>
-								<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.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
-									/>
-								</svg>
-							</a>
-
-							<button
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={() => {
-									// console.log(modelfile);
-									sessionStorage.modelfile = JSON.stringify(modelfile);
-									goto('/modelfiles/create');
-								}}
-							>
-								<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="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
-									/>
-								</svg>
-							</button>
-
-							<button
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={() => {
-									shareModelfile(modelfile);
-								}}
-							>
-								<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 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"
-									/>
-								</svg>
-							</button>
-
-							<button
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={() => {
-									deleteModelfile(modelfile.tagName);
-								}}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-									/>
-								</svg>
-							</button>
-						</div>
-					</div>
-				{/each}
-			</div>
-
-			<div class=" flex justify-end w-full mb-3">
-				<div class="flex space-x-1">
-					<input
-						id="modelfiles-import-input"
-						bind:this={modelfilesImportInputElement}
-						bind:files={importFiles}
-						type="file"
-						accept=".json"
-						hidden
-						on:change={() => {
-							console.log(importFiles);
-
-							let reader = new FileReader();
-							reader.onload = async (event) => {
-								let savedModelfiles = JSON.parse(event.target.result);
-								console.log(savedModelfiles);
-
-								for (const modelfile of savedModelfiles) {
-									await createNewModelfile(localStorage.token, modelfile).catch((error) => {
-										return null;
-									});
-								}
-
-								await modelfiles.set(await getModelfiles(localStorage.token));
-							};
-
-							reader.readAsText(importFiles[0]);
-						}}
-					/>
-
-					<button
-						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
-						on:click={() => {
-							modelfilesImportInputElement.click();
-						}}
-					>
-						<div class=" self-center mr-2 font-medium">{$i18n.t('Import 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 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="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
-						on:click={async () => {
-							saveModelfiles($modelfiles);
-						}}
-					>
-						<div class=" self-center mr-2 font-medium">{$i18n.t('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}
-					<div class="flex">
-						<div class=" self-center text-sm font-medium mr-4">
-							{localModelfiles.length} Local Modelfiles Detected
-						</div>
-
-						<div class="flex space-x-1">
-							<button
-								class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
-								on:click={async () => {
-									for (const modelfile of localModelfiles) {
-										await createNewModelfile(localStorage.token, modelfile).catch((error) => {
-											return null;
-										});
-									}
-
-									saveModelfiles(localModelfiles);
-									localStorage.removeItem('modelfiles');
-									localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
-									await modelfiles.set(await getModelfiles(localStorage.token));
-								}}
-							>
-								<div class=" self-center mr-2 font-medium">{$i18n.t('Sync All')}</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="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>
-								</div>
-							</button>
-
-							<button
-								class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
-								on:click={async () => {
-									saveModelfiles(localModelfiles);
-
-									localStorage.removeItem('modelfiles');
-									localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
-									await modelfiles.set(await getModelfiles(localStorage.token));
-								}}
-							>
-								<div class=" self-center">
-									<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>
-								</div>
-							</button>
-						</div>
-					</div>
-				{/if}
-			</div>
-
-			<div class=" my-16">
-				<div class=" text-2xl font-semibold mb-3">{$i18n.t('Made by OpenWebUI Community')}</div>
-
-				<a
-					class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
-					href="https://openwebui.com/"
-					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">{$i18n.t('Discover a modelfile')}</div>
-						<div class=" text-sm">{$i18n.t('Discover, download, and explore model presets')}</div>
-					</div>
-				</a>
-			</div>
-		</div>
-	</div>
-</div>

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

-<script lang="ts">
-	import { toast } from 'svelte-sonner';
-	import fileSaver from 'file-saver';
-	const { saveAs } = fileSaver;
-
-	import { onMount, getContext } from 'svelte';
-	import { WEBUI_NAME, prompts } from '$lib/stores';
-	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
-	import { error } from '@sveltejs/kit';
-	import { goto } from '$app/navigation';
-
-	const i18n = getContext('i18n');
-
-	let importFiles = '';
-	let query = '';
-	let promptsImportInputElement: HTMLInputElement;
-	const sharePrompt = async (prompt) => {
-		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
-
-		const url = 'https://openwebui.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>
-
-<svelte:head>
-	<title>
-		{$i18n.t('Prompts')} | {$WEBUI_NAME}
-	</title>
-</svelte:head>
-
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class="flex flex-col justify-between w-full overflow-y-auto">
-		<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">{$i18n.t('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={$i18n.t('Search Prompts')}
-					/>
-				</div>
-
-				<div>
-					<a
-						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 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>
-			<hr class=" dark:border-gray-700 my-2.5" />
-
-			<div class="my-3 mb-5">
-				{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
-					<div
-						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
-					>
-						<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 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 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 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-								type="button"
-								on:click={() => {
-									// console.log(modelfile);
-									sessionStorage.prompt = JSON.stringify(prompt);
-									goto('/prompts/create');
-								}}
-							>
-								<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="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
-									/>
-								</svg>
-							</button>
-
-							<button
-								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 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 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 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}
-			</div>
-
-			<div class=" flex justify-end w-full mb-3">
-				<div class="flex space-x-2">
-					<input
-						id="prompts-import-input"
-						bind:this={promptsImportInputElement}
-						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="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
-						on:click={() => {
-							promptsImportInputElement.click();
-						}}
-					>
-						<div class=" self-center mr-2 font-medium">{$i18n.t('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="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
-						on:click={async () => {
-							// promptsImportInputElement.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">{$i18n.t('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-3">{$i18n.t('Made by OpenWebUI Community')}</div>
-
-				<a
-					class=" flex space-x-4 cursor-pointer w-full mb-3 px-3 py-2"
-					href="https://openwebui.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">{$i18n.t('Discover a prompt')}</div>
-						<div class=" text-sm">{$i18n.t('Discover, download, and explore custom prompts')}</div>
-					</div>
-				</a>
-			</div>
-		</div>
-	</div>
-</div>

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

-<script>
-	import { toast } from 'svelte-sonner';
-
-	import { goto } from '$app/navigation';
-	import { prompts } from '$lib/stores';
-	import { onMount, tick, getContext } from 'svelte';
-
-	const i18n = getContext('i18n');
-
-	import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
-	import { page } from '$app/stores';
-
-	let loading = false;
-
-	// ///////////
-	// Prompt
-	// ///////////
-
-	let title = '';
-	let command = '';
-	let content = '';
-
-	const updateHandler = async () => {
-		loading = true;
-
-		if (validateCommandString(command)) {
-			const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
-				(error) => {
-					toast.error(error);
-					return null;
-				}
-			);
-
-			if (prompt) {
-				await prompts.set(await getPrompts(localStorage.token));
-				await goto('/prompts');
-			}
-		} else {
-			toast.error(
-				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
-			);
-		}
-
-		loading = false;
-	};
-
-	const validateCommandString = (inputString) => {
-		// Regular expression to match only alphanumeric characters and hyphen
-		const regex = /^[a-zA-Z0-9-]+$/;
-
-		// Test the input string against the regular expression
-		return regex.test(inputString);
-	};
-
-	onMount(async () => {
-		command = $page.url.searchParams.get('command');
-		if (command) {
-			const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
-
-			if (prompt) {
-				console.log(prompt);
-
-				console.log(prompt.command);
-
-				title = prompt.title;
-				await tick();
-				command = prompt.command.slice(1);
-				content = prompt.content;
-			} else {
-				goto('/prompts');
-			}
-		} else {
-			goto('/prompts');
-		}
-	});
-</script>
-
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class="flex flex-col justify-between w-full overflow-y-auto">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
-
-			<button
-				class="flex space-x-1"
-				on:click={() => {
-					history.back();
-				}}
-			>
-				<div class=" self-center">
-					<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-			</button>
-			<hr class="my-3 dark:border-gray-700" />
-
-			<form
-				class="flex flex-col"
-				on:submit|preventDefault={() => {
-					updateHandler();
-				}}
-			>
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
-
-					<div>
-						<input
-							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder={$i18n.t('Add a short title for this prompt')}
-							bind:value={title}
-							required
-						/>
-					</div>
-				</div>
-
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
-
-					<div class="flex items-center mb-1">
-						<div
-							class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
-						>
-							/
-						</div>
-						<input
-							class="px-3 py-1.5 text-sm w-full bg-transparent border disabled:text-gray-500 dark:border-gray-600 outline-none rounded-r-lg"
-							placeholder="short-summary"
-							bind:value={command}
-							disabled
-							required
-						/>
-					</div>
-
-					<div class="text-xs text-gray-400 dark:text-gray-500">
-						{$i18n.t('Only')}
-						<span class=" text-gray-600 dark:text-gray-300 font-medium"
-							>{$i18n.t('alphanumeric characters and hyphens')}</span
-						>
-						{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
-							class=" text-gray-600 dark:text-gray-300 font-medium"
-						>
-							/{command}
-						</span>" &nbsp;
-						{$i18n.t('to chat input.')}
-					</div>
-				</div>
-
-				<div class="my-2">
-					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
-					</div>
-
-					<div class="mt-2">
-						<div>
-							<textarea
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={$i18n.t(
-									`Write a summary in 50 words that summarizes [topic or keyword].`
-								)}
-								rows="6"
-								bind:value={content}
-								required
-							/>
-						</div>
-
-						<div class="text-xs text-gray-400 dark:text-gray-500">
-							ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
-								class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
-							>.
-							{$i18n.t('Make sure to enclose them with')}
-							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
-							{$i18n.t('and')}
-							<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
-						</div>
-
-						<div class="text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
-								{` {{CLIPBOARD}}`}</span
-							>
-							{$i18n.t('variable to have them replaced with clipboard content.')}
-						</div>
-					</div>
-				</div>
-
-				<div class="my-2 flex justify-end">
-					<button
-						class=" text-sm px-3 py-2 transition rounded-xl {loading
-							? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
-							: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
-						type="submit"
-						disabled={loading}
-					>
-						<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
-
-						{#if loading}
-							<div class="ml-1.5 self-center">
-								<svg
-									class=" w-4 h-4"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									xmlns="http://www.w3.org/2000/svg"
-									><style>
-										.spinner_ajPY {
-											transform-origin: center;
-											animation: spinner_AtaB 0.75s infinite linear;
-										}
-										@keyframes spinner_AtaB {
-											100% {
-												transform: rotate(360deg);
-											}
-										}
-									</style><path
-										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-										opacity=".25"
-									/><path
-										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-										class="spinner_ajPY"
-									/></svg
-								>
-							</div>
-						{/if}
-					</button>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>

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

+<script lang="ts">
+	import { onMount, getContext } from 'svelte';
+
+	import { WEBUI_NAME, showSidebar } from '$lib/stores';
+	import MenuLines from '$lib/components/icons/MenuLines.svelte';
+	import { page } from '$app/stores';
+
+	const i18n = getContext('i18n');
+</script>
+
+<svelte:head>
+	<title>
+		{$i18n.t('Workspace')} | {$WEBUI_NAME}
+	</title>
+</svelte:head>
+
+<div class=" flex flex-col w-full min-h-screen max-h-screen">
+	<div class=" px-4 pt-3 mt-0.5 mb-1">
+		<div class=" flex items-center gap-1">
+			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
+				<button
+					id="sidebar-toggle-button"
+					class="cursor-pointer p-1 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+					on:click={() => {
+						showSidebar.set(!$showSidebar);
+					}}
+				>
+					<div class=" m-auto self-center">
+						<MenuLines />
+					</div>
+				</button>
+			</div>
+			<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
+		</div>
+	</div>
+
+	<div class="px-4 my-1">
+		<div
+			class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
+		>
+			<a
+				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/modelfiles')
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				href="/workspace/modelfiles">{$i18n.t('Modelfiles')}</a
+			>
+
+			<a
+				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/prompts')
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				href="/workspace/prompts">{$i18n.t('Prompts')}</a
+			>
+
+			<a
+				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/documents')
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				href="/workspace/documents"
+			>
+				{$i18n.t('Documents')}
+			</a>
+
+			<a
+				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/playground')
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				href="/workspace/playground">{$i18n.t('Playground')}</a
+			>
+		</div>
+	</div>
+
+	<hr class=" my-2 dark:border-gray-850" />
+
+	<div class=" py-1 px-5 flex-1 max-h-full overflow-y-auto">
+		<slot />
+	</div>
+</div>

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

+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		goto('/workspace/modelfiles');
+	});
+</script>

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

+<script>
+	import Documents from '$lib/components/workspace/Documents.svelte';
+</script>
+
+<Documents />

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

+<script>
+	import Modelfiles from '$lib/components/workspace/Modelfiles.svelte';
+</script>
+
+<Modelfiles />

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

@@ -204,7 +204,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 					categories: Object.keys(categories).filter((category) => categories[category]),
 					user: modelfileCreator !== null ? modelfileCreator : undefined
 				});
-				await goto('/modelfiles');
+				await goto('/workspace/modelfiles');
 			}
 		}
 		loading = false;
@@ -283,328 +283,353 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 	});
 </script>
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" flex flex-col justify-between w-full overflow-y-auto">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<input
-				bind:this={filesInputElement}
-				bind:files={inputFiles}
-				type="file"
-				hidden
-				accept="image/*"
-				on:change={() => {
-					let reader = new FileReader();
-					reader.onload = (event) => {
-						let originalImageUrl = `${event.target.result}`;
-
-						const img = new Image();
-						img.src = originalImageUrl;
-
-						img.onload = function () {
-							const canvas = document.createElement('canvas');
-							const ctx = canvas.getContext('2d');
-
-							// Calculate the aspect ratio of the image
-							const aspectRatio = img.width / img.height;
-
-							// Calculate the new width and height to fit within 100x100
-							let newWidth, newHeight;
-							if (aspectRatio > 1) {
-								newWidth = 100 * aspectRatio;
-								newHeight = 100;
-							} else {
-								newWidth = 100;
-								newHeight = 100 / aspectRatio;
-							}
-
-							// Set the canvas size
-							canvas.width = 100;
-							canvas.height = 100;
-
-							// Calculate the position to center the image
-							const offsetX = (100 - newWidth) / 2;
-							const offsetY = (100 - newHeight) / 2;
+<div class="w-full max-h-full">
+	<input
+		bind:this={filesInputElement}
+		bind:files={inputFiles}
+		type="file"
+		hidden
+		accept="image/*"
+		on:change={() => {
+			let reader = new FileReader();
+			reader.onload = (event) => {
+				let originalImageUrl = `${event.target.result}`;
+
+				const img = new Image();
+				img.src = originalImageUrl;
+
+				img.onload = function () {
+					const canvas = document.createElement('canvas');
+					const ctx = canvas.getContext('2d');
+
+					// Calculate the aspect ratio of the image
+					const aspectRatio = img.width / img.height;
+
+					// Calculate the new width and height to fit within 100x100
+					let newWidth, newHeight;
+					if (aspectRatio > 1) {
+						newWidth = 100 * aspectRatio;
+						newHeight = 100;
+					} else {
+						newWidth = 100;
+						newHeight = 100 / aspectRatio;
+					}
 
-							// Draw the image on the canvas
-							ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
+					// Set the canvas size
+					canvas.width = 100;
+					canvas.height = 100;
 
-							// Get the base64 representation of the compressed image
-							const compressedSrc = canvas.toDataURL('image/jpeg');
+					// Calculate the position to center the image
+					const offsetX = (100 - newWidth) / 2;
+					const offsetY = (100 - newHeight) / 2;
 
-							// Display the compressed image
-							imageUrl = compressedSrc;
+					// Draw the image on the canvas
+					ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
 
-							inputFiles = null;
-						};
-					};
+					// Get the base64 representation of the compressed image
+					const compressedSrc = canvas.toDataURL('image/jpeg');
 
-					if (
-						inputFiles &&
-						inputFiles.length > 0 &&
-						['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type'])
-					) {
-						reader.readAsDataURL(inputFiles[0]);
-					} else {
-						console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
-						inputFiles = null;
-					}
-				}}
-			/>
+					// Display the compressed image
+					imageUrl = compressedSrc;
 
-			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Modelfiles')}</div>
+					inputFiles = null;
+				};
+			};
 
-			<button
-				class="flex space-x-1"
-				on:click={() => {
-					history.back();
-				}}
+			if (
+				inputFiles &&
+				inputFiles.length > 0 &&
+				['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type'])
+			) {
+				reader.readAsDataURL(inputFiles[0]);
+			} else {
+				console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
+				inputFiles = null;
+			}
+		}}
+	/>
+
+	<button
+		class="flex space-x-1"
+		on:click={() => {
+			history.back();
+		}}
+	>
+		<div class=" self-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
-				<div class=" self-center">
-					<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-							clip-rule="evenodd"
+				<path
+					fill-rule="evenodd"
+					d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</div>
+		<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
+	</button>
+	<!-- <hr class="my-3 dark:border-gray-700" /> -->
+
+	<form
+		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
+		on:submit|preventDefault={() => {
+			submitHandler();
+		}}
+	>
+		<div class="flex justify-center my-4">
+			<div class="self-center">
+				<button
+					class=" {imageUrl
+						? ''
+						: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
+					type="button"
+					on:click={() => {
+						filesInputElement.click();
+					}}
+				>
+					{#if imageUrl}
+						<img
+							src={imageUrl}
+							alt="modelfile profile"
+							class=" rounded-full w-20 h-20 object-cover"
 						/>
-					</svg>
-				</div>
-				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-			</button>
-			<hr class="my-3 dark:border-gray-700" />
-
-			<form
-				class="flex flex-col"
-				on:submit|preventDefault={() => {
-					submitHandler();
-				}}
-			>
-				<div class="flex justify-center my-4">
-					<div class="self-center">
-						<button
-							class=" {imageUrl
-								? ''
-								: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
-							type="button"
-							on:click={() => {
-								filesInputElement.click();
-							}}
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							class="w-8"
 						>
-							{#if imageUrl}
-								<img
-									src={imageUrl}
-									alt="modelfile profile"
-									class=" rounded-full w-20 h-20 object-cover"
-								/>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									class="w-8"
-								>
-									<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>
-							{/if}
-						</button>
-					</div>
-				</div>
+							<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>
+					{/if}
+				</button>
+			</div>
+		</div>
 
-				<div class="my-2 flex space-x-2">
-					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
+		<div class="my-2 flex space-x-2">
+			<div class="flex-1">
+				<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
+
+				<div>
+					<input
+						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={$i18n.t('Name your modelfile')}
+						bind:value={title}
+						required
+					/>
+				</div>
+			</div>
+
+			<div class="flex-1">
+				<div class=" text-sm font-semibold mb-2">{$i18n.t('Model Tag Name')}*</div>
+
+				<div>
+					<input
+						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={$i18n.t('Add a model tag name')}
+						bind:value={tagName}
+						required
+					/>
+				</div>
+			</div>
+		</div>
 
-						<div>
-							<input
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={$i18n.t('Name your modelfile')}
-								bind:value={title}
-								required
-							/>
-						</div>
-					</div>
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}*</div>
+
+			<div>
+				<input
+					class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+					placeholder={$i18n.t('Add a short description about what this modelfile does')}
+					bind:value={desc}
+					required
+				/>
+			</div>
+		</div>
 
-					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">{$i18n.t('Model Tag Name')}*</div>
+		<div class="my-2">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Modelfile')}</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					type="button"
+					on:click={() => {
+						raw = !raw;
+					}}
+				>
+					{#if raw}
+						<span class="ml-2 self-center"> {$i18n.t('Raw Format')} </span>
+					{:else}
+						<span class="ml-2 self-center"> {$i18n.t('Builder Mode')} </span>
+					{/if}
+				</button>
+			</div>
 
-						<div>
-							<input
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={$i18n.t('Add a model tag name')}
-								bind:value={tagName}
-								required
-							/>
-						</div>
-					</div>
-				</div>
+			<!-- <div class=" text-sm font-semibold mb-2"></div> -->
 
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}*</div>
+			{#if raw}
+				<div class="mt-2">
+					<div class=" text-xs font-semibold mb-2">{$i18n.t('Content')}*</div>
 
 					<div>
-						<input
+						<textarea
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder={$i18n.t('Add a short description about what this modelfile does')}
-							bind:value={desc}
+							placeholder={`FROM llama2\nPARAMETER temperature 1\nSYSTEM """\nYou are Mario from Super Mario Bros, acting as an assistant.\n"""`}
+							rows="6"
+							bind:value={content}
 							required
 						/>
 					</div>
-				</div>
-
-				<div class="my-2">
-					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">{$i18n.t('Modelfile')}</div>
 
+					<div class="text-xs text-gray-400 dark:text-gray-500">
+						{$i18n.t('Not sure what to write? Switch to')}
 						<button
-							class="p-1 px-3 text-xs flex rounded transition"
+							class="text-gray-500 dark:text-gray-300 font-medium cursor-pointer"
 							type="button"
 							on:click={() => {
 								raw = !raw;
-							}}
+							}}>{$i18n.t('Builder Mode')}</button
 						>
-							{#if raw}
-								<span class="ml-2 self-center"> {$i18n.t('Raw Format')} </span>
-							{:else}
-								<span class="ml-2 self-center"> {$i18n.t('Builder Mode')} </span>
-							{/if}
-						</button>
+						or
+						<a
+							class=" text-gray-500 dark:text-gray-300 font-medium"
+							href="https://openwebui.com"
+							target="_blank"
+						>
+							{$i18n.t('Click here to check other modelfiles.')}
+						</a>
 					</div>
+				</div>
+			{:else}
+				<div class="my-2">
+					<div class=" text-xs font-semibold mb-2">{$i18n.t('From (Base Model)')}*</div>
 
-					<!-- <div class=" text-sm font-semibold mb-2"></div> -->
+					<div>
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+							placeholder="Write a modelfile base model name (e.g. llama2, mistral)"
+							bind:value={model}
+							required
+						/>
+					</div>
 
-					{#if raw}
-						<div class="mt-2">
-							<div class=" text-xs font-semibold mb-2">{$i18n.t('Content')}*</div>
-
-							<div>
-								<textarea
-									class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-									placeholder={`FROM llama2\nPARAMETER temperature 1\nSYSTEM """\nYou are Mario from Super Mario Bros, acting as an assistant.\n"""`}
-									rows="6"
-									bind:value={content}
-									required
-								/>
-							</div>
-
-							<div class="text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t('Not sure what to write? Switch to')}
-								<button
-									class="text-gray-500 dark:text-gray-300 font-medium cursor-pointer"
-									type="button"
-									on:click={() => {
-										raw = !raw;
-									}}>{$i18n.t('Builder Mode')}</button
-								>
-								or
-								<a
-									class=" text-gray-500 dark:text-gray-300 font-medium"
-									href="https://openwebui.com"
-									target="_blank"
-								>
-									{$i18n.t('Click here to check other modelfiles.')}
-								</a>
-							</div>
-						</div>
-					{:else}
-						<div class="my-2">
-							<div class=" text-xs font-semibold mb-2">{$i18n.t('From (Base Model)')}*</div>
-
-							<div>
-								<input
-									class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-									placeholder="Write a modelfile base model name (e.g. llama2, mistral)"
-									bind:value={model}
-									required
-								/>
-							</div>
-
-							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-								{$i18n.t('To access the available model names for downloading,')}
-								<a
-									class=" text-gray-500 dark:text-gray-300 font-medium"
-									href="https://ollama.com/library"
-									target="_blank">{$i18n.t('click here.')}</a
-								>
-							</div>
-						</div>
+					<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
+						{$i18n.t('To access the available model names for downloading,')}
+						<a
+							class=" text-gray-500 dark:text-gray-300 font-medium"
+							href="https://ollama.com/library"
+							target="_blank">{$i18n.t('click here.')}</a
+						>
+					</div>
+				</div>
 
-						<div class="my-1">
-							<div class=" text-xs font-semibold mb-2">{$i18n.t('System Prompt')}</div>
+				<div class="my-1">
+					<div class=" text-xs font-semibold mb-2">{$i18n.t('System Prompt')}</div>
 
-							<div>
-								<textarea
-									class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
-									placeholder={`Write your modelfile system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.`}
-									rows="4"
-									bind:value={system}
-								/>
-							</div>
-						</div>
+					<div>
+						<textarea
+							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
+							placeholder={`Write your modelfile system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.`}
+							rows="4"
+							bind:value={system}
+						/>
+					</div>
+				</div>
 
-						<div class="flex w-full justify-between">
-							<div class=" self-center text-sm font-semibold">
-								{$i18n.t('Modelfile Advanced Settings')}
-							</div>
-
-							<button
-								class="p-1 px-3 text-xs flex rounded transition"
-								type="button"
-								on:click={() => {
-									advanced = !advanced;
-								}}
-							>
-								{#if advanced}
-									<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
-								{:else}
-									<span class="ml-2 self-center">{$i18n.t('Default')}</span>
-								{/if}
-							</button>
-						</div>
+				<div class="flex w-full justify-between">
+					<div class=" self-center text-sm font-semibold">
+						{$i18n.t('Modelfile Advanced Settings')}
+					</div>
 
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						type="button"
+						on:click={() => {
+							advanced = !advanced;
+						}}
+					>
 						{#if advanced}
-							<div class="my-2">
-								<div class=" text-xs font-semibold mb-2">{$i18n.t('Template')}</div>
-
-								<div>
-									<textarea
-										class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
-										placeholder="Write your modelfile template content here"
-										rows="4"
-										bind:value={template}
-									/>
-								</div>
-							</div>
-
-							<div class="my-2">
-								<div class=" text-xs font-semibold mb-2">{$i18n.t('Parameters')}</div>
-
-								<div>
-									<AdvancedParams bind:options />
-								</div>
-							</div>
+							<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 						{/if}
-					{/if}
+					</button>
 				</div>
 
-				<div class="my-2">
-					<div class="flex w-full justify-between mb-2">
-						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
+				{#if advanced}
+					<div class="my-2">
+						<div class=" text-xs font-semibold mb-2">{$i18n.t('Template')}</div>
+
+						<div>
+							<textarea
+								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
+								placeholder="Write your modelfile template content here"
+								rows="4"
+								bind:value={template}
+							/>
+						</div>
+					</div>
+
+					<div class="my-2">
+						<div class=" text-xs font-semibold mb-2">{$i18n.t('Parameters')}</div>
+
+						<div>
+							<AdvancedParams bind:options />
+						</div>
+					</div>
+				{/if}
+			{/if}
+		</div>
+
+		<div class="my-2">
+			<div class="flex w-full justify-between mb-2">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					type="button"
+					on:click={() => {
+						if (suggestions.length === 0 || suggestions.at(-1).content !== '') {
+							suggestions = [...suggestions, { content: '' }];
+						}
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="w-4 h-4"
+					>
+						<path
+							d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+						/>
+					</svg>
+				</button>
+			</div>
+			<div class="flex flex-col space-y-1">
+				{#each suggestions as prompt, promptIdx}
+					<div class=" flex border dark:border-gray-600 rounded-lg">
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
+							placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
+							bind:value={prompt.content}
+						/>
 
 						<button
-							class="p-1 px-3 text-xs flex rounded transition"
+							class="px-2"
 							type="button"
 							on:click={() => {
-								if (suggestions.length === 0 || suggestions.at(-1).content !== '') {
-									suggestions = [...suggestions, { content: '' }];
-								}
+								suggestions.splice(promptIdx, 1);
+								suggestions = suggestions;
 							}}
 						>
 							<svg
@@ -614,114 +639,83 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 								class="w-4 h-4"
 							>
 								<path
-									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+									d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
 								/>
 							</svg>
 						</button>
 					</div>
-					<div class="flex flex-col space-y-1">
-						{#each suggestions as prompt, promptIdx}
-							<div class=" flex border dark:border-gray-600 rounded-lg">
-								<input
-									class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
-									placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
-									bind:value={prompt.content}
-								/>
+				{/each}
+			</div>
+		</div>
+
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Categories')}</div>
 
-								<button
-									class="px-2"
-									type="button"
-									on:click={() => {
-										suggestions.splice(promptIdx, 1);
-										suggestions = suggestions;
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-										/>
-									</svg>
-								</button>
-							</div>
-						{/each}
+			<div class="grid grid-cols-4">
+				{#each Object.keys(categories) as category}
+					<div class="flex space-x-2 text-sm">
+						<input type="checkbox" bind:checked={categories[category]} />
+						<div class="capitalize">{category}</div>
 					</div>
-				</div>
+				{/each}
+			</div>
+		</div>
 
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Categories')}</div>
-
-					<div class="grid grid-cols-4">
-						{#each Object.keys(categories) as category}
-							<div class="flex space-x-2 text-sm">
-								<input type="checkbox" bind:checked={categories[category]} />
-								<div class="capitalize">{category}</div>
-							</div>
-						{/each}
+		{#if pullProgress !== null}
+			<div class="my-2">
+				<div class=" text-sm font-semibold mb-2">{$i18n.t('Pull Progress')}</div>
+				<div class="w-full rounded-full dark:bg-gray-800">
+					<div
+						class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
+						style="width: {Math.max(15, pullProgress ?? 0)}%"
+					>
+						{pullProgress ?? 0}%
 					</div>
 				</div>
+				<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
+					{digest}
+				</div>
+			</div>
+		{/if}
 
-				{#if pullProgress !== null}
-					<div class="my-2">
-						<div class=" text-sm font-semibold mb-2">{$i18n.t('Pull Progress')}</div>
-						<div class="w-full rounded-full dark:bg-gray-800">
-							<div
-								class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
-								style="width: {Math.max(15, pullProgress ?? 0)}%"
-							>
-								{pullProgress ?? 0}%
-							</div>
-						</div>
-						<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
-							{digest}
-						</div>
+		<div class="my-2 flex justify-end">
+			<button
+				class=" text-sm px-3 py-2 transition rounded-xl {loading
+					? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
+					: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
+				type="submit"
+				disabled={loading}
+			>
+				<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
+
+				{#if loading}
+					<div class="ml-1.5 self-center">
+						<svg
+							class=" w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							><style>
+								.spinner_ajPY {
+									transform-origin: center;
+									animation: spinner_AtaB 0.75s infinite linear;
+								}
+								@keyframes spinner_AtaB {
+									100% {
+										transform: rotate(360deg);
+									}
+								}
+							</style><path
+								d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+								opacity=".25"
+							/><path
+								d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+								class="spinner_ajPY"
+							/></svg
+						>
 					</div>
 				{/if}
-
-				<div class="my-2 flex justify-end">
-					<button
-						class=" text-sm px-3 py-2 transition rounded-xl {loading
-							? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
-							: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
-						type="submit"
-						disabled={loading}
-					>
-						<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
-
-						{#if loading}
-							<div class="ml-1.5 self-center">
-								<svg
-									class=" w-4 h-4"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									xmlns="http://www.w3.org/2000/svg"
-									><style>
-										.spinner_ajPY {
-											transform-origin: center;
-											animation: spinner_AtaB 0.75s infinite linear;
-										}
-										@keyframes spinner_AtaB {
-											100% {
-												transform: rotate(360deg);
-											}
-										}
-									</style><path
-										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-										opacity=".25"
-									/><path
-										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-										class="spinner_ajPY"
-									/></svg
-								>
-							</div>
-						{/if}
-					</button>
-				</div>
-			</form>
+			</button>
 		</div>
-	</div>
+	</form>
 </div>

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

@@ -80,7 +80,7 @@
 				categories[category.toLowerCase()] = true;
 			}
 		} else {
-			goto('/modelfiles');
+			goto('/workspace/modelfiles');
 		}
 	});
 
@@ -174,7 +174,7 @@
 					suggestionPrompts: suggestions.filter((prompt) => prompt.content !== ''),
 					categories: Object.keys(categories).filter((category) => categories[category])
 				});
-				await goto('/modelfiles');
+				await goto('/workspace/modelfiles');
 			}
 		}
 		loading = false;
@@ -182,216 +182,239 @@
 	};
 </script>
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class="flex flex-col justify-between w-full overflow-y-auto">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<input
-				bind:this={filesInputElement}
-				bind:files={inputFiles}
-				type="file"
-				hidden
-				accept="image/*"
-				on:change={() => {
-					let reader = new FileReader();
-					reader.onload = (event) => {
-						let originalImageUrl = `${event.target.result}`;
-
-						const img = new Image();
-						img.src = originalImageUrl;
-
-						img.onload = function () {
-							const canvas = document.createElement('canvas');
-							const ctx = canvas.getContext('2d');
-
-							// Calculate the aspect ratio of the image
-							const aspectRatio = img.width / img.height;
-
-							// Calculate the new width and height to fit within 100x100
-							let newWidth, newHeight;
-							if (aspectRatio > 1) {
-								newWidth = 100 * aspectRatio;
-								newHeight = 100;
-							} else {
-								newWidth = 100;
-								newHeight = 100 / aspectRatio;
-							}
-
-							// Set the canvas size
-							canvas.width = 100;
-							canvas.height = 100;
+<div class="w-full max-h-full">
+	<input
+		bind:this={filesInputElement}
+		bind:files={inputFiles}
+		type="file"
+		hidden
+		accept="image/*"
+		on:change={() => {
+			let reader = new FileReader();
+			reader.onload = (event) => {
+				let originalImageUrl = `${event.target.result}`;
+
+				const img = new Image();
+				img.src = originalImageUrl;
+
+				img.onload = function () {
+					const canvas = document.createElement('canvas');
+					const ctx = canvas.getContext('2d');
+
+					// Calculate the aspect ratio of the image
+					const aspectRatio = img.width / img.height;
+
+					// Calculate the new width and height to fit within 100x100
+					let newWidth, newHeight;
+					if (aspectRatio > 1) {
+						newWidth = 100 * aspectRatio;
+						newHeight = 100;
+					} else {
+						newWidth = 100;
+						newHeight = 100 / aspectRatio;
+					}
 
-							// Calculate the position to center the image
-							const offsetX = (100 - newWidth) / 2;
-							const offsetY = (100 - newHeight) / 2;
+					// Set the canvas size
+					canvas.width = 100;
+					canvas.height = 100;
 
-							// Draw the image on the canvas
-							ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
+					// Calculate the position to center the image
+					const offsetX = (100 - newWidth) / 2;
+					const offsetY = (100 - newHeight) / 2;
 
-							// Get the base64 representation of the compressed image
-							const compressedSrc = canvas.toDataURL('image/jpeg');
+					// Draw the image on the canvas
+					ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
 
-							// Display the compressed image
-							imageUrl = compressedSrc;
+					// Get the base64 representation of the compressed image
+					const compressedSrc = canvas.toDataURL('image/jpeg');
 
-							inputFiles = null;
-						};
-					};
+					// Display the compressed image
+					imageUrl = compressedSrc;
 
-					if (
-						inputFiles &&
-						inputFiles.length > 0 &&
-						['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type'])
-					) {
-						reader.readAsDataURL(inputFiles[0]);
-					} else {
-						console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
-						inputFiles = null;
-					}
-				}}
-			/>
+					inputFiles = null;
+				};
+			};
 
-			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Modelfiles')}</div>
-
-			<button
-				class="flex space-x-1"
-				on:click={() => {
-					history.back();
-				}}
+			if (
+				inputFiles &&
+				inputFiles.length > 0 &&
+				['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type'])
+			) {
+				reader.readAsDataURL(inputFiles[0]);
+			} else {
+				console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
+				inputFiles = null;
+			}
+		}}
+	/>
+
+	<button
+		class="flex space-x-1"
+		on:click={() => {
+			history.back();
+		}}
+	>
+		<div class=" self-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
-				<div class=" self-center">
-					<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-							clip-rule="evenodd"
+				<path
+					fill-rule="evenodd"
+					d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</div>
+		<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
+	</button>
+	<form
+		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
+		on:submit|preventDefault={() => {
+			updateHandler();
+		}}
+	>
+		<div class="flex justify-center my-4">
+			<div class="self-center">
+				<button
+					class=" {imageUrl
+						? ''
+						: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
+					type="button"
+					on:click={() => {
+						filesInputElement.click();
+					}}
+				>
+					{#if imageUrl}
+						<img
+							src={imageUrl}
+							alt="modelfile profile"
+							class=" rounded-full w-20 h-20 object-cover"
 						/>
-					</svg>
-				</div>
-				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-			</button>
-			<hr class="my-3 dark:border-gray-700" />
-
-			<form
-				class="flex flex-col"
-				on:submit|preventDefault={() => {
-					updateHandler();
-				}}
-			>
-				<div class="flex justify-center my-4">
-					<div class="self-center">
-						<button
-							class=" {imageUrl
-								? ''
-								: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
-							type="button"
-							on:click={() => {
-								filesInputElement.click();
-							}}
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							class="w-8"
 						>
-							{#if imageUrl}
-								<img
-									src={imageUrl}
-									alt="modelfile profile"
-									class=" rounded-full w-20 h-20 object-cover"
-								/>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									class="w-8"
-								>
-									<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>
-							{/if}
-						</button>
-					</div>
-				</div>
-
-				<div class="my-2 flex space-x-2">
-					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
-
-						<div>
-							<input
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={$i18n.t('Name your modelfile')}
-								bind:value={title}
-								required
+							<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"
 							/>
-						</div>
-					</div>
-
-					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">{$i18n.t('Model Tag Name')}*</div>
+						</svg>
+					{/if}
+				</button>
+			</div>
+		</div>
 
-						<div>
-							<input
-								class="px-3 py-1.5 text-sm w-full bg-transparent disabled:text-gray-500 border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={$i18n.t('Add a model tag name')}
-								value={tagName}
-								disabled
-								required
-							/>
-						</div>
-					</div>
+		<div class="my-2 flex space-x-2">
+			<div class="flex-1">
+				<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
+
+				<div>
+					<input
+						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={$i18n.t('Name your modelfile')}
+						bind:value={title}
+						required
+					/>
 				</div>
-
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}*</div>
-
-					<div>
-						<input
-							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder={$i18n.t('Add a short description about what this modelfile does')}
-							bind:value={desc}
-							required
-						/>
-					</div>
+			</div>
+
+			<div class="flex-1">
+				<div class=" text-sm font-semibold mb-2">{$i18n.t('Model Tag Name')}*</div>
+
+				<div>
+					<input
+						class="px-3 py-1.5 text-sm w-full bg-transparent disabled:text-gray-500 border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={$i18n.t('Add a model tag name')}
+						value={tagName}
+						disabled
+						required
+					/>
 				</div>
+			</div>
+		</div>
 
-				<div class="my-2">
-					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">{$i18n.t('Modelfile')}</div>
-					</div>
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}*</div>
+
+			<div>
+				<input
+					class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+					placeholder={$i18n.t('Add a short description about what this modelfile does')}
+					bind:value={desc}
+					required
+				/>
+			</div>
+		</div>
 
-					<!-- <div class=" text-sm font-semibold mb-2"></div> -->
+		<div class="my-2">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Modelfile')}</div>
+			</div>
 
-					<div class="mt-2">
-						<div class=" text-xs font-semibold mb-2">{$i18n.t('Content')}*</div>
+			<!-- <div class=" text-sm font-semibold mb-2"></div> -->
 
-						<div>
-							<textarea
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={`FROM llama2\nPARAMETER temperature 1\nSYSTEM """\nYou are Mario from Super Mario Bros, acting as an assistant.\n"""`}
-								rows="6"
-								bind:value={content}
-								required
-							/>
-						</div>
-					</div>
+			<div class="mt-2">
+				<div class=" text-xs font-semibold mb-2">{$i18n.t('Content')}*</div>
+
+				<div>
+					<textarea
+						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={`FROM llama2\nPARAMETER temperature 1\nSYSTEM """\nYou are Mario from Super Mario Bros, acting as an assistant.\n"""`}
+						rows="6"
+						bind:value={content}
+						required
+					/>
 				</div>
+			</div>
+		</div>
 
-				<div class="my-2">
-					<div class="flex w-full justify-between mb-2">
-						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
+		<div class="my-2">
+			<div class="flex w-full justify-between mb-2">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					type="button"
+					on:click={() => {
+						if (suggestions.length === 0 || suggestions.at(-1).content !== '') {
+							suggestions = [...suggestions, { content: '' }];
+						}
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="w-4 h-4"
+					>
+						<path
+							d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+						/>
+					</svg>
+				</button>
+			</div>
+			<div class="flex flex-col space-y-1">
+				{#each suggestions as prompt, promptIdx}
+					<div class=" flex border dark:border-gray-600 rounded-lg">
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
+							placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
+							bind:value={prompt.content}
+						/>
 
 						<button
-							class="p-1 px-3 text-xs flex rounded transition"
+							class="px-2"
 							type="button"
 							on:click={() => {
-								if (suggestions.length === 0 || suggestions.at(-1).content !== '') {
-									suggestions = [...suggestions, { content: '' }];
-								}
+								suggestions.splice(promptIdx, 1);
+								suggestions = suggestions;
 							}}
 						>
 							<svg
@@ -401,115 +424,84 @@
 								class="w-4 h-4"
 							>
 								<path
-									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+									d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
 								/>
 							</svg>
 						</button>
 					</div>
-					<div class="flex flex-col space-y-1">
-						{#each suggestions as prompt, promptIdx}
-							<div class=" flex border dark:border-gray-600 rounded-lg">
-								<input
-									class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
-									placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
-									bind:value={prompt.content}
-								/>
+				{/each}
+			</div>
+		</div>
 
-								<button
-									class="px-2"
-									type="button"
-									on:click={() => {
-										suggestions.splice(promptIdx, 1);
-										suggestions = suggestions;
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-										/>
-									</svg>
-								</button>
-							</div>
-						{/each}
-					</div>
-				</div>
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Categories')}</div>
 
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Categories')}</div>
+			<div class="grid grid-cols-4">
+				{#each Object.keys(categories) as category}
+					<div class="flex space-x-2 text-sm">
+						<input type="checkbox" bind:checked={categories[category]} />
 
-					<div class="grid grid-cols-4">
-						{#each Object.keys(categories) as category}
-							<div class="flex space-x-2 text-sm">
-								<input type="checkbox" bind:checked={categories[category]} />
+						<div class=" capitalize">{category}</div>
+					</div>
+				{/each}
+			</div>
+		</div>
 
-								<div class=" capitalize">{category}</div>
-							</div>
-						{/each}
+		{#if pullProgress !== null}
+			<div class="my-2">
+				<div class=" text-sm font-semibold mb-2">{$i18n.t('Pull Progress')}</div>
+				<div class="w-full rounded-full dark:bg-gray-800">
+					<div
+						class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+						style="width: {Math.max(15, pullProgress ?? 0)}%"
+					>
+						{pullProgress ?? 0}%
 					</div>
 				</div>
+				<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
+					{digest}
+				</div>
+			</div>
+		{/if}
 
-				{#if pullProgress !== null}
-					<div class="my-2">
-						<div class=" text-sm font-semibold mb-2">{$i18n.t('Pull Progress')}</div>
-						<div class="w-full rounded-full dark:bg-gray-800">
-							<div
-								class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
-								style="width: {Math.max(15, pullProgress ?? 0)}%"
-							>
-								{pullProgress ?? 0}%
-							</div>
-						</div>
-						<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
-							{digest}
-						</div>
+		<div class="my-2 flex justify-end">
+			<button
+				class=" text-sm px-3 py-2 transition rounded-xl {loading
+					? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
+					: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
+				type="submit"
+				disabled={loading}
+			>
+				<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
+
+				{#if loading}
+					<div class="ml-1.5 self-center">
+						<svg
+							class=" w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							><style>
+								.spinner_ajPY {
+									transform-origin: center;
+									animation: spinner_AtaB 0.75s infinite linear;
+								}
+								@keyframes spinner_AtaB {
+									100% {
+										transform: rotate(360deg);
+									}
+								}
+							</style><path
+								d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+								opacity=".25"
+							/><path
+								d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+								class="spinner_ajPY"
+							/></svg
+						>
 					</div>
 				{/if}
-
-				<div class="my-2 flex justify-end">
-					<button
-						class=" text-sm px-3 py-2 transition rounded-xl {loading
-							? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
-							: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
-						type="submit"
-						disabled={loading}
-					>
-						<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
-
-						{#if loading}
-							<div class="ml-1.5 self-center">
-								<svg
-									class=" w-4 h-4"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									xmlns="http://www.w3.org/2000/svg"
-									><style>
-										.spinner_ajPY {
-											transform-origin: center;
-											animation: spinner_AtaB 0.75s infinite linear;
-										}
-										@keyframes spinner_AtaB {
-											100% {
-												transform: rotate(360deg);
-											}
-										}
-									</style><path
-										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-										opacity=".25"
-									/><path
-										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-										class="spinner_ajPY"
-									/></svg
-								>
-							</div>
-						{/if}
-					</button>
-				</div>
-			</form>
+			</button>
 		</div>
-	</div>
+	</form>
 </div>

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

+<script>
+	import Playground from '$lib/components/workspace/Playground.svelte';
+</script>
+
+<Playground />

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

+<script>
+	import Prompts from '$lib/components/workspace/Prompts.svelte';
+</script>
+
+<Prompts />

src/routes/(app)/prompts/create/+page.svelte → src/routes/(app)/workspace/prompts/create/+page.svelte

@@ -35,7 +35,7 @@
 
 			if (prompt) {
 				await prompts.set(await getPrompts(localStorage.token));
-				await goto('/prompts');
+				await goto('/workspace/prompts');
 			}
 		} else {
 			toast.error(
@@ -93,162 +93,153 @@
 	});
 </script>
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" flex flex-col justify-between w-full overflow-y-auto">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
-
-			<button
-				class="flex space-x-1"
-				on:click={() => {
-					history.back();
-				}}
-			>
-				<div class=" self-center">
-					<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-			</button>
-			<hr class="my-3 dark:border-gray-700" />
-
-			<form
-				class="flex flex-col"
-				on:submit|preventDefault={() => {
-					submitHandler();
-				}}
+<div class="w-full max-h-full">
+	<button
+		class="flex space-x-1"
+		on:click={() => {
+			history.back();
+		}}
+	>
+		<div class=" self-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
-
-					<div>
-						<input
-							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder={$i18n.t('Add a short title for this prompt')}
-							bind:value={title}
-							required
-						/>
-					</div>
-				</div>
-
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
+				<path
+					fill-rule="evenodd"
+					d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</div>
+		<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
+	</button>
+
+	<form
+		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
+		on:submit|preventDefault={() => {
+			submitHandler();
+		}}
+	>
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
+
+			<div>
+				<input
+					class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+					placeholder={$i18n.t('Add a short title for this prompt')}
+					bind:value={title}
+					required
+				/>
+			</div>
+		</div>
 
-					<div class="flex items-center mb-1">
-						<div
-							class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
-						>
-							/
-						</div>
-						<input
-							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-r-lg"
-							placeholder={$i18n.t('short-summary')}
-							bind:value={command}
-							required
-						/>
-					</div>
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
 
-					<div class="text-xs text-gray-400 dark:text-gray-500">
-						{$i18n.t('Only')}
-						<span class=" text-gray-600 dark:text-gray-300 font-medium"
-							>{$i18n.t('alphanumeric characters and hyphens')}</span
-						>
-						{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
-							class=" text-gray-600 dark:text-gray-300 font-medium"
-						>
-							/{command}
-						</span>" &nbsp;
-						{$i18n.t('to chat input.')}
-					</div>
+			<div class="flex items-center mb-1">
+				<div
+					class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
+				>
+					/
 				</div>
+				<input
+					class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-r-lg"
+					placeholder={$i18n.t('short-summary')}
+					bind:value={command}
+					required
+				/>
+			</div>
+
+			<div class="text-xs text-gray-400 dark:text-gray-500">
+				{$i18n.t('Only')}
+				<span class=" text-gray-600 dark:text-gray-300 font-medium"
+					>{$i18n.t('alphanumeric characters and hyphens')}</span
+				>
+				{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
+					class=" text-gray-600 dark:text-gray-300 font-medium"
+				>
+					/{command}
+				</span>" &nbsp;
+				{$i18n.t('to chat input.')}
+			</div>
+		</div>
 
-				<div class="my-2">
-					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
-					</div>
+		<div class="my-2">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
+			</div>
+
+			<div class="mt-2">
+				<div>
+					<textarea
+						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
+						rows="6"
+						bind:value={content}
+						required
+					/>
+				</div>
 
-					<div class="mt-2">
-						<div>
-							<textarea
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={$i18n.t(
-									'Write a summary in 50 words that summarizes [topic or keyword].'
-								)}
-								rows="6"
-								bind:value={content}
-								required
-							/>
-						</div>
-
-						<div class="text-xs text-gray-400 dark:text-gray-500">
-							ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
-								class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
-							>.
-							{$i18n.t('Make sure to enclose them with')}
-							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
-							{$i18n.t('and')}
-							<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
-						</div>
-
-						<div class="text-xs text-gray-400 dark:text-gray-500">
-							{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
-								{` {{CLIPBOARD}}`}</span
-							>
-							{$i18n.t('variable to have them replaced with clipboard content.')}
-						</div>
-					</div>
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
+						class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
+					>.
+					{$i18n.t('Make sure to enclose them with')}
+					<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
+					{$i18n.t('and')}
+					<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
 				</div>
 
-				<div class="my-2 flex justify-end">
-					<button
-						class=" text-sm px-3 py-2 transition rounded-xl {loading
-							? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
-							: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
-						type="submit"
-						disabled={loading}
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
+						{` {{CLIPBOARD}}`}</span
 					>
-						<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
-
-						{#if loading}
-							<div class="ml-1.5 self-center">
-								<svg
-									class=" w-4 h-4"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									xmlns="http://www.w3.org/2000/svg"
-									><style>
-										.spinner_ajPY {
-											transform-origin: center;
-											animation: spinner_AtaB 0.75s infinite linear;
-										}
-										@keyframes spinner_AtaB {
-											100% {
-												transform: rotate(360deg);
-											}
-										}
-									</style><path
-										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-										opacity=".25"
-									/><path
-										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-										class="spinner_ajPY"
-									/></svg
-								>
-							</div>
-						{/if}
-					</button>
+					{$i18n.t('variable to have them replaced with clipboard content.')}
 				</div>
-			</form>
+			</div>
+		</div>
+
+		<div class="my-2 flex justify-end">
+			<button
+				class=" text-sm px-3 py-2 transition rounded-xl {loading
+					? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
+					: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
+				type="submit"
+				disabled={loading}
+			>
+				<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
+
+				{#if loading}
+					<div class="ml-1.5 self-center">
+						<svg
+							class=" w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							><style>
+								.spinner_ajPY {
+									transform-origin: center;
+									animation: spinner_AtaB 0.75s infinite linear;
+								}
+								@keyframes spinner_AtaB {
+									100% {
+										transform: rotate(360deg);
+									}
+								}
+							</style><path
+								d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+								opacity=".25"
+							/><path
+								d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+								class="spinner_ajPY"
+							/></svg
+						>
+					</div>
+				{/if}
+			</button>
 		</div>
-	</div>
+	</form>
 </div>

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

+<script>
+	import { toast } from 'svelte-sonner';
+
+	import { goto } from '$app/navigation';
+	import { prompts } from '$lib/stores';
+	import { onMount, tick, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
+	import { page } from '$app/stores';
+
+	let loading = false;
+
+	// ///////////
+	// Prompt
+	// ///////////
+
+	let title = '';
+	let command = '';
+	let content = '';
+
+	const updateHandler = async () => {
+		loading = true;
+
+		if (validateCommandString(command)) {
+			const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
+				(error) => {
+					toast.error(error);
+					return null;
+				}
+			);
+
+			if (prompt) {
+				await prompts.set(await getPrompts(localStorage.token));
+				await goto('/workspace/prompts');
+			}
+		} else {
+			toast.error(
+				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
+			);
+		}
+
+		loading = false;
+	};
+
+	const validateCommandString = (inputString) => {
+		// Regular expression to match only alphanumeric characters and hyphen
+		const regex = /^[a-zA-Z0-9-]+$/;
+
+		// Test the input string against the regular expression
+		return regex.test(inputString);
+	};
+
+	onMount(async () => {
+		command = $page.url.searchParams.get('command');
+		if (command) {
+			const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
+
+			if (prompt) {
+				console.log(prompt);
+
+				console.log(prompt.command);
+
+				title = prompt.title;
+				await tick();
+				command = prompt.command.slice(1);
+				content = prompt.content;
+			} else {
+				goto('/workspace/prompts');
+			}
+		} else {
+			goto('/workspace/prompts');
+		}
+	});
+</script>
+
+<div class="w-full max-h-full">
+	<button
+		class="flex space-x-1"
+		on:click={() => {
+			history.back();
+		}}
+	>
+		<div class=" self-center">
+			<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</div>
+		<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
+	</button>
+
+	<form
+		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
+		on:submit|preventDefault={() => {
+			updateHandler();
+		}}
+	>
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
+
+			<div>
+				<input
+					class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+					placeholder={$i18n.t('Add a short title for this prompt')}
+					bind:value={title}
+					required
+				/>
+			</div>
+		</div>
+
+		<div class="my-2">
+			<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
+
+			<div class="flex items-center mb-1">
+				<div
+					class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
+				>
+					/
+				</div>
+				<input
+					class="px-3 py-1.5 text-sm w-full bg-transparent border disabled:text-gray-500 dark:border-gray-600 outline-none rounded-r-lg"
+					placeholder="short-summary"
+					bind:value={command}
+					disabled
+					required
+				/>
+			</div>
+
+			<div class="text-xs text-gray-400 dark:text-gray-500">
+				{$i18n.t('Only')}
+				<span class=" text-gray-600 dark:text-gray-300 font-medium"
+					>{$i18n.t('alphanumeric characters and hyphens')}</span
+				>
+				{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
+					class=" text-gray-600 dark:text-gray-300 font-medium"
+				>
+					/{command}
+				</span>" &nbsp;
+				{$i18n.t('to chat input.')}
+			</div>
+		</div>
+
+		<div class="my-2">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
+			</div>
+
+			<div class="mt-2">
+				<div>
+					<textarea
+						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+						placeholder={$i18n.t(`Write a summary in 50 words that summarizes [topic or keyword].`)}
+						rows="6"
+						bind:value={content}
+						required
+					/>
+				</div>
+
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
+						class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
+					>.
+					{$i18n.t('Make sure to enclose them with')}
+					<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
+					{$i18n.t('and')}
+					<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
+				</div>
+
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
+						{` {{CLIPBOARD}}`}</span
+					>
+					{$i18n.t('variable to have them replaced with clipboard content.')}
+				</div>
+			</div>
+		</div>
+
+		<div class="my-2 flex justify-end">
+			<button
+				class=" text-sm px-3 py-2 transition rounded-xl {loading
+					? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
+					: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
+				type="submit"
+				disabled={loading}
+			>
+				<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
+
+				{#if loading}
+					<div class="ml-1.5 self-center">
+						<svg
+							class=" w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							><style>
+								.spinner_ajPY {
+									transform-origin: center;
+									animation: spinner_AtaB 0.75s infinite linear;
+								}
+								@keyframes spinner_AtaB {
+									100% {
+										transform: rotate(360deg);
+									}
+								}
+							</style><path
+								d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+								opacity=".25"
+							/><path
+								d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+								class="spinner_ajPY"
+							/></svg
+						>
+					</div>
+				{/if}
+			</button>
+		</div>
+	</form>
+</div>

src/routes/+layout.svelte

 <script>
 	import { onMount, tick, setContext } from 'svelte';
-	import { config, user, theme, WEBUI_NAME } from '$lib/stores';
+	import { config, user, theme, WEBUI_NAME, mobile } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { Toaster, toast } from 'svelte-sonner';
 
@@ -18,23 +18,38 @@
 	setContext('i18n', i18n);
 
 	let loaded = false;
+	const BREAKPOINT = 768;
 
 	onMount(async () => {
 		theme.set(localStorage.theme);
-		// Check Backend Status
-		const backendConfig = await getBackendConfig();
+
+		mobile.set(window.innerWidth < BREAKPOINT);
+		const onResize = () => {
+			if (window.innerWidth < BREAKPOINT) {
+				mobile.set(true);
+			} else {
+				mobile.set(false);
+			}
+		};
+
+		window.addEventListener('resize', onResize);
+
+		let backendConfig = null;
+		try {
+			backendConfig = await getBackendConfig();
+			console.log('Backend config:', backendConfig);
+		} catch (error) {
+			console.error('Error loading backend config:', error);
+		}
+		// Initialize i18n even if we didn't get a backend config,
+		// so `/error` can show something that's not `undefined`.
+		initI18n(backendConfig?.default_locale);
 
 		if (backendConfig) {
 			// Save Backend Status to Store
 			await config.set(backendConfig);
-			if ($config.default_locale) {
-				initI18n($config.default_locale);
-			} else {
-				initI18n();
-			}
 
 			await WEBUI_NAME.set(backendConfig.name);
-			console.log(backendConfig);
 
 			if ($config) {
 				if (localStorage.token) {
@@ -65,6 +80,10 @@
 
 		document.getElementById('splash-screen')?.remove();
 		loaded = true;
+
+		return () => {
+			window.removeEventListener('resize', onResize);
+		};
 	});
 </script>