🚸 Fix auto scroll behavior

Based on bottom of last element was a bad idea. Now it is based on scroll position + some tolerance computed based on screen height
baptisteArno · Apr 25, 2024 · 0a7d598 · 0a7d598
1 parent a7fc413
commit 0a7d598
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.80",
+  "version": "0.2.81",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -34,6 +34,9 @@ import { saveClientLogsQuery } from '@/queries/saveClientLogsQuery'
 import { HTTPError } from 'ky'
 import { persist } from '@/utils/persist'
 
+const autoScrollBottomToleranceScreenPercent = 0.6
+const bottomSpacerHeight = 128
+
 const parseDynamicTheme = (
   initialTheme: Theme,
   dynamicTheme: ContinueChatResponse['dynamicTheme']
@@ -226,21 +229,23 @@ export const ConversationContainer = (props: Props) => {
 
   const autoScrollToBottom = (lastElement?: HTMLDivElement, offset = 0) => {
     if (!chatContainer) return
-    if (!lastElement) {
-      setTimeout(() => {
-        chatContainer?.scrollTo(0, chatContainer.scrollHeight)
-      }, 50)
-      return
-    }
-    const lastElementRect = lastElement.getBoundingClientRect()
-    const containerRect = chatContainer.getBoundingClientRect()
+
+    const bottomTolerance =
+      chatContainer.clientHeight * autoScrollBottomToleranceScreenPercent -
+      bottomSpacerHeight
 
     const isBottomOfLastElementInView =
-      lastElementRect.top + lastElementRect.height < containerRect.height
+      chatContainer.scrollTop + chatContainer.clientHeight >=
+      chatContainer.scrollHeight - bottomTolerance
 
     if (isBottomOfLastElementInView) {
       setTimeout(() => {
-        chatContainer?.scrollTo(0, lastElement.offsetTop - offset)
+        chatContainer?.scrollTo(
+          0,
+          lastElement
+            ? lastElement.offsetTop - offset
+            : chatContainer.scrollHeight
+        )
       }, 50)
     }
   }
@@ -350,5 +355,10 @@ export const ConversationContainer = (props: Props) => {
 }
 
 const BottomSpacer = () => {
-  return <div class="w-full h-32 flex-shrink-0" />
+  return (
+    <div
+      class="w-full flex-shrink-0"
+      style={{ height: bottomSpacerHeight + 'px' }}
+    />
+  )
 }
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.80",
+  "version": "0.2.81",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.80",
+  "version": "0.2.81",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",