feat: dm channels

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