Remove Flowbite, add Skeleton, add Markdown rendering

1 files changed, 16 insertions, 15 deletions

diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index b899221..3d22f89 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -1,31 +1,32 @@
 <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.isSet();
+    let value;
+    let disabled;
+    activeChannel.subscribe((value) => {
+        disabled = !value.isSet();
+        if (input && !disabled) {
+            input.focus();
+        }
+    });
 
     async function handleSubmit(event) {
         disabled = true;
         // TODO try/catch:
-        await postToChannel($activeChannel.get(), input);
-        input = '';
+        await postToChannel($activeChannel.get(), value);
+        value = '';
         disabled = false;
         await tick();
-        self.focus();
+        input.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 on:submit|preventDefault={handleSubmit}>
+    <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+        <input bind:this={input} bind:value={value} disabled={disabled} type="search" />
+        <button color="primary variant-filled-secondary" type="submit">&raquo;</button>
+    </div>
 </form>