more wiring up of messages

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>