Merge pull request #585 from CodeCrowCorp/dev

Feat: added /ai command to chat

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

src/lib/assets/icons/profile/IconProfileSponsor.svelte

@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+</svg>

src/lib/assets/icons/profile/IconProfileStreak.svelte

@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+</svg>

src/lib/assets/icons/profile/IconProfileStreamDuration.svelte

@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>

src/lib/assets/icons/IconViews.svelte → src/lib/assets/icons/profile/IconProfileViews.svelte

@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class="w-6 h-6">
+	class="w-8 h-8">
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -48,7 +48,7 @@
 			<p class="text-2xl truncate text-white font-semibold">{channel.title || ''}</p>
 			<div class="flex flex-row items-center gap-2">
 				<div class="avatar">
-					<div class="w-14 mask mask-squircle">
+					<div class="w-14 mask {channel.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={channel.avatar} alt="" />
 					</div>
 				</div>

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -50,7 +50,7 @@
 			<p class="text-lg font-semibold truncate">{channel.title}</p>
 			<div class="flex flex-row gap-2 max-w-[25rem]">
 				<div class="avatar">
-					<div class="w-12 mask mask-squircle">
+					<div class="w-12 mask {channel.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={channel.avatar} alt="" />
 					</div>
 				</div>

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -13,7 +13,7 @@
 	<td>
 		<div class="flex items-center space-x-2 my-3 pl-3">
 			<div class="avatar">
-				<div class="w-12 mask mask-squircle">
+				<div class="w-12 mask {channel.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 					<img src={channel.avatar} alt="" />
 				</div>
 			</div>

src/lib/components/Browse/Sections/ItemUser.svelte

@@ -9,7 +9,7 @@
 		<a class="rounded-md" href="/profile/{user.username}">
 			<div class="text-center space-y-3 w-[200px]">
 				<div class="avatar">
-					<div class="w-36 mask mask-squircle">
+					<div class="w-36 mask {user.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={user.avatar} alt="" />
 					</div>
 				</div>

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

@@ -29,7 +29,7 @@
 				const user = users[selectedUser]
 				executeCommand(selectedCommand, user.userId)
 			}
