@page "/ai-chat"
@using Azure.AI.OpenAI
@inherits WebSiteModuleComponentBase
@inject IOptions<WebsiteOptions> WebsiteOption
@attribute [JSModuleAutoLoader("Pages/Chats.razor.js")]

<h3>@Localizer["ChatsTitle"]</h3>

<h4>@Localizer["ChatsDescription"]</h4>

<HeadContent>
    <style>
        .bb-ad {
            display: none;
        }
    </style>
</HeadContent>

<DemoBlock Title="@Localizer["ChatNormalTitle"]" Introduction="@Localizer["ChatNormalIntro"]" Name="Normal" ShowCode="false">
    <div class="chat-title">@Localizer["ChatUserTitle"]</div>
    <div class="chat-body">
        @if (Messages.Count == 0)
        {
            <div class="chat-welcome">
                <div class="chat-welcome-icon">
                    <i class="fa-solid fa-robot"></i>
                </div>
                <div class="chat-welcome-body">
                    <div class="chat-welcome-title">Start chatting</div>
                    <div class="chat-welcome-content">Test your assistant by sending queries below. Then adjust your assistant setup to improve the assistant's responses.</div>
                </div>
            </div>
        }
        @foreach (var message in Messages)
        {
            <div class="@GetStackClass(message.Role)" @key="message">
                <div class="msg-role">
                    @if (message.Role == ChatRole.User)
                    {
                        <img src="@WebsiteOption.Value.GetAssetUrl("favicon.png")" alt="avatar">
                    }
                    else
                    {
                        <i class="fa-solid fa-robot"></i>
                    }
                </div>
                <div class="msg-body">
                    <div class="msg-time">@message.Time.ToString("HH:mm:ss")</div>
                    <MarkdownContent Content="@message.Content"></MarkdownContent>
                    @if (message.Role == ChatRole.Assistant)
                    {
                        <div class="msg-desc">AI-generated content may be incorrect</div>
                    }
                </div>
            </div>
        }
    </div>
    <div class="chat-footer">
        <label class="chat-info">@((MarkupString)Localizer["ChatInfo", _currentCount, TotalCount].Value)</label>
        <div class="d-flex">
            <Textarea Id="@Id" class="chat-footer-tx" rows="3" @bind-Value="@Context" PlaceHolder="Type user query here. (Shift + Enter for new line)"></Textarea>
            <div class="chat-buttons">
                <Button Icon="fa-regular fa-paper-plane" Color="Color.Primary" OnClick="GetCompletionsAsync" IsDisabled="_isDisabled" IsAsync="true" class="btn-send"></Button>
                <Button Icon="fa-solid fa-xmark" Color="Color.Danger" OnClick="CreateNewTopic" IsDisabled="_isDisabled" class="btn-clear"></Button>
            </div>
        </div>
    </div>
</DemoBlock>
