enh: infinite scroll messages

src/lib/components/chat/Messages.svelte

@@ -9,6 +9,8 @@
 
 	import Placeholder from './Messages/Placeholder.svelte';
 	import Message from './Messages/Message.svelte';
+	import Loader from '../common/Loader.svelte';
+	import Spinner from '../common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -33,12 +35,21 @@
 	export let bottomPadding = false;
 	export let autoScroll;
 
+	let messagesCount = 20;
+	let messagesLoading = false;
+
+	const loadMoreMessages = async () => {
+		messagesLoading = true;
+		messagesCount += 20;
+		messagesLoading = false;
+	};
+
 	$: if (history.currentId) {
 		let _messages = [];
 
 		let message = history.messages[history.currentId];
-		while (message) {
-			_messages.unshift({ ...message });
+		while (message && _messages.length <= messagesCount) {
+			_messages.push({ ...message });
 			message = message.parentId !== null ? history.messages[message.parentId] : null;
 		}
 
@@ -330,7 +341,7 @@
 	{:else}
 		<div class="w-full pt-2">
 			{#key chatId}
-				<div class="w-full">
+				<div class="w-full flex flex-col-reverse">
 					{#each messages as message, messageIdx (message.id)}
 						<Message
 							{chatId}
@@ -361,6 +372,22 @@
 							}}
 						/>
 					{/each}
+
+					{#if messages.at(-1).parentId !== null}
+						<Loader
+							on:visible={(e) => {
+								console.log('visible');
+								if (!messagesLoading) {
+									loadMoreMessages();
+								}
+							}}
+						>
+							<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
+								<Spinner className=" size-4" />
+								<div class=" ">Loading...</div>
+							</div>
+						</Loader>
+					{/if}
 				</div>
 				<div class="pb-12" />
 				{#if bottomPadding}