🚸 Improve auto scroll behavior

Now only based on bottom of last element if it is in view

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -234,17 +234,15 @@ export const ConversationContainer = (props: Props) => {
     }
     const lastElementRect = lastElement.getBoundingClientRect()
     const containerRect = chatContainer.getBoundingClientRect()
-    const lastElementTopRelative =
-      lastElementRect.top - containerRect.top + chatContainer.scrollTop
 
-    const isLastElementInVisibleArea =
+    const isBottomOfLastElementInView =
-      lastElementTopRelative < chatContainer.scrollTop + containerRect.height &&
+      lastElementRect.top + lastElementRect.height < containerRect.height
-      lastElementTopRelative + lastElementRect.height > chatContainer.scrollTop
 
-    if (isLastElementInVisibleArea)
+    if (isBottomOfLastElementInView) {
       setTimeout(() => {
         chatContainer?.scrollTo(0, lastElement.offsetTop - offset)
       }, 50)
+    }
   }
 
   const handleAllBubblesDisplayed = async () => {

packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx

@@ -18,7 +18,7 @@ export const Buttons = (props: Props) => {
   const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemIndex: number) =>

packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx

@@ -19,7 +19,7 @@ export const MultipleChoicesForm = (props: Props) => {
   const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemId: string) => {

packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx

@@ -33,7 +33,7 @@ export const EmailInput = (props: Props) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
     window.addEventListener('message', processIncomingEvent)
   })
 

packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx

@@ -36,7 +36,7 @@ export const NumberInput = (props: NumberInputProps) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
     window.addEventListener('message', processIncomingEvent)
   })
 

packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx

@@ -90,7 +90,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
     window.addEventListener('message', processIncomingEvent)
   })
 

packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx

@@ -22,7 +22,7 @@ export const MultiplePictureChoice = (props: Props) => {
   const [totalLoadedImages, setTotalLoadedImages] = createSignal(0)
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemId: string) => {

packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx

@@ -18,7 +18,7 @@ export const SinglePictureChoice = (props: Props) => {
   const [totalLoadedImages, setTotalLoadedImages] = createSignal(0)
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemIndex: number) => {

packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -40,7 +40,10 @@ export const TextInput = (props: Props) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef)
+      inputRef.focus({
+        preventScroll: true,
+      })
     window.addEventListener('message', processIncomingEvent)
   })
 

packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx

@@ -39,7 +39,10 @@ export const UrlInput = (props: Props) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef)
+      inputRef.focus({
+        preventScroll: true,
+      })
     window.addEventListener('message', processIncomingEvent)
   })
 

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",