added basic messaging mockup

src/lib/components/Messages.svelte

@@ -0,0 +1,71 @@
+<!-- components/Chat.svelte -->
+<script>
+	import { dummyMessages } from '$lib/data/dummyMessages.js';
+
+	let messages = [];
+
+	const addRandomMessage = () => {
+		const randomMessage = generateRandomMessage();
+		messages = [randomMessage, ...messages];
+		saveMessagesToLocalStorage(messages);
+	};
+
+	const generateRandomMessage = () => {
+		const randomIndex = Math.floor(Math.random() * dummyMessages.length);
+		const randomMessage = dummyMessages[randomIndex];
+		const timestamp = new Date().toLocaleString(); // Get the current date and time
+		return { ...randomMessage, timestamp };
+	};
+
+	const loadMessages = () => {
+		if (typeof window !== 'undefined') {
+			const storedMessages = localStorage.getItem('chat_messages');
+			messages = storedMessages ? JSON.parse(storedMessages) : [];
+		}
+	};
+
+	const saveMessagesToLocalStorage = (messages) => {
+		if (typeof window !== 'undefined') {
+			localStorage.setItem('chat_messages', JSON.stringify(messages));
+		}
+	};
+
+	const clearMessages = () => {
+		messages = [];
+		saveMessagesToLocalStorage(messages);
+	};
+
+	// Load messages when the component mounts
+	loadMessages();
+</script>
+
+<main class="p-4 flex flex-col-reverse overflow-y-auto pb-16">
+	{#each messages as message}
+		<div class="bg-white p-3 rounded-lg shadow-lg mb-4">
+			<p class="text-gray-800">{message.text}</p>
+			<small class="text-gray-600 text-sm">{message.timestamp}</small>
+		</div>
+	{/each}
+</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>
+
+<style>
+	main {
+		/* Set the minimum height of the main container to prevent the footer from overlapping the messages */
+		min-height: calc(100vh - 70px); /* Account for the fixed footer height */
+	}
+</style>