feat: dm channels

backend/open_webui/models/channels.py

@@ -113,22 +113,24 @@ class ChannelResponse(ChannelModel):
 
 
 class ChannelForm(BaseModel):
+    type: Optional[str] = None
     name: str
     description: Optional[str] = None
     data: Optional[dict] = None
     meta: Optional[dict] = None
     access_control: Optional[dict] = None
+    user_ids: Optional[list[str]] = None
 
 
 class ChannelTable:
     def insert_new_channel(
-        self, type: Optional[str], form_data: ChannelForm, user_id: str
+        self, form_data: ChannelForm, user_id: str
     ) -> Optional[ChannelModel]:
         with get_db() as db:
             channel = ChannelModel(
                 **{
                     **form_data.model_dump(),
-                    "type": type,
+                    "type": form_data.type if form_data.type else None,
                     "name": form_data.name.lower(),
                     "id": str(uuid.uuid4()),
                     "user_id": user_id,
@@ -136,9 +138,34 @@ class ChannelTable:
                     "updated_at": int(time.time_ns()),
                 }
             )
-
             new_channel = Channel(**channel.model_dump())
 
+            if form_data.type == "dm":
+                # For direct message channels, automatically add the specified users as members
+                user_ids = form_data.user_ids or []
+                if user_id not in user_ids:
+                    user_ids.append(user_id)  # Ensure the creator is also a member
+
+                for uid in user_ids:
+                    channel_member = ChannelMemberModel(
+                        **{
+                            "id": str(uuid.uuid4()),
+                            "channel_id": channel.id,
+                            "user_id": uid,
+                            "status": "joined",
+                            "is_active": True,
+                            "is_channel_muted": False,
+                            "is_channel_pinned": False,
+                            "joined_at": int(time.time_ns()),
+                            "left_at": None,
+                            "last_read_at": int(time.time_ns()),
+                            "created_at": int(time.time_ns()),
+                            "updated_at": int(time.time_ns()),
+                        }
+                    )
+                    new_membership = ChannelMember(**channel_member.model_dump())
+                    db.add(new_membership)
+
             db.add(new_channel)
             db.commit()
             return channel
@@ -152,12 +179,41 @@ class ChannelTable:
         self, user_id: str, permission: str = "read"
     ) -> list[ChannelModel]:
         channels = self.get_channels()
-        return [
+
-            channel
+        channel_list = []
-            for channel in channels
+        for channel in channels:
-            if channel.user_id == user_id
+            if channel.type == "dm":
-            or has_access(user_id, permission, channel.access_control)
+                membership = self.get_member_by_channel_and_user_id(channel.id, user_id)
-        ]
+                if membership and membership.is_active:
+                    channel_list.append(channel)
+            else:
+                if channel.user_id == user_id or has_access(
+                    user_id, permission, channel.access_control
+                ):
+                    channel_list.append(channel)
+
+        return channel_list
+
+    def get_dm_channel_by_user_ids(self, user_ids: list[str]) -> Optional[ChannelModel]:
+        with get_db() as db:
+            subquery = (
+                db.query(ChannelMember.channel_id)
+                .filter(ChannelMember.user_id.in_(user_ids))
+                .group_by(ChannelMember.channel_id)
+                .having(func.count(ChannelMember.user_id) == len(user_ids))
+                .subquery()
+            )
+
+            channel = (
+                db.query(Channel)
+                .filter(
+                    Channel.id.in_(subquery),
+                    Channel.type == "dm",
+                )
+                .first()
+            )
+
+            return ChannelModel.model_validate(channel) if channel else None
 
     def join_channel(
         self, channel_id: str, user_id: str
@@ -233,6 +289,18 @@ class ChannelTable:
             )
             return ChannelMemberModel.model_validate(membership) if membership else None
 
