frontend: messages

frontend/src/lib/components/sessions/chatbox.svelte

@@ -3,7 +3,8 @@
 	import Message from '$lib/types/message';
 	import type Session from '$lib/types/session';
 	import { onMount } from 'svelte';
-	import { get } from 'svelte/store';
+	import MessageC from './message.svelte';
+	import { Icon, PaperAirplane } from 'svelte-hero-icons';
 
 	let message = '';
 	export let session: Session;
@@ -26,32 +27,36 @@
 		message = '';
 		messages = session.messages;
 	}
+
+	function scrollToBottom(node: HTMLElement) {
+		node.scrollTop = node.scrollHeight;
+	}
 </script>
 
-<div id="mainbox">
-	<div id="chatbox">
+<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)}
-			{#if message.user === JWTSession.user()}
-				<div>You: {message.content}</div>
-			{:else}
-				<div>{message.user.username}: {message.content}</div>
-			{/if}
+			<MessageC {message} />
 		{/each}
 	</div>
-	<input
-		type="text"
-		id="chatinput"
-		placeholder="Send a message..."
-		bind:value={message}
-		on:keypress={async (e) => {
-			if (e.key === 'Enter') {
-				await sendMessage();
-			}
-		}}
-	/>
+	<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">
+<!-- <style lang="less">
 	#mainbox {
 		display: flex;
 		flex-direction: column;
@@ -69,4 +74,4 @@
 	#chatinput {
 		height: 50px;
 	}
-</style>
+</style> -->

frontend/src/lib/components/sessions/editParticipants.svelte

@@ -85,28 +85,3 @@
 		</table>
 	</div>
 </div>
-<!-- 
-<style lang="less">
-	.menu {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -75%);
-		background-color: white;
-		padding: 20px;
-		border-radius: 10px;
-	}
-
-	#bg {
-		background-color: #000c;
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-	td {
-		min-width: 200px;
-	}
-</style> -->

frontend/src/lib/components/sessions/message.svelte

+<script lang="ts">
+	import JWTSession from '$lib/stores/JWTSession';
+	import type Message from '$lib/types/message';
+
+	export let message: Message;
+
+	const isSender = message.user == JWTSession.user();
+</script>
+
+<div class="w-full flex" class:justify-end={isSender}>
+	<div
+		class="bg-gray-200 rounded-b-xl my-2 p-4 w-fit"
+		class:bg-blue-200={isSender}
+		class:rounded-tl-xl={isSender}
+		class:rounded-tr-xl={!isSender}
+	>
+		<div class="font-bold mb-1 capitalize">
+			{message.user.username}
+		</div>
+		<div class="max-w-3xl">{message.content}</div>
+	</div>
+</div>

frontend/src/routes/session/+page.svelte

@@ -24,26 +24,11 @@
 	});
 </script>
 
-<div class="container">
+<div class="h-screen flex flex-col">
 	<Header />
 	{#if session}
-		<div class="vareas">
+		<div class="flex flex-row flex-grow justify-evenly">
 			<Chatbox {session} />
 		</div>
 	{/if}
 </div>
-
-<style lang="less">
-	.container {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-	}
-
-	.vareas {
-		display: flex;
-		flex-direction: row;
-		flex-grow: 1;
-		justify-content: space-evenly;
-	}
-</style>