@inject IJSRuntime JS

<div class="message-list-container">
    <chat-messages class="page-width message-list" in-progress="@(InProgressMessage is not null)">
        @foreach (var message in Messages)
        {
            <ChatMessageItem @key="@message" Message="@message" />
        }

        @if (InProgressMessage is not null)
        {
            <ChatMessageItem Message="@InProgressMessage" InProgress="true" />
            <LoadingSpinner />
        }
        else if (IsEmpty)
        {
            <div class="no-messages">@NoMessagesContent</div>
        }
    </chat-messages>
</div>

@code {
    [Parameter]
    public required IEnumerable<ChatMessage> Messages { get; set; }

    [Parameter]
    public ChatMessage? InProgressMessage { get; set; }

    [Parameter]
    public RenderFragment? NoMessagesContent { get; set; }

    private bool IsEmpty => !Messages.Any(m => (m.Role == ChatRole.User || m.Role == ChatRole.Assistant) && !string.IsNullOrEmpty(m.Text));

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Activates the auto-scrolling behavior
            await JS.InvokeVoidAsync("import", "./Components/Pages/Chat/ChatMessageList.razor.js");
        }
    }
}
