feat: user list in channels

src/lib/apis/channels/index.ts

@@ -101,6 +101,60 @@ export const getChannelById = async (token: string = '', channel_id: string) =>
 	return res;
 };
 
+export const getChannelUsersById = async (
+	token: string,
+	channel_id: string,
+	query?: string,
+	orderBy?: string,
+	direction?: string,
+	page = 1
+) => {
+	let error = null;
+	let res = null;
+
+	const searchParams = new URLSearchParams();
+
+	searchParams.set('page', `${page}`);
+
+	if (query) {
+		searchParams.set('query', query);
+	}
+
+	if (orderBy) {
+		searchParams.set('order_by', orderBy);
+	}
+
+	if (direction) {
+		searchParams.set('direction', direction);
+	}
+
+	res = await fetch(
+		`${WEBUI_API_BASE_URL}/channels/${channel_id}/users?${searchParams.toString()}`,
+		{
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${token}`
+			}
+		}
+	)
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const updateChannelById = async (
 	token: string = '',
 	channel_id: string,

src/lib/components/channel/ChannelInfoModal.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Modal from '$lib/components/common/Modal.svelte';
+
+	import UserPlusSolid from '$lib/components/icons/UserPlusSolid.svelte';
+	import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import Hashtag from '../icons/Hashtag.svelte';
+	import Lock from '../icons/Lock.svelte';
+	import UserList from './ChannelInfoModal/UserList.svelte';
+
+	export let show = false;
+	export let channel = null;
+
+	const submitHandler = async () => {};
+
+	const init = () => {};
+
+	$: if (show) {
+		init();
+	}
+
+	onMount(() => {
+		init();
+	});
+</script>
+
+{#if channel}
+	<Modal size="sm" bind:show>
+		<div>
+			<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>
+
+						<div
+							class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
+						>
+							{channel.name}
+						</div>
+					</div>
+				</div>
+				<button
+					class="self-center"
+					on:click={() => {
+						show = false;
+					}}
+				>
+					<XMark className={'size-5'} />
+				</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 flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
+							<UserList {channel} />
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</Modal>
+{/if}

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

@@ -0,0 +1,230 @@
+<script>
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
+	import { goto } from '$app/navigation';
+	import { onMount, getContext } from 'svelte';
+
+	import dayjs from 'dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+	import localizedFormat from 'dayjs/plugin/localizedFormat';
+	dayjs.extend(relativeTime);
+	dayjs.extend(localizedFormat);
+
+	import { toast } from 'svelte-sonner';
+	import { getChannelUsersById } from '$lib/apis/channels';
+
+	import Pagination from '$lib/components/common/Pagination.svelte';
+	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+
+	import EditUserModal from '$lib/components/admin/Users/UserList/EditUserModal.svelte';
+	import UserChatsModal from '$lib/components/admin/Users/UserList/UserChatsModal.svelte';
+	import AddUserModal from '$lib/components/admin/Users/UserList/AddUserModal.svelte';
+
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import RoleUpdateConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+
+	import Badge from '$lib/components/common/Badge.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import About from '$lib/components/chat/Settings/About.svelte';
+	import Banner from '$lib/components/common/Banner.svelte';
+	import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import ProfilePreview from '../Messages/Message/ProfilePreview.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let channel = null;
+
+	let page = 1;
+
+	let users = null;
+	let total = null;
+
+	let query = '';
+	let orderBy = 'created_at'; // 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 getChannelUsersById(
+				localStorage.token,
+				channel.id,
+				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) {
+		getUserList();
+	}
+
+	$: if (query !== null && orderBy && direction) {
+		getUserList();
+	}
+</script>
+
+<div class="flex flex-col">
+	{#if users === null || total === null}
+		<div class="my-10">
+			<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>
+					</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>
+
+		<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 dark:border-gray-850 flex items-center justify-between"
+					>
+						<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
+							class="px-2.5 py-2 cursor-pointer select-none"
+							on:click={() => setSortKey('role')}
+						>
+							<div class="flex gap-1.5 items-center">
+								{$i18n.t('Role')}
+
+								{#if orderBy === 'role'}
+									<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>
+					</div>
+				</div>
+				<div class="w-full">
+					{#each users as user, userIdx}
+						<div class=" dark:border-gray-850 text-xs flex items-center justify-between">
+							<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">
+									<Badge
+										type={user.role === 'admin'
+											? 'info'
+											: user.role === 'user'
+												? 'success'
+												: 'muted'}
+										content={$i18n.t(user.role)}
+									/>
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+
+		{#if total > 30}
+			<Pagination bind:page count={total} perPage={30} />
+		{/if}
+	{/if}
+</div>

src/lib/components/channel/Messages/Message/ProfilePreview.svelte

@@ -7,6 +7,10 @@
 	import UserStatusLinkPreview from './UserStatusLinkPreview.svelte';
 
 	export let user = null;
+
+	export let align = 'center';
+	export let side = 'right';
+	export let sideOffset = 8;
 </script>
 
 <LinkPreview.Root openDelay={0} closeDelay={0}>
@@ -14,5 +18,5 @@
 		<slot />
 	</LinkPreview.Trigger>
 
-	<UserStatusLinkPreview id={user?.id} side="right" align="center" sideOffset={8} />
+	<UserStatusLinkPreview id={user?.id} {side} {align} {sideOffset} />
 </LinkPreview.Root>

src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte

@@ -27,7 +27,7 @@
 
 {#if user}
 	<LinkPreview.Content
-		class="w-full max-w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-999 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
+		class="w-full max-w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-[99999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
 		{side}
 		{align}
 		{sideOffset}

src/lib/components/channel/Navbar.svelte

@@ -16,12 +16,16 @@
 	import Hashtag from '../icons/Hashtag.svelte';
 	import Lock from '../icons/Lock.svelte';
 	import UserAlt from '../icons/UserAlt.svelte';
+	import ChannelInfoModal from './ChannelInfoModal.svelte';
 
 	const i18n = getContext('i18n');
 
+	let showChannelInfoModal = false;
+
 	export let channel;
 </script>
 
+<ChannelInfoModal bind:show={showChannelInfoModal} {channel} />
 <nav class="sticky top-0 z-30 w-full px-1.5 py-1 -mb-8 flex items-center drag-region">
 	<div
 		id="navbar-bg-gradient-to-b"
@@ -85,6 +89,10 @@
 						<button
 							class=" flex cursor-pointer py-1 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
 							aria-label="User Count"
+							type="button"
+							on:click={() => {
+								showChannelInfoModal = true;
+							}}
 						>
 							<div class=" flex items-center gap-0.5 m-auto self-center">
 								<UserAlt className=" size-4" strokeWidth="1.5" />