Autoscroll does not work in webchat. Tried the below in Chrome and Firefox latest versions
Tried this and it does not work: Microsoft BotFramework-WebChat
Tried this and it does not work: https://github.com/microsoft/BotFramework-WebChat/issues/1031
<!DOCTYPE html>
<html>
<head>
<style>
#webchat {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleOptions = {
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
botAvatarInitials: 'Me',
userAvatarInitials: 'You',
hideUploadButton: true,
};
var token = "thetoken;
var d1 = window.WebChat.createDirectLine({ token });
var botContainer = document.getElementById('webchat');
// Tried activityMiddleware
const activityMiddleware = () => (next) => (card) => {
return (
(children) => {
scrollToBottom()
return next(card)(children)
}
);
};
// Tried Store
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
document.querySelector('ul[role="list"]').lastChild.scrollIntoView({behavior: 'smooth', block: 'start'});
}
return next(action);
}
);
window.WebChat.renderWebChat({ directLine: d1, styleOptions }, botContainer,store );
// tried window.WebChat.renderWebChat({ directLine: d1, styleOptions }, botContainer );
// tried window.WebChat.renderWebChat({ directLine: d1, styleOptions }, botContainer,activityMiddleware );
</script>
</body>
</html>