chatbox.svelte

<script lang="ts">
	import JWTSession from '$lib/stores/JWTSession';
	import Message from '$lib/types/message';
	import type Session from '$lib/types/session';
	import { onMount } from 'svelte';
	import MessageC from './message.svelte';
	import { Icon, PaperAirplane } from 'svelte-hero-icons';

	let message = '';
	export let session: Session;

	$: messages = session.messages;

	onMount(async () => {
		await session.loadMessages();
		messages = session.messages;
	});

	async function sendMessage() {
		if (message.length == 0) return;

		const user = JWTSession.user();
		if (user === null || user == undefined) return;

		console.log(await session.sendMessage(user, message));

		message = '';
		messages = session.messages;
	}

	function scrollToBottom(node: HTMLElement) {
		node.scrollTop = node.scrollHeight;
	}
</script>

<div class="flex flex-col md:my-8 min-w-fit w-full max-w-4xl border-2">
	<div class="flex-grow h-48 overflow-auto px-4 flex flex-col" use:scrollToBottom>
		{#each messages.sort((a, b) => a.created_at.getTime() - b.created_at.getTime()) as message (message.id)}
			<MessageC {message} />
		{/each}
	</div>
	<div class="flex flex-row h-20 mt-2">
		<textarea
			class="flex-grow border-2 border-gray-300 rounded-md p-2 resize-none overflow-y-hidden"
			placeholder="Send a message..."
			bind:value={message}
			on:keypress={async (e) => {
				if (e.key === 'Enter' && !e.shiftKey) {
					await sendMessage();
				}
			}}
		/>
		<button class="w-12 button rounded-md" on:click={sendMessage}>
			<Icon src={PaperAirplane} />
		</button>
	</div>
</div>

<!-- <style lang="less">
	#mainbox {
		display: flex;
		flex-direction: column;
		height: 90%;
		margin-top: 50px;
		width: clamp(300px, 50%, 800px);
		border: 2px solid black;
		border-radius: 5px;
	}

	#chatbox {