frontend/src/lib/ChatInput.svelte

<script lang="ts">
	import { createEventDispatcher, onMount } from 'svelte';

	const dispatch = createEventDispatcher();

	let textInput: string = '';
	let inputEl: HTMLInputElement;

	function onSubmit(event: Event) {
		event.stopPropagation();
		event.preventDefault();
		event.stopImmediatePropagation();

		if (textInput.trim() !== '') {
			dispatch('submitMessage', textInput);
			textInput = '';
		}
	}
	onMount(() => {
		inputEl.focus();
	});
</script>

<form class="mt-auto flex w-full gap-2 border-t px-3 pt-4 pb-6" on:submit={onSubmit}>
	<input
		bind:value={textInput}
		bind:this={inputEl}
		on:click|stopPropagation
		type="text"
		class="flex h-11 flex-1 items-center rounded-full border bg-gray-100 px-4 text-black"
		placeholder="Type here"
		title="Type here to send a message"
	/>
	<button
		title="Send your message"
		type="submit"
		class="rounded-full bg-black dark:bg-white dark:text-black px-4 font-semibold text-gray-200">Submit</button
	>
</form>