Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scrolling behaviour: Chatbot doesn't scroll to the new message when sending Adaptive Cards

See original GitHub issue

Screenshots

Adaptive Card Scrolling

Version

latest(current version: 4.13.0)

Describe the bug

When an adaptive card follows another adaptive card after submitting the first one, the chatbot doesn’t scroll to the second adaptive card.

This happens only when the option autoScrollSnapOnActivity is set to true.

Steps to reproduce

create a backend, which sends an adaptive card after submitting another adaptive card.
use this frontend - example (with your token):

<!DOCTYPE html>
<html>

<head>
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="webchat" role="main"></div>
    <script>
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
          if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
              type: 'WEB_CHAT/SEND_EVENT',
              payload: {
                name: 'webchat/join',
                value: { language: window.navigator.language }
              }
            });
          }

          return next(action);
        });

        window.WebChat.renderWebChat(
            {
                directLine: window.WebChat.createDirectLine({
                    token: 'INSERT_TOKEN_HERE'
                }),
                userID: 'YOUR_USER_ID',
                username: 'Web Chat User',
                locale: 'de-de',
                store,
                styleOptions: {
                    bubbleBackground: 'rgba(0, 255, 255, .1)',
                    autoScrollSnapOnActivity: true,
                }
            },
            document.getElementById('webchat')
        );
    </script>
</body>

</html>

open the chatbot
Start the dialog with the adaptive cards and submit the first adaptive card

Expected behavior

The chatbot should scroll to the second adaptive card, after submitting the first one.

Additional context

We tried a workaround to disable the autoScrollSnapOnActivity - property when an adaptive card is about the get rendered. But this causes another problem.

Issue Analytics

State:
Created 2 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

MatthiasGwiozdacommented, Apr 20, 2021

@MatthiasGwiozda if the button on the Adaptive Card send an “IMBack” instead of “PostBack”, will it help?

This won’t be an option in our dialog - flow. We have to save the data that comes from the adaptive - card. With an imBack - Button this is not possible.

Thats why we use Action.Submit in the adaptive card.

0reactions

Sandy2725commented, Jul 23, 2021

Hi @compulim ,

Any update on #3857. can you please respond.

Top Results From Across the Web

Example 1 - Show an Adaptive Card in Power Virtual Agents

On the left-hand menu, select Topics. Select the down-arrow symbol next to + New topic, and then select Open in Bot Framework Composer....

Is there a way to show cards with a scroll bar option when the ...

You can use Adaptive Card for Multiple line with scroll bar property.

Google Codelabs

Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small ...

28 The Conversation Designer - Digital Assistant

While you prompt the presentation along by clicking Enter or the Send Message icon, that's where your interaction ends. You can't enter new...

Release notes: What's new in ServiceDesk Plus Cloud

You can now send email notification to org roles (Reporting Manager) and users ... notifications to support the new Adaptive Card Format in...