Microsoft BotFramework-WebChat Scrolling Issues

I'm using the microsoft/BotFramework-WebChat, but I'm having problems getting it to scroll properly. Often when the bot responds the user is forced to manually scroll to the bottom

Solution 1:

The developers designed WebChat to scroll the conversation to the bottom if the user hasn't scrolled up. If the user has scrolled up, there should be a 'New Message' button that appears in the bottom right corner of the chat when the bot sends a new message.

You can modify this behavior by using a custom middleware - which it looks like you already are - and scrolling the last element in the conversation into view when the user receives a message from the bot. See the code snippet below.

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {

        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
            document.querySelector('ul[role="list"]').lastChild.scrollIntoView({behavior: 'smooth', block: 'start'});
        }
        ...
        return next(action);
    }
);

Hope this helps!