feat: user list in channels

backend/open_webui/models/users.py

@@ -99,7 +99,16 @@ class UserGroupIdsModel(UserModel):
     group_ids: list[str] = []
 
 
+class UserModelResponse(UserModel):
+    model_config = ConfigDict(extra="allow")
+
+
 class UserListResponse(BaseModel):
+    users: list[UserModelResponse]
+    total: int
+
+
+class UserGroupIdsListResponse(BaseModel):
     users: list[UserGroupIdsModel]
     total: int
 
@@ -239,6 +248,31 @@ class UsersTable:
                         )
                     )
 
+                user_ids = filter.get("user_ids")
+                if user_ids:
+                    query = query.filter(User.id.in_(user_ids))
+
+                group_ids = filter.get("group_ids")
+                if group_ids:
+                    query = query.filter(
+                        exists(
+                            select(GroupMember.id).where(
+                                GroupMember.user_id == User.id,
+                                GroupMember.group_id.in_(group_ids),
+                            )
+                        )
+                    )
+
+                roles = filter.get("roles")
+                if roles:
+                    include_roles = [role for role in roles if not role.startswith("!")]
+                    exclude_roles = [role[1:] for role in roles if role.startswith("!")]
+
+                    if include_roles:
+                        query = query.filter(User.role.in_(include_roles))
+                    if exclude_roles:
+                        query = query.filter(~User.role.in_(exclude_roles))
+
                 order_by = filter.get("order_by")
                 direction = filter.get("direction")
 

backend/open_webui/routers/channels.py

@@ -7,8 +7,17 @@ from fastapi import APIRouter, Depends, HTTPException, Request, status, Backgrou
 from pydantic import BaseModel
 
 
-from open_webui.socket.main import sio, get_user_ids_from_room
+from open_webui.socket.main import (
-from open_webui.models.users import Users, UserNameResponse
+    sio,
+    get_user_ids_from_room,
+    get_active_status_by_user_id,
+)
+from open_webui.models.users import (
+    UserListResponse,
+    UserModelResponse,
+    Users,
+    UserNameResponse,
+)
 
 from open_webui.models.groups import Groups
 from open_webui.models.channels import (
@@ -38,7 +47,11 @@ from open_webui.utils.chat import generate_chat_completion
 
 
 from open_webui.utils.auth import get_admin_user, get_verified_user
-from open_webui.utils.access_control import has_access, get_users_with_access
+from open_webui.utils.access_control import (
+    has_access,
+    get_users_with_access,
+    get_permitted_group_and_user_ids,
+)
 from open_webui.utils.webhook import post_webhook
 from open_webui.utils.channels import extract_mentions, replace_mentions
 
@@ -116,6 +129,64 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
     )
 
 
+PAGE_ITEM_COUNT = 30
+
+
+@router.get("/{id}/users", response_model=UserListResponse)
+async def get_channel_users_by_id(
+    id: str,
+    query: Optional[str] = None,
+    order_by: Optional[str] = None,
+    direction: Optional[str] = None,
+    page: Optional[int] = 1,
+    user=Depends(get_verified_user),
+):
+
+    channel = Channels.get_channel_by_id(id)
+    if not channel:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
+        )
+
+    limit = PAGE_ITEM_COUNT
+
+    page = max(1, page)
+    skip = (page - 1) * limit
+
+    filter = {
+        "roles": ["!pending"],
+    }
+
+    if query:
+        filter["query"] = query
+    if order_by:
+        filter["order_by"] = order_by
+    if direction:
+        filter["direction"] = direction
+
+    permitted_ids = get_permitted_group_and_user_ids("read", channel.access_control)
+    if permitted_ids:
+        if permitted_ids.get("user_ids"):
+            filter["user_ids"] = permitted_ids.get("user_ids")
+        if permitted_ids.get("group_ids"):
+            filter["group_ids"] = permitted_ids.get("group_ids")
+
+    result = Users.get_users(filter=filter, skip=skip, limit=limit)
+
+    users = result["users"]
+    total = result["total"]
+
+    return {
+        "users": [
+            UserModelResponse(
+                **user.model_dump(), is_active=get_active_status_by_user_id(user.id)
+            )
+            for user in users
+        ],
+        "total": total,
+    }
+
+
 ############################
 # UpdateChannelById
 ############################

