Botframework-webchat: Click of button in adaptive card does not scroll down to view the new message automatically

[dontiamar]

If we scroll up to a previously displayed adaptive card and click on an option/button the chat is not automatically scrolled down to view the new message.

[gagana-hg]

Hi All,
Even I'm facing the same issue and also when a user clicks on a button twice, card is displayed twice.
How can we restrict that.
Thank you

[corinagum]

@Support can we investigate if this is repro'd on the lastest dev build of v4?
The feature to scroll to the end on Enter is implemented, but we need to test if it works on Adaptive Card

[tdurnford]

I was able to repro this in the latest dev build of v4 - pending further investigation.

It looks like the chat window isn't scrolling to the bottom when the user sends a new message to the bot.

A temporary solution would be to scroll the last element of the chat into view when the user posts an activity; however, the dev team should consider building this functionality into WebChat.

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'});
        }
        return next(action);
    }
);

[compulim]

Wow, on a side note, I definitely need to learn scrollIntoView.

Will investigate this one.

SendBox/TextBox.js:38 is the place we scroll down automatically. Looks like we need to add this to Attachment/AdaptiveCardRenderer.js:47 too.

[ljubomirsinadinovski]

I was able to repro this in the latest dev build of v4 - pending further investigation.

It looks like the chat window isn't scrolling to the bottom when the user sends a new message to the bot.

A temporary solution would be to scroll the last element of the chat into view when the user posts an activity; however, the dev team should consider building this functionality into WebChat.

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'});
        }
        return next(action);
    }
);

I have a better solution... Move your code into activityMiddleware, you get much better user experience:

const activityMiddleware = () => (next: any) => (card: any) => {
  return (
    (children: any) => {
      scrollToBottom()
      return next(card)(children)
    }
  );
};

Then pass it into the component
<ReactWebChat activityMiddleware={activityMiddleware} ... />

[compulim]

@ljubomirsinadinovski This is a good workaround 👍. And we still need to fix it in our code.

[mekinney]

@ljubomirsinadinovski This is a good workaround 👍. And we still need to fix it in our code.

@compulim Any chance for a non-React workaround example?

[compulim]

You can copy ljubomirsinadinovski solution above. On the very last line, instead of using <ReactWebChat activityMiddleware={ activityMiddleware } />, you can pass the activityMiddleware to renderWebChat() call, like the one below:

window.WebChat.renderWebChat({ activityMiddleware });

[cwhitten]

Closing due to inactivity and available workarounds referenced above.

[scch1002]

Hi @cwhitten, this work around causes a bug in the latest version of the ReactWebChat component. The chat window is resized to less than the containing element.

[scch1002]

Also, this solution will stop working correctly if the webchat ever switches to recycling dom elements and only showing a snapshot of messages. I don't think the typical chat has enough messages where this would make sense. It is just something that comes to mind.