@inject IJSRuntime JS

<EditForm Model="@this" OnValidSubmit="@SendMessageAsync">
    <label class="input-box page-width">
        <textarea @ref="@textArea" @bind="@messageText" placeholder="Type your message..." rows="1"></textarea>

        <div class="tools">
            <button type="submit" title="Send" class="send-button">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tool-icon">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                </svg>
            </button>
        </div>
    </label>
</EditForm>

@code {
    private ElementReference textArea;
    private string? messageText;

    [Parameter]
    public EventCallback<ChatMessage> OnSend { get; set; }

    public ValueTask FocusAsync()
        => textArea.FocusAsync();

    private async Task SendMessageAsync()
    {
        if (messageText is { Length: > 0 } text)
        {
            messageText = null;
            await OnSend.InvokeAsync(new ChatMessage(ChatRole.User, text));
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/Chat/ChatInput.razor.js");
                await module.InvokeVoidAsync("init", textArea);
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}
