Merge branch 'dev' into dockerfile-optimisation

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

@@ -847,6 +847,7 @@
 		bind:selectedModels
 		bind:showModelSelector
 		shareEnabled={messages.length > 0}
+		{chat}
 		{initNewChat}
 		{tags}
 		{addTag}

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

@@ -4,6 +4,8 @@
 	import { goto } from '$app/navigation';
 	import { onMount, getContext } from 'svelte';
 
+	import dayjs from 'dayjs';
+
 	import { toast } from 'svelte-sonner';
 
 	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
@@ -16,6 +18,7 @@
 	let loaded = false;
 	let users = [];
 
+	let search = '';
 	let selectedUser = null;
 
 	let showSettingsModal = false;
@@ -80,20 +83,15 @@
 
 <SettingsModal bind:show={showSettingsModal} />
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white font-mona">
+<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	{#if loaded}
 		<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=" mx-auto w-full">
 				<div class="w-full">
 					<div class=" flex flex-col justify-center">
+						<div class=" px-5 pt-3">
 							<div class=" flex justify-between items-center">
-							<div class="flex items-center text-2xl font-semibold">
-								{$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 items-center text-2xl font-semibold font-mona">Dashboard</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"
@@ -119,32 +117,64 @@
 									</button>
 								</div>
 							</div>
-						<div class=" text-gray-500 text-xs mt-1">
-							ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
 						</div>
 
-						<hr class=" my-3 dark:border-gray-600" />
+						<div class="px-5 flex text-sm gap-2.5">
+							<div class="py-3 border-b font-medium text-gray-100 cursor-pointer">Overview</div>
+							<!-- <div class="py-3 text-gray-300 cursor-pointer">Users</div> -->
+						</div>
+
+						<hr class=" mb-3 dark:border-gray-800" />
+
+						<div class="px-5">
+							<div class="mt-0.5 mb-3 flex 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="">
+									<input
+										class=" w-60 rounded-lg 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>
+							</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-700 dark:text-gray-400"
+										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('Action')} </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 as user}
+										{#each users.filter((user) => {
+											if (search === '') {
+												return true;
+											} else {
+												let name = user.name.toLowerCase();
+												const query = search.toLowerCase();
+												return name.includes(query);
+											}
+										}) 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-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={() => {
@@ -179,8 +209,12 @@
 												</td>
 												<td class=" px-3 py-2"> {user.email} </td>
 
-											<td class="px-3 py-2">
-												<div class="flex justify-start w-full">
+												<td class=" px-3 py-2">
+													{dayjs(user.timestamp * 1000).format($i18n.t('MMMM DD, YYYY'))}
+												</td>
+
+												<td class="px-3 py-2 text-right">
+													<div class="flex justify-end w-full">
 														<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 () => {
@@ -232,6 +266,11 @@
 									</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>
+						</div>
 					</div>
 				</div>
 			</div>

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

@@ -865,6 +865,7 @@
 	<div class="min-h-screen max-h-screen w-full flex flex-col">
 		<Navbar
 			{title}
+			{chat}
 			bind:selectedModels
 			bind:showModelSelector
 			shareEnabled={messages.length > 0}

src/routes/auth/+page.svelte

@@ -6,6 +6,7 @@
 	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
+	import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
 
 	const i18n = getContext('i18n');
 
@@ -36,10 +37,12 @@
 	};
 
 	const signUpHandler = async () => {
-		const sessionUser = await userSignUp(name, email, password).catch((error) => {
+		const sessionUser = await userSignUp(name, email, password, generateInitialsImage(name)).catch(
+			(error) => {
 				toast.error(error);
 				return null;
-		});
+			}
+		);
 
 		await setSessionUser(sessionUser);
 	};

static/manifest.json

-{
-	"name": "Open WebUI",
-	"short_name": "Open WebUI",
-	"start_url": "/",
-	"display": "standalone",
-	"background_color": "#343541",
-	"theme_color": "#343541",
-	"orientation": "portrait-primary",
-	"icons": [
-		{
-			"src": "/favicon.png",
-			"type": "image/png",
-			"sizes": "844x884"
-		}
-	]
-}