question-mark
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 together with the webchat/join - event: The Chatbot doesn't scroll correctly.

See original GitHub issue

Screenshots

BUG

Version

latest (current version: 4.13.0)

Describe the bug

When using the welcome - event in combination with the autoScrollSnapOnActivity - option, the welcome message will not be seen completly.

Steps to reproduce

  1. create a backend which answers to the webchat/join event with a long message
  2. 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>
  1. open the chatbot in a small window

Expected behavior

The welcome - message should be seen completly. But the chatbot scrolls to the bottom of the message.

Additional context

Not 100% sure if this behaviour is intended or a bug. But I feel like this would be an intuitive addition to the scrolling - behaviour feature.

I have read the following information:

Due to the limitation of chat adapter, we recommend content author not to send initial activities (a.k.a. welcome messages) longer than a page.

But for us it’s just not feasible to follow this recommendation.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
MatthiasGwiozdacommented, Apr 20, 2021

is this behavior that recently broke for you? Or is this a newly created bot with no previous behavior available for comparison?

It always behaved like this. The reason why I consider this to be a “bug” is because it feels like the scroll - behaviour should integrate the welcome - message aswell as all the other messages from the bot.

0reactions
MatthiasGwiozdacommented, Aug 12, 2022

@nodueck I don’t have a workaround - currently our chatbot users need to scroll up to see the whole message.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Microsoft BotFramework-WebChat scrolling issues
The developers designed WebChat to scroll the conversation to the bottom if the user hasn't scrolled up. If the user has scrolled up, ......
Read more >
PySimpleGUI
PySimpleGUI wraps tkinter, Qt, WxPython, and Remi so that you get all the same widgets, but you interact with them in a more...
Read more >
How to Make Twilio Flex WebChat Interactive
Flex WebChat will handle scrolling whenever responses are added into the chat so that the latest message is always visible. This scroll ......
Read more >
How to build a modern chat application with React.js
In this tutorial, I will guide you to build your own group chat application using React, React Router, and CometChat Pro.
Read more >
React Scroll Typescript
Now its time to use react scroll. Now, when a user will scroll the page, the onScroll event will be fired, which will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found