как добавить флаги на веб? для чата? я бы хотел прям динамически, чтобы там было типо разделение типо

Эмодзи
....
Люди
...
Флаги
...

и т.д

```cs
@using System.Reflection.Metadata
@using KLMP.Models
@using KLMP.Services
@using Microsoft.AspNetCore.SignalR.Client
@rendermode InteractiveServer
@inject IJSRuntime JsRuntime
@inject NavigationManager Navigation
@inject UserService UserService

<div>
    <div class="fixed inset-0 bg-[#1F2227] bg-opacity-50 backdrop-blur-sm flex justify-end pointer-events-auto z-[1001] text-white
                transition-opacity duration-300 @(IsFullyVisible ? "opacity-100" : "opacity-0 invisible")"
         @onclick="CloseChat">
        <div class="bg-[#212830] w-[50%] h-full flex flex-col gap-[20px] p-5 relative transition-transform duration-300 transform
                @(IsVisible ? "translate-x-0" : "translate-x-full")"
             @onclick:stopPropagation>
            <div class="flex justify-between items-center">
                <h2 class="text-white text-xl font-bold">Чат</h2>
                <img src="img/close.svg" @onclick="CloseChat" class="cursor-pointer"/>
            </div>

            <div class="categories p-4 flex gap-4 bg-[#2C3845] text-white rounded-lg">
                <button class="bg-[#394959] px-4 py-2 rounded hover:bg-[#364454] transition duration-200" @onclick='() => SelectServer("MANIAC")'>MANIAC</button>
                <button class="bg-[#394959] px-4 py-2 rounded hover:bg-[#364454] transition duration-200" @onclick='() => SelectServer("PUBLIC")'>PUBLIC</button>
                <button class="bg-[#394959] px-4 py-2 rounded hover:bg-[#364454] transition duration-200" @onclick='() => SelectServer("MINIGAME")'>MINIGAME</button>
            </div>

            <div id="chatMessages" class="flex-1 overflow-y-auto text-white">
                <div class="flex flex-col gap-2 mr-[10px]">
                    @foreach (var message in _messages)
                    {
                        <div class="@(message.IsUser ? "self-end" : "self-start")">
                            <div class="p-3 rounded-lg @(message.IsUser ? "bg-[#394959]" : "bg-[#2F3C47]") max-w-[500px] break-all">
                                <div class="flex flex-col gap-y-[10px]">
                                    <a href="/profile/@message.Sender.SteamId.SteamId64/" class="inline-flex items-center gap-[5px]">
                                        <img src="@message.Sender.Avatar" class="text-xs  rounded-full text-gray-400 w-[30px] h-[30px]"/>
                                        <div class="text-xs text-gray-400">@message.Sender.Name</div>
                                    </a>
                                    @message.Content
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>


            <div class="flex items-center gap-2">
                <button class="bg-[#2C3845] hover:bg-[#394959] p-2 rounded transition duration-200" @onclick="ToggleEmojiPicker">
                    😊
                </button>

                @if (IsEmojiPickerVisible)
                {
                    <div class="absolute bottom-20 bg-[#2C3845] p-2 rounded-lg">
                        <button class="text-xl" @onclick='() => AddEmoji("😊")'>😊</button>
                        <button class="text-xl" @onclick='() => AddEmoji("👍")'>👍</button>
                        <button class="text-xl" @onclick='() => AddEmoji("❤️")'>❤️</button>
                    </div>
                }

                <input @bind="_newMessage" @bind:event="oninput" @onkeypress="HandleKeyPress" type="text" class="flex-1 bg-[#2C3845] text-white px-4 py-2 rounded-lg outline-none" placeholder="Напишите ваше сообщение"/>

                <button @onclick="SendMessage" class="bg-[#2C3845] hover:bg-[#394959] p-2 rounded transition duration-200">
                    <img src="img/send.svg" alt="Отправить" class="w-5 h-5"/>
                </button>
            </div>
        </div>
    </div>
</div>

<button @onclick="ToggleChatVisibility" class="chat-toggle fixed w-[40px] h-[60px] right-0 top-1/2 transform -translate-y-1/2 bg-[#2C3845] hover:bg-[#394959] text-white text-[20px] p-4 rounded-l-[10px] shadow-lg z-1 transition duration-200 ease-in-out flex items-center justify-center">
    <i class="bi bi-chat-left-dots"></i>
</button>

@code {
    private bool IsVisible { get; set; } = false;
    private bool IsFullyVisible { get; set; } = false;
    private bool IsEmojiPickerVisible { get; set; } = false;

    private HubConnection? _hubConnection;
    private List<Message> _messages = [];
    private string _newMessage = string.Empty;
    private bool _shouldScrollToBottom = false;
    private SteamUserProfile? _user;

    protected override async Task OnInitializedAsync()
    {
        _user = await UserService.GetCurrentUserAsync();
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        _hubConnection.On<string, string>("ReceiveMessage", (message, sender) =>
        {
            //_messages.Add(new Message { Content = message, SenderAvatar = _user.Avatar, SenderName = _user.Name, IsUser = false });
            // _shouldScrollToBottom = true;
            InvokeAsync(StateHasChanged);
        });

        await _hubConnection.StartAsync();
    }

    private async Task SendMessage()
    {
        if (!string.IsNullOrWhiteSpace(_newMessage) && _hubConnection != null && _user != null)
        {
            var sender = _user.Name;
            await _hubConnection.SendAsync("SendMessage", _newMessage, sender);

            _messages.Add(new Message { Content = _newMessage,Sender = _user, IsUser = true });
            _newMessage = string.Empty;

            _shouldScrollToBottom = true;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (_shouldScrollToBottom)
        {
            _shouldScrollToBottom = false;
            await JsRuntime.InvokeVoidAsync("scrollToBottom", "chatMessages");
        }
    }

    private async Task ToggleChatVisibility()
    {
        if (IsVisible)
        {
            IsVisible = false;
            await Task.Delay(300);
            IsFullyVisible = false;
        }
        else
        {
            IsFullyVisible = true;
            await Task.Delay(10);
            IsVisible = true;
        }

        IsEmojiPickerVisible = false;
    }

    private async Task CloseChat()
    {
        IsVisible = false;
        await Task.Delay(300);
        IsFullyVisible = false;
    }

    private void SelectServer(string server)
    {
    }

    private void HandleKeyPress(KeyboardEventArgs e)
    {
        switch (e.Key)
        {
            case "Enter":
                SendMessage();
                break;
        }
    }

    private void ToggleEmojiPicker()
    {
        IsEmojiPickerVisible = !IsEmojiPickerVisible;
    }

    private void AddEmoji(string emoji)
    {
        _newMessage += emoji;
    }

    public class Message
    {
        public string Content { get; set; }
        public bool IsUser { get; set; }
        public SteamUserProfile? Sender { get; set; }
    }

}```