feat/enh: dm from user profile preview

backend/open_webui/routers/channels.py

@@ -137,7 +137,7 @@ async def get_all_channels(user=Depends(get_verified_user)):
 ############################
 
 
-@router.get("/dm/{user_id}", response_model=Optional[ChannelModel])
+@router.get("/users/{user_id}", response_model=Optional[ChannelModel])
 async def get_dm_channel_by_user_id(
     request: Request, user_id: str, user=Depends(get_verified_user)
 ):

src/lib/apis/channels/index.ts

@@ -104,6 +104,37 @@ export const getChannelById = async (token: string = '', channel_id: string) =>
 	return res;
 };
 
+export const getDMChannelByUserId = async (token: string = '', user_id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/channels/users/${user_id}`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.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 getChannelMembersById = async (
 	token: string,
 	channel_id: string,

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

@@ -15,7 +15,7 @@
 	let openPreview = false;
 </script>
 
-<LinkPreview.Root openDelay={0} closeDelay={100} bind:open={openPreview}>
+<LinkPreview.Root openDelay={0} closeDelay={200} bind:open={openPreview}>
 	<LinkPreview.Trigger class="flex items-center">
 		<button
 			type="button"

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

@@ -2,13 +2,38 @@
 	import { getContext, onMount } from 'svelte';
 
 	const i18n = getContext('i18n');
+
+	import { user as _user } from '$lib/stores';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
+	import { getDMChannelByUserId } from '$lib/apis/channels';
+
+	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
+	import ChatBubble from '$lib/components/icons/ChatBubble.svelte';
+	import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
+	import { goto } from '$app/navigation';
 
 	export let user = null;
+
+	const directMessageHandler = async () => {
+		if (!user) {
+			return;
+		}
+
+		const res = await getDMChannelByUserId(localStorage.token, user.id).catch((error) => {
+			console.error('Error fetching DM channel:', error);
+			return null;
+		});
+
+		if (res) {
+			console.log(res);
+			goto(`/channels/${res.id}`);
+		}
+	};
 </script>
 
 {#if user}
-	<div class=" flex gap-3.5 w-full py-3 px-3 items-center">
+	<div class="py-2.5">
+		<div class=" flex gap-3.5 w-full px-2.5 items-center">
 			<div class=" items-center flex shrink-0">
 				<img
 					src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
@@ -46,4 +71,27 @@
 				</div>
 			</div>
 		</div>
+
+		{#if $_user?.id !== user.id}
+			<hr class="border-gray-100/50 dark:border-gray-800/50 my-2.5" />
+
+			<div class=" flex flex-col w-full px-2.5 items-center">
+				<button
+					class="w-full text-left px-3 py-1.5 rounded-xl border border-gray-100/50 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-850 transition flex items-center gap-2 text-sm"
+					type="button"
+					on:click={() => {
+						directMessageHandler();
+					}}
+				>
+					<div>
+						<ChatBubbleOval class="size-4" />
+					</div>
+
+					<div class="font-medium">
+						{$i18n.t('Message')}
+					</div>
+				</button>
+			</div>
+		{/if}
+	</div>
 {/if}