backend/open_webui/routers/users.py

@@ -17,7 +17,7 @@ from open_webui.models.chats import Chats
 from open_webui.models.users import (
     UserModel,
     UserGroupIdsModel,
-    UserListResponse,
+    UserGroupIdsListResponse,
     UserInfoListResponse,
     UserIdNameListResponse,
     UserRoleUpdateForm,
@@ -76,7 +76,7 @@ async def get_active_users(
 PAGE_ITEM_COUNT = 30
 
 
-@router.get("/", response_model=UserListResponse)
+@router.get("/", response_model=UserGroupIdsListResponse)
 async def get_users(
     query: Optional[str] = None,
     order_by: Optional[str] = None,

backend/open_webui/utils/access_control.py

@@ -105,6 +105,22 @@ def has_permission(
     return get_permission(default_permissions, permission_hierarchy)
 
 
+def get_permitted_group_and_user_ids(
+    type: str = "write", access_control: Optional[dict] = None
+) -> Union[Dict[str, List[str]], None]:
+    if access_control is None:
+        return None
+
+    permission_access = access_control.get(type, {})
+    permitted_group_ids = permission_access.get("group_ids", [])
+    permitted_user_ids = permission_access.get("user_ids", [])
+
+    return {
+        "group_ids": permitted_group_ids,
+        "user_ids": permitted_user_ids,
+    }
+
+
 def has_access(
     user_id: str,
     type: str = "write",
@@ -122,9 +138,12 @@ def has_access(
         user_groups = Groups.get_groups_by_member_id(user_id)
         user_group_ids = {group.id for group in user_groups}
 
-    permission_access = access_control.get(type, {})
+    permitted_ids = get_permitted_group_and_user_ids(type, access_control)
-    permitted_group_ids = permission_access.get("group_ids", [])
+    if permitted_ids is None:
-    permitted_user_ids = permission_access.get("user_ids", [])
+        return False
+
+    permitted_group_ids = permitted_ids.get("group_ids", [])
+    permitted_user_ids = permitted_ids.get("user_ids", [])
 
     return user_id in permitted_user_ids or any(
         group_id in permitted_group_ids for group_id in user_group_ids
@@ -136,18 +155,20 @@ def get_users_with_access(
     type: str = "write", access_control: Optional[dict] = None
 ) -> list[UserModel]:
     if access_control is None:
-        result = Users.get_users()
+        result = Users.get_users(filter={"roles": ["!pending"]})
         return result.get("users", [])
 
-    permission_access = access_control.get(type, {})
+    permitted_ids = get_permitted_group_and_user_ids(type, access_control)
-    permitted_group_ids = permission_access.get("group_ids", [])
+    if permitted_ids is None:
-    permitted_user_ids = permission_access.get("user_ids", [])
+        return []
+
+    permitted_group_ids = permitted_ids.get("group_ids", [])
+    permitted_user_ids = permitted_ids.get("user_ids", [])
 
     user_ids_with_access = set(permitted_user_ids)
 
-    for group_id in permitted_group_ids:
+    group_user_ids_map = Groups.get_group_user_ids_by_ids(permitted_group_ids)
-        group_user_ids = Groups.get_group_user_ids_by_id(group_id)
+    for user_ids in group_user_ids_map.values():
-        if group_user_ids:
+        user_ids_with_access.update(user_ids)
-            user_ids_with_access.update(group_user_ids)
 
     return Users.get_users_by_user_ids(list(user_ids_with_access))

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" />