From 77a183a7c22d70b07816058d87ce00d9228f1aca Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Sat, 22 Jul 2023 11:15:26 +0200
Subject: [PATCH] fixed messages to auto scroll to bottom

---
 src/lib/components/MessageInput.svelte |  2 +-
 src/lib/components/Messages.svelte     | 26 +++++++++++++++-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
index 8902853..a050e81 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/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"
diff --git a/src/lib/components/Messages.svelte b/src/lib/components/Messages.svelte
index 02e9a0c..b88f8fd 100644
--- a/src/lib/components/Messages.svelte
+++ b/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}