From 0e8c0b452e13642c07dcc5843fc8d7ecc98e7795 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 14 Nov 2024 02:20:34 -0800
Subject: [PATCH] wip: frontend

---
 src/lib/components/admin/Users.svelte         |  32 +-
 src/lib/components/admin/Users/Groups.svelte  |  52 +-
 .../admin/Users/Groups/AddGroupModal.svelte   | 148 +++++
 ...roupModal.svelte => EditGroupModal.svelte} | 107 ++--
 .../admin/Users/Groups/GroupItem.svelte       |  45 ++
 .../admin/Users/Groups/Permissions.svelte     |  45 +-
 .../admin/Users/Groups/Users.svelte           | 135 +++-
 .../components/admin/Users/UserList.svelte    | 598 +++++++++---------
 src/lib/components/layout/Sidebar.svelte      |  70 +-
 .../workspace/Knowledge/Collection.svelte     |   2 +-
 src/lib/components/workspace/Models.svelte    |  83 +--
 src/routes/(app)/workspace/+layout.svelte     |  48 +-
 12 files changed, 870 insertions(+), 495 deletions(-)
 create mode 100644 src/lib/components/admin/Users/Groups/AddGroupModal.svelte
 rename src/lib/components/admin/Users/Groups/{GroupModal.svelte => EditGroupModal.svelte} (70%)
 create mode 100644 src/lib/components/admin/Users/Groups/GroupItem.svelte

