Katheryne/Frontend/Shared/MessageBubble.razor

@using Frontend.Models

<div>
    @if (Message.Left)
    {
        <Space Align="start">
            <SpaceItem>
                <Avatar Style="background-color: #5d92e4" Size="2.5rem">
                    @Message.Sender.First()
                </Avatar>
            </SpaceItem>

            <SpaceItem>
                <p style="font-size: 0.8rem; color: rgb(128,128,128)">
                    @Message.Sender
                </p>
                <div class="bubble-left">
                    <p class="message-text">
                        @Message.Text
                    </p>
                </div>
            </SpaceItem>
        </Space>
    }
    else
    {
        <Space Align="start">
            <SpaceItem>
                <div>
                    <p style="font-size: 0.8rem; color: rgb(128, 128, 128); text-align: right;">
                        @Message.Sender
                    </p>
                    <div class="bubble-right">
                        <p class="message-text">
                            @Message.Text
                        </p>
                    </div>
                </div>
            </SpaceItem>

            <SpaceItem>
                <Avatar Style="background-color: #5d92e4" Size="2.5rem">
                    @Message.Sender.First()
                </Avatar>
            </SpaceItem>
        </Space>
    }
</div>

@code {

    [Parameter]
    public ChatMessage Message { get; set; } = new()
    {
        Left = true,
        Sender = "default",
        Text = "default"
    };

}