fixed messages to auto scroll to bottom

src/lib/components/MessageInput.svelte

@@ -22,7 +22,7 @@
 	}
 </script>
 
-<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
+<footer class="bg-white p-4 flex justify-end">
 	<input
 		type="text"
 		class="flex-grow border rounded px-3 py-2 mr-2"

src/lib/components/Messages.svelte

@@ -1,24 +1,28 @@
 <script>
 	import { messages, createMessage } from '$lib/services/messages';
+	import { onMount, afterUpdate } from 'svelte';
 
-	createMessage({
-		text: 'Component loaded',
-		sender: '$lib/components/Messages.svelte',
-		type: 'SYSTEM'
-	});
-	// Since messages is a store, we can subscribe to changes and store the latest messages in a variable
 	let latestMessages = [];
 
-	// Subscribe to the messages store to keep track of the latest messages
-	$: messages.subscribe((value) => {
+	messages.subscribe((value) => {
 		latestMessages = value;
 	});
+
+	let messagesContainer;
+
+	const scrollToBottom = () => {
+		if (messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		}
+	};
+
+	onMount(scrollToBottom);
+	afterUpdate(scrollToBottom);
 </script>
 
-<main class="p-4 overflow-y-auto h-full w-full">
-	<!-- Your messages, displayed in chronological order -->
+<main bind:this={messagesContainer} class="p-4 overflow-y-auto h-full w-full">
 	{#each latestMessages as message}
-		<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
+		<div class="bg-white p-3 rounded-lg shadow-lg mb-2 border-b border-gray-300">
 			<div class="flex items-center justify-between">
 				<p class="text-sm text-gray-600">
 					{message.type} | {message.sender}