🚸 Improve chat auto scroll

Instead of scrolling all the way to the bottom on each bubble, now we scroll to the top of the last bubble

Closes #486

packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -4,7 +4,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
   url: AudioBubbleContent['url']
-  onTransitionEnd: () => void
+  onTransitionEnd: (offsetTop?: number) => void
 }
 
 const showAnimationDuration = 400
@@ -13,13 +13,14 @@ const typingDuration = 500
 let typingTimeout: NodeJS.Timeout
 
 export const AudioBubble = (props: Props) => {
+  let ref: HTMLDivElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
   onMount(() => {
     typingTimeout = setTimeout(() => {
       setIsTyping(false)
       setTimeout(() => {
-        props.onTransitionEnd()
+        props.onTransitionEnd(ref?.offsetTop)
       }, showAnimationDuration)
     }, typingDuration)
   })
@@ -29,7 +30,7 @@ export const AudioBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col animate-fade-in">
+    <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div

packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -4,7 +4,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
   content: EmbedBubbleContent
-  onTransitionEnd: () => void
+  onTransitionEnd: (offsetTop?: number) => void
 }
 
 let typingTimeout: NodeJS.Timeout
@@ -12,13 +12,14 @@ let typingTimeout: NodeJS.Timeout
 export const showAnimationDuration = 400
 
 export const EmbedBubble = (props: Props) => {
+  let ref: HTMLDivElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
   onMount(() => {
     typingTimeout = setTimeout(() => {
       setIsTyping(false)
       setTimeout(() => {
-        props.onTransitionEnd()
+        props.onTransitionEnd(ref?.offsetTop)
       }, showAnimationDuration)
     }, 2000)
   })
@@ -28,7 +29,7 @@ export const EmbedBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col w-full animate-fade-in">
+    <div class="flex flex-col w-full animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
         <div
           class={'flex relative z-10 items-start typebot-host-bubble w-full'}

packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx

@@ -4,7 +4,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
   content: ImageBubbleContent
-  onTransitionEnd: () => void
+  onTransitionEnd: (offsetTop?: number) => void
 }
 
 export const showAnimationDuration = 400
@@ -14,6 +14,7 @@ export const mediaLoadingFallbackTimeout = 5000
 let typingTimeout: NodeJS.Timeout
 
 export const ImageBubble = (props: Props) => {
+  let ref: HTMLDivElement | undefined
   let image: HTMLImageElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
@@ -21,7 +22,7 @@ export const ImageBubble = (props: Props) => {
     if (!isTyping()) return
     setIsTyping(false)
     setTimeout(() => {
-      props.onTransitionEnd()
+      props.onTransitionEnd(ref?.offsetTop)
     }, showAnimationDuration)
   }
 
@@ -56,7 +57,7 @@ export const ImageBubble = (props: Props) => {
   )
 
   return (
-    <div class="flex flex-col animate-fade-in">
+    <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div

packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -8,7 +8,7 @@ import { computePlainText } from '../helpers/convertRichTextToPlainText'
 type Props = {
   content: TextBubbleContent
   typingEmulation: TypingEmulation
-  onTransitionEnd: () => void
+  onTransitionEnd: (offsetTop?: number) => void
 }
 
 export const showAnimationDuration = 400
@@ -22,13 +22,14 @@ const defaultTypingEmulation = {
 let typingTimeout: NodeJS.Timeout
 
 export const TextBubble = (props: Props) => {
+  let ref: HTMLDivElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
   const onTypingEnd = () => {
     if (!isTyping()) return
     setIsTyping(false)
     setTimeout(() => {
-      props.onTransitionEnd()
+      props.onTransitionEnd(ref?.offsetTop)
     }, showAnimationDuration)
   }
 
@@ -50,7 +51,7 @@ export const TextBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col animate-fade-in">
+    <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
         <div class="flex relative items-start typebot-host-bubble">
           <div

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -5,7 +5,7 @@ import { createSignal, Match, onCleanup, onMount, Switch } from 'solid-js'
 
 type Props = {
   content: VideoBubbleContent
-  onTransitionEnd: () => void
+  onTransitionEnd: (offsetTop?: number) => void
 }
 
 export const showAnimationDuration = 400
@@ -13,13 +13,14 @@ export const showAnimationDuration = 400
 let typingTimeout: NodeJS.Timeout
 
 export const VideoBubble = (props: Props) => {
+  let ref: HTMLDivElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
   const onTypingEnd = () => {
     if (!isTyping()) return
     setIsTyping(false)
     setTimeout(() => {
-      props.onTransitionEnd()
+      props.onTransitionEnd(ref?.offsetTop)
     }, showAnimationDuration)
   }
 
@@ -32,7 +33,7 @@ export const VideoBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col animate-fade-in">
+    <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div