refac

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

@@ -4,6 +4,7 @@
 
 	const i18n = getContext('i18n');
 	import UserStatus from './UserStatus.svelte';
+	import UserStatusLinkPreview from './UserStatusLinkPreview.svelte';
 
 	export let user = null;
 </script>
@@ -13,12 +14,5 @@
 		<slot />
 	</LinkPreview.Trigger>
 
-	<LinkPreview.Content
-		class="w-full max-w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
-		side="right"
-		align="center"
-		sideOffset={8}
-	>
-		<UserStatus id={user.id} />
-	</LinkPreview.Content>
+	<UserStatusLinkPreview id={user?.id} side="right" align="center" sideOffset={8} />
 </LinkPreview.Root>

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

@@ -3,19 +3,8 @@
 
 	const i18n = getContext('i18n');
 	import { WEBUI_BASE_URL } from '$lib/constants';
-	import { getUserActiveStatusById, getUserById } from '$lib/apis/users';
 
-	export let id = null;
-	let user = null;
-
-	onMount(async () => {
-		if (id) {
-			user = await getUserById(localStorage.token, id).catch((error) => {
-				console.error('Error fetching user by ID:', error);
-				return null;
-			});
-		}
-	});
+	export let user = null;
 </script>
 
 {#if user}

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import { LinkPreview } from 'bits-ui';
+
+	const i18n = getContext('i18n');
+	import { getUserById } from '$lib/apis/users';
+
+	import UserStatus from './UserStatus.svelte';
+
+	export let id = null;
+
+	export let side = 'top';
+	export let align = 'start';
+	export let sideOffset = 6;
+
+	let user = null;
+
+	onMount(async () => {
+		if (id) {
+			user = await getUserById(localStorage.token, id).catch((error) => {
+				console.error('Error fetching user by ID:', error);
+				return null;
+			});
+		}
+	});
+</script>
+
+{#if user}
+	<LinkPreview.Content
+		class="w-full max-w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
+		{side}
+		{align}
+		{sideOffset}
+	>
+		<UserStatus {user} />
+	</LinkPreview.Content>
+{/if}

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/MentionToken.svelte

@@ -7,6 +7,7 @@
 	import { goto } from '$app/navigation';
 	import { channels, models } from '$lib/stores';
 	import UserStatus from '$lib/components/channel/Messages/Message/UserStatus.svelte';
+	import UserStatusLinkPreview from '$lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -101,14 +102,6 @@
 	</LinkPreview.Trigger>
 
 	{#if triggerChar === '@' && idType === 'U'}
-		<LinkPreview.Content
-			class="w-full max-w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
-			side="top"
-			align="start"
-			sideOffset={6}
-		>
-			<UserStatus {id} />
-			<!-- <div class="flex space-x-4">HI</div> -->
-		</LinkPreview.Content>
+		<UserStatusLinkPreview {id} />
 	{/if}
 </LinkPreview.Root>