diff --git a/src/lib/components/admin/Users.svelte b/src/lib/components/admin/Users.svelte
index 738496575..18dba5857 100644
--- a/src/lib/components/admin/Users.svelte
+++ b/src/lib/components/admin/Users.svelte
@@ -1,14 +1,38 @@
 <script>
 	import { getContext, tick, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
+
+	import { goto } from '$app/navigation';
+	import { user } from '$lib/stores';
+
+	import { getUsers } from '$lib/apis/users';
+
 	import UserList from './Users/UserList.svelte';
 	import Groups from './Users/Groups.svelte';
 
 	const i18n = getContext('i18n');
 
-	let selectedTab = 'overview';
+	let users = [];
+
+	let selectedTab = 'overview';
+	let loaded = false;
+
+	$: if (selectedTab) {
+		getUsersHandler();
+	}
+
+	const getUsersHandler = async () => {
+		users = await getUsers(localStorage.token);
+	};
+
+	onMount(async () => {
+		if ($user?.role !== 'admin') {
+			await goto('/');
+		} else {
+			users = await getUsers(localStorage.token);
+		}
+		loaded = true;
 
-	onMount(() => {
 		const containerElement = document.getElementById('users-tabs-container');
 
 		if (containerElement) {
@@ -78,9 +102,9 @@
 
 	<div class="flex-1 mt-1 lg:mt-0 overflow-y-scroll">
 		{#if selectedTab === 'overview'}
-			<UserList />
+			<UserList {users} />
 		{:else if selectedTab === 'groups'}
-			<Groups />
+			<Groups {users} />
 		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index d3602a980..2f3c13aab 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -18,12 +18,17 @@
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import User from '$lib/components/icons/User.svelte';
 	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
-	import GroupModal from './Groups/GroupModal.svelte';
+	import GroupModal from './Groups/EditGroupModal.svelte';
+	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import GroupItem from './Groups/GroupItem.svelte';
+	import AddGroupModal from './Groups/AddGroupModal.svelte';
 
 	const i18n = getContext('i18n');
 
 	let loaded = false;
 
+	export let users = [];
+
 	let groups = [];
 	let filteredGroups;
 
@@ -40,6 +45,7 @@
 	let search = '';
 
 	let showCreateGroupModal = false;
+	let showDefaultPermissionsModal = false;
 
 	onMount(async () => {
 		if ($user?.role !== 'admin') {
@@ -47,12 +53,16 @@
 		} else {
 			groups = [
 				{
+					id: '1',
 					name: 'Admins',
 					description: 'Admins have full access to all features and settings.',
-					permissions: {
-						admin: true
+					data: {
+						permissions: {
+							admin: true
+						}
 					},
-					user_ids: [1, 2, 3]
+					user_ids: [1, 2, 3],
+					admin_ids: [1]
 				}
 			];
 		}
@@ -61,7 +71,7 @@
 </script>
 
 {#if loaded}
-	<GroupModal bind:show={showCreateGroupModal} />
+	<AddGroupModal bind:show={showCreateGroupModal} />
 	<div class="mt-0.5 mb-2 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('Groups')}
@@ -146,35 +156,21 @@
 				<hr class="mt-1.5 mb-2 border-gray-50 dark:border-gray-850" />
 
 				{#each filteredGroups as group}
-					<div class="flex items-center gap-3 justify-between px-1 text-xs w-full transition">
-						<div class="flex items-center gap-1.5 w-full font-medium">
-							<div>
-								<UserCircleSolid className="size-4" />
-							</div>
-							{group.name}
-						</div>
-
-						<div class="flex items-center gap-1.5 w-full font-medium">
-							{group.user_ids.length}
-
-							<div>
-								<User className="size-3.5" />
-							</div>
-						</div>
-
-						<div class="w-full flex justify-end">
-							<button class=" rounded-lg p-1">
-								<EllipsisHorizontal />
-							</button>
-						</div>
-					</div>
+					<GroupItem {group} {users} />
 				{/each}
 			</div>
 		{/if}
 
 		<hr class="my-2 border-gray-50 dark:border-gray-850" />
 
-		<button class="flex items-center justify-between rounded-lg w-full transition pt-1">
+		<GroupModal bind:show={showDefaultPermissionsModal} tabs={['permissions']} custom={false} />
+
+		<button
+			class="flex items-center justify-between rounded-lg w-full transition pt-1"
+			on:click={() => {
+				showDefaultPermissionsModal = true;
+			}}
+		>
 			<div class="flex items-center gap-2.5">
 				<div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full">
 					<UsersSolid className="size-4" />
diff --git a/src/lib/components/admin/Users/Groups/AddGroupModal.svelte b/src/lib/components/admin/Users/Groups/AddGroupModal.svelte
new file mode 100644
index 000000000..63b55f2fa
--- /dev/null
+++ b/src/lib/components/admin/Users/Groups/AddGroupModal.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import Textarea from '$lib/components/common/Textarea.svelte';
+	export let onSubmit: Function = () => {};
+	export let show = false;
+
+	let name = '';
+	let description = '';
+	let userIds = [];
+
+	let loading = false;
+
+	const submitHandler = async () => {
+		loading = true;
+
+		const group = {
+			name,
+			description,
+			user_ids: userIds
+		};
+
+		await onSubmit(group);
+
+		loading = false;
+		show = false;
+
+		name = '';
+		description = '';
+		userIds = [];
+	};
+
+	onMount(() => {
+		console.log('mounted');
+	});
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
+			<div class=" text-lg font-medium self-center font-primary">
+				{$i18n.t('Add User Group')}
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
+			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+				<form
+					class="flex flex-col w-full"
+					on:submit={(e) => {
+						e.preventDefault();
+						submitHandler();
+					}}
+				>
+					<div class="flex gap-2">
+						<div class="flex flex-col w-full">
+							<div class=" mb-0.5 text-xs text-gray-500">{$i18n.t('Name')}</div>
+
+							<div class="flex-1">
+								<input
+									class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
+									type="text"
+									bind:value={name}
+									placeholder={$i18n.t('Group Name')}
+									autocomplete="off"
+									required
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex flex-col w-full mt-2">
+						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Description')}</div>
+
+						<div class="flex-1">
+							<Textarea
+								className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none resize-none"
+								rows={2}
+								bind:value={description}
+								placeholder={$i18n.t('Group Description')}
+							/>
+						</div>
+					</div>
+
+					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
+						<button
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+								? ' cursor-not-allowed'
+								: ''}"
+							type="submit"
+							disabled={loading}
+						>
+							{$i18n.t('Create')}
+
+							{#if loading}
+								<div class="ml-2 self-center">
+									<svg
+										class=" w-4 h-4"
+										viewBox="0 0 24 24"
+										fill="currentColor"
+										xmlns="http://www.w3.org/2000/svg"
+										><style>
+											.spinner_ajPY {
+												transform-origin: center;
+												animation: spinner_AtaB 0.75s infinite linear;
+											}
+											@keyframes spinner_AtaB {
+												100% {
+													transform: rotate(360deg);
+												}
+											}
+										</style><path
+											d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+											opacity=".25"
+										/><path
+											d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+											class="spinner_ajPY"
+										/></svg
+									>
+								</div>
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</Modal>
diff --git a/src/lib/components/admin/Users/Groups/GroupModal.svelte b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
similarity index 70%
rename from src/lib/components/admin/Users/Groups/GroupModal.svelte
rename to src/lib/components/admin/Users/Groups/EditGroupModal.svelte
index 8644c6c51..c9b86d452 100644
--- a/src/lib/components/admin/Users/Groups/GroupModal.svelte
+++ b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
@@ -19,8 +19,14 @@
 
 	export let show = false;
 	export let edit = false;
+
+	export let users = [];
 	export let group = null;
 
+	export let custom = true;
+
+	export let tabs = ['display', 'permissions', 'users'];
+
 	let selectedTab = 'display';
 
 	let name = '';
@@ -28,6 +34,7 @@
 
 	let permissions = {};
 	let userIds = [];
+	let adminIds = [];
 
 	let loading = false;
 
@@ -65,18 +72,24 @@
 	}
 
 	onMount(() => {
+		console.log(tabs);
+		selectedTab = tabs[0];
 		init();
 	});
 </script>
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1">
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
 			<div class=" text-lg font-medium self-center font-primary">
-				{#if edit}
-					{$i18n.t('Edit User Group')}
+				{#if custom}
+					{#if edit}
+						{$i18n.t('Edit User Group')}
+					{:else}
+						{$i18n.t('Add User Group')}
+					{/if}
 				{:else}
-					{$i18n.t('Add User Group')}
+					{$i18n.t('Edit Default Permissions')}
 				{/if}
 			</div>
 			<button
@@ -108,54 +121,60 @@
 					}}
 				>
 					<div
-						class=" tabs flex flex-row overflow-x-auto gap-2.5 text-sm font-medium mb-3 border-b border-b-gray-800 scrollbar-hidden"
+						class=" tabs flex flex-row overflow-x-auto gap-2.5 text-sm font-medium border-b border-b-gray-800 scrollbar-hidden"
 					>
-						<button
-							class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
-							'display'
-								? ' dark:border-white'
-								: 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
-							on:click={() => {
-								selectedTab = 'display';
-							}}
-							type="button"
-						>
-							{$i18n.t('Display')}
-						</button>
+						{#if tabs.includes('display')}
+							<button
+								class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
+								'display'
+									? ' dark:border-white'
+									: 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
+								on:click={() => {
+									selectedTab = 'display';
+								}}
+								type="button"
+							>
+								{$i18n.t('Display')}
+							</button>
+						{/if}
 
-						<button
-							class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
-							'permissions'
-								? '  dark:border-white'
-								: 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
-							on:click={() => {
-								selectedTab = 'permissions';
-							}}
-							type="button"
-						>
-							{$i18n.t('Permissions')}
-						</button>
+						{#if tabs.includes('permissions')}
+							<button
+								class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
+								'permissions'
+									? '  dark:border-white'
+									: 'border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
+								on:click={() => {
+									selectedTab = 'permissions';
+								}}
+								type="button"
+							>
+								{$i18n.t('Permissions')}
+							</button>
+						{/if}
 
-						<button
-							class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
-							'users'
-								? ' dark:border-white'
-								: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
-							on:click={() => {
-								selectedTab = 'users';
-							}}
-							type="button"
-						>
-							{$i18n.t('Users')} ({userIds.length})
-						</button>
+						{#if tabs.includes('users')}
+							<button
+								class="px-0.5 pb-1.5 min-w-fit flex text-right transition border-b-2 {selectedTab ===
+								'users'
+									? ' dark:border-white'
+									: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
+								on:click={() => {
+									selectedTab = 'users';
+								}}
+								type="button"
+							>
+								{$i18n.t('Users')} ({userIds.length})
+							</button>
+						{/if}
 					</div>
-					<div class="px-1 h-96 lg:max-h-96 overflow-y-auto scrollbar-hidden">
+					<div class="px-1 h-96 lg:max-h-96 overflow-y-auto scrollbar-hidden mt-2.5">
 						{#if selectedTab == 'display'}
 							<Display bind:name bind:description />
 						{:else if selectedTab == 'permissions'}
-							<Permissions bind:permissions />
+							<Permissions bind:permissions {custom} />
 						{:else if selectedTab == 'users'}
-							<Users bind:userIds />
+							<Users bind:userIds bind:adminIds {users} />
 						{/if}
 					</div>
 
diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
new file mode 100644
index 000000000..6f8d462e9
--- /dev/null
+++ b/src/lib/components/admin/Users/Groups/GroupItem.svelte
@@ -0,0 +1,45 @@
+<script>
+	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import User from '$lib/components/icons/User.svelte';
+
+	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
+	import GroupModal from './EditGroupModal.svelte';
+
+	export let users = [];
+	export let group = {
+		name: 'Admins',
+		user_ids: [1, 2, 3]
+	};
+
+	let showEdit = false;
+</script>
+
+<GroupModal bind:show={showEdit} edit {group} {users} />
+
+<div class="flex items-center gap-3 justify-between px-1 text-xs w-full transition">
+	<div class="flex items-center gap-1.5 w-full font-medium">
+		<div>
+			<UserCircleSolid className="size-4" />
+		</div>
+		{group.name}
+	</div>
+
+	<div class="flex items-center gap-1.5 w-full font-medium">
+		{group.user_ids.length}
+
+		<div>
+			<User className="size-3.5" />
+		</div>
+	</div>
+
+	<div class="w-full flex justify-end">
+		<button
+			class=" rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+			on:click={() => {
+				showEdit = true;
+			}}
+		>
+			<Pencil />
+		</button>
+	</div>
+</div>
diff --git a/src/lib/components/admin/Users/Groups/Permissions.svelte b/src/lib/components/admin/Users/Groups/Permissions.svelte
index e77174cb7..6db005c11 100644
--- a/src/lib/components/admin/Users/Groups/Permissions.svelte
+++ b/src/lib/components/admin/Users/Groups/Permissions.svelte
@@ -8,6 +8,7 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 
 	export let permissions = {};
+	export let custom = true;
 
 	let defaultModelId = '';
 
@@ -135,17 +136,34 @@
 		<div class=" mb-2 text-sm font-medium">{$i18n.t('Workspace Permissions')}</div>
 
 		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">{$i18n.t('Allow Models Access')}</div>
+			<div class=" self-center text-xs font-medium">
+				{#if custom}
+					{$i18n.t('Admins')}:
+				{/if}
+				{$i18n.t('Models Access')}
+			</div>
 			<Switch bind:state={workspaceModelsAccess} />
 		</div>
 
 		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">{$i18n.t('Allow Knowledge Access')}</div>
+			<div class=" self-center text-xs font-medium">
+				{#if custom}
+					{$i18n.t('Admins')}:
+				{/if}
+
+				{$i18n.t('Knowledge Access')}
+			</div>
 			<Switch bind:state={workspaceKnowledgeAccess} />
 		</div>
 
 		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">{$i18n.t('Allow Prompts Access')}</div>
+			<div class=" self-center text-xs font-medium">
+				{#if custom}
+					{$i18n.t('Admins')}:
+				{/if}
+
+				{$i18n.t('Prompts Access')}
+			</div>
 			<Switch bind:state={workspacePromptsAccess} />
 		</div>
 
@@ -166,19 +184,34 @@
 		<div class=" mb-2 text-sm font-medium">{$i18n.t('Chat Permissions')}</div>
 
 		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div>
+			<div class=" self-center text-xs font-medium">
+				{#if custom}
+					{$i18n.t('Members')}:
+				{/if}
+				{$i18n.t('Allow Chat Deletion')}
+			</div>
 
 			<Switch bind:state={chatDeletion} />
 		</div>
 
 		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Editing')}</div>
+			<div class=" self-center text-xs font-medium">
+				{#if custom}
+					{$i18n.t('Members')}:
+				{/if}
+				{$i18n.t('Allow Chat Editing')}
+			</div>
 
 			<Switch bind:state={chatEdit} />
 		</div>
 
 		<div class="  flex w-full justify-between my-2 pr-2">
-			<div class=" self-center text-xs font-medium">{$i18n.t('Allow Temporary Chat')}</div>
+			<div class=" self-center text-xs font-medium">
+				{#if custom}
+					{$i18n.t('Members')}:
+				{/if}
+				{$i18n.t('Allow Temporary Chat')}
+			</div>
 
 			<Switch bind:state={chatTemporary} />
 		</div>
diff --git a/src/lib/components/admin/Users/Groups/Users.svelte b/src/lib/components/admin/Users/Groups/Users.svelte
index 0c85b459a..a44cf32cf 100644
--- a/src/lib/components/admin/Users/Groups/Users.svelte
+++ b/src/lib/components/admin/Users/Groups/Users.svelte
@@ -1,7 +1,140 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
+	import Checkbox from '$lib/components/common/Checkbox.svelte';
+	import Badge from '$lib/components/common/Badge.svelte';
+
+	export let users = [];
 	export let userIds = [];
+	export let adminIds = [];
+
+	let filteredUsers = [];
+
+	$: filteredUsers = users
+		.filter((user) => {
+			if (user?.role === 'admin') {
+				return false;
+			}
+
+			if (query === '') {
+				return true;
+			}
+
+			return (
+				user.name.toLowerCase().includes(query.toLowerCase()) ||
+				user.email.toLowerCase().includes(query.toLowerCase())
+			);
+		})
+		.sort((a, b) => {
+			const aIsAdmin = adminIds.includes(a.id);
+			const bIsAdmin = adminIds.includes(b.id);
+			const aUserIndex = userIds.indexOf(a.id);
+			const bUserIndex = userIds.indexOf(b.id);
+
+			// Admin users should come first
+			if (aIsAdmin && !bIsAdmin) return -1; // Place 'a' first if it's admin
+			if (!aIsAdmin && bIsAdmin) return 1; // Place 'b' first if it's admin
+
+			// Neither are admin, compare based on userIds or fall back to alphabetical order
+			if (aUserIndex !== -1 && bUserIndex === -1) return -1; // 'a' has valid userId -> prioritize
+			if (bUserIndex !== -1 && aUserIndex === -1) return 1; // 'b' has valid userId -> prioritize
+
+			// Both a and b are either in the userIds array or not, so we'll sort them by their indices
+			if (aUserIndex !== -1 && bUserIndex !== -1) return aUserIndex - bUserIndex;
+
+			// If both are not in the userIds, fallback to alphabetical sorting by name
+			return a.name.localeCompare(b.name);
+		});
+
+	let query = '';
 </script>
 
 <div>
-	{JSON.stringify(userIds)}
+	<div class="flex w-full">
+		<div class="flex flex-1">
+			<div class=" self-center 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 rounded-r-xl outline-none bg-transparent"
+				bind:value={query}
+				placeholder={$i18n.t('Search')}
+			/>
+		</div>
+	</div>
+
+	<div class="mt-3 max-h-[22rem] overflow-y-auto scrollbar-hidden">
+		<div class="flex flex-col gap-2.5">
+			{#if filteredUsers.length > 0}
+				{#each filteredUsers as user, userIdx (user.id)}
+					<div class="flex flex-row items-center gap-3 w-full text-sm">
+						<div class="flex items-center">
+							<Checkbox
+								state={userIds.includes(user.id) ? 'checked' : 'unchecked'}
+								on:change={(e) => {
+									if (e.detail === 'checked') {
+										userIds = [...userIds, user.id];
+									} else {
+										userIds = userIds.filter((id) => id !== user.id);
+									}
+								}}
+							/>
+						</div>
+
+						<div class="flex w-full items-center justify-between">
+							<div class="flex">
+								<img
+									class=" rounded-full w-6 h-6 object-cover mr-2.5"
+									src={user.profile_image_url.startsWith(WEBUI_BASE_URL) ||
+									user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
+									user.profile_image_url.startsWith('data:')
+										? user.profile_image_url
+										: `/user.png`}
+									alt="user"
+								/>
+
+								<div class=" font-medium self-center">{user.name}</div>
+							</div>
+
+							{#if userIds.includes(user.id)}
+								<button
+									on:click={() => {
+										adminIds = adminIds.includes(user.id)
+											? adminIds.filter((id) => id !== user.id)
+											: [...adminIds, user.id];
+									}}
+									type="button"
+								>
+									{#if adminIds.includes(user.id)}
+										<Badge type="info" content="admin" />
+									{:else}
+										<Badge type="success" content="member" />
+									{/if}
+								</button>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			{:else}
+				<div class="text-gray-500 text-xs text-center py-2 px-10">
+					{$i18n.t('No users were found.')}
+				</div>
+			{/if}
+		</div>
+	</div>
 </div>
diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index 1c82eab0a..bbf6fb25e 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/src/lib/components/admin/Users/UserList.svelte
@@ -29,9 +29,7 @@
 
 	const i18n = getContext('i18n');
 
-	let loaded = false;
-	let tab = '';
-	let users = [];
+	export let users = [];
 
 	let search = '';
 	let selectedUser = null;
@@ -65,14 +63,6 @@
 		}
 	};
 
-	onMount(async () => {
-		if ($user?.role !== 'admin') {
-			await goto('/');
-		} else {
-			users = await getUsers(localStorage.token);
-		}
-		loaded = true;
-	});
 	let sortKey = 'created_at'; // default sort key
 	let sortOrder = 'asc'; // default sort order
 
@@ -131,278 +121,301 @@
 />
 <UserChatsModal bind:show={showUserChatsModal} user={selectedUser} />
 
-{#if loaded}
-	<div class="mt-0.5 mb-2 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('Users')}
-			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
+<div class="mt-0.5 mb-2 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('Users')}
+		<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
 
-			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{users.length}</span>
-		</div>
+		<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{users.length}</span>
+	</div>
 
-		<div class="flex gap-1">
-			<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={search}
-						placeholder={$i18n.t('Search')}
-					/>
+	<div class="flex gap-1">
+		<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={search}
+					placeholder={$i18n.t('Search')}
+				/>
+			</div>
 
-				<div>
-					<Tooltip content={$i18n.t('Add User')}>
-						<button
-							class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
-							on:click={() => {
-								showAddUserModal = !showAddUserModal;
-							}}
-						>
-							<Plus className="size-3.5" />
-						</button>
-					</Tooltip>
-				</div>
+			<div>
+				<Tooltip content={$i18n.t('Add User')}>
+					<button
+						class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
+						on:click={() => {
+							showAddUserModal = !showAddUserModal;
+						}}
+					>
+						<Plus className="size-3.5" />
+					</button>
+				</Tooltip>
 			</div>
 		</div>
 	</div>
+</div>
 
-	<div
-		class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5"
+<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5">
+	<table
+		class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded"
 	>
-		<table
-			class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded"
+		<thead
+			class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
 		>
-			<thead
-				class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
-			>
-				<tr class="">
-					<th
-						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
-						on:click={() => setSortKey('role')}
-					>
-						<div class="flex gap-1.5 items-center">
-							{$i18n.t('Role')}
+			<tr class="">
+				<th
+					scope="col"
+					class="px-3 py-1.5 cursor-pointer select-none"
+					on:click={() => setSortKey('role')}
+				>
+					<div class="flex gap-1.5 items-center">
+						{$i18n.t('Role')}
 
-							{#if sortKey === 'role'}
-								<span class="font-normal"
-									>{#if sortOrder === 'asc'}
-										<ChevronUp className="size-2" />
-									{:else}
-										<ChevronDown className="size-2" />
-									{/if}
-								</span>
-							{:else}
-								<span class="invisible">
+						{#if sortKey === 'role'}
+							<span class="font-normal"
+								>{#if sortOrder === 'asc'}
 									<ChevronUp className="size-2" />
-								</span>
-							{/if}
-						</div>
-					</th>
-					<th
-						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
-						on:click={() => setSortKey('name')}
-					>
-						<div class="flex gap-1.5 items-center">
-							{$i18n.t('Name')}
-
-							{#if sortKey === 'name'}
-								<span class="font-normal"
-									>{#if sortOrder === 'asc'}
-										<ChevronUp className="size-2" />
-									{:else}
-										<ChevronDown className="size-2" />
-									{/if}
-								</span>
-							{:else}
-								<span class="invisible">
-									<ChevronUp className="size-2" />
-								</span>
-							{/if}
-						</div>
-					</th>
-					<th
-						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
-						on:click={() => setSortKey('email')}
-					>
-						<div class="flex gap-1.5 items-center">
-							{$i18n.t('Email')}
-
-							{#if sortKey === 'email'}
-								<span class="font-normal"
-									>{#if sortOrder === 'asc'}
-										<ChevronUp className="size-2" />
-									{:else}
-										<ChevronDown className="size-2" />
-									{/if}
-								</span>
-							{:else}
-								<span class="invisible">
-									<ChevronUp className="size-2" />
-								</span>
-							{/if}
-						</div>
-					</th>
-
-					<th
-						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
-						on:click={() => setSortKey('last_active_at')}
-					>
-						<div class="flex gap-1.5 items-center">
-							{$i18n.t('Last Active')}
-
-							{#if sortKey === 'last_active_at'}
-								<span class="font-normal"
-									>{#if sortOrder === 'asc'}
-										<ChevronUp className="size-2" />
-									{:else}
-										<ChevronDown className="size-2" />
-									{/if}
-								</span>
-							{:else}
-								<span class="invisible">
-									<ChevronUp className="size-2" />
-								</span>
-							{/if}
-						</div>
-					</th>
-					<th
-						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
-						on:click={() => setSortKey('created_at')}
-					>
-						<div class="flex gap-1.5 items-center">
-							{$i18n.t('Created at')}
-							{#if sortKey === 'created_at'}
-								<span class="font-normal"
-									>{#if sortOrder === 'asc'}
-										<ChevronUp className="size-2" />
-									{:else}
-										<ChevronDown className="size-2" />
-									{/if}
-								</span>
-							{:else}
-								<span class="invisible">
-									<ChevronUp className="size-2" />
-								</span>
-							{/if}
-						</div>
-					</th>
-
-					<th
-						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
-						on:click={() => setSortKey('oauth_sub')}
-					>
-						<div class="flex gap-1.5 items-center">
-							{$i18n.t('OAuth ID')}
-
-							{#if sortKey === 'oauth_sub'}
-								<span class="font-normal"
-									>{#if sortOrder === 'asc'}
-										<ChevronUp className="size-2" />
-									{:else}
-										<ChevronDown className="size-2" />
-									{/if}
-								</span>
-							{:else}
-								<span class="invisible">
-									<ChevronUp className="size-2" />
-								</span>
-							{/if}
-						</div>
-					</th>
-
-					<th scope="col" class="px-3 py-2 text-right" />
-				</tr>
-			</thead>
-			<tbody class="">
-				{#each filteredUsers as user, userIdx}
-					<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
-						<td class="px-3 py-1 min-w-[7rem] w-28">
-							<button
-								class=" translate-y-0.5"
-								on:click={() => {
-									if (user.role === 'user') {
-										updateRoleHandler(user.id, 'admin');
-									} else if (user.role === 'pending') {
-										updateRoleHandler(user.id, 'user');
-									} else {
-										updateRoleHandler(user.id, 'pending');
-									}
-								}}
-							>
-								<Badge
-									type={user.role === 'admin' ? 'info' : user.role === 'user' ? 'success' : 'muted'}
-									content={$i18n.t(user.role)}
-								/>
-							</button>
-						</td>
-						<td class="px-3 py-1 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.startsWith(WEBUI_BASE_URL) ||
-									user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
-									user.profile_image_url.startsWith('data:')
-										? user.profile_image_url
-										: `/user.png`}
-									alt="user"
-								/>
-
-								<div class=" font-medium self-center">{user.name}</div>
-							</div>
-						</td>
-						<td class=" px-3 py-1"> {user.email} </td>
-
-						<td class=" px-3 py-1">
-							{dayjs(user.last_active_at * 1000).fromNow()}
-						</td>
-
-						<td class=" px-3 py-1">
-							{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
-						</td>
-
-						<td class=" px-3 py-1"> {user.oauth_sub ?? ''} </td>
-
-						<td class="px-3 py-1 text-right">
-							<div class="flex justify-end w-full">
-								{#if $config.features.enable_admin_chat_access && 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>
+								{:else}
+									<ChevronDown className="size-2" />
 								{/if}
+							</span>
+						{:else}
+							<span class="invisible">
+								<ChevronUp className="size-2" />
+							</span>
+						{/if}
+					</div>
+				</th>
+				<th
+					scope="col"
+					class="px-3 py-1.5 cursor-pointer select-none"
+					on:click={() => setSortKey('name')}
+				>
+					<div class="flex gap-1.5 items-center">
+						{$i18n.t('Name')}
 
-								<Tooltip content={$i18n.t('Edit User')}>
+						{#if sortKey === 'name'}
+							<span class="font-normal"
+								>{#if sortOrder === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							</span>
+						{:else}
+							<span class="invisible">
+								<ChevronUp className="size-2" />
+							</span>
+						{/if}
+					</div>
+				</th>
+				<th
+					scope="col"
+					class="px-3 py-1.5 cursor-pointer select-none"
+					on:click={() => setSortKey('email')}
+				>
+					<div class="flex gap-1.5 items-center">
+						{$i18n.t('Email')}
+
+						{#if sortKey === 'email'}
+							<span class="font-normal"
+								>{#if sortOrder === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							</span>
+						{:else}
+							<span class="invisible">
+								<ChevronUp className="size-2" />
+							</span>
+						{/if}
+					</div>
+				</th>
+
+				<th
+					scope="col"
+					class="px-3 py-1.5 cursor-pointer select-none"
+					on:click={() => setSortKey('last_active_at')}
+				>
+					<div class="flex gap-1.5 items-center">
+						{$i18n.t('Last Active')}
+
+						{#if sortKey === 'last_active_at'}
+							<span class="font-normal"
+								>{#if sortOrder === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							</span>
+						{:else}
+							<span class="invisible">
+								<ChevronUp className="size-2" />
+							</span>
+						{/if}
+					</div>
+				</th>
+				<th
+					scope="col"
+					class="px-3 py-1.5 cursor-pointer select-none"
+					on:click={() => setSortKey('created_at')}
+				>
+					<div class="flex gap-1.5 items-center">
+						{$i18n.t('Created at')}
+						{#if sortKey === 'created_at'}
+							<span class="font-normal"
+								>{#if sortOrder === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							</span>
+						{:else}
+							<span class="invisible">
+								<ChevronUp className="size-2" />
+							</span>
+						{/if}
+					</div>
+				</th>
+
+				<th
+					scope="col"
+					class="px-3 py-1.5 cursor-pointer select-none"
+					on:click={() => setSortKey('oauth_sub')}
+				>
+					<div class="flex gap-1.5 items-center">
+						{$i18n.t('OAuth ID')}
+
+						{#if sortKey === 'oauth_sub'}
+							<span class="font-normal"
+								>{#if sortOrder === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							</span>
+						{:else}
+							<span class="invisible">
+								<ChevronUp className="size-2" />
+							</span>
+						{/if}
+					</div>
+				</th>
+
+				<th scope="col" class="px-3 py-2 text-right" />
+			</tr>
+		</thead>
+		<tbody class="">
+			{#each filteredUsers as user, userIdx}
+				<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
+					<td class="px-3 py-1 min-w-[7rem] w-28">
+						<button
+							class=" translate-y-0.5"
+							on:click={() => {
+								if (user.role === 'user') {
+									updateRoleHandler(user.id, 'admin');
+								} else if (user.role === 'pending') {
+									updateRoleHandler(user.id, 'user');
+								} else {
+									updateRoleHandler(user.id, 'pending');
+								}
+							}}
+						>
+							<Badge
+								type={user.role === 'admin' ? 'info' : user.role === 'user' ? 'success' : 'muted'}
+								content={$i18n.t(user.role)}
+							/>
+						</button>
+					</td>
+					<td class="px-3 py-1 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.startsWith(WEBUI_BASE_URL) ||
+								user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
+								user.profile_image_url.startsWith('data:')
+									? user.profile_image_url
+									: `/user.png`}
+								alt="user"
+							/>
+
+							<div class=" font-medium self-center">{user.name}</div>
+						</div>
+					</td>
+					<td class=" px-3 py-1"> {user.email} </td>
+
+					<td class=" px-3 py-1">
+						{dayjs(user.last_active_at * 1000).fromNow()}
+					</td>
+
+					<td class=" px-3 py-1">
+						{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
+					</td>
+
+					<td class=" px-3 py-1"> {user.oauth_sub ?? ''} </td>
+
+					<td class="px-3 py-1 text-right">
+						<div class="flex justify-end w-full">
+							{#if $config.features.enable_admin_chat_access && 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 () => {
-											showEditUserModal = !showEditUserModal;
+											showUserChatsModal = !showUserChatsModal;
+											selectedUser = user;
+										}}
+									>
+										<ChatBubbles />
+									</button>
+								</Tooltip>
+							{/if}
+
+							<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>
+
+							{#if user.role !== 'admin'}
+								<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 () => {
+											showDeleteConfirmDialog = true;
 											selectedUser = user;
 										}}
 									>
@@ -417,49 +430,22 @@
 											<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"
+												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>
 
-								{#if user.role !== 'admin'}
-									<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 () => {
-												showDeleteConfirmDialog = true;
-												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="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-1.5 text-right">
+	ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
+</div>
 
-	<div class=" text-gray-500 text-xs mt-1.5 text-right">
-		ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
-	</div>
-
-	<Pagination bind:page count={users.length} />
-{/if}
+<Pagination bind:page count={users.length} />
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 4cac7811b..6b739f0e7 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -470,44 +470,42 @@
 			</button>
 		</div>
 
-		{#if $user?.role === 'admin'}
-			<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
-				<a
-					class="flex-grow flex space-x-3 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-					href="/workspace"
-					on:click={() => {
-						selectedChatId = null;
-						chatId.set('');
+		<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
+			<a
+				class="flex-grow flex space-x-3 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+				href="/workspace"
+				on:click={() => {
+					selectedChatId = null;
+					chatId.set('');
 
-						if ($mobile) {
-							showSidebar.set(false);
-						}
-					}}
-					draggable="false"
-				>
-					<div class="self-center">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="2"
-							stroke="currentColor"
-							class="size-[1.1rem]"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
-							/>
-						</svg>
-					</div>
+					if ($mobile) {
+						showSidebar.set(false);
+					}
+				}}
+				draggable="false"
+			>
+				<div class="self-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="size-[1.1rem]"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
+						/>
+					</svg>
+				</div>
 
-					<div class="flex self-center">
-						<div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div>
-					</div>
-				</a>
-			</div>
-		{/if}
+				<div class="flex self-center">
+					<div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div>
+				</div>
+			</a>
+		</div>
 
 		<div class="relative {$temporaryChatEnabled ? 'opacity-20' : ''}">
 			{#if $temporaryChatEnabled}
diff --git a/src/lib/components/workspace/Knowledge/Collection.svelte b/src/lib/components/workspace/Knowledge/Collection.svelte
index 932bcfe19..cf69f7f37 100644
--- a/src/lib/components/workspace/Knowledge/Collection.svelte
+++ b/src/lib/components/workspace/Knowledge/Collection.svelte
@@ -596,7 +596,7 @@
 	}}
 />
 
-<div class="flex flex-col w-full h-full max-h-[100dvh] mt-1" id="collection-container">
+<div class="flex flex-col w-full h-full max-h-[100dvh] translate-y-1" id="collection-container">
 	{#if id && knowledge}
 		<div class="flex flex-row flex-1 h-full max-h-full pb-2.5">
 			<PaneGroup direction="horizontal">
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index ad990838a..1c0d6864c 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -8,12 +8,11 @@
 	const { saveAs } = fileSaver;
 
 	import { onMount, getContext, tick } from 'svelte';
-
-	import { WEBUI_NAME, config, mobile, models, settings, user } from '$lib/stores';
-	import { addNewModel, deleteModelById, getModelInfos, updateModelById } from '$lib/apis/models';
-
-	import { deleteModel } from '$lib/apis/ollama';
 	import { goto } from '$app/navigation';
+	const i18n = getContext('i18n');
+
+	import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
+	import { addNewModel, deleteModelById, getModelInfos, updateModelById } from '$lib/apis/models';
 
 	import { getModels } from '$lib/apis';
 
@@ -25,24 +24,21 @@
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
 
-	const i18n = getContext('i18n');
-
 	let shiftKey = false;
 
-	let showModelDeleteConfirm = false;
-
 	let localModelfiles = [];
-
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
 
-	let _models = [];
+	let models = [];
 
 	let filteredModels = [];
 	let selectedModel = null;
 
-	$: if (_models) {
-		filteredModels = _models
+	let showModelDeleteConfirm = false;
+
+	$: if (models) {
+		filteredModels = models
 			.filter((m) => m?.owned_by !== 'arena')
 			.filter(
 				(m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase())
@@ -69,8 +65,8 @@
 			toast.success($i18n.t(`Deleted {{name}}`, { name: model.id }));
 		}
 
-		await models.set(await getModels(localStorage.token));
-		_models = $models;
+		await _models.set(await getModels(localStorage.token));
+		models = $_models;
 	};
 
 	const cloneModelHandler = async (model) => {
@@ -110,7 +106,7 @@
 
 	const moveToTopHandler = async (model) => {
 		// find models with position 0 and set them to 1
-		const topModels = _models.filter((m) => m.info?.meta?.position === 0);
+		const topModels = models.filter((m) => m.info?.meta?.position === 0);
 		for (const m of topModels) {
 			let info = m.info;
 			if (!info) {
@@ -156,8 +152,8 @@
 			toast.success($i18n.t(`Model {{name}} is now at the top`, { name: info.id }));
 		}
 
-		await models.set(await getModels(localStorage.token));
-		_models = $models;
+		await _models.set(await getModels(localStorage.token));
+		models = $_models;
 	};
 
 	const hideModelHandler = async (model) => {
@@ -192,8 +188,8 @@
 			);
 		}
 
-		await models.set(await getModels(localStorage.token));
-		_models = $models;
+		await _models.set(await getModels(localStorage.token));
+		models = $_models;
 	};
 
 	const downloadModels = async (models) => {
@@ -218,7 +214,7 @@
 
 		// Update the position of the models
 		for (const [index, id] of modelIds.entries()) {
-			const model = $models.find((m) => m.id === id);
+			const model = $_models.find((m) => m.id === id);
 			if (model) {
 				let info = model.info;
 
@@ -242,27 +238,32 @@
 		}
 
 		await tick();
-		await models.set(await getModels(localStorage.token));
+		await _models.set(await getModels(localStorage.token));
 	};
 
 	onMount(async () => {
-		// Legacy code to sync localModelfiles with models
-		_models = $models;
-		localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
+		if ($user?.role === 'admin') {
+			models = $_models;
 
-		if (localModelfiles) {
-			console.log(localModelfiles);
-		}
+			// Legacy code to sync localModelfiles with models
+			localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
 
-		if (!$mobile) {
-			// SortableJS
-			sortable = new Sortable(document.getElementById('model-list'), {
-				animation: 150,
-				onUpdate: async (event) => {
-					console.log(event);
-					positionChangeHandler();
-				}
-			});
+			if (localModelfiles) {
+				console.log(localModelfiles);
+			}
+
+			if (!$mobile) {
+				// SortableJS
+				sortable = new Sortable(document.getElementById('model-list'), {
+					animation: 150,
+					onUpdate: async (event) => {
+						console.log(event);
+						positionChangeHandler();
+					}
+				});
+			}
+		} else {
+			models = [];
 		}
 
 		const onKeyDown = (event) => {
@@ -555,7 +556,7 @@
 
 						for (const model of savedModels) {
 							if (model?.info ?? false) {
-								if ($models.find((m) => m.id === model.id)) {
+								if ($_models.find((m) => m.id === model.id)) {
 									await updateModelById(localStorage.token, model.id, model.info).catch((error) => {
 										return null;
 									});
@@ -567,8 +568,8 @@
 							}
 						}
 
-						await models.set(await getModels(localStorage.token));
-						_models = $models;
+						await _models.set(await getModels(localStorage.token));
+						models = $_models;
 					};
 
 					reader.readAsText(importFiles[0]);
@@ -602,7 +603,7 @@
 			<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 () => {
-					downloadModels($models);
+					downloadModels($_models);
 				}}
 			>
 				<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Models')}</div>
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 560e1adb3..a87db846b 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -12,24 +12,14 @@
 		tools
 	} from '$lib/stores';
 	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
 
 	import MenuLines from '$lib/components/icons/MenuLines.svelte';
-	import { getModels } from '$lib/apis';
-	import { getPrompts } from '$lib/apis/prompts';
-	import { getKnowledgeItems } from '$lib/apis/knowledge';
-	import { getTools } from '$lib/apis/tools';
-	import { getFunctions } from '$lib/apis/functions';
 
 	const i18n = getContext('i18n');
 
 	let loaded = false;
 
 	onMount(async () => {
-		if ($user?.role !== 'admin') {
-			await goto('/');
-		}
-
 		loaded = true;
 	});
 </script>
@@ -92,25 +82,27 @@
 							href="/workspace/prompts">{$i18n.t('Prompts')}</a
 						>
 
-						<a
-							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools')
-								? ''
-								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-							href="/workspace/tools"
-						>
-							{$i18n.t('Tools')}
-						</a>
+						{#if $user?.role === 'admin'}
+							<a
+								class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools')
+									? ''
+									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+								href="/workspace/tools"
+							>
+								{$i18n.t('Tools')}
+							</a>
 
-						<a
-							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
-								'/workspace/functions'
-							)
-								? ''
-								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-							href="/workspace/functions"
-						>
-							{$i18n.t('Functions')}
-						</a>
+							<a
+								class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
+									'/workspace/functions'
+								)
+									? ''
+									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+								href="/workspace/functions"
+							>
+								{$i18n.t('Functions')}
+							</a>
+						{/if}
 					</div>
 				</div>