pulling out the basic messaging service.

src/lib/components/Messages.svelte

@@ -1,38 +1,7 @@
 <script>
-	import { writable } from 'svelte/store';
+	import { messages, clearMessages, addRandomMessage } from '$lib/services/messages';
-
-	// Dummy messages
-	const messagesList = [
-		"Believe you can, and you're halfway there.",
-		'The only way to do great work is to love what you do.',
-		'Success is not final, failure is not fatal: It is the courage to continue that counts.',
-		'The best way to predict the future is to create it.',
-		"Your time is limited, don't waste it living someone else's life.",
-		'Every moment is a fresh beginning.',
-		"Don't watch the clock; do what it does. Keep going.",
-		'Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.',
-		'You are never too old to set another goal or to dream a new dream.',
-		'The future belongs to those who believe in the beauty of their dreams.'
-	];
-
-	// Reactive store to store chat messages
-	const messages = writable([]);
-
-	function addRandomMessage() {
-		const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
-		const currentDate = new Date().toLocaleString();
-		messages.update((oldMessages) => [
-			...oldMessages,
-			{ text: randomMessage, timestamp: currentDate }
-		]);
-	}
-	// Function to clear all messages
-	function clearMessages() {
-		messages.set([]);
-	}
 </script>
 
-<!-- HTML content -->
 <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 -->

src/lib/services/messages.js

@@ -1,11 +1,60 @@
-// src/lib/messaging.js
+import { writable } from 'svelte/store';
-import { messagesStore } from '$lib/data//stores';
 
-export function addMessage(message) {
+// Helper function to determine if we're running on the client side (browser) or server side.
-  const timestamp = new Date().toLocaleString();
+function isClientSide() {
-  messagesStore.update((messages) => [{ text: message, timestamp }, ...messages]);
+    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 clearMessages() {
-  messagesStore.set([]);
+    messages.set([]);
 }

src/routes/log/write/+page.svelte

@@ -1,34 +0,0 @@
-<!-- src/routes/write.svelte -->
-<script>
-	import { addMessage } from '$lib/services/messages';
-	import { messagesStore } from '$lib/data/stores';
-
-	let newMessage = '';
-
-	const handleSubmit = () => {
-		addMessage(newMessage);
-		newMessage = ''; // Reset the input field
-	};
-
-	// Subscribe to the messagesStore to reactively refresh messages
-	$: messages = $messagesStore;
-</script>
-
-<main class="p-4">
-	<input
-		type="text"
-		bind:value={newMessage}
-		placeholder="Type your message..."
-		class="p-2 border rounded"
-	/>
-	<button
-		class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-2"
-		on:click={handleSubmit}
-	>
-		Send Message
-	</button>
-</main>
-
-<style>
-	/* Add any additional styles as needed */
-</style>