some ui updates

src/lib/GoogleAuth.svelte

@@ -13,7 +13,7 @@
 	import { ProviderType } from '@lit-protocol/constants';
 	import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
 
-	const redirectUri = 'http://localhost:5173/log';
+	const redirectUri = 'http://localhost:5173/';
 	let view = 'sign_in';
 	let error;
 	let litAuthClient;

src/lib/components/MessageInput.svelte

@@ -5,7 +5,8 @@
 
 	function handleSend() {
 		if (newMessageText.trim() !== '') {
-			createMessage(newMessageText);
+			// Create a new message with the default sender and type
+			createMessage(newMessageText, 'user', 'chat');
 			newMessageText = '';
 		}
 	}

src/lib/components/Messages.svelte

@@ -3,13 +3,16 @@
 </script>
 
 <main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
-	<div class="flex flex-col space-y-4">
+	<!-- Your messages, displayed in chronological order -->
-		<!-- Your messages, displayed in chronological order -->
+	{#each $messages as message}
-		{#each $messages as message}
+		<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
-			<div class="bg-white p-3 rounded-lg shadow-lg">
+			<div class="flex items-center justify-between">
-				<p class="text-gray-800">{message.text}</p>
+				<p class="text-sm text-gray-600">
-				<small class="text-gray-600 text-sm">{message.timestamp}</small>
+					{message.type} | {message.sender}
+				</p>
+				<p class="text-xs text-gray-600">{message.timestamp}</p>
 			</div>
-		{/each}
+			<p class="text-base text-gray-800 mt-2">{message.text}</p>
-	</div>
+		</div>
+	{/each}
 </main>

src/lib/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

@@ -1,68 +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));
-    }
-}
-
-// Load messages from localStorage or set an empty array if not available
-const initialMessages = getFromLocalStorage('chat-messages', []);
-
-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);
-});
-
-// Dummy messages
-const messagesList = [
-    "Hello there!",
-    "How are you?",
-    "What's your favorite color?",
-    "Nice weather today!",
-    "Have a great day!",
-    "I love Svelte!",
-    "Svelte is awesome!",
-    "Learning Svelte is fun!",
-    "Greetings from Svelte!",
-    "Keep coding and stay awesome!"
-];
-
-export function addRandomMessage() {
-    const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
-    const currentDate = new Date().toLocaleString();
-    messages.update(oldMessages => [
-        ...oldMessages,
-        { text: randomMessage, timestamp: currentDate }
-    ]);
-}
-
-export function createMessage(text) {
-    const currentDate = new Date().toLocaleString();
-    messages.update(oldMessages => [
-        ...oldMessages,
-        { text: text, timestamp: currentDate }
-    ]);
-}
-
-export function clearMessages() {
-    messages.set([]);
-}

src/lib/services/messages.ts

@@ -0,0 +1,71 @@
+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: string, defaultValue: any) {
+  if (isClientSide()) {
+    return localStorage.getItem(key)
+      ? JSON.parse(localStorage.getItem(key)!)
+      : defaultValue;
+  }
+  return defaultValue;
+}
+
+// Safely set item to localStorage
+function setToLocalStorage(key: string, value: any) {
+  if (isClientSide()) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+}
+
+// Define the updated Message interface
+interface Message {
+  text: string;
+  timestamp: string;
+  sender: string;
+  type: string;
+}
+
+// Load messages from localStorage or set an empty array if not available
+const initialMessages: Message[] = getFromLocalStorage('chat-messages', []);
+
+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);
+});
+
+// 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() {
+  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 = {
+    text: text,
+    timestamp: currentDate,
+    sender: sender,
+    type: type
+  };
+  messages.update(oldMessages => [...oldMessages, newMessageObj]);
+}
+
+export function clearMessages() {
+  messages.set([]);
+}

src/routes/+page.svelte

@@ -24,6 +24,19 @@
 
 	<WalletConnect bind:pkpWallet bind:authSig bind:pkpPubKey />
 </div> -->
-<GoogleAuth />
+
-<Messages />
+<div class="fixed top-0 left-0 w-full h-full overflow-hidden">
-<MessageInput />
+	<main class="grid grid-rows-[auto,1fr,auto] min-h-screen">
+		<header class="bg-gray-100 text-black p-4">
+			<GoogleAuth />
+		</header>
+
+		<main class="p-4">
+			<Messages />
+		</main>
+
+		<footer class="bg-gray-300 p-4">
+			<MessageInput />
+		</footer>
+	</main>
+</div>