microsoft / microsoft/BotFramework-WebChat
Scrolling behaviour: Chatbot doesn't scroll to the new message when sending Adaptive Cards
Open
@compulim is already working on this.
Since Apr 26, 2021.
Bot Services
bug
customer-replied-to
customer-reported
ExemptFromDailyDRIReport
- Dominant language
- HTML
- Stars
- 1.8k
- Forks
- 1.6k
- Avg merge
- 22h 58m
- Merged PRs (30d)
- 2
Description
Screenshots
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.