Feat: added send-message websockets

src/lib/assets/icons/channel/IconChatDrawer.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-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+</svg>

src/lib/components/Browse/CreateChannelDrawer.svelte

@@ -161,12 +161,12 @@
 								{/if}
 							</span>
 						</div>
-						<div class="flex flex-row mt-5 ">
+						<!-- <div class="flex flex-row mt-5 ">
 							<input
 								bind:checked={newChannel.isPrivate}
 								type="checkbox"
 								class="checkbox checkbox-primary mr-3" /> Private
-						</div>
+						</div> -->
 					</div>
 
 					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">

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

@@ -1,18 +1,39 @@
 <script lang="ts">
 	import ChatInput from '$lib/components/Channel/Chat/ChatInput.svelte'
 	import ChatMessage from '$lib/components/Channel/Chat/ChatMessage.svelte'
+	import { channelMessage } from '$lib/stores/websocketStore'
 
 	export let showDrawer: boolean,
 		channel: any = undefined,
-		chatHistory: any = []
+		chatHistory: any = [],
+		userId: string = ''
+
+	$: chatHistory = chatHistory
+
+	channelMessage.subscribe((value) => {
+		if (!value) return
+		try {
+			const parsedData = JSON.parse(value.data)
+			console.log('parsedData', parsedData)
+			if (parsedData.eventName === `channel-message-${channel._id}`) {
+				var msg = parsedData.data
+				if (msg.user._id === channel.user) msg.role = 'Host'
+				else if (channel.mods?.includes(msg.user._id)) msg.role = 'Mod'
+				else if (msg.user._id === userId) msg.role = 'You'
+				else msg.role = 'Rando'
+				chatHistory.push(parsedData.data)
+			}
+		} catch (err) {
+			console.log(err)
+		}
+	})
 </script>
 
-<div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
-	<input id="create-channel-drawer" type="checkbox" class="drawer-toggle" />
-	<div class="drawer-side">
+<div class="drawer drawer-end w-fit z-20 top-0 right-0">
+	<input id="chat-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-side justify-end">
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click={() => (showDrawer = false)} class="drawer-overlay" />
-		<div class="bg-base-200 flex flex-col">
+		<div class="bg-base-100 flex flex-col ">
 			<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 				{channel.title || 'Chat'}
 			</p>

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

@@ -4,9 +4,16 @@
 	// 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 { enhance } from '$app/forms'
+	let form: HTMLFormElement
 </script>
 
-<form class="rounded-lg bg-base-100 p-2 w-96">
+<form
+	bind:this={form}
+	class="rounded-lg bg-base-200 p-2 w-96"
+	method="POST"
+	action="?/send-message"
+	use:enhance>
 	<!-- <button
 		type="button"
 		class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
@@ -33,12 +40,17 @@
 	</button> -->
 	<div class="flex items-center py-2 rounded-lg">
 		<textarea
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					form.requestSubmit()
+					e.preventDefault()
+				}
+			}}
 			id="chat"
 			rows="1"
 			class="block mx-2 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
 			placeholder="Your message..." /><!--focus:h-32 -->
 		<button
-			type="submit"
 			class="inline-flex justify-center p-2 text-secondary rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-600">
 			<IconChatSendMessage />
 			<span class="sr-only">Send message</span>

src/routes/+layout.svelte

@@ -52,7 +52,6 @@
 	onMount(async () => {
 		const platformSocketId = await get(`wsinit/wsid`)
 		initPlatformSocket(platformSocketId)
-		console.log('platformSocketId', platformSocketId)
 		platformSocket?.addEventListener('open', (data) => {
 			console.log('socket connection open')
 			console.log(data)

src/routes/channel/[channelId]/+page.server.ts

@@ -1,13 +1,42 @@
-import { error } from '@sveltejs/kit'
+import { error, type Actions } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { getChannel } from '$lib/stores/channelStore'
+import { emitMessageToChannel } from '$lib/websocket'
 
-export const load = (async ({ params }) => {
+export const load = (async ({ params, locals }) => {
 	const post = await getChannel({ channelId: params.channelId })
 	if (post) {
+		const userId = locals?.user?.userId || ''
 		return {
-			post
+			post,
+			userId
 		}
 	}
 	throw error(404, 'Not found')
 }) satisfies PageServerLoad
+
+export const actions = {
+	'send-message': async ({
+		params,
+		request,
+		locals
+	}: {
+		params: any
+		request: any
+		locals: any
+	}) => {
+		const { user } = locals?.user || ''
+		const data = await request.formData()
+		const chat = data.get('chat')
+		const channelId = params.channelId
+		const completeMessage = {
+			body: chat,
+			state: { timestamp: new Date().toISOString() },
+			userId: user?._id || '',
+			username: user?.username || '',
+			channelId: channelId
+		}
+		emitMessageToChannel({ channelId, message: completeMessage })
+		return { success: true }
+	}
+} satisfies Actions

src/routes/channel/[channelId]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
+	import IconChatDrawer from '$lib/assets/icons/channel/IconChatDrawer.svelte'
 	import ChatDrawer from '$lib/components/Channel/Chat/ChatDrawer.svelte'
 	import type { PageData } from './$types'
 	import { onDestroy, onMount } from 'svelte'
@@ -10,8 +10,8 @@
 	export let data: PageData
 
 	$: chatHistory = []
-	$: ({ post } = data)
-	let showDrawer = false
+	$: ({ post, userId } = data)
+	let showDrawer = true
 
 	onMount(async () => {
 		const channelSocketId = await get(`wsinit/channelid?channelId=${post._id}`)
@@ -40,18 +40,17 @@
 	onDestroy(() => channelSocket?.close())
 </script>
 
-<div class="flex flex-col md:flex-row gap-4 py-5 pl-5">
-	<div class="form-control">
+<div class="flex flex-col md:flex-row gap-4 justify-end">
+	<div class="form-control p-5">
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<label
-			for="create-channel-drawer"
-			class="btn w-[21rem] btn-primary gap-2 drawer-button"
-			on:click={() => (showDrawer = true)}>
-			<IconCreate />
-			Show Chat</label>
+			for="chat-drawer"
+			class="btn gap-2 drawer-button"
+			on:click={() => (showDrawer = !showDrawer)}>
+			<IconChatDrawer /></label>
 	</div>
 
 	{#if showDrawer}
-		<ChatDrawer bind:showDrawer bind:channel={post} bind:chatHistory />
+		<ChatDrawer bind:showDrawer bind:channel={post} bind:chatHistory bind:userId />
 	{/if}
 </div>