1 files changed, 31 insertions, 0 deletions
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
new file mode 100644
index 0000000..9a8475c
--- /dev/null
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -0,0 +1,31 @@
+<script>
+    import { Input, ButtonGroup, Button } from 'flowbite-svelte';
+    import { CaretRightSolid } from 'flowbite-svelte-icons';
+
+    import { tick } from 'svelte';
+    import { postToChannel } from '../apiServer';
+    import { activeChannel } from '../store';
+
+    let self;
+    let input;
+    $: disabled = $activeChannel == null;
+
+    async function handleSubmit(event) {
+        disabled = true;
+        // TODO try/catch:
+        await postToChannel($activeChannel?.id, input);
+        input = '';
+        disabled = false;
+        await tick();
+        self.focus();
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="w-full">
+    <ButtonGroup>
+        <Input disabled={disabled} bind:this={self} bind:value={input} />
+        <Button color="primary" type="submit">
+            <CaretRightSolid class="w-5 h-5" />
+        </Button>
+    </ButtonGroup>
+</form>