Botframework-webchat: Suggested action cover last message on Chrome with non-100% zoom

[dan-cohn]

When the most recently-received message includes suggested action buttons, those buttons end up covering the message. It seems that the window doesn't scroll up far enough to make the latest message visible. This only happens on Google Chrome on Windows or MacOS when zoom is set to something like 110%. It seems to be OK with a zoom of 100%.

[achidlow]

I'm getting this same issue regardless of zoom level.

[dan-cohn]

I’m now seeing this issue on Firefox and sometimes on Safari as well. It depends on the size of the window.

[dan-cohn]

I'm also seeing this issue on the Emulator now (for MacOS). I downloaded the latest released version – 3.5.36.

[magencio]

I'm also experiencing the same issue on the Emulator v3.5.36, but on Windows. Something broke in the latest update.

[M-Rowley]

I think it may be related to https://github.com/Microsoft/BotFramework-WebChat/commit/e5069bd313c9a61831c994ee5217297e0007375f, the fix for suggested actions pushing the top message out of bounds. In History.tsx the tolerance for scroll detection is set to 40 when a suggested action appears, but I'm seeing values of up to ~51 on that last Math.abs() when there are already messages off-screen (although I couldn't say why that's the case). Bumping the suggested action detection tolerance up to 51 seems to sort it, but I haven't done any sort of extensive testing on this. Use workaround at own risk.

```
componentWillUpdate(nextProps: HistoryProps) {
let scrollToBottomDetectionTolerance = 1;

if (!this.props.hasActivityWithSuggestedActions && nextProps.hasActivityWithSuggestedActions) {
    //Should be 51?
    scrollToBottomDetectionTolerance = 40; // this should be in-sync with $actionsHeight scss var
}

this.scrollToBottom = (Math.abs(this.scrollMe.scrollHeight - this.scrollMe.scrollTop - this.scrollMe.offsetHeight) <= scrollToBottomDetectionTolerance);
}

```

[dan-cohn]

I made a similar change on my own, bumping the tolerance to 60. It's been working well for me, but there could be undesirable side effects – not sure.

Emulator is still an issue. I think the issue has been reported.

[M-Rowley]

Far as I can tell the only impact of bumping up that tolerance is catching people who've scrolled up a tiny amount (~10 px) as being at the bottom of the page too. As long as you don't set it to anything ridiculous, it hopefully shouldn't even be noticeable.

[Kartik1607]

I have modified my code's autoscroll method to always scroll down to latest message by just commenting out the if check. It has worked flawlessly up until now.

//if (this.scrollToBottom || lastActivityFromMe) {
            this.scrollMe.scrollTop = this.scrollMe.scrollHeight - this.scrollMe.offsetHeight;
//}

[corinagum]

This issue is resolved in v4; please feel free to migrate your Web Chat version to resolve this issue!