Botframework-webchat: Scrolling error with suggested action cards

Created on 29 Jan 2019 · 14Comments · Source: microsoft/BotFramework-WebChat

Selecting a suggested action prompt when the chat window is scrolled to the bottom, causes the window to stop scrolling correctly. Maybe I have the webchat CSS incorrectly setup, but it's pretty simple. Any help appreciated.

Update: Tested with both master and latest. Both have this problem.

Update #2: Once the webchat control is in the bugged state (not updating scrolling correctly), if the user types a message into the chat control, instead of hitting a suggested action button, the window scrolls correctly, and continues to scroll correctly using action buttons.

Web page:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Custom style set</title>
    <style>
      html, body { height: 100% }
      body { margin: 0 }
      #webchat,
      #webchat > * {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <!-- <iframe src='https://webchat.botframework.com/embed/TestBotster?s=your secret'  style='min-width: 400px; width: 100%; min-height: 500px;'></iframe> -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'your secret' }),
        userID: 'YOUR_USER_ID'
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

The BOT side code is created by creating an EchoBot solution using Visual Studio 2017 and modifying OnTurnAsync as follows:

public async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
{
    // Handle Message activity type, which is the main activity type for shown within a conversational interface
    // Message activities may contain text, speech, interactive cards, and binary or unknown attachments.
    // see https://aka.ms/about-bot-activity-message to learn more about the message and other activity types
    if (turnContext.Activity.Type == ActivityTypes.Message)
    {
        // Get the conversation state from the turn context.
        var state = await _accessors.CounterState.GetAsync(turnContext, () => new CounterState());

        // Bump the turn count for this conversation.
        state.TurnCount++;

        // Set the property using the accessor.
        await _accessors.CounterState.SetAsync(turnContext, state);

        // Save the new turn count into the conversation state.
        await _accessors.ConversationState.SaveChangesAsync(turnContext);

        switch (turnContext.Activity.Text) {
            case "menu":
                await turnContext.SendActivityAsync(BuildMenuCard(turnContext));
                break;
            case "help":
                await turnContext.SendActivityAsync("Help?  Hahahahahaha......");
                break;
            default:
                var responseMessage = $"Turn {state.TurnCount}: Here is your information about '{turnContext.Activity.Text}'\n";
                await turnContext.SendActivityAsync(responseMessage);
                await turnContext.SendActivityAsync(BuildMenuCard(turnContext));
                break;
        }
    }
    else
    {
        await turnContext.SendActivityAsync($"{turnContext.Activity.Type} event detected");
    }
}
public static IMessageActivity BuildMenuCard(ITurnContext turnContext)
{
    var response = MessageFactory.SuggestedActions(
        actions: new List<string>() { "Contact", "Stuff", "Money", "Help"},
        inputHint: InputHints.IgnoringInput,
        text: "Text Contact, stuff, money, help",
        ssml: "SSML Contact, etc."
    );
    return response;
}

In the chat box type menu to bring up the selected actions, and then continuously select contact (or any of the suggested actions) over and over until the window needs to scroll. You'll see the error there.

It's interesting that the embedded web chat (https://webchat.botframework.com/embed...) doesn't have the scrolling error and instead doesn't handle a blank text field in a suggested action properly.

Bug P1 front-burner

Source

mekinney

Most helpful comment

This change does fix my test harness. I'll push it to our main app and hopefully it will work there also.

Thank you!

mekinney on 14 Feb 2019

👍2

All 14 comments

Hi @mekinney, I haven't had a chance to investigate this issue yet. Could you elaborate on how the scrolling stops working? A video or gif would be very helpful too!

corinagum on 30 Jan 2019

Hi @mekinney -

I wasn't able to reproduce your error. I did, however, notice when the SuggestedActions are displayed on the screen, the conversation div moves up to make room for the SuggestActions div. This would mean you have to move your mouse up onto the conversation div to scroll, but this doesn't sound like the error you described above. Can you please elaborate on the issue, and, as @corinagum mentioned, a video or a gif of the scroll behavior would be helpful.

Thanks,

tdurnford on 31 Jan 2019

👍2

Attached Zip file has a video in it. I basically type menu to bring up the suggested actions. And then hit contact over and over.

video.zip

mekinney on 31 Jan 2019

Hi @tdurnford,
Just shot you an e-mail at your @microsoft account with the index.html that includes the secret for my hosted test bot. Should make the repo easier. :)

Best,
Mike

mekinney on 31 Jan 2019

👍2

Hi @mekinney -

Thank you for sharing your code. Much easier than trying to reproduce it.

It looks like the chat window doesn't automatically scroll to the bottom while WebChat is displaying suggest actions. This issue might be related to https://github.com/Microsoft/BotFramework-WebChat/issues/1031.

tdurnford on 1 Feb 2019

Thanks for the response.

FYI, the webchat code included with "https://webchat.botframework.com/embed..." doesn't have this bug. I'm not sure how the codebases are related, but thought might help track it down.

mekinney on 1 Feb 2019

hey @mekinney, it's very much looking like this is the same error as over on #1697. We're still working on getting a consistent repro, but we have @compulim prioritizing this fix now. Thanks for your patience. :)

corinagum on 12 Feb 2019

Hi @mekinney. We have updated our scroll-to-bottom component in PR #1621 and PR #1725. Looks like the issue is fixed. Can you try our latest dev build and see if it repro?

In your HTML file, modify the following line will use dev build.

- <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+ <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>

We use react-scroll-to-bottom component to provide stick-to-bottom functionality. We bumped to 1.3.0 then eventually 1.3.1, which provide a more reliable way to stick to bottom, when compare to 1.2.0, which /latest/ production build is used.

compulim on 14 Feb 2019

Hi @compulim
is it fixed in master/webchat-es5.js as well ?
can i use it now

Thanks

keshavnagpal on 14 Feb 2019

This change does fix my test harness. I'll push it to our main app and hopefully it will work there also.

Thank you!

mekinney on 14 Feb 2019

👍2

@mekinney please let us know how it goes!

corinagum on 14 Feb 2019

@keshavnagpal yes, it should be on our development build at https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js now.

@mekinney thanks for your report. Please do let us know any further issues. We love to squash any bugs found. 💪

compulim on 15 Feb 2019

Sounds like this issue may be resolved so I'm going to close it -- @mekinney please feel free to get back to us with feedback or other questions you might have. I can always reopen this issue. :)

corinagum on 20 Feb 2019

This fix worked in our main code base also. Thank you.

mekinney on 21 Feb 2019

Was this page helpful?

0 / 5 - 0 ratings