Fix: commands, ai chat, role access, message dropdown non-functional

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -53,7 +53,7 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
-		"daisyui": "^3.1.0",
+		"daisyui": "^3.2.1",
 		"emoji-picker-element": "^1.18.1",
 		"nprogress": "^0.2.0",
 		"playwright-e2e-coverage-report": "^1.0.28",

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

@@ -8,8 +8,9 @@
 	import EmojiPicker from '$lib/components/Channel/Chat/EmojiPicker.svelte'
 	import GifPicker from '$lib/components/Channel/Chat/GifPicker.svelte'
 
-	export let channel: any
-	export let users: any
+	export let channel: any,
+		viewers: any[] = []
+
 	let selectedCommand = 0
 	let selectedUser = 0
 	let inputBox: any = null
@@ -19,14 +20,18 @@
 		$channel_connection === `open-${channel._id}` && $page.data.user?.userId
 	$: isHost = channel.user === $page.data.user?.userId
 
+	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
+
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
 
 	const sendMessage = () => {
-		if (messageIsCommand) {
-			if (selectedCommand && selectedUser >= 0) {
-				const user = users[selectedUser]
+		if (messageIsCommand && !chatMessage.startsWith('/ai ')) {
+			if (selectedCommand) {
+				const usernameFromMsg = chatMessage.substring(chatMessage.indexOf('@') + 1)
+				const user = viewersWithOutHost.find((viewer: any) => viewer.username === usernameFromMsg)
+				if (!user) return
 				executeCommand(selectedCommand, user.userId)
 			}
 		} else if (!chatMessage.startsWith('/') || chatMessage.startsWith('/ai')) {
@@ -55,15 +60,15 @@
 	}
 
 	const slectCommandfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedCommand < 3) {
+		if (key === 'ArrowDown' && selectedCommand < 4) {
 			selectedCommand++
-		} else if (key === 'ArrowUp' && selectedCommand >= 1) {
+		} else if (key === 'ArrowUp' && selectedCommand >= 2) {
 			selectedCommand--
 		}
 	}
 
 	const slectUserfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedUser < users.length) {
+		if (key === 'ArrowDown' && selectedUser < viewers.length) {
 			selectedUser++
 		} else if (key === 'ArrowUp' && selectedUser >= 0) {
 			selectedUser--
@@ -109,6 +114,7 @@
 	// toggle commands handlers
 
 	const toggleBan = (userId: string) => {
+		if (channel.user === userId) return
 		let isEnabled = false
 		if (!channel.bans.includes(userId)) {
 			channel.bans.push(userId)
@@ -126,6 +132,7 @@
 	}
 
 	const toggleMod = (userId: string) => {
+		if (channel.user === userId) return
 		if (!channel.bans.includes(userId)) {
 			let isEnabled = false
 			if (!channel.mods?.includes(userId)) {
@@ -143,6 +150,7 @@
 	}
 
 	const toggleGuest = (userId: string) => {
+		if (channel.user === userId) return
 		if (!channel.bans.includes(userId)) {
 			let isEnabled = false
 			if (!channel.guests.includes(userId) && channel.guests.length < 9) {
@@ -187,16 +195,14 @@
 	]
 
 	$: messageIsCommand =
-		chatMessage &&
-		chatMessage.startsWith('/') &&
-		/[a-z] @[a-z]/.test(chatMessage.substr(1)) &&
-		chatMessage.startsWith('/ai ')
+		chatMessage && chatMessage.startsWith('/') && /[a-z] @[a-z]/.test(chatMessage.substr(1))
 
 	$: showUsers = chatMessage && chatMessage.endsWith('@')
 	$: showCommandOptions =
 		chatMessage &&
 		chatMessage.startsWith('/') &&
 		!chatMessage.startsWith('/ai ') &&
+		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
 </script>
@@ -253,12 +259,12 @@
 			</div>
 		{/if}
 
-		{#if users.length > 0 && showUsers}
+		{#if viewersWithOutHost.length > 0 && showUsers}
 			<div
 				class={'dropdown dropdown-top w-full rounded-box bg-white ' +
 					(showUsers ? 'dropdown-open' : '')}>
 				<ul class="dropdown-content menu p-2 shadow bg-base-300 rounded-box w-full">
-					{#each users as user, idx}
+					{#each viewersWithOutHost as user, idx}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<li
 							on:click={() => {
@@ -293,8 +299,8 @@
 							e.preventDefault()
 							if (showUsers) {
 								if (selectedUser >= 0) {
-									const user = users[selectedUser]
-									chatMessage = chatMessage.replace(/@/, '@' + user.username) + ' '
+									const user = viewers[selectedUser]
+									chatMessage = chatMessage.replace(/@/, '@' + user.username)
 								}
 							} else {
 								if (selectedCommand) {

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

@@ -11,10 +11,11 @@
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
 
 	export let channel: any = undefined,
-		showEditChannelDrawer: boolean = false
+		showEditChannelDrawer: boolean = false,
+		viewers: any[] = []
 	let chatHistory: any[] = [],
 		chatDrawerElement: HTMLElement
-	let cursor = "";
+	let cursor = ''
 
 	channel_message.subscribe((value) => {
 		if (!value) return
@@ -30,7 +31,7 @@
 						channel,
 						currentUserId: $page.data.user?.userId
 					})
-					return message;
+					return message
 				})
 
 				chatHistory = [...chatHistory, ...messages]
@@ -68,14 +69,6 @@
 		$is_chat_drawer_open = false
 	})
 
-	const createuserList = (list: any[]) => {
-		let users: any = {}
-		list.forEach((chat) => {
-			if ($page.data.user?.userId !== chat.user.userId) users[chat.user.userId] = chat.user
-		})
-		return Object.keys(users).map((key) => users[key])
-	}
-
 	const loadMore = () => {
 		if (
 			$channel_connection === `open-${channel._id}` &&
@@ -85,12 +78,10 @@
 				channelSocket: channel.socket,
 				channelId: channel._id,
 				skip: 100,
-				cursor: cursor || "none"
+				cursor: cursor || 'none'
 			})
 		}
 	}
-
-	$: users = createuserList(chatHistory)
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
@@ -102,6 +93,6 @@
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>
 	<div class="flex flex-row mt-auto p-3 w-full">
-		<ChatInput bind:channel bind:users />
+		<ChatInput bind:channel bind:viewers />
 	</div>
 </div>

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

@@ -133,8 +133,6 @@
 	$: codeSnippet = isCodeSnippet(sender.message) ? getCodeSnippet(sender.message) : false
 </script>
 
-
-
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ul class="menu" on:click={copy}>
 	<li class="group relative">
@@ -147,17 +145,15 @@
 						>{role}</span>
 				{/if}
 				{#if role !== '🤖 AI'}
-						<!-- <span
+					<!-- <span
 							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>
+					<ProfileCard userId={sender.user?.userId}>
+						<span class="{coloredRole.textColor} font-medium">
+							@{sender.user?.username}
+						</span>
+					</ProfileCard>
 				{/if}
 				{#if isImage(sender.message)}
 					<img class="py-2 pr-2" src={sender.message} alt="imgs" />
@@ -182,46 +178,45 @@
 
 			<div
 				class="group-hover:block dropdown-menu absolute hidden right-0 dropdown dropdown-left dropdown-end"
-			>
-			<div class="rounded-lg bg-base-200 m-1 border-base-100 border-2">
-				<IconChatHorizontalMore />
-			</div>
-			<ul class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
-				<!-- svelte-ignore a11y-missing-attribute -->
-				<li class="disabled"><a><IconChatReact /> React </a></li>
-				<!-- svelte-ignore a11y-missing-attribute -->
-				<li class="disabled"><a><IconChatQuote /> Quote </a></li>
-				{#if showRoleItem && !channel.bans.includes(sender.user?.userId)}
-					<li>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a on:click={() => toggleMod()}
-							><IconChatMod /> {role === 'Mod' ? 'Revoke Mod' : 'Grant Mod'}
-						</a>
-					</li>
-					<li>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a on:click={() => toggleGuest()}
-							><IconChatGuest /> {isGuest ? 'Revoke Guest' : 'Grant Guest'}
-						</a>
-					</li>
-				{/if}
-				{#if showBanItem}
-					<li>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a on:click={() => toggleBan()}
-							><IconChatBan /> {channel.bans?.includes(sender.user?.userId) ? 'Unban' : 'Ban'}
-						</a>
-					</li>
-				{/if}
-				{#if hostId === $page.data.user?.userId || sender.user?.userId === $page.data.user?.userId}
-					<li>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a on:click={() => deleteMessage()}><IconChatDelete /> Delete</a>
-					</li>
-				{/if}
-			</ul>
+				tabindex="1">
+				<div class="rounded-lg bg-base-200 m-1 border-base-100 border-2">
+					<IconChatHorizontalMore />
+				</div>
+				<ul tabindex="1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<li class="disabled"><a><IconChatReact /> React </a></li>
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<li class="disabled"><a><IconChatQuote /> Quote </a></li>
+					{#if showRoleItem && !channel.bans.includes(sender.user?.userId)}
+						<li>
+							<!-- svelte-ignore a11y-missing-attribute -->
+							<a on:click={() => toggleMod()}
+								><IconChatMod /> {role === 'Mod' ? 'Revoke Mod' : 'Grant Mod'}
+							</a>
+						</li>
+						<li>
+							<!-- svelte-ignore a11y-missing-attribute -->
+							<a on:click={() => toggleGuest()}
+								><IconChatGuest /> {isGuest ? 'Revoke Guest' : 'Grant Guest'}
+							</a>
+						</li>
+					{/if}
+					{#if showBanItem}
+						<li>
+							<!-- svelte-ignore a11y-missing-attribute -->
+							<a on:click={() => toggleBan()}
+								><IconChatBan /> {channel.bans?.includes(sender.user?.userId) ? 'Unban' : 'Ban'}
+							</a>
+						</li>
+					{/if}
+					{#if hostId === $page.data.user?.userId || sender.user?.userId === $page.data.user?.userId}
+						<li>
+							<!-- svelte-ignore a11y-missing-attribute -->
+							<a on:click={() => deleteMessage()}><IconChatDelete /> Delete</a>
+						</li>
+					{/if}
+				</ul>
 			</div>
-
 		</div>
 	</li>
 </ul>
@@ -231,5 +226,4 @@
 		pointer-events: none;
 		color: #ccc;
 	}
-
 </style>

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

@@ -77,15 +77,15 @@
 							src={profileData.profile.avatar}
 							alt={profileData.profile.avatar} />
 					</span>
-					<div>
+					<!-- <div>
 						<button
 							on:click={doSubscribe}
 							disabled={isSelf || loading}
 							type="button"
 							class="btn btn-secondary btn-sm">
 							{loading ? 'Loading...' : !profileData.isSubscribed ? 'Subscribe' : 'Unsubscribe'}
 						</button>
-					</div>
+					</div> -->
 				</div>
 
 				<p class="text-base font-semibold leading-none">

src/lib/components/Channel/Stream/DropdownViewers.svelte

@@ -40,7 +40,13 @@
 				user.coloredRole = getColoredRole(role)
 				return user
 			})
-			viewers = users
+			viewers = users.reduce((acc: any, cur: any) => {
+				let username = cur.username.toLowerCase()
+				if (!acc.find((viewer: any) => viewer.username.toLowerCase() === username)) {
+					acc.push(cur)
+				}
+				return acc
+			}, [])
 			cursor = parsedMsg.cursor
 		}
 

src/lib/components/Channel/Stream/StreamContainer.svelte

@@ -14,7 +14,8 @@
 	export let userCount: number = 1,
 		channel: any,
 		channels: any = [],
-		isHostOrGuest: boolean = false
+		isHostOrGuest: boolean = false,
+		viewers: any[] = []
 
 	$: isChannelSocketConnected = $channel_connection === `open-${channel._id}`
 
@@ -63,7 +64,7 @@
 								<IconViewers />
 								{userCount}
 							</label>
-							<DropdownViewers {channel} />
+							<DropdownViewers {channel} bind:viewers />
 						</div>
 					</div>
 					{#if channel && nextchannel?._id === $page.params.channelId}

src/lib/components/Channel/Stream/VideoItem.svelte

@@ -48,6 +48,7 @@
 	$: showBanItem =
 		(channel.user === $page.data.user?.userId ||
 			channel?.mods?.includes($page.data.user?.userId)) &&
+		channel.user !== video._id &&
 		video._id !== $page.data.user?.userId &&
 		role !== '🤖 AI'