feat: dm channels

src/lib/components/admin/Users/Groups/Users.svelte

@@ -113,7 +113,7 @@
 					class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full"
 				>
 					<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
-						<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850">
+						<tr class=" border-b-[1.5px] border-gray-50/50 dark:border-gray-800/10">
 							<th
 								scope="col"
 								class="px-2.5 py-2 cursor-pointer text-left w-8"

src/lib/components/channel/ChannelInfoModal.svelte

@@ -36,19 +36,27 @@
 			<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
 				<div class="self-center text-base">
 					<div class="flex items-center gap-0.5 shrink-0">
-						<div class=" size-4 justify-center flex items-center">
-							{#if channel?.access_control === null}
-								<Hashtag className="size-3.5" strokeWidth="2.5" />
-							{:else}
-								<Lock className="size-5.5" strokeWidth="2" />
-							{/if}
-						</div>
+						{#if channel?.type === 'dm'}
+							<div
+								class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
+							>
+								{$i18n.t('Direct Message')}
+							</div>
+						{:else}
+							<div class=" size-4 justify-center flex items-center">
+								{#if channel?.access_control === null}
+									<Hashtag className="size-3.5" strokeWidth="2.5" />
+								{:else}
+									<Lock className="size-5.5" strokeWidth="2" />
+								{/if}
+							</div>
 
-						<div
-							class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
-						>
-							{channel.name}
-						</div>
+							<div
+								class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
+							>
+								{channel.name}
+							</div>
+						{/if}
 					</div>
 				</div>
 				<button
@@ -71,7 +79,7 @@
 						}}
 					>
 						<div class="flex flex-col w-full h-full pb-2">
-							<UserList {channel} />
+							<UserList {channel} search={channel?.type !== 'dm'} sort={channel?.type !== 'dm'} />
 						</div>
 					</form>
 				</div>

src/lib/components/channel/ChannelInfoModal/UserList.svelte

@@ -11,7 +11,7 @@
 	dayjs.extend(localizedFormat);
 
 	import { toast } from 'svelte-sonner';
-	import { getChannelUsersById } from '$lib/apis/channels';
+	import { getChannelMembersById } from '$lib/apis/channels';
 
 	import Pagination from '$lib/components/common/Pagination.svelte';
 	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
@@ -37,6 +37,8 @@
 	const i18n = getContext('i18n');
 
 	export let channel = null;
+	export let search = true;
+	export let sort = true;
 
 	let page = 1;
 
@@ -48,6 +50,10 @@
 	let direction = 'asc'; // default sort order
 
 	const setSortKey = (key) => {
+		if (!sort) {
+			return;
+		}
+
 		if (orderBy === key) {
 			direction = direction === 'asc' ? 'desc' : 'asc';
 		} else {
@@ -58,7 +64,7 @@
 
 	const getUserList = async () => {
 		try {
-			const res = await getChannelUsersById(
+			const res = await getChannelMembersById(
 				localStorage.token,
 				channel.id,
 				query,
@@ -90,31 +96,33 @@
 			<Spinner className="size-5" />
 		</div>
 	{:else}
-		<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>
+		{#if search}
+			<div class="flex gap-1 px-0.5">
+				<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-hidden bg-transparent"
+							bind:value={query}
+							placeholder={$i18n.t('Search')}
+						/>
 					</div>
-					<input
-						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
-						bind:value={query}
-						placeholder={$i18n.t('Search')}
-					/>
 				</div>
 			</div>
-		</div>
+		{/if}
 
 		{#if users.length > 0}
 			<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
@@ -123,9 +131,10 @@
 						class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200 w-full mb-0.5"
 					>
 						<div
-							class=" border-b-[1.5px] border-gray-50 dark:border-gray-850 flex items-center justify-between"
+							class=" border-b-[1.5px] border-gray-50/50 dark:border-gray-800/10 flex items-center justify-between"
 						>
 							<button
+								type="button"
 								class="px-2.5 py-2 cursor-pointer select-none"
 								on:click={() => setSortKey('name')}
 							>
@@ -149,6 +158,7 @@
 							</button>
 
 							<button
+								type="button"
 								class="px-2.5 py-2 cursor-pointer select-none"
 								on:click={() => setSortKey('role')}
 							>

src/lib/components/channel/Messages.svelte

@@ -17,6 +17,7 @@
 	import Loader from '../common/Loader.svelte';
 	import Spinner from '../common/Spinner.svelte';
 	import { addReaction, deleteMessage, removeReaction, updateMessage } from '$lib/apis/channels';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -68,7 +69,31 @@
 			<div class="px-5 max-w-full mx-auto">
 				{#if channel}
 					<div class="flex flex-col gap-1.5 pb-5 pt-10">
-						<div class="text-2xl font-medium capitalize">{channel.name}</div>
+						{#if channel?.type === 'dm'}
+							<div class="flex ml-[1px] mr-0.5">
+								{#each channel.users.filter((u) => u.id !== $user?.id).slice(0, 2) as u, index}
+									<img
+										src={`${WEBUI_API_BASE_URL}/users/${u.id}/profile/image`}
+										alt={u.name}
+										class=" size-7.5 rounded-full border-2 border-white dark:border-gray-900 {index ===
+										1
+											? '-ml-2.5'
+											: ''}"
+									/>
+								{/each}
+							</div>
+						{/if}
+
+						<div class="text-2xl font-medium capitalize">
+							{#if channel?.name}
+								{channel.name}
+							{:else}
+								{channel?.users
+									?.filter((u) => u.id !== $user?.id)
+									.map((u) => u.name)
+									.join(', ')}
+							{/if}
+						</div>
 
 						<div class=" text-gray-500">
 							{$i18n.t(

src/lib/components/channel/Navbar.svelte

@@ -17,6 +17,7 @@
 	import Lock from '../icons/Lock.svelte';
 	import UserAlt from '../icons/UserAlt.svelte';
 	import ChannelInfoModal from './ChannelInfoModal.svelte';
+	import Users from '../icons/Users.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -60,24 +61,50 @@
 			{/if}
 
 			<div
-				class="flex-1 overflow-hidden max-w-full py-0.5
+				class="flex-1 overflow-hidden max-w-full py-0.5 flex items-center
 			{$showSidebar ? 'ml-1' : ''}
 			"
 			>
 				{#if channel}
 					<div class="flex items-center gap-0.5 shrink-0">
-						<div class=" size-4 justify-center flex items-center">
-							{#if channel?.access_control === null}
-								<Hashtag className="size-3" strokeWidth="2.5" />
+						{#if channel?.type === 'dm'}
+							{#if channel?.users}
+								<div class="flex mr-1.5">
+									{#each channel.users.filter((u) => u.id !== $user?.id).slice(0, 2) as u, index}
+										<img
+											src={`${WEBUI_API_BASE_URL}/users/${u.id}/profile/image`}
+											alt={u.name}
+											class=" size-6.5 rounded-full border-2 border-white dark:border-gray-900 {index ===
+											1
+												? '-ml-3'
+												: ''}"
+										/>
+									{/each}
+								</div>
 							{:else}
-								<Lock className="size-5" strokeWidth="2" />
+								<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
 							{/if}
-						</div>
+						{:else}
+							<div class=" size-4.5 justify-center flex items-center">
+								{#if channel?.access_control === null}
+									<Hashtag className="size-3.5" strokeWidth="2.5" />
+								{:else}
+									<Lock className="size-5" strokeWidth="2" />
+								{/if}
+							</div>
+						{/if}
 
 						<div
 							class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
 						>
-							{channel.name}
+							{#if channel?.name}
+								{channel.name}
+							{:else}
+								{channel?.users
+									?.filter((u) => u.id !== $user?.id)
+									.map((u) => u.name)
+									.join(', ')}
+							{/if}
 						</div>
 					</div>
 				{/if}

src/lib/components/layout/Sidebar.svelte

@@ -181,7 +181,11 @@
 	};
 
 	const initChannels = async () => {
-		await channels.set(await getChannels(localStorage.token));
+		await channels.set(
+			(await getChannels(localStorage.token)).sort((a, b) =>
+				a.type === b.type ? 0 : a.type === 'dm' ? 1 : -1
+			)
+		);
 	};
 
 	const initChatList = async () => {
@@ -482,16 +486,26 @@
 
 <ChannelModal
 	bind:show={showCreateChannel}
-	onSubmit={async ({ name, access_control }) => {
+	onSubmit={async ({ type, name, access_control, user_ids }) => {
 		name = name?.trim();
-		if (!name) {
-			toast.error($i18n.t('Channel name cannot be empty.'));
-			return;
+
+		if (type === 'dm') {
+			if (!user_ids || user_ids.length === 0) {
+				toast.error($i18n.t('Please select at least one user for Direct Message channel.'));
+				return;
+			}
+		} else {
+			if (!name) {
+				toast.error($i18n.t('Channel name cannot be empty.'));
+				return;
+			}
 		}
 
 		const res = await createNewChannel(localStorage.token, {
+			type: type,
 			name: name,
-			access_control: access_control
+			access_control: access_control,
+			user_ids: user_ids
 		}).catch((error) => {
 			toast.error(`${error}`);
 			return null;
@@ -501,6 +515,8 @@
 			$socket.emit('join-channels', { auth: { token: $user?.token } });
 			await initChannels();
 			showCreateChannel = false;
+
+			goto(`/channels/${res.id}`);
 		}
 	}}
 />
@@ -925,13 +941,18 @@
 							: null}
 						onAddLabel={$i18n.t('Create Channel')}
 					>
-						{#each $channels as channel}
+						{#each $channels as channel, channelIdx (`${channel?.id}`)}
 							<ChannelItem
 								{channel}
 								onUpdate={async () => {
 									await initChannels();
 								}}
 							/>
+
+							{#if channelIdx < $channels.length - 1 && channel.type !== $channels[channelIdx + 1]?.type}<hr
+									class=" border-gray-100 dark:border-gray-800/10 my-1.5 w-full"
+								/>
+							{/if}
 						{/each}
 					</Folder>
 				{/if}

src/lib/components/layout/Sidebar/ChannelItem.svelte

@@ -5,12 +5,15 @@
 
 	import { page } from '$app/stores';
 	import { channels, mobile, showSidebar, user } from '$lib/stores';
-	import { updateChannelById } from '$lib/apis/channels';
+	import { updateChannelById, updateChannelMemberActiveStatusById } from '$lib/apis/channels';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	import Cog6 from '$lib/components/icons/Cog6.svelte';
 	import ChannelModal from './ChannelModal.svelte';
 	import Lock from '$lib/components/icons/Lock.svelte';
 	import Hashtag from '$lib/components/icons/Hashtag.svelte';
+	import Users from '$lib/components/icons/Users.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
 
 	export let onUpdate: Function = () => {};
 
@@ -49,7 +52,7 @@
 	class=" w-full {className} rounded-xl flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
 		.url.pathname === `/channels/${channel.id}`
 		? 'bg-gray-100 dark:bg-gray-900 selected'
-		: ''} px-2.5 py-1 {channel?.unread_count > 0
+		: ''} {channel?.type === 'dm' ? 'px-1 py-[3px]' : 'p-1'}  {channel?.unread_count > 0
 		? 'font-medium dark:text-white text-black'
 		: ' dark:text-gray-400 text-gray-600'} cursor-pointer select-none"
 >
@@ -76,17 +79,45 @@
 		}}
 		draggable="false"
 	>
-		<div class="flex items-center gap-1 shrink-0">
-			<div class=" size-4 justify-center flex items-center">
-				{#if channel?.access_control === null}
-					<Hashtag className="size-3" strokeWidth="2.5" />
+		<div class="flex items-center gap-1">
+			<div>
+				{#if channel?.type === 'dm'}
+					{#if channel?.users}
+						<div class="flex ml-[1px] mr-0.5">
+							{#each channel.users.filter((u) => u.id !== $user?.id).slice(0, 2) as u, index}
+								<img
+									src={`${WEBUI_API_BASE_URL}/users/${u.id}/profile/image`}
+									alt={u.name}
+									class=" size-5.5 rounded-full border-2 border-white dark:border-gray-900 {index ===
+									1
+										? '-ml-2.5'
+										: ''}"
+								/>
+							{/each}
+						</div>
+					{:else}
+						<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
+					{/if}
 				{:else}
-					<Lock className="size-[15px]" strokeWidth="2" />
+					<div class=" size-4 justify-center flex items-center ml-1">
+						{#if channel?.access_control === null}
+							<Hashtag className="size-3.5" strokeWidth="2.5" />
+						{:else}
+							<Lock className="size-[15px]" strokeWidth="2" />
+						{/if}
+					</div>
 				{/if}
 			</div>
 
-			<div class=" text-left self-center overflow-hidden w-full line-clamp-1 flex-1">
-				{channel.name}
+			<div class=" text-left self-center overflow-hidden w-full line-clamp-1 flex-1 pr-1">
+				{#if channel?.name}
+					{channel.name}
+				{:else}
+					{channel?.users
+						?.filter((u) => u.id !== $user?.id)
+						.map((u) => u.name)
+						.join(', ')}
+				{/if}
 			</div>
 		</div>
 
@@ -101,20 +132,51 @@
 					}).format(channel.unread_count)}
 				</div>
 			{/if}
-
-			{#if $user?.role === 'admin'}
-				<div
-					class="right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-					on:click={(e) => {
-						e.stopPropagation();
-						showEditChannelModal = true;
-					}}
-				>
-					<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
-						<Cog6 className="size-3.5" />
-					</button>
-				</div>
-			{/if}
 		</div>
 	</a>
+
+	{#if channel?.type === 'dm'}
+		<div
+			class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+		>
+			<button
+				type="button"
+				class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
+				on:click={async (e) => {
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+
+					channels.update((chs) =>
+						chs.filter((ch) => {
+							return ch.id !== channel.id;
+						})
+					);
+
+					await updateChannelMemberActiveStatusById(localStorage.token, channel.id, false).catch(
+						(error) => {
+							toast.error(`${error}`);
+						}
+					);
+				}}
+			>
+				<XMark className="size-3.5" />
+			</button>
+		</div>
+	{:else if $user?.role === 'admin'}
+		<div
+			class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+		>
+			<button
+				type="button"
+				class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
+				on:click={(e) => {
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+					showEditChannelModal = true;
+				}}
+			>
+				<Cog6 className="size-3.5" />
+			</button>
+		</div>
+	{/if}
 </div>

src/lib/components/layout/Sidebar/ChannelModal.svelte

@@ -11,6 +11,7 @@
 	import { toast } from 'svelte-sonner';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import UserListSelector from '$lib/components/workspace/common/UserListSelector.svelte';
 	const i18n = getContext('i18n');
 
 	export let show = false;
@@ -20,8 +21,11 @@
 	export let channel = null;
 	export let edit = false;
 
+	let type = '';
 	let name = '';
+
 	let accessControl = {};
+	let userIds = [];
 
 	let loading = false;
 
@@ -32,16 +36,20 @@
 	const submitHandler = async () => {
 		loading = true;
 		await onSubmit({
+			type: type,
 			name: name.replace(/\s/g, '-'),
-			access_control: accessControl
+			access_control: accessControl,
+			user_ids: userIds
 		});
 		show = false;
 		loading = false;
 	};
 
 	const init = () => {
-		name = channel.name;
+		type = channel?.type ?? '';
+		name = channel?.name ?? '';
 		accessControl = channel.access_control;
+		userIds = channel?.user_ids ?? [];
 	};
 
 	$: if (show) {
@@ -74,8 +82,10 @@
 	};
 
 	const resetHandler = () => {
+		type = '';
 		name = '';
 		accessControl = {};
+		userIds = [];
 		loading = false;
 	};
 </script>
@@ -109,25 +119,49 @@
 					}}
 				>
 					<div class="flex flex-col w-full mt-2">
-						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Channel Name')}</div>
+						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Channel Type')}</div>
+
+						<div class="flex-1">
+							<select
+								class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
+								bind:value={type}
+							>
+								<option value="">{$i18n.t('Channel')}</option>
+								<option value="dm">{$i18n.t('Direct Message')}</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="flex flex-col w-full mt-2">
+						<div class=" mb-1 text-xs text-gray-500">
+							{$i18n.t('Channel Name')}
+							<span class="text-xs text-gray-200 dark:text-gray-800 ml-0.5"
+								>{type === 'dm' ? `${$i18n.t('Optional')}` : ''}</span
+							>
+						</div>
 
 						<div class="flex-1">
 							<input
 								class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
 								type="text"
 								bind:value={name}
-								placeholder={$i18n.t('new-channel')}
+								placeholder={`${$i18n.t('new-channel')}`}
 								autocomplete="off"
+								required={type !== 'dm'}
 							/>
 						</div>
 					</div>
 
 					<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
-					<div class="my-2 -mx-2">
-						<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
-							<AccessControl bind:accessControl accessRoles={['read', 'write']} />
-						</div>
+					<div class="-mx-2">
+						{#if type === 'dm'}
+							<UserListSelector bind:userIds />
+						{:else}
+							<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
+								<AccessControl bind:accessControl accessRoles={['read', 'write']} />
+							</div>
+						{/if}
 					</div>
 
 					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">

src/lib/components/workspace/common/UserListSelector.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext, onMount } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import { user as _user } from '$lib/stores';
+	import { getUserById, getUsers } from '$lib/apis/users';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
+
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import Pagination from '$lib/components/common/Pagination.svelte';
+	import ProfilePreview from '$lib/components/channel/Messages/Message/ProfilePreview.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Checkbox from '$lib/components/common/Checkbox.svelte';
+
+	export let onChange: Function = () => {};
+	export let userIds = [];
+
+	export let pagination = false;
+
+	let selectedUsers = {};
+
+	let page = 1;
+	let users = null;
+	let total = null;
+
+	let query = '';
+	let orderBy = 'name'; // default sort key
+	let direction = 'asc'; // default sort order
+
+	const setSortKey = (key) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
+		} else {
+			orderBy = key;
+			direction = 'asc';
+		}
+	};
+
+	const getUserList = async () => {
+		try {
+			const res = await getUsers(localStorage.token, query, orderBy, direction, page).catch(
+				(error) => {
+					toast.error(`${error}`);
+					return null;
+				}
+			);
+
+			if (res) {
+				users = res.users;
+				total = res.total;
+			}
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
+		getUserList();
+	}
+
+	onMount(() => {
+		if (userIds.length > 0) {
+			userIds.forEach(async (id) => {
+				const res = await getUserById(localStorage.token, id).catch((error) => {
+					console.error(error);
+					return null;
+				});
+				if (res) {
+					selectedUsers[id] = res;
+				}
+			});
+		}
+	});
+</script>
+
+<div class="">
+	{#if users === null || total === null}
+		<div class="my-10">
+			<Spinner className="size-5" />
+		</div>
+	{:else}
+		{#if userIds.length > 0}
+			<div class="mx-1 mb-1.5">
+				<div class="text-xs text-gray-500 mx-0.5 mb-1">
+					{userIds.length}
+					{$i18n.t('users')}
+				</div>
+				<div class="flex gap-1 flex-wrap">
+					{#each userIds as id}
+						{#if selectedUsers[id]}
+							<button
+								type="button"
+								class="inline-flex items-center space-x-1 px-2 py-1 bg-gray-100/50 dark:bg-gray-850 rounded-lg text-xs"
+								on:click={() => {
+									userIds = userIds.filter((uid) => uid !== id);
+									delete selectedUsers[id];
+								}}
+							>
+								<div>
+									{selectedUsers[id].name}
+								</div>
+
+								<div>
+									<XMark className="size-3" />
+								</div>
+							</button>
+						{/if}
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<div class="flex gap-1 px-0.5">
+			<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-hidden bg-transparent"
+						bind:value={query}
+						placeholder={$i18n.t('Search')}
+					/>
+				</div>
+			</div>
+		</div>
+
+		{#if users.length > 0}
+			<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
+				<div class=" text-sm text-left text-gray-500 dark:text-gray-400 w-full max-w-full">
+					<div
+						class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200 w-full mb-0.5"
+					>
+						<div
+							class=" border-b-[1.5px] border-gray-50/50 dark:border-gray-800/10 flex items-center justify-between"
+						>
+							<button
+								type="button"
+								class="px-2.5 py-2 cursor-pointer select-none"
+								on:click={() => setSortKey('name')}
+							>
+								<div class="flex gap-1.5 items-center">
+									{$i18n.t('Name')}
+
+									{#if orderBy === 'name'}
+										<span class="font-normal"
+											>{#if direction === 'asc'}
+												<ChevronUp className="size-2" />
+											{:else}
+												<ChevronDown className="size-2" />
+											{/if}
+										</span>
+									{:else}
+										<span class="invisible">
+											<ChevronUp className="size-2" />
+										</span>
+									{/if}
+								</div>
+							</button>
+
+							<button type="button" class="px-2.5 py-2 cursor-pointer select-none">
+								<div class="flex gap-1.5 items-center">
+									{$i18n.t('MBR')}
+								</div>
+							</button>
+						</div>
+					</div>
+					<div class="w-full">
+						{#each users as user, userIdx}
+							{#if user?.id !== $_user?.id}
+								<button
+									class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
+									type="button"
+									on:click={() => {
+										if ((userIds ?? []).includes(user.id)) {
+											userIds = userIds.filter((id) => id !== user.id);
+											delete selectedUsers[user.id];
+										} else {
+											userIds = [...userIds, user.id];
+											selectedUsers[user.id] = user;
+										}
+										onChange(userIds);
+									}}
+								>
+									<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
+										<div class="flex items-center gap-2">
+											<ProfilePreview {user} side="right" align="center" sideOffset={6}>
+												<img
+													class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
+													src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
+													alt="user"
+												/>
+											</ProfilePreview>
+											<Tooltip content={user.email} placement="top-start">
+												<div class="font-medium truncate">{user.name}</div>
+											</Tooltip>
+
+											{#if user?.is_active}
+												<div>
+													<span class="relative flex size-1.5">
+														<span
+															class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+														></span>
+														<span class="relative inline-flex size-1.5 rounded-full bg-green-500"
+														></span>
+													</span>
+												</div>
+											{/if}
+										</div>
+									</div>
+
+									<div class="px-3 py-1">
+										<div class=" translate-y-0.5">
+											<Checkbox
+												state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
+											/>
+										</div>
+									</div>
+								</button>
+							{/if}
+						{/each}
+					</div>
+				</div>
+			</div>
+
+			{#if pagination}
+				{#if total > 30}
+					<Pagination bind:page count={total} perPage={30} />
+				{/if}
+			{/if}
+		{:else}
+			<div class="text-gray-500 text-xs text-center py-5 px-10">
+				{$i18n.t('No users were found.')}
+			</div>
+		{/if}
+	{/if}
+</div>