Botframework-webchat: Autoscroll not working with hideScrollToEndButton:true style option

[baki32]

Version

latest (4.6.0)

Describe the bug

To Reproduce

Steps to reproduce the behavior:

1. Set up webchat with hideScrollToEndButton:true styling option
2. Generate more responses
3. Scroll up and click on action (adaptive card submit) that sends JSON value to bot (no user bubble rendered)
4. When response from the bot lands auto scroll doesn't happen

Expected behavior

Chat to scroll down to last message

Additional context

Jump to discussion

[corinagum]

Hi @baki32, I believe the scrollToEnd button is intended to act instead of an autoscroll feature. As far as I know Web Chat does not have another autoscroll behavior.

Is there a version of Web Chat that you are comparing current behavior with? If so, what is that version?

If not, this may be a feature request but I don't believe it is a bug.

[baki32]

Hi @corinagum autosroll does happen when user writes a message so logically I would expect similar behavior on any kind of message landig to chat. If this shall be feature request happy to reclassify.

[baki32]

Also when there's option to disable that button what should be alternative way to scroll to bottom?

[corinagum]

I see what you mean about a new activity from the user scrolls to the bottom of the chat. I was testing via pressing a button in an Adaptive Card, which does NOT scroll to bottom. If anything there's some discrepancy of behavior here that we need to figure out.

I could be wrong, but my understanding was that the ability to remove the scrollToEnd button was implemented due to popular request. However the autoscroll behavior / expectations haven't been updated recently, if at all.

Design questions:

Why does autoscroll occur when user types and sends a message, but not when a button is clicked?
Should the behavior for bot vs user and/or messages sent via sendbox vs button click be the same?
Are any/all of these features ones that we want to expose to the Web Chat user via defaultStyleOptions?

I could see this as being a few different grouped properties. Just throwing some ideas out there:

hideScrollToEndButton (already implemented)

---

autoScrollOnActivityFromUser
autoScrollOnActivityFromBot

---

autoScrollOnAllActivities
autoScrollOnSendViaSendboxOnly

However, unless using proactive messaging, the bot is not going to send a message without first receiving input from the user, so the categorization of user vs bot props doesn't seem quite right.

Long story short: I'm going to pull in different opinions from our team to see what's going on here. Thank you for bringing this issue up, I definitely had not noticed the discrepancy before. Since we're not sure yet if this is a feature request or a bug, I'm going to leave it as bug.

@compulim @tdurnford @DesignPolice @emivers8 @cwhitten
Does anyone care to chime in?

[corinagum]

@baki32, I got a chance to discuss this issue with the Web Chat team - let me summarize below.

• Due to the user experience, auto-scrolling to the bottom of the transcript whenever the bot sends a message to the user is not a feature that the app will expose by default. This is due to the fact that a user might be reviewing previous messages, and every time a new message comes in from the bot, the view would be dropped back to the bottom. This could potentially be very aggravating to the user.
• The discrepancy between sending a message via enter and by clicking a button will not be addressed in this issue, since it is separate from your desired functionality.
• If you still want to implement the auto-scroll feature whenever the bot sends a message, you can do so by implementing Web Chat middleware.

Steps:

1. Take a look at sample https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/11.customization-redux-actions
2. Implement a redux middleware that will call scrollToEnd() on every received activity from the bot.

If you need help with the implementation, I suggest heading over to Stack Overflow's Web Chat tag where our support engineers can give you guidance. Thank you!

[baki32]

Hi, I wasn't able to find a way how to call scrollToEnd() as I'm doing this from vanilla JS. Here's how I did it:

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

  //this is important so it works when suggested actions are rendered                                    
  var nextAction = next(action);
    if (action.type === "WEB_CHAT/SET_SUGGESTED_ACTIONS") {
      var scDiv = jQuery('div[role="log"]>div')[0];
      scDiv.scrollTo(0, scDiv.scrollHeight);
    }
 return nextAction;
});

[corinagum]

@baki32, unfortunately you will need to make these changes in React - this falls under customization that is not supported in vanilla JavaScript.