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,10 +21,13 @@
 	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}
+{#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">
@@ -37,11 +37,14 @@
 					</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>
+		</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() !== '') {

src/lib/core/Composite.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import Composite from './Composite.svelte';
 	import components from '$lib/core/componentLoader';
 	import services from '$lib/core/servicesLoader';
@@ -66,10 +66,20 @@
 				if (externalID === 'data') {
 					const unsubscribe = dataStore.subscribe((store) => {
 						if (externalKey in store) {
+							// Check if the data item is a Svelte store
+							if (store[externalKey] && typeof store[externalKey].subscribe === 'function') {
+								let innerUnsub = store[externalKey].subscribe((value) => {
+									localStore.update((storeValue) => {
+										return { ...storeValue, [localKey]: value };
+									});
+								});
+								onDestroy(innerUnsub);
+							} else {
 								localStore.update((storeValue) => {
 									return { ...storeValue, [localKey]: store[externalKey] };
 								});
 							}
+						}
 					});
 
 					onDestroy(unsubscribe);

src/lib/core/dataLoader.ts

@@ -1,28 +1,8 @@
+// dataLoader.ts
+
 import { writable } from 'svelte/store';
-
-// Using mock data, in a real-world scenario this could be fetched from an API.
-const queryMessagesData = [
-    {
-        text: 'text1',
-        date: 'date1',
-        id: 'id1'
-    },
-    {
-        text: 'text2',
-        date: 'date2',
-        id: 'id2'
-    }
-];
-
-const queryTodosData = [
-    {
-        name: "todo 1"
-    },
-    {
-        name: "todo 2"
-    },
-    { name: "todo 3" }
-];
+import { queryMessagesData } from '$lib/data/queryMessages';
+import { queryTodosData } from '$lib/data/queryTodos';
 
 // The store that holds the data sets
 export const dataStore = writable({

src/lib/data/queryMessages.ts

@@ -1,9 +1,38 @@
-// queryMessages.ts
-import { dataStore } from '$lib/core/dataLoader';
+// $lib/data/queryMessages.ts
 
-const queryMessages = [
-    { text: 'text', date: 'date', id: 'id' },
-    { text: 'text', date: 'date', id: 'id' }
-];
+import { writable } from 'svelte/store';
 
-dataStore.registerData('messages', queryMessages);
+export interface Message {
+    text: string;
+    timestamp: string;
+    sender: string;
+    type: string;
+    composite?: object | null;
+}
+
+const isClientSide = typeof window !== "undefined";
+
+function getFromLocalStorage(key, defaultValue) {
+    return isClientSide && localStorage.getItem(key)
+        ? JSON.parse(localStorage.getItem(key))
+        : defaultValue;
+}
+
+function setToLocalStorage(key, value) {
+    if (isClientSide) {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+}
+
+const initialMessages: Message[] = getFromLocalStorage('chat-messages', [
+    { text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
+    { text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" }
+]);
+
+const messages = writable(initialMessages);
+
+messages.subscribe(currentMessages => {
+    setToLocalStorage('chat-messages', currentMessages);
+});
+
+export const queryMessagesData = messages;

src/lib/data/queryTodos.ts

@@ -1,9 +1,17 @@
-// queryTodos.ts
-import { dataStore } from '$lib/core/dataLoader';
+// $lib/data/queryTodos.ts
+import { writable } from 'svelte/store';
 
-const queryTodos = [
-    { name: "todo 1" },
-    { name: "todo 2" }
-];
-
-dataStore.registerData('todos', queryTodos);
+export const queryTodosData = writable([
+    {
+        id: "id1",
+        text: "todo 1"
+    },
+    {
+        id: "id2",
+        text: "todo 2"
+    },
+    {
+        id: "id3",
+        text: "todo 3"
+    }
+]);

src/lib/services/messages.ts

@@ -1,67 +0,0 @@
-import { writable } from 'svelte/store';
-
-// Helper function to determine if we're running on the client side (browser) or server side.
-function isClientSide() {
-  return typeof window !== "undefined";
-}
-
-// Safely get item from localStorage
-function getFromLocalStorage(key, defaultValue) {
-  if (isClientSide()) {
-    return localStorage.getItem(key)
-      ? JSON.parse(localStorage.getItem(key))
-      : defaultValue;
-  }
-  return defaultValue;
-}
-
-// Safely set item to localStorage
-function setToLocalStorage(key, value) {
-  if (isClientSide()) {
-    localStorage.setItem(key, JSON.stringify(value));
-  }
-}
-
-// Define the updated Message interface
-export interface Message {
-  text: string;
-  timestamp: string;
-  sender: string;
-  type: string;
-  composite?: object | null; // New field
-}
-
-
-// Load messages from localStorage or set an empty array if not available
-const initialMessages = getFromLocalStorage('chat-messages', []);
-
-// Convert the array to a writable store
-export const messages = writable(initialMessages);
-
-// Subscribe to messages store to watch for changes and save them to localStorage
-messages.subscribe(currentMessages => {
-  setToLocalStorage('chat-messages', currentMessages);
-});
-
-
-export function createMessage(messageData) {
-  const currentDate = new Date().toLocaleString();
-  const newMessageObj = {
-    text: messageData.text,
-    timestamp: currentDate,
-    sender: messageData.sender,
-    type: messageData.type,
-    composite: messageData.composite || null // New field
-  };
-  messages.update(oldMessages => [...oldMessages, newMessageObj]);
-}
-export function clearMessages() {
-  messages.set([]);
-}
-
-// Dummy messages
-export const messagesList: Message[] = [
-  { text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
-  { text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
-  // Add more dummy messages here with the timestamp and sender properties
-];

src/lib/services/messages/messages.ts

@@ -0,0 +1,92 @@
+// $lib/services/messages.ts
+
+import { queryMessagesData } from '$lib/data/queryMessages';
+
+// The createMessage function now accepts a messageData parameter.
+export function createMessage(messageData) {
+  const currentDate = new Date().toLocaleString();
+  const newMessageObj = {
+    text: messageData.text,
+    timestamp: currentDate,
+    sender: messageData.sender,
+    type: messageData.type,
+    composite: messageData.composite || null
+  };
+
+  // We use the $ prefix to get the value out of a Svelte store
+  // and then set the new value back into the store.
+  queryMessagesData.update(oldMessages => [...oldMessages, newMessageObj]);
+}
+
+export function clearMessages() {
+  queryMessagesData.set([]);
+}
+
+
+// import { writable } from 'svelte/store';
+
+// // Helper function to determine if we're running on the client side (browser) or server side.
+// function isClientSide() {
+//   return typeof window !== "undefined";
+// }
+
+// // Safely get item from localStorage
+// function getFromLocalStorage(key, defaultValue) {
+//   if (isClientSide()) {
+//     return localStorage.getItem(key)
+//       ? JSON.parse(localStorage.getItem(key))
+//       : defaultValue;
+//   }
+//   return defaultValue;
+// }
+
+// // Safely set item to localStorage
+// function setToLocalStorage(key, value) {
+//   if (isClientSide()) {
+//     localStorage.setItem(key, JSON.stringify(value));
+//   }
+// }
+
+// // Define the updated Message interface
+// export interface Message {
+//   text: string;
+//   timestamp: string;
+//   sender: string;
+//   type: string;
+//   composite?: object | null; // New field
+// }
+
+
+// // Load messages from localStorage or set an empty array if not available
+// const initialMessages = getFromLocalStorage('chat-messages', []);
+
+// // Convert the array to a writable store
+// export const messages = writable(initialMessages);
+
+// // Subscribe to messages store to watch for changes and save them to localStorage
+// messages.subscribe(currentMessages => {
+//   setToLocalStorage('chat-messages', currentMessages);
+// });
+
+
+// export function createMessage(messageData) {
+//   const currentDate = new Date().toLocaleString();
+//   const newMessageObj = {
+//     text: messageData.text,
+//     timestamp: currentDate,
+//     sender: messageData.sender,
+//     type: messageData.type,
+//     composite: messageData.composite || null // New field
+//   };
+//   messages.update(oldMessages => [...oldMessages, newMessageObj]);
+// }
+// export function clearMessages() {
+//   messages.set([]);
+// }
+
+// // Dummy messages
+// export const messagesList: Message[] = [
+//   { text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
+//   { text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
+//   // Add more dummy messages here with the timestamp and sender properties
+// ];

src/lib/services/mintPkp/mintPkp.ts

@@ -1,6 +1,6 @@
 import type { IRelayPKP } from '@lit-protocol/types';
 import type { IProvider } from '$lib/services/provider/IProvider';
-import { createMessage } from '$lib/services/messages';
+import { createMessage } from '$lib/services/messages/messages';
 
 export async function mintPkp(provider: IProvider, authMethod: any): Promise<IRelayPKP> {
     createMessage({

src/lib/services/provider/setupChainProvider.ts

@@ -4,7 +4,7 @@ import { publicProvider } from '@wagmi/core/providers/public';
 import { InjectedConnector } from '@wagmi/core/connectors/injected';
 import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
 import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
-import { createMessage } from '$lib/services/messages';
+import { createMessage } from '$lib/services/messages/messages';
 
 export interface ProviderData {
 	walletConnectId: string;

src/lib/services/wallet/wallet.ts

@@ -1,6 +1,6 @@
 import { getStoredAuthSig } from '$lib/services/authWithMetamask/authWithMetamask';
 import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
-import { createMessage } from '$lib/services/messages';
+import { createMessage } from '$lib/services/messages/messages';
 
 // Use a variable to keep track of whether the wallet has been connected or not
 let isWalletConnected = false;

src/routes/+page.svelte

@@ -40,9 +40,10 @@
 				services: ['helloEarthAlert']
 			},
 			{
-				id: 'messages',
+				id: 'me',
 				component: 'Messages',
-				slot: 'main'
+				slot: 'main',
+				map: { messages: 'data.queryMessages' }
 			},
 			{
 				id: 'terminal',