diff options
Diffstat (limited to 'hi-ui/src/lib')
| -rw-r--r-- | hi-ui/src/lib/Message.svelte | 3 | ||||
| -rw-r--r-- | hi-ui/src/lib/MessageInput.svelte | 31 |
2 files changed, 18 insertions, 16 deletions
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte index 88e47cf..0e7cdaf 100644 --- a/hi-ui/src/lib/Message.svelte +++ b/hi-ui/src/lib/Message.svelte @@ -1,4 +1,5 @@ <script> + import SvelteMarkdown from 'svelte-markdown'; import { currentUser } from '../store'; import { deleteMessage } from '../apiServer'; @@ -14,7 +15,7 @@ @{sender.name}: </div> <div class="body grow"> - {message.body} + <SvelteMarkdown source={message.body} /> </div> <div class="timestamp basis-6"> <!-- TODO: this is too long and looks awful. --> 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">»</button> + </div> </form> |