Updated the Messages to the new abstracted composite syntax.

src/lib/components/ClearMessages.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { clearMessages } from '$lib/services/messages';
+	import { clearMessages } from '$lib/services/messages/messages';
 
 	function handleClear() {
 		clearMessages();

src/lib/components/GoogleAuth.svelte

@@ -3,7 +3,7 @@
 	import { isSignInRedirect, getProviderFromUrl } from '@lit-protocol/lit-auth-client';
 	import type { IRelayPKP } from '@lit-protocol/types';
 	import { ProviderType } from '@lit-protocol/constants';
-	import { createMessage } from '$lib/services/messages';
+	import { createMessage } from '$lib/services/messages/messages';
 	import { createLitSession } from '$lib/services/createLitSession/createLitSession';
 
 	const redirectUri = 'http://localhost:5173/';

src/lib/components/HelloEarth/HelloEarth.svelte

@@ -3,34 +3,37 @@
 	export let services;
 	export let store;
 
-	// Watch for store changes
+	let isServicesLoaded = false;
+	let isStoreLoaded = false;
 
 	onMount(async () => {
-		if (services && services.helloEarthAlert) {
-			console.log('Alerted by HelloEarthAlert');
+		// Check services loading
+		if (services.helloEarthAlert) {
+			// services.helloEarthAlert.alertMe();
+			isServicesLoaded = true;
 		} else {
-			console.error('Services or helloEarthAlert not loaded');
+			console.error('helloEarthAlert not loaded');
 		}
 	});
+
+	$: if ($store) isStoreLoaded = true;
 </script>
 
-{#if !$store}
-	<div>Loading store...</div>
-{:else}
-	<div class="p-12 bg-blue-400">
-		Hello Earth
-		{#if $store.pkpWallet}{$store.pkpWallet.address}{/if}
-		{#if $store.todos && $store.messages}
-			<ul>
+{#if isStoreLoaded}
+	<div class="p-12 bg-blue-400 rounded-md shadow-lg">
+		<p class="mb-4 text-xl font-bold text-white">Hello Earth</p>
+		{#if $store.pkpWallet}
+			<p class="mb-6 text-white">Wallet Address: {$store.pkpWallet.address}</p>
+		{/if}
+		Reference TodoList
+		{#if $store.todos}
+			<ul class="pl-5 list-decimal">
 				{#each $store.todos as todo}
-					<li>{todo.name}</li>
-				{/each}
-			</ul>
-			<ul>
-				{#each $store.messages as message}
-					<li>{message.text} - {message.date}</li>
+					<li class="p-2 mb-2 text-gray-700 bg-white rounded shadow">{todo.text}</li>
 				{/each}
 			</ul>
 		{/if}
 	</div>
+{:else}
+	<div class="p-6 text-center bg-gray-100 rounded-md shadow-lg">Loading...</div>
 {/if}

src/lib/components/Messages.svelte

@@ -1,13 +1,10 @@
 <script>
-	import { messages } from '$lib/services/messages';
 	import { onMount, afterUpdate } from 'svelte';
 	import Composite from '$lib/core/Composite.svelte';
 
-	let latestMessages = [];
+	export let store;
 
-	messages.subscribe((value) => {
-		latestMessages = value;
-	});
+	let isStoreLoaded = false;
 
 	let messagesContainer;
 
@@ -24,24 +21,30 @@
 	afterUpdate(() => {
 		scrollToBottom();
 	});
+	$: if ($store) isStoreLoaded = true;
 </script>
 
-<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
-	{#each latestMessages as message}
-		<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="mt-2 text-base text-gray-800">{message.text}</p>
-		</div>
-		<!-- Render Composite Component -->
-		{#if message.composite}
-			<div class="overflow-y-auto max-h-80vh">
-				<Composite composite={message.composite} />
-			</div>
-		{/if}
-	{/each}
-</main>
+{#if isStoreLoaded}
+	{#if $store.messages}
+		<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
+			{#each $store.messages as message}
+				<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="mt-2 text-base text-gray-800">{message.text}</p>
+				</div>
+				{#if message.composite}
+					<div class="overflow-y-auto max-h-80vh">
+						<Composite composite={message.composite} />
+					</div>
+				{/if}
+			{/each}
+		</main>
+	{/if}
+{:else}
+	<div>Loading...</div>
+{/if}

src/lib/components/SendMessage.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createMessage } from '$lib/services/messages';
+	import { createMessage } from '$lib/services/messages/messages';
 
 	export function sendMessage(text) {
 		if (text && text.trim() !== '') {