more wiring up of messages

src/lib/GoogleAuth.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
+	import { createMessage } from '$lib/services/messages';
 	import {
 		LitAuthClient,
 		BaseProvider,
@@ -12,7 +13,7 @@
 	import { ProviderType } from '@lit-protocol/constants';
 	import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
 
-	const redirectUri = 'http://localhost:5173/';
+	const redirectUri = 'http://localhost:5173/log';
 	let view = 'sign_in';
 	let error;
 	let litAuthClient;
@@ -34,15 +35,14 @@
 	async function authWithGoogle() {
 		isLoading = true;
 		error = null;
-		// Add chat message updates
-		addMessage('Starting authentication with Google...');
+		addMessage('Starting authentication with Google...'); // Replace console.log
 		try {
 			const provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
 			await provider.signIn();
-			addMessage('Handling Google authentication...');
+			addMessage('Handling Google authentication...'); // Replace console.log
 			await handleRedirect(ProviderType.Google);
 		} catch (err) {
-			console.error(err);
+			createMessage('Error: ' + err.message); // Use createMessage
 			error = err;
 			view = 'ERROR';
 		} finally {
@@ -166,6 +166,7 @@
 	onMount(async () => {
 		isLoading = true;
 		console.log('Component mounted.');
+		addMessage('MOUNTED.');
 		try {
 			litNodeClient = new LitNodeClient({
 				litNetwork: 'serrano',
@@ -248,9 +249,3 @@
 		</div>
 	{/if}
 </main>
-
-{#each messages as message, index}
-	<div class="chat-message">
-		<p>{message}</p>
-	</div>
-{/each}

src/lib/components/MessageInput.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { createMessage, clearMessages } from '$lib/services/messages';
+
+	let newMessageText = '';
+
+	function handleSend() {
+		if (newMessageText.trim() !== '') {
+			createMessage(newMessageText);
+			newMessageText = '';
+		}
+	}
+
+	function handleClear() {
+		clearMessages(); // Call the clearMessages function to clear all messages.
+	}
+</script>
+
+<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
+	<input
+		type="text"
+		class="flex-grow border rounded px-3 py-2 mr-2"
+		placeholder="Type your message..."
+		bind:value={newMessageText}
+	/>
+	<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" on:click={handleSend}>
+		Send Message
+	</button>
+	<button
+		class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded ml-2"
+		on:click={handleClear}
+	>
+		Clear
+	</button>
+</footer>

src/lib/components/Messages.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { messages, clearMessages, addRandomMessage } from '$lib/services/messages';
+	import { messages } from '$lib/services/messages';
 </script>
 
 <main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
@@ -13,18 +13,3 @@
 		{/each}
 	</div>
 </main>
-
-<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
-	<button
-		class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded mr-2"
-		on:click={clearMessages}
-	>
-		Clear
-	</button>
-	<button
-		class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded"
-		on:click={addRandomMessage}
-	>
-		Send Random Message
-	</button>
-</footer>

src/lib/components/interfaces/Message.ts

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

src/lib/services/messages.js

@@ -55,6 +55,14 @@ export function addRandomMessage() {
     ]);
 }
 
+export function createMessage(text) {
+    const currentDate = new Date().toLocaleString();
+    messages.update(oldMessages => [
+        ...oldMessages,
+        { text: text, timestamp: currentDate }
+    ]);
+}
+
 export function clearMessages() {
     messages.set([]);
 }

src/routes/+page.svelte

@@ -6,14 +6,16 @@
 	import Balance from '$lib/Balance.svelte';
 	import WalletConnect from '$lib/WalletConnect.svelte';
 	import GoogleAuth from '$lib/GoogleAuth.svelte';
+	import Messages from '$lib/components/Messages.svelte';
+	import MessageInput from '$lib/components/MessageInput.svelte';
 	let pkpWallet;
 	let authSig;
 	let pkpPubKey =
 		'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571';
 </script>
 
-<LitStatus />
-<AuthSign />
+<!-- <LitStatus />
+<AuthSign /> -->
 
 <!-- <div class="p-4 bg-gray-200 flex justify-center items-center flex-col">
 	<Wallet bind:pkpWallet bind:authSig />
@@ -23,3 +25,5 @@
 	<WalletConnect bind:pkpWallet bind:authSig bind:pkpPubKey />
 </div> -->
 <GoogleAuth />
+<Messages />
+<MessageInput />

src/routes/log/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Messages from '$lib/components/Messages.svelte';
-</script>
-
-<Messages />