I can't make the autoscroll work

[Vitor Rocha]

Hi. I need some help with ChatUI, the autoscroll function does not work for me. I tried a lot a things, used some AI and they can't make it work as well. 

Here is how I'm trying.

@using Syncfusion.Blazor.InteractiveChat

@using System.Threading.Tasks

<h3>Vello Chat</h3>

<div class="vello-chat-page">

<div class="chat-div">

        @if (_isChatOpen)

        {

            <SfChatUI @ref="@ChatUser" ID="chatUser" Height="100%" HeaderIconCss="e-icons e-people" AutoScrollToBottom="true" Placeholder="Digite sua mensagem..." User="CurrentUserModel" HeaderText="@VelloUserModel.User" TimestampFormat="dd/MM/yyyy hh:mm tt" Messages="ChatUserMessages">

            <HeaderToolbar ItemClicked="Fechar">

                <HeaderToolbarItem Type="ItemType.Button"></HeaderToolbarItem>

                <HeaderToolbarItem IconCss="e-icons e-close"></HeaderToolbarItem>

            </HeaderToolbar>

        </SfChatUI>

        } else {

            <button class="e-btn e-primary" @onclick="() => _isChatOpen = true">Abrir Chat</button>

        }

</div>

</div>

@code {

    private SfChatUI ChatUser;

    public bool _isChatOpen = true;

    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "Vitor" };

    private static UserModel VelloUserModel = new UserModel() { ID = "User2", User = "Vello" };

    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()

    {

        new ChatMessage() { Text = "Olá, estou com problema para acessar as EVs.", Author = CurrentUserModel },

        new ChatMessage() { Text = "Bom dia, Sr. Vitor. Você já tentou reiniciar o computador?", Author = VelloUserModel },

        new ChatMessage() { Text = "Funcionou! Obrigado.", Author = CurrentUserModel }

    };

    private void Fechar()

    {

        _isChatOpen = false;

    }

}

<style>

    .vello-chat-page {

        display: flex;

        width: 100%;

        height: 100%;

        justify-content: center;

        align-items: flex-end;

    }

    .chat-div{

        height: 40%;

        width: 20%;

        position: absolute;

        bottom: 0px;

        right: 2em;

        overflow: hidden;

    }

        .chat-div .e-chat-ui .e-header-icon {

            align-content: center;

            display: grid;

            font-size: 25px;

        }

        div#chatUser {

            border-top-left-radius: 12px;

            border-top-right-radius: 12px;

            border-color: var(--vello-input-border);

            background-color: transparent;

        }

        .chat-div .e-chat-ui .e-chat-header {

            background-color: var(--vello-chat-header-background-color);

            border-color: var(--vello-chat-header-border-color);

            border-top-left-radius: 12px;

            border-top-right-radius: 12px;

        }

        .chat-div .e-chat-ui .e-chat-header .e-toolbar {

            background: transparent !important;

            display: flex;

            justify-content: end;

        }

        .chat-div .e-chat-ui .e-chat-header .e-tbar-btn {

            background: transparent;

        }

        .chat-div .e-chat-ui .e-chat-header .e-toolbar-items {

            background: transparent !important;

        }

    .chat-div .e-toolbar .e-toolbar-item .e-tbar-btn:hover {

        background: none;

        border: none;

    }

    .chat-div .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {

        color: var(--vello-text-white);

    }

    .chat-div .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {

        color: var(--vello-text-white);

        font-weight: bold;

    }

    .chat-div .e-chat-content {

        background-color: var(--vello-chat-background-color);

    }

    .chat-div .e-chat-ui .e-right .e-message-content {

        background: var(--vello-chat-message-background-color);

        color: var(--vello-chat-message-text-color);

    }

    .chat-div .e-chat-ui .e-left .e-message-content {

        color: var(--vello-chat-message-text-color);

        background: var(--vello-chat-message-left-background-color);

    }

    .chat-div .e-chat-ui .e-message-wrapper .e-time {

        color: var(--vello-chat-time-text-color);

    }

    .chat-div .e-chat-ui .e-message-wrapper .e-message-header {

        color: var(--vello-color-primary);

    }

    .chat-div .e-chat-ui .e-chat-message-toolbar:has(.e-toolbar-item) {

        border: 1px solid var(--vello-input-border);

        background: transparent;

    }

    .chat-div .e-message-group .e-toolbar .e-toolbar-items {

        background: var(--vello-chat-hover-menu-background-color);

    }

    .chat-div .e-message-group .e-toolbar .e-toolbar-item .e-tbar-btn {

        background: var(--vello-chat-hover-menu-button-background-color);

    }

        .chat-div .e-message-group .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {

            color: var(--vello-text-secondary);

        }

    .chat-div .e-chat-ui .e-footer:not(.e-footer-template) {

        border: 1px solid var(--vello-input-border);

        border-bottom-color: var(--vello-input-border);

    }

    .chat-div .e-chat-ui .e-footer:not(.e-footer-template).e-footer-focused {

        border: 1px solid var(--vello-color-primary);

        box-shadow: 0 0 0 1px var(--vello-color-primary);

    }

    .chat-div .e-chat-ui .e-chat-content {

        color: var(--vello-chat-message-text-color);

    }

</style>