minor fixes

src/lib/components/MessageInput.svelte

@@ -40,8 +40,7 @@
 
 			createMessage(message);
 
-			// Store the last message that was sent
+			// Clear the input after sending the message
-			lastMessageSent = newMessageText;
 			newMessageText = '';
 		}
 	}

src/lib/components/Messages.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { messages, createMessage } from '$lib/services/messages';
-	import { onMount } from 'svelte';
+	import { onMount, afterUpdate } from 'svelte';
 	import Composite from './Composite.svelte';
 
 	let latestMessages = [];
@@ -17,13 +17,13 @@
 		}
 	};
 
-	// Watch for changes in latestMessages
+	onMount(() => {
-	$: {
+		scrollToBottom();
-		// Use setTimeout to give the DOM some time to update
+	});
-		setTimeout(scrollToBottom, 50);
-	}
 
-	onMount(scrollToBottom);
+	afterUpdate(() => {
+		scrollToBottom();
+	});
 </script>
 
 <main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
@@ -36,13 +36,12 @@
 				<p class="text-xs text-gray-600">{message.timestamp}</p>
 			</div>
 			<p class="mt-2 text-base text-gray-800">{message.text}</p>
-
-			<!-- Render Composite Component -->
-			{#if message.composite}
-				<div class="mt-2 overflow-y-auto max-h-500">
-					<Composite componentsData={message.composite} />
-				</div>
-			{/if}
 		</div>
+		<!-- Render Composite Component -->
+		{#if message.composite}
+			<div class="overflow-y-auto max-h-500">
+				<Composite componentsData={message.composite} />
+			</div>
+		{/if}
 	{/each}
 </main>