Added dynamic component rendering attached to message with the

@app: command

src/lib/components/Messages.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { messages, createMessage } from '$lib/services/messages';
-	import { onMount, afterUpdate } from 'svelte';
+	import { onMount } from 'svelte';
+	import Composite from './Composite.svelte';
 
 	let latestMessages = [];
 
@@ -16,20 +17,32 @@
 		}
 	};
 
+	// Watch for changes in latestMessages
+	$: {
+		// Use setTimeout to give the DOM some time to update
+		setTimeout(scrollToBottom, 50);
+	}
+
 	onMount(scrollToBottom);
-	afterUpdate(scrollToBottom);
 </script>
 
-<main bind:this={messagesContainer} class="p-4 overflow-y-auto h-full w-full">
+<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
 	{#each latestMessages as message}
-		<div class="bg-white p-3 rounded-lg shadow-lg mb-2 border-b border-gray-300">
+		<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
 			<div class="flex items-center justify-between">
 				<p class="text-sm text-gray-600">
 					{message.type} | {message.sender}
 				</p>
 				<p class="text-xs text-gray-600">{message.timestamp}</p>
 			</div>
-			<p class="text-base text-gray-800 mt-2">{message.text}</p>
+			<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>
 	{/each}
 </main>