added Basic Status Messages to GoogleAuth

src/lib/components/GoogleAuth.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
-	import { createMessage } from '$lib/services/messages';
 	import {
 		LitAuthClient,
 		BaseProvider,
@@ -12,6 +11,7 @@
 	import { IRelayPKP } from '@lit-protocol/types';
 	import { ProviderType } from '@lit-protocol/constants';
 	import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
+	import { createMessage } from '$lib/services/messages';
 
 	const redirectUri = 'http://localhost:5173/';
 	let view = 'sign_in';
@@ -25,24 +25,14 @@
 	let sessionSigs;
 	let isLoading = false;
 
-	// Add an array to store chat messages
-	let messages: string[] = [];
-
-	// Helper function to add a message to the chat
-	function addMessage(message: string) {
-		messages = [...messages, message];
-	}
 	async function authWithGoogle() {
 		isLoading = true;
 		error = null;
-		addMessage('Starting authentication with Google...'); // Replace console.log
 		try {
 			const provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
 			await provider.signIn();
-			addMessage('Handling Google authentication...'); // Replace console.log
 			await handleRedirect(ProviderType.Google);
 		} catch (err) {
-			createMessage('Error: ' + err.message); // Use createMessage
 			error = err;
 			view = 'ERROR';
 		} finally {
@@ -52,6 +42,11 @@
 
 	async function handleRedirect(providerName: string) {
 		isLoading = true;
+		createMessage({
+			text: `Handling redirect for ${providerName}`,
+			sender: '$lib/components/GoogleAuth.svelte',
+			type: 'SYSTEM'
+		});
 		try {
 			console.log('Handling redirect...');
 			let provider: BaseProvider | undefined;
@@ -90,15 +85,22 @@
 		}
 		console.log(`Handling redirect for ${providerName}`);
 		console.log(`Fetched PKPs: ${pkps.length}`);
-		// Add chat message updates
+		createMessage({
-		addMessage(`Handling redirect for ${providerName}`);
+			text: `Fetched PKPs: ${pkps.length}`,
-		addMessage(`Fetched PKPs: ${pkps.length}`);
+			sender: '$lib/components/GoogleAuth.svelte',
+			type: 'SYSTEM'
+		});
 	}
 	async function mint() {
 		isLoading = true;
 		error = null;
 		try {
 			console.log('Minting started...');
+			createMessage({
+				text: 'Minting started...',
+				sender: '$lib/components/GoogleAuth.svelte',
+				type: 'SYSTEM'
+			});
 			view = 'MINTING';
 
 			const provider = litAuthClient.getProvider(currentProviderType);
@@ -125,6 +127,11 @@
 			isLoading = false;
 		}
 		console.log('Minted a new PKP.');
+		createMessage({
+			text: 'Minted a new PKP.',
+			sender: '$lib/components/GoogleAuth.svelte',
+			type: 'SYSTEM'
+		});
 	}
 
 	async function createSession(pkp: IRelayPKP) {
@@ -132,6 +139,11 @@
 		error = null;
 		try {
 			console.log('Creating session...');
+			createMessage({
+				text: 'Creating session...',
+				sender: '$lib/components/GoogleAuth.svelte',
+				type: 'SYSTEM'
+			});
 			view = 'CREATING_SESSION';
 
 			const litResource = new LitAccessControlConditionResource('*');
@@ -150,6 +162,11 @@
 				}
 			});
 			currentPKP = pkp;
+			createMessage({
+				text: 'Session created.',
+				sender: '$lib/components/GoogleAuth.svelte',
+				type: 'SYSTEM'
+			});
 			view = 'SESSION_CREATED';
 		} catch (err) {
 			console.error(err);
@@ -166,7 +183,11 @@
 	onMount(async () => {
 		isLoading = true;
 		console.log('Component mounted.');
-		addMessage('MOUNTED.');
+		createMessage({
+			text: 'Component mounted.',
+			sender: '$lib/components/GoogleAuth.svelte',
+			type: 'SYSTEM'
+		});
 		try {
 			litNodeClient = new LitNodeClient({
 				litNetwork: 'serrano',
@@ -186,6 +207,11 @@
 			console.log('Checking if isSignInRedirect...');
 			if (!authMethod && isSignInRedirect(redirectUri)) {
 				console.log('Redirect detected, handling...');
+				createMessage({
+					text: 'Redirect detected, handling...',
+					sender: '$lib/components/GoogleAuth.svelte',
+					type: 'SYSTEM'
+				});
 				const providerName = getProviderFromUrl();
 				if (providerName) {
 					await handleRedirect(providerName);
@@ -194,6 +220,11 @@
 				}
 			} else {
 				console.log('No redirect detected.');
+				createMessage({
+					text: 'No redirect detected.',
+					sender: '$lib/components/GoogleAuth.svelte',
+					type: 'SYSTEM'
+				});
 			}
 		} catch (err) {
 			console.error(err);

src/lib/components/MessageInput.svelte

@@ -1,12 +1,18 @@
 <script>
 	import { createMessage, clearMessages } from '$lib/services/messages';
 
+	createMessage({
+		text: 'Component loaded',
+		sender: '$lib/components/MessageInput.svelte',
+		type: 'SYSTEM'
+	});
+
 	let newMessageText = '';
 
 	function handleSend() {
 		if (newMessageText.trim() !== '') {
-			// Create a new message with the default sender and type
+			// Create a new message with the default sender and type using an object
-			createMessage(newMessageText, 'user', 'chat');
+			createMessage({ text: newMessageText, sender: 'user', type: 'chat' });
 			newMessageText = '';
 		}
 	}

src/lib/components/Messages.svelte

@@ -1,10 +1,23 @@
 <script>
-	import { messages } from '$lib/services/messages';
+	import { messages, createMessage } from '$lib/services/messages';
+
+	createMessage({
+		text: 'Component loaded',
+		sender: '$lib/components/Messages.svelte',
+		type: 'SYSTEM'
+	});
+	// Since messages is a store, we can subscribe to changes and store the latest messages in a variable
+	let latestMessages = [];
+
+	// Subscribe to the messages store to keep track of the latest messages
+	$: messages.subscribe((value) => {
+		latestMessages = value;
+	});
 </script>
 
 <main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
 	<!-- Your messages, displayed in chronological order -->
-	{#each $messages as message}
+	{#each latestMessages as message}
 		<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
 			<div class="flex items-center justify-between">
 				<p class="text-sm text-gray-600">

src/lib/components/interfaces/Message.ts

@@ -1,8 +0,0 @@
-interface Message {
-    message: string;
-    date: Date;
-    sender: string;
-    type: string;
-}
-
-export default Message;

src/lib/services/messages.ts

@@ -6,24 +6,24 @@ function isClientSide() {
 }
 
 // Safely get item from localStorage
-function getFromLocalStorage(key: string, defaultValue: any) {
+function getFromLocalStorage(key, defaultValue) {
   if (isClientSide()) {
     return localStorage.getItem(key)
-      ? JSON.parse(localStorage.getItem(key)!)
+      ? JSON.parse(localStorage.getItem(key))
       : defaultValue;
   }
   return defaultValue;
 }
 
 // Safely set item to localStorage
-function setToLocalStorage(key: string, value: any) {
+function setToLocalStorage(key, value) {
   if (isClientSide()) {
     localStorage.setItem(key, JSON.stringify(value));
   }
 }
 
 // Define the updated Message interface
-interface Message {
+export interface Message {
   text: string;
   timestamp: string;
   sender: string;
@@ -31,8 +31,9 @@ interface Message {
 }
 
 // Load messages from localStorage or set an empty array if not available
-const initialMessages: Message[] = getFromLocalStorage('chat-messages', []);
+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
@@ -40,28 +41,14 @@ messages.subscribe(currentMessages => {
   setToLocalStorage('chat-messages', currentMessages);
 });
 
-// Dummy messages
-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
-];
 
-export function addRandomMessage() {
+export function createMessage(messageData) {
-  const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
-  messages.update(oldMessages => [
-    ...oldMessages,
-    { ...randomMessage, timestamp: new Date().toLocaleString(), sender: "Bot", type: "chat" }
-  ]);
-}
-
-export function createMessage(text: string, sender: string, type: string) {
   const currentDate = new Date().toLocaleString();
-  const newMessageObj: Message = {
+  const newMessageObj = {
-    text: text,
+    text: messageData.text,
     timestamp: currentDate,
-    sender: sender,
+    sender: messageData.sender,
-    type: type
+    type: messageData.type
   };
   messages.update(oldMessages => [...oldMessages, newMessageObj]);
 }
@@ -69,3 +56,10 @@ export function createMessage(text: string, sender: string, type: string) {
 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/routes/+page.svelte

@@ -5,7 +5,7 @@
 	import Send from '$lib/Send.svelte';
 	import Balance from '$lib/Balance.svelte';
 	import WalletConnect from '$lib/WalletConnect.svelte';
-	import GoogleAuth from '$lib/GoogleAuth.svelte';
+	import GoogleAuth from '$lib/components/GoogleAuth.svelte';
 	import Messages from '$lib/components/Messages.svelte';
 	import MessageInput from '$lib/components/MessageInput.svelte';
 	let pkpWallet;