Scrolling error with suggested action cards #1660

mekinney · 2019-01-29T22:47:25Z

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.

The text was updated successfully, but these errors were encountered:

corinagum · 2019-01-30T18:29:23Z

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!

tdurnford · 2019-01-31T20:09:14Z

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,

TJ

mekinney · 2019-01-31T20:49:45Z

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 · 2019-01-31T21:02:17Z

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

tdurnford · 2019-02-01T00:58:54Z

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 #1031.

mekinney · 2019-02-01T16:40:46Z

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.

corinagum · 2019-02-12T22:51:02Z

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. :)

compulim · 2019-02-14T00:51:12Z

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.

keshavnagpal · 2019-02-14T05:04:50Z

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

Thanks

mekinney · 2019-02-14T21:25:42Z

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

Thank you!

corinagum · 2019-02-14T21:58:20Z

@mekinney please let us know how it goes!

compulim · 2019-02-15T02:35:35Z

@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. 💪

corinagum · 2019-02-20T18:34:55Z

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. :)

mekinney · 2019-02-20T23:24:44Z

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

corinagum added bug Indicates an unexpected problem or an unintended behavior. Pending labels Jan 30, 2019

tdurnford self-assigned this Jan 31, 2019

corinagum added Approved front-burner p0 Must Fix. Release-blocker and removed Pending labels Feb 12, 2019

corinagum assigned compulim and unassigned tdurnford Feb 13, 2019

compulim added Pending p1 Painful if we don't fix, won't block releasing and removed 4.3 p0 Must Fix. Release-blocker labels Feb 14, 2019

compulim removed their assignment Feb 15, 2019

corinagum closed this as completed Feb 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scrolling error with suggested action cards #1660

Scrolling error with suggested action cards #1660

mekinney commented Jan 29, 2019 •

edited

Loading

corinagum commented Jan 30, 2019

tdurnford commented Jan 31, 2019

mekinney commented Jan 31, 2019

mekinney commented Jan 31, 2019

tdurnford commented Feb 1, 2019 •

edited

Loading

mekinney commented Feb 1, 2019

corinagum commented Feb 12, 2019

compulim commented Feb 14, 2019

keshavnagpal commented Feb 14, 2019 •

edited

Loading

mekinney commented Feb 14, 2019

corinagum commented Feb 14, 2019

compulim commented Feb 15, 2019

corinagum commented Feb 20, 2019

mekinney commented Feb 20, 2019

Scrolling error with suggested action cards #1660

Scrolling error with suggested action cards #1660

Comments

mekinney commented Jan 29, 2019 • edited Loading

corinagum commented Jan 30, 2019

tdurnford commented Jan 31, 2019

mekinney commented Jan 31, 2019

mekinney commented Jan 31, 2019

tdurnford commented Feb 1, 2019 • edited Loading

mekinney commented Feb 1, 2019

corinagum commented Feb 12, 2019

compulim commented Feb 14, 2019

keshavnagpal commented Feb 14, 2019 • edited Loading

mekinney commented Feb 14, 2019

corinagum commented Feb 14, 2019

compulim commented Feb 15, 2019

corinagum commented Feb 20, 2019

mekinney commented Feb 20, 2019

mekinney commented Jan 29, 2019 •

edited

Loading

tdurnford commented Feb 1, 2019 •

edited

Loading

keshavnagpal commented Feb 14, 2019 •

edited

Loading