<script lang="ts">
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher<{ submit: string }>();

    export let message = "";

    function handleSubmit(): void {
        console.log("Bla bla bla")
        if (message.trim()) {
            dispatch("submit", message);
            message = "";
        }
    }
</script>

<div id="chat-input">
    <input
            id="message-box"
            type="text"
            placeholder="Type a message..."
            bind:value="{message}"
            on:keydown="{(e) => e.key === 'Enter' && handleSubmit()}"
    />
    <button id="send-message-button" on:click="{handleSubmit}">⌲</button>
</div>
