Scrolling behaviour together with the webchat/join - event: The Chatbot doesn't scroll correctly.
See original GitHub issueScreenshots
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
- create a backend which answers to the webchat/join event with a long message
- 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 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:
- Created 2 years ago
- Reactions:2
- Comments:9 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
@nodueck I don’t have a workaround - currently our chatbot users need to scroll up to see the whole message.