Chat features

src/lib/components/Channel/Chat/ChatInput.svelte

@@ -21,7 +21,7 @@
 	$: isHost = channel.user === $page.data.user?.userId
 
 	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
-
+$: console.log("viewers : ", viewers)
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
@@ -205,6 +205,8 @@
 		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
+
+	console.log("viewersWithOutHost: ", viewersWithOutHost)
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">

src/lib/components/Channel/Chat/DrawerChat.svelte

@@ -9,13 +9,17 @@
 	import { emitChatHistoryToChannel } from '$lib/websocket'
 	import { setRole } from '$lib/utils'
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
+	import ProfilePopup from './ProfilePopup.svelte'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false,
 		viewers: any[] = [],
 		chatHistory: any[] = []
 
 	let cursor: any = undefined
+	let profileElt: any = null
+	let selectedUser: string = ''
+	let ignoreOutsideClick = false
 
 	channel_message.subscribe((value) => {
 		if (!value) return
@@ -74,13 +78,34 @@
 			})
 		}
 	}
+
+	const closeProfile = () => {
+		if (ignoreOutsideClick) return
+		profileElt = null
+		selectedUser = ''
+	}
+
+	const onUsernameClick = (evt: any) => {
+		profileElt = evt.target
+		selectedUser = profileElt.id.substr(1)
+		ignoreOutsideClick = true
+		setTimeout(() => {
+			ignoreOutsideClick = false
+		}, 100)
+	}
+
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
 	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
-	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
+	<div on:scroll={closeProfile} class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
+		<ProfilePopup
+			open={profileElt ? true : false}
+			elt={profileElt}
+			bind:userId={selectedUser}
+			onOutsideClick={closeProfile} />
 		{#each chatHistory as sender}
-			<Message bind:sender bind:hostId={channel.user} bind:channel />
+			<Message bind:sender bind:hostId={channel.user} bind:channel {onUsernameClick} />
 		{/each}
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>

src/lib/components/Channel/Chat/Message.svelte

@@ -5,14 +5,17 @@
 	import IconChatQuote from '$lib/assets/icons/chat/IconChatQuote.svelte'
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
 	import IconChatHorizontalMore from '$lib/assets/icons/chat/IconChatHorizontalMore.svelte'
-	import ProfileCard from '$lib/components/Channel/Chat/ProfileCard.svelte'
 	import { emitChannelUpdate, emitDeleteMessageToChannel } from '$lib/websocket'
 	import { copyToClipboard, getColoredRole, setRole } from '$lib/utils'
 	import { page } from '$app/stores'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
+	import { onMount } from 'svelte'
+	import ProfilePopup from './ProfilePopup.svelte'
 
-	export let sender: any, hostId: string, channel: any
+	export let sender: any, hostId: string, channel: any, onUsernameClick: any
 	let role: string, coloredRole: any
+	let profileElt: any = null
+	let ignoreOutsideClick = false
 
 	$: isGuest = channel?.guests?.includes(sender.user?.userId)
 
@@ -130,6 +133,30 @@
 		}
 	}
 
+	const hightlightUsername = (match: string) => {
+		return `
+			<span 
+				class="text-success font-medium cursor-pointer link"
+				name="username"
+				id=${match}
+			>
+				${match}
+			</span>
+		`
+	}
+
+	const parse = (msg: string) => {
+		const m = msg + ' '
+		return m.replace(/@[\w-]+[,\s]/g, hightlightUsername).trim()
+	}
+
+	onMount(() => {
+		const spans = document.querySelectorAll('span[name="username"]')
+		spans.forEach((span: any) => {
+			span.onclick = onUsernameClick
+		})
+	})
+
 	$: codeSnippet = isCodeSnippet(sender.message) ? getCodeSnippet(sender.message) : false
 </script>
 
@@ -149,11 +176,12 @@
 							id="b1"
 							class="{coloredRole.textColor} font-medium">@{sender.user?.username}</span> -->
 
-					<ProfileCard userId={sender.user?.userId}>
-						<span class="{coloredRole.textColor} font-medium">
-							@{sender.user?.username}
-						</span>
-					</ProfileCard>
+					<span
+						class="{coloredRole.textColor} font-medium cursor-pointer"
+						on:click={onUsernameClick}
+						id={'@' + sender.user?.username}>
+						@{sender.user?.username}
+					</span>
 				{/if}
 				{#if isImage(sender.message)}
 					<img class="py-2 pr-2" src={sender.message} alt="imgs" />
@@ -172,7 +200,7 @@
 						<span class="break-all">{codeSnippet.endText}</span>
 					{/if}
 				{:else}
-					<span class="break-all">{sender.message}</span>
+					<span class="break-all">{@html parse(sender.message)}</span>
 				{/if}
 			</label>