Skip to content

Fix chat widget scroll position #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
a2u wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix chat widget scroll position #172

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c385d27
Fix chat widget stops 110px from page bottom on scroll
a2u Feb 3, 2026
c88b058
Disable scroll position adjustment on mobile
a2u Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion docs/.vuepress/components/Chat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div id="bot-ui">
<div id="bot-ui" :style="{ bottom: dynamicBottom + 'px' }">
<!-- Conditionally show toggle button with highlight -->
<div class="toggle-container" v-show="!(isMobile && showChat)">
<div v-if="!showChat" class="pulse-ring"></div>
Expand Down Expand Up @@ -88,6 +88,8 @@ export default {
windowWidth: 0, // Changed from window.innerWidth to avoid SSR error
showTooltip: true,
tooltipDismissDuration: 2 * 60 * 60 * 1000, // 2 hours in milliseconds
dynamicBottom: 20, // Default bottom position
stopFromBottom: 110, // Stop 100px from page bottom
};
},
computed: {
Expand All @@ -100,11 +102,14 @@ export default {
},
mounted() {
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
this.handleResize(); // Set initial windowWidth on client-side
this.handleScroll(); // Set initial bottom position
this.updateTooltipVisibility(); // Check tooltip dismissal state on mount
},
beforeUnmount() {
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
toggleChat() {
Expand All @@ -116,6 +121,20 @@ export default {
},
handleResize() {
this.windowWidth = window.innerWidth;
this.handleScroll(); // Recalculate position on resize
},
handleScroll() {
// Only apply scroll positioning on desktop
if (this.isMobile) {
this.dynamicBottom = 15;
return;
}
const distanceToPageBottom =
document.documentElement.scrollHeight -
window.scrollY -
window.innerHeight;
// Keep element at least stopFromBottom pixels from the page bottom
this.dynamicBottom = Math.max(20, this.stopFromBottom - distanceToPageBottom);
},
onIframeLoad() {
this.isLoading = false;
Expand Down