How to disable automatic "scroll to bottom" in microsoft botframework webchat when the Welcome card renders?

Question

I am using webchat cdn of microsoft botframework to make a chatbot. When the welcome message is displayed, there are several buttons below my welcome card which goes beyond the visible area of the chat window. Thus, it automatically scrolls to bottom. I am triggering the webchat by clicking a widget button. I want to disable the scroll to button when the welcome message card appears such that user can see the welcome card area, not the buttons. How can I disable the auto scrolling?

Answer 1

Unfortunately, there isn't an option to disable the auto scrolling. There is a sample, 04.api/n.save-restore-scroll-position, that demonstrates how to save and restore a scroll position while traversing the Web Chat transcript window.

You may be able to alter that sample in such a way that a save spot is automatically created at some position as each new card is received.

Essentially, you would utilize Web Chat's store to monitor the activities checking for those that are from the bot and have an attachment. When that happens, fire an event that could trigger the process that saves the scroll position similar to a button being pressed.

There may, however, be an issue with timing in this scenario as the store is the first stop when an activity is received. It then goes on to be rendered. So, any code enacted in the store that affects the rendering usually requires a delay of 50 - 300 ms before that code is run. Keep in mind, there is no guarantee that it will stop in the same spot every time, if successful. Below is an example demonstrating the setup.

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
  if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
    const { activity } = action.payload;
      setTimeout(() => {
      if ( activity && activity.attachments) {
        if (activity.attachments[0].contentType === 'application/vnd.microsoft.card.adaptive' ) {
            // Do stuff
        }
      }
    }, 300);
  }
})

Some other options that might be better is to do someting similar as the above except in the activityMiddleware or in the attachmentMiddleware. These options allow you to act as the activities are being rendered but they can also be finickier.

All in all, your mileage may vary in trying any of the above and will likely take a bit of massaging before you fully know if it'll work or not.

If you believe this should be an included option, I would suggest making this a feature request in the BotFramework-WebChat repo.

Answer 2

In case you are still having the issue. Please have a look at this flag under StyleOptions .

autoScrollSnapOnPage