+    def get_members_by_channel_id(self, channel_id: str) -> list[ChannelMemberModel]:
+        with get_db() as db:
+            memberships = (
+                db.query(ChannelMember)
+                .filter(ChannelMember.channel_id == channel_id)
+                .all()
+            )
+            return [
+                ChannelMemberModel.model_validate(membership)
+                for membership in memberships
+            ]
+
     def pin_channel(self, channel_id: str, user_id: str, is_pinned: bool) -> bool:
         with get_db() as db:
             membership = (
@@ -271,6 +339,27 @@ class ChannelTable:
             db.commit()
             return True
 
+    def update_member_active_status(
+        self, channel_id: str, user_id: str, is_active: bool
+    ) -> bool:
+        with get_db() as db:
+            membership = (
+                db.query(ChannelMember)
+                .filter(
+                    ChannelMember.channel_id == channel_id,
+                    ChannelMember.user_id == user_id,
+                )
+                .first()
+            )
+            if not membership:
+                return False
+
+            membership.is_active = is_active
+            membership.updated_at = int(time.time_ns())
+
+            db.commit()
+            return True
+
     def is_user_channel_member(self, channel_id: str, user_id: str) -> bool:
         with get_db() as db:
             membership = (
@@ -278,7 +367,6 @@ class ChannelTable:
                 .filter(
                     ChannelMember.channel_id == channel_id,
                     ChannelMember.user_id == user_id,
-                    ChannelMember.is_active == True,
                 )
                 .first()
             )

backend/open_webui/routers/channels.py

@@ -13,6 +13,7 @@ from open_webui.socket.main import (
     get_active_status_by_user_id,
 )
 from open_webui.models.users import (
+    UserIdNameResponse,
     UserListResponse,
     UserModelResponse,
     Users,
@@ -66,6 +67,9 @@ router = APIRouter()
 
 
 class ChannelListItemResponse(ChannelModel):
+    user_ids: Optional[list[str]] = None  # 'dm' channels only
+    users: Optional[list[UserIdNameResponse]] = None  # 'dm' channels only
+
     last_message_at: Optional[int] = None  # timestamp in epoch (time_ns)
     unread_count: int = 0
 
@@ -85,9 +89,23 @@ async def get_channels(user=Depends(get_verified_user)):
             channel.id, user.id, channel_member.last_read_at if channel_member else None
         )
 
+        user_ids = None
+        users = None
+        if channel.type == "dm":
+            user_ids = [
+                member.user_id
+                for member in Channels.get_members_by_channel_id(channel.id)
+            ]
+            users = [
+                UserIdNameResponse(**user.model_dump())
+                for user in Users.get_users_by_user_ids(user_ids)
+            ]
+
         channel_list.append(
             ChannelListItemResponse(
                 **channel.model_dump(),
+                user_ids=user_ids,
+                users=users,
                 last_message_at=last_message_at,
                 unread_count=unread_count,
             )
@@ -111,7 +129,15 @@ async def get_all_channels(user=Depends(get_verified_user)):
 @router.post("/create", response_model=Optional[ChannelModel])
 async def create_new_channel(form_data: ChannelForm, user=Depends(get_admin_user)):
     try:
-        channel = Channels.insert_new_channel(None, form_data, user.id)
+        if form_data.type == "dm" and len(form_data.user_ids) == 1:
+            existing_channel = Channels.get_dm_channel_by_user_ids(
+                [user.id, form_data.user_ids[0]]
+            )
+            if existing_channel:
+                Channels.update_member_active_status(existing_channel.id, user.id, True)
+                return ChannelModel(**existing_channel.model_dump())
+
+        channel = Channels.insert_new_channel(form_data, user.id)
         return ChannelModel(**channel.model_dump())
     except Exception as e:
         log.exception(e)
@@ -125,7 +151,15 @@ async def create_new_channel(form_data: ChannelForm, user=Depends(get_admin_user
 ############################
 
 
-@router.get("/{id}", response_model=Optional[ChannelResponse])
+class ChannelFullResponse(ChannelResponse):
+    user_ids: Optional[list[str]] = None  # 'dm' channels only
+    users: Optional[list[UserIdNameResponse]] = None  # 'dm' channels only
+
+    last_read_at: Optional[int] = None  # timestamp in epoch (time_ns)
+    unread_count: int = 0
+
+
+@router.get("/{id}", response_model=Optional[ChannelFullResponse])
 async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
     channel = Channels.get_channel_by_id(id)
     if not channel:
@@ -133,6 +167,41 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    user_ids = None
+    users = None
+
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+
+        user_ids = [
+            member.user_id for member in Channels.get_members_by_channel_id(channel.id)
+        ]
+        users = [
+            UserIdNameResponse(**user.model_dump())
+            for user in Users.get_users_by_user_ids(user_ids)
+        ]
+
+        channel_member = Channels.get_member_by_channel_and_user_id(channel.id, user.id)
+        unread_count = Messages.get_unread_message_count(
+            channel.id, user.id, channel_member.last_read_at if channel_member else None
+        )
+
+        return ChannelFullResponse(
+            **{
+                **channel.model_dump(),
+                "user_ids": user_ids,
+                "users": users,
+                "write_access": True,
+                "user_count": len(user_ids),
+                "last_read_at": channel_member.last_read_at if channel_member else None,
+                "unread_count": unread_count,
+            }
+        )
+
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="read", access_control=channel.access_control
         ):
@@ -146,20 +215,34 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
 
         user_count = len(get_users_with_access("read", channel.access_control))
 
-    return ChannelResponse(
+        channel_member = Channels.get_member_by_channel_and_user_id(channel.id, user.id)
+        unread_count = Messages.get_unread_message_count(
+            channel.id, user.id, channel_member.last_read_at if channel_member else None
+        )
+
+        return ChannelFullResponse(
             **{
                 **channel.model_dump(),
+                "user_ids": user_ids,
+                "users": users,
                 "write_access": write_access or user.role == "admin",
                 "user_count": user_count,
+                "last_read_at": channel_member.last_read_at if channel_member else None,
+                "unread_count": unread_count,
             }
         )
 
 
+############################
+# GetChannelMembersById
+############################
+
+
 PAGE_ITEM_COUNT = 30
 
 
-@router.get("/{id}/users", response_model=UserListResponse)
+@router.get("/{id}/members", response_model=UserListResponse)
-async def get_channel_users_by_id(
+async def get_channel_members_by_id(
     id: str,
     query: Optional[str] = None,
     order_by: Optional[str] = None,
@@ -179,6 +262,30 @@ async def get_channel_users_by_id(
     page = max(1, page)
     skip = (page - 1) * limit
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+
+        user_ids = [
+            member.user_id for member in Channels.get_members_by_channel_id(channel.id)
+        ]
+        users = Users.get_users_by_user_ids(user_ids)
+
+        total = len(users)
+
+        return {
+            "users": [
+                UserModelResponse(
+                    **user.model_dump(), is_active=get_active_status_by_user_id(user.id)
+                )
+                for user in users
+            ],
+            "total": total,
+        }
+
+    else:
         filter = {
             "roles": ["!pending"],
         }
@@ -211,6 +318,36 @@ async def get_channel_users_by_id(
         }
 
 
+#################################################
+# UpdateIsActiveMemberByIdAndUserId
+#################################################
+
+
+class UpdateActiveMemberForm(BaseModel):
+    is_active: bool
+
+
+@router.post("/{id}/members/active", response_model=bool)
+async def update_is_active_member_by_id_and_user_id(
+    id: str,
+    form_data: UpdateActiveMemberForm,
+    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
+        )
+
+    if not Channels.is_user_channel_member(channel.id, user.id):
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
+        )
+
+    Channels.update_member_active_status(channel.id, user.id, form_data.is_active)
+    return True
+
+
 ############################
 # UpdateChannelById
 ############################
@@ -278,6 +415,12 @@ async def get_channel_messages(
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="read", access_control=channel.access_control
         ):
@@ -533,6 +676,12 @@ async def new_message_handler(
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="write", access_control=channel.access_control, strict=False
         ):
@@ -543,6 +692,14 @@ async def new_message_handler(
     try:
         message = Messages.insert_new_message(form_data, channel.id, user.id)
         if message:
+            if channel.type == "dm":
+                members = Channels.get_members_by_channel_id(channel.id)
+                for member in members:
+                    if not member.is_active:
+                        Channels.update_member_active_status(
+                            channel.id, member.user_id, True
+                        )
+
             message = Messages.get_message_by_id(message.id)
             event_data = {
                 "channel_id": channel.id,
@@ -641,6 +798,12 @@ async def get_channel_message(
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="read", access_control=channel.access_control
         ):
@@ -690,6 +853,12 @@ async def get_channel_thread_messages(
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="read", access_control=channel.access_control
         ):
@@ -749,10 +918,18 @@ async def update_message_by_id(
             status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT()
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if (
             user.role != "admin"
             and message.user_id != user.id
-        and not has_access(user.id, type="read", access_control=channel.access_control)
+            and not has_access(
+                user.id, type="read", access_control=channel.access_control
+            )
         ):
             raise HTTPException(
                 status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
@@ -805,6 +982,12 @@ async def add_reaction_to_message(
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="write", access_control=channel.access_control, strict=False
         ):
@@ -868,6 +1051,12 @@ async def remove_reaction_by_id_and_user_id_and_name(
             status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if user.role != "admin" and not has_access(
             user.id, type="write", access_control=channel.access_control, strict=False
         ):
@@ -945,11 +1134,20 @@ async def delete_message_by_id(
             status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT()
         )
 
+    if channel.type == "dm":
+        if not Channels.is_user_channel_member(channel.id, user.id):
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
+            )
+    else:
         if (
             user.role != "admin"
             and message.user_id != user.id
             and not has_access(
-            user.id, type="write", access_control=channel.access_control, strict=False
+                user.id,
+                type="write",
+                access_control=channel.access_control,
+                strict=False,
             )
         ):
             raise HTTPException(

src/lib/apis/channels/index.ts

@@ -1,10 +1,12 @@
 import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 type ChannelForm = {
+	type?: string;
 	name: string;
 	data?: object;
 	meta?: object;
 	access_control?: object;
+	user_ids?: string[];
 };
 
 export const createNewChannel = async (token: string = '', channel: ChannelForm) => {
@@ -101,7 +103,7 @@ export const getChannelById = async (token: string = '', channel_id: string) =>
 	return res;
 };
 
-export const getChannelUsersById = async (
+export const getChannelMembersById = async (
 	token: string,
 	channel_id: string,
 	query?: string,
@@ -129,7 +131,7 @@ export const getChannelUsersById = async (
 	}
 
 	res = await fetch(
-		`${WEBUI_API_BASE_URL}/channels/${channel_id}/users?${searchParams.toString()}`,
+		`${WEBUI_API_BASE_URL}/channels/${channel_id}/members?${searchParams.toString()}`,
 		{
 			method: 'GET',
 			headers: {
@@ -155,6 +157,42 @@ export const getChannelUsersById = async (
 	return res;
 };
 
+export const updateChannelMemberActiveStatusById = async (
+	token: string = '',
+	channel_id: string,
+	is_active: boolean
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/members/active`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({ is_active })
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const updateChannelById = async (
 	token: string = '',
 	channel_id: string,

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,6 +36,13 @@
 			<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">
+						{#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" />
@@ -49,6 +56,7 @@
 							>
 								{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,7 +96,8 @@
 			<Spinner className="size-5" />
 		</div>
 	{:else}
-		<div class="flex gap-1">
+		{#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">
@@ -115,6 +122,7 @@
 					</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?.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}
+								<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
+							{/if}
+						{:else}
+							<div class=" size-4.5 justify-center flex items-center">
 								{#if channel?.access_control === null}
-								<Hashtag className="size-3" strokeWidth="2.5" />
+									<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"
 						>
+							{#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 (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="flex items-center gap-1">
-			<div class=" size-4 justify-center flex items-center">
+			<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}
+					<div class=" size-4 justify-center flex items-center ml-1">
 						{#if channel?.access_control === null}
-					<Hashtag className="size-3" strokeWidth="2.5" />
+							<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">
+			<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}
+		</div>
+	</a>
 
-			{#if $user?.role === 'admin'}
+	{#if channel?.type === 'dm'}
 		<div
-					class="right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+			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;
 				}}
 			>
-					<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>
 </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="-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>

src/routes/+layout.svelte

@@ -56,6 +56,7 @@
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { getUserSettings } from '$lib/apis/users';
 	import dayjs from 'dayjs';
+	import { getChannels } from '$lib/apis/channels';
 
 	const unregisterServiceWorkers = async () => {
 		if ('serviceWorker' in navigator) {
@@ -485,6 +486,7 @@
 			const data = event?.data?.data ?? null;
 
 			if ($channels) {
+				if ($channels.find((ch) => ch.id === event.channel_id)) {
 					channels.set(
 						$channels.map((ch) => {
 							if (ch.id === event.channel_id) {
@@ -499,6 +501,13 @@
 							return ch;
 						})
 					);
+				} else {
+					await channels.set(
+						(await getChannels(localStorage.token)).sort((a, b) =>
+							a.type === b.type ? 0 : a.type === 'dm' ? 1 : -1
+						)
+					);
+				}
 			}
 
 			if (type === 'message') {