1 files changed, 13 insertions, 12 deletions
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 1eb1d7b..69a8298 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,29 +1,30 @@
 <script>
-  import { postToChannel } from '$lib/apiServer';
+  let { sendMessage = async (message) => {} } = $props();
 
-  let { channel } = $props();
-
-  let form;
   let value = $state('');
   let disabled = $state(false);
 
-  async function onSubmit(event) {
+  async function onsubmit(event) {
     event.preventDefault();
     disabled = true;
-    await postToChannel(channel, value);
-    form.reset();
-    disabled = false;
+    try {
+      await sendMessage(value);
+      event.target.reset();
+    } finally {
+      disabled = false;
+    }
   }
 
-  function onKeyDown(event) {
+  function onkeydown(event) {
     let modifier = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey;
     if (!modifier && event.key === 'Enter') {
-      onSubmit(event);
+      event.preventDefault();
+      event.target.form.requestSubmit();
     }
   }
 </script>
 
-<form bind:this={form} onsubmit={onSubmit}>
-  <textarea onkeydown={onKeyDown} bind:value {disabled} placeholder="Say something..."></textarea>
+<form {onsubmit}>
+  <textarea {onkeydown} bind:value {disabled} placeholder="Say something..."></textarea>
   <button type="submit">&raquo;</button>
 </form>