-		} else if (!chatMessage.startsWith('/')) {
+		} else if (!chatMessage.startsWith('/') || chatMessage.startsWith('/ai')) {
 			if (chatMessage === null || chatMessage.match(/^\s*$/) !== null) return
 			const completeMessage = {
 				isAiChatEnabled: channel.isAiChatEnabled,
@@ -162,34 +162,43 @@
 	const specialCommands = [
 		{
 			id: 1,
+			label: 'Talk to AI',
+			cmd: '/ai ',
+			action: () => {}
+		},
+		{
+			id: 2,
 			label: 'Toggle mod status',
 			cmd: '/mod @',
 			action: toggleMod
 		},
 		{
-			id: 2,
+			id: 3,
 			label: 'Toggle guest status',
 			cmd: '/guest @',
 			action: toggleGuest
 		},
 		{
-			id: 3,
+			id: 4,
 			label: 'Ban user',
 			cmd: '/ban @',
 			action: toggleBan
 		}
 	]
 
 	$: messageIsCommand =
-		chatMessage && chatMessage.startsWith('/') && /[a-z] @[a-z]/.test(chatMessage.substr(1))
+		chatMessage &&
+		chatMessage.startsWith('/') &&
+		/[a-z] @[a-z]/.test(chatMessage.substr(1)) &&
+		chatMessage.startsWith('/ai ')
 
 	$: showUsers = chatMessage && chatMessage.endsWith('@')
 	$: showCommandOptions =
 		chatMessage &&
 		chatMessage.startsWith('/') &&
+		!chatMessage.startsWith('/ai ') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
-		!showUsers &&
-		!messageIsCommand
+		!showUsers
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">

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

@@ -119,7 +119,7 @@
 			<a href="/profile/{host?.username}">
 				<div class="flex flex-wrap gap-2">
 					<div class="avatar online">
-						<div class="w-12 mask mask-squircle">
+						<div class="w-12 mask {host.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
 							<img src={host?.avatar} alt="" />
 						</div>
 					</div>

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

@@ -10,9 +10,9 @@
 
 	const handleClickOutside = (event: any) => {
 		const _id =
-			event.target.id ||
-			event.target.parentElement.id ||
-			event.target.parentElement.parentElement.id
+			event.target?.id ||
+			event.target.parentElement?.id ||
+			event.target.parentElement?.parentElement?.id
 
 		if (id !== _id) isFocused = false
 	}

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

@@ -9,21 +9,14 @@
 	import { video_items } from '$lib/stores/streamStore'
 	import { channel_connection } from '$lib/stores/websocketStore'
 	import CommandList from '$lib/components/Channel/Stream/CommandList.svelte'
-	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
 
 	const dispatch = createEventDispatcher()
 	export let userCount: number = 1,
 		channel: any,
 		channels: any = [],
 		isHostOrGuest: boolean = false
-	let streamTime: number = 0,
-		timerInterval: any,
-		formattedTime: string = '00:00:00'
 
 	$: isChannelSocketConnected = $channel_connection === `open-${channel._id}`
-	$: if (is_feature_stats_enabled) {
-		toggleTimer()
-	}
 
 	function autoActive(node: Element) {
 		const observer = new IntersectionObserver(callback, { threshold: 0.5 })
@@ -48,23 +41,6 @@
 
 		return { destroy: () => observer.disconnect() }
 	}
-
-	const toggleTimer = () => {
-		if (timerInterval) {
-			clearInterval(timerInterval)
-			timerInterval = null
-		} else {
-			timerInterval = setInterval(() => {
-				streamTime++
-				const hours = Math.floor(streamTime / 3600)
-				const minutes = Math.floor((streamTime % 3600) / 60)
-				const seconds = streamTime % 60
-				formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
-					.toString()
-					.padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
-			}, 1000)
-		}
-	}
 </script>
 
 <div class="flex justify-center h-full">
@@ -89,12 +65,6 @@
 							</label>
 							<DropdownViewers {channel} />
 						</div>
-						{#if $is_feature_stats_enabled}
-							<span
-								class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center">
-								{formattedTime}
-							</span>
-						{/if}
 					</div>
 					{#if channel && nextchannel?._id === $page.params.channelId}
 						<VideoGrid {channel} />

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

@@ -28,11 +28,10 @@
 		$channel_connection === `open-${$page.params.channelId}` && $page.data.user?.userId
 	$: videoItemIsActive = $video_items?.some((video: any) => video._id === $page.data.user?.userId)
 
-	let screenUid: string = ''
-	let webcamUid: string = ''
-	let audioUid: string = ''
-
-	let subcriptions: any[] = []
+	let screenUid: string = '',
+		webcamUid: string = '',
+		audioUid: string = '',
+		subcriptions: any[] = []
 
 	const handleChatDrawer = () => {
 		if ($is_chat_drawer_open) {

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

@@ -10,6 +10,7 @@
 	import { emitChannelUpdate } from '$lib/websocket'
 	import { getColoredRole, setRole } from '$lib/utils'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
+	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
 
 	export let video: any, channel: any
 
@@ -30,7 +31,11 @@
 		prevAudio: any,
 		isMounted: boolean = false,
 		isWebcamFocused: boolean = false,
-		speakingValue: number = 0
+		speakingValue: number = 0,
+		streamTime: number = 0,
+		timerInterval: any,
+		formattedTime: string = '00:00:00',
+		isHoverVideo: boolean = false
 
 	$: isScreenLive = false
 	$: isWebcamLive = false
@@ -63,6 +68,12 @@
 		handleAudioChanges()
 	}
 
+	$: if ($is_feature_stats_enabled && (isScreenLive || isWebcamLive)) {
+		toggleTimer()
+	}
+
+	$: animate = isWebcamFocused ? '' : 'transition-all'
+
 	const handleScreenChanges = () => {
 		prevScreen = video.screen
 		toggleClient({
@@ -286,16 +297,44 @@
 		})
 	}
 
-	$: animate = isWebcamFocused ? '' : 'transition-all'
+	const toggleTimer = () => {
+		if (timerInterval) {
+			clearInterval(timerInterval)
+			timerInterval = null
+		} else {
+			timerInterval = setInterval(() => {
+				streamTime++
+				const hours = Math.floor(streamTime / 3600)
+				const minutes = Math.floor((streamTime % 3600) / 60)
+				const seconds = streamTime % 60
+				formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
+					.toString()
+					.padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+			}, 1000)
+		}
+	}
 </script>
 
-<div class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}>
+<div
+	class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}
+	on:mouseenter={() => (isHoverVideo = true)}
+	on:mouseleave={() => (isHoverVideo = false)}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
 		<img
 			src={video.avatar}
 			alt=""
-			class="absolute inset-0 w-24 md:w-24 mask mask-squircle object-cover m-auto" />
+			class="absolute inset-0 w-24 md:w-24 mask {video.isPaidPlan
+				? 'mask-hexagon'
+				: 'mask-squircle'} object-cover m-auto" />
 		<div class="absolute inset-0">
+			{#if $is_feature_stats_enabled && (isScreenLive || isWebcamLive)}
+				<span
+					class="btn btn-sm btn-neutral font-medium text-white border-none items-center w-fit absolute top-2 left-2 {isHoverVideo
+						? 'opacity-100'
+						: 'opacity-50'}">
+					{formattedTime}
+				</span>
+			{/if}
 			<video id={`screen-${video._id}`} autoplay muted class="rounded-md w-full h-full" />
 			<div
 				use:draggable={{ bounds: 'parent' }}