Katheryne/Frontend/Shared/ChatZone.razor

@using Frontend.Models
@using Katheryne.Abstractions

<div class="content-zone">
    <div class="chat-zone">
        <AntList TItem="ChatMessage" DataSource="@Messages" Split="@false">
            <ListItem>
                @if (context.Left)
                {
                    <div>
                        <MessageBubble Message="context"/>
                    </div>
                }
                else
                {
                    <div style="margin-left: auto">
                        <MessageBubble Message="context"/>
                    </div>
                }
            </ListItem>
        </AntList>
        <div style="height: 200px; width: 100%; flex: none">

        </div>
    </div>

    <div class="control-zone">
        <div style="padding: 10px 82px 20px">
            <div class="input-zone">
                <GridRow>
                    <GridCol Span="22">
                        <Input TValue="@string" @bind-Value="@MessageSending"
                               Placeholder="输入以对话" Bordered="@false" OnPressEnter="@SendMessageClicked"/>
                    </GridCol>
                    <GridCol Span="2">
                        <Button Type="@ButtonType.Primary" @onclick="@SendMessageClicked">
                            发送
                        </Button>
                    </GridCol>
                </GridRow>
            </div>
        </div>
    </div>
</div>

@code
{
    private string MessageSending { get; set; } = string.Empty;

    [Parameter]
    public List<ChatMessage> Messages { get; set; } = null!;

    [Parameter]
    public IChatRobot Robot { get; set; } = null!;

    private void SendMessageClicked()
    {
        if (string.IsNullOrWhiteSpace(MessageSending))
        {
            return;
        }

        Messages.Add(new ChatMessage
        {
            Left = false,
            Sender = "旅行者",
            Text = MessageSending
        });

        foreach (string answer in Robot.ChatNext(MessageSending))
        {
            Messages.Add(new ChatMessage
            {
                Left = true,
                Sender = Robot.RobotName,
                Text = answer
            });
        }
        
        MessageSending = string.Empty;
    }
}