init

src/lib/Message.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { IMessage } from '$lib/message';
+
+	interface Props {
+		message: IMessage;
+		localSenderId: number;
+	}
+
+	let { message, localSenderId }: Props = $props();
+</script>
+
+<div
+	class={[
+		'bg-accent text-accent-foreground w-fit max-w-[70%] rounded-lg px-4 py-2',
+		message.senderId === localSenderId && 'self-end bg-primary text-primary-foreground'
+	]}
+>
+	<p>{message.content}</p>
+</div>