'auto Scroll' Not Working On Microsoft-bot-framework (python Sdk Based)

I have some issue about microsoft-botframework. I made a chatbot using microsoft-botframework Python SDK. So I deploy it as Webchat , I attached this on my website, Wordpress. Howe

Solution 1:

This is a known issue in WebChat. There is a work around where you can use a custom WebChat Activity Middleware that scrolls the last message into view when the chat window receives a new message. Take a look at the code snippet below.

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) =>next =>action => {
        if (action.type === 'DIRECT_LINE/POST_ACTIVITY_FULFILLED') {
            document.querySelector('ul[role="list"]').lastChild.scrollIntoView({behavior: 'smooth', block: 'start'});
        }
        returnnext(action);
    }
);

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token }),
    store
}, document.getElementById('webchat'));

Hope this helps!

Solution 2:

This worked for me, but I have a strange usage (directline embedded in a Sharepoint page, ie. not absolute/fixed position):

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) =>next =>action => {
        if (action.type === 'DIRECT_LINE/POST_ACTIVITY_FULFILLED') {
            var scrollDiv = $('ul[role="list"]').first().parent();
            scrollDiv.scrollTop(scrollDiv[0].scrollHeight);
        }
        returnnext(action);
    }
  );    


  window.WebChat.renderWebChat(
  {
    directLine: window.WebChat.createDirectLine({
      token: 'mySecret'
    }),
    store,
    ...

Hope it can help someone else.

If you don't want to use jQuery, replace the 2 scrollDiv lines with:

var scrollDiv = document.querySelector('ul[role="list"]').parentElement;
scrollDiv.scrollTop = scrollDiv.scrollHeight;