Merge pull request #399 from gagan-suie/dev

Feat: added AI chat toggle button and fixed channel update socket
CodeCrowCorp · May 12, 2023 · f6f21a4 · f6f21a4
2 parents fc476e0 + cd02d60
commit f6f21a4
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 42 deletions.
diff --git a/src/lib/assets/icons/channel/IconShareScreen.svelte b/src/lib/assets/icons/channel/IconShareScreen.svelte
@@ -1,4 +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-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
-  </svg>
-
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+</svg>
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -5,18 +5,20 @@
 	import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
 	import IconChatCode from '$lib/assets/icons/chat/IconChatCode.svelte'
 	import IconChatSendMessage from '$lib/assets/icons/chat/IconChatSendMessage.svelte'
-	import { emitMessageToChannel } from '$lib/websocket'
+	import { emitChannelUpdate, emitMessageToChannel } from '$lib/websocket'
 	import { page } from '$app/stores'
 	import { channel_connection } from '$lib/stores/websocketStore'
 
 	export let channel: any
 
 	$: chatMessage = ''
-	$: isChannelSocketConnected = $channel_connection === 'open' && $page.data?.user?.userId
+	$: isChannelSocketConnected = $channel_connection === 'open' && $page.data.user?.userId
+	$: isHost = channel.user === $page.data.user?.userId
 
 	const sendMessage = () => {
 		if (chatMessage === null || chatMessage.match(/^\s*$/) !== null) return
 		const completeMessage = {
+			isAiChatEnabled: channel.isAiChatEnabled,
 			body: chatMessage,
 			state: { timestamp: new Date().toISOString() },
 			user: {
@@ -27,45 +29,37 @@
 		emitMessageToChannel({ channelId: channel._id, message: JSON.stringify(completeMessage) })
 		chatMessage = ''
 	}
+
+	const toggleAIChat = async () => {
+		channel.isAiChatEnabled = !channel.isAiChatEnabled
+		emitChannelUpdate({ channel })
+	}
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full">
-	<!-- <button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="Attachment">
-		<IconChatAttachment />
-		<span class="sr-only">Upload attachment</span>
-	</button> -->
 	<button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="AI">
+		class="btn tooltip font-normal normal-case {!isHost
+			? 'no-animation'
+			: ''} {channel.isAiChatEnabled ? 'btn-primary' : ''}"
+		data-tip="AI"
+		on:click={() => {
+			if (isHost) toggleAIChat()
+		}}>
 		<IconChatAI />
 		<span class="sr-only">Enable AI</span>
 	</button>
-	<button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="Emoji">
+	<button disabled type="button" class="btn tooltip font-normal normal-case" data-tip="Emoji">
 		<IconChatEmoji />
 		<span class="sr-only">Add emoji</span>
 	</button>
-	<button
-		disabled
-		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
-		data-tip="GIF">
+	<button disabled type="button" class="btn tooltip font-normal normal-case" data-tip="GIF">
 		<IconChatGif />
 		<span class="sr-only">Add GIF</span>
 	</button>
 	<button
 		disabled
 		type="button"
-		class="btn border-none text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 tooltip font-normal normal-case"
+		class="btn tooltip font-normal normal-case"
 		data-tip="Code snippet">
 		<IconChatCode />
 		<span class="sr-only">Add code snippet</span>

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -18,7 +18,7 @@
 		if (msg.user?.userId === 'AI') msg.role = 'AI-Mod'
 		else if (msg.user?.userId === channel?.user) msg.role = 'Host'
 		else if (channel?.mods?.includes(msg.user._id)) msg.role = 'Mod'
-		else if (msg.user?.userId === $page.data?.user?.userId) msg.role = 'You'
+		else if (msg.user?.userId === $page.data.user?.userId) msg.role = 'You'
 		else msg.role = 'Rando'
 		return msg
 	}

diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -164,9 +164,9 @@
 								name="category"
 								required={!channel.category.length}
 								placeholder={channel?.category?.length ? '' : 'Category'}
-								class="input input-primary input-bordered mt-5 w-full " />
+								class="input input-primary input-bordered mt-5 w-full" />
 							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxCategoryLabel})</span>
-							<span class="absolute flex flex-row gap-2 left-0 top-1/2  pl-5">
+							<span class="absolute flex flex-row gap-2 left-0 top-1/2 pl-5">
 								{#if channel?.category?.length}
 									{#each channel?.category as icon}
 										<img src={$category_list[icon]} alt="" class="h-5 w-5" />

diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -22,8 +22,8 @@
 
 	export let isHostOrGuest: boolean = false
 
-	$: isChannelSocketConnected = $channel_connection === 'open' && $page.data?.user?.userId
-	$: videoItemIsActive = $video_items.some((video: any) => video._id === $page.data?.user?.userId)
+	$: isChannelSocketConnected = $channel_connection === 'open' && $page.data.user?.userId
+	$: videoItemIsActive = $video_items.some((video: any) => video._id === $page.data.user?.userId)
 
 	let screenUid: string = ''
 	let webcamUid: string = ''
@@ -47,8 +47,8 @@
 
 	const createLiveInput = async (trackData: any) => {
 		return await put(`cloudflare/live-input`, trackData, {
-			userId: $page.data?.user?.userId,
-			token: $page.data?.user?.token
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
 		})
 	}
 
@@ -66,8 +66,8 @@
 		return await del(
 			`cloudflare/live-input?channelId=${channelId}&userId=${userId}&trackType=${trackType}&inputId=${inputId}`,
 			{
-				userId: $page.data?.user?.userId,
-				token: $page.data?.user?.token
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
 			}
 		)
 	}

diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -60,7 +60,7 @@
 	}
 
 	const toggleClient = ({ trackType }: { trackType: string }) => {
-		if ($page.data?.user?.userId === video._id) {
+		if ($page.data.user?.userId === video._id) {
 			switch (trackType) {
 				case 'screen':
 					if (video.screen && $is_sharing_screen) {

diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -28,7 +28,7 @@
 	let channel: any
 	let channelId = $page.params.channelId || ''
 	$: userCount = 0
-	$: isHostOrGuest = isHost || channel?.guests?.includes($page.data?.user?.userId)
+	$: isHostOrGuest = isHost || channel?.guests?.includes($page.data.user?.userId)
 
 	let isDeleteModalOpen = false,
 		showEditChannelDrawer = false,
@@ -148,7 +148,8 @@
 		var parsedMsg = JSON.parse(value)
 		switch (parsedMsg.eventName) {
 			case `channel-update-${channelId}`:
-				channel = parsedMsg.channels
+				console.log('channel-update', parsedMsg)
+				channel = parsedMsg.channel
 				break
 			case `channel-subscribe-${channelId}`:
 				userCount = parsedMsg.userCount
@@ -175,7 +176,7 @@
 			case `channel-streaming-action-${channelId}`:
 				switch (parsedMsg.data.action) {
 					case 'toggleTrack':
-						if ($page.data?.user?.userId) {
+						if ($page.data.user?.userId) {
 							if ($page.data.user.userId !== parsedMsg.data.video._id) {
 								$video_items = updateVideoItems($video_items, [parsedMsg.data.video])
 							}