🚸 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/components/ConversationContainer/ChatChunk.tsx

@@ -15,7 +15,7 @@ type Props = Pick<ChatReply, 'messages' | 'input'> & {
   hasError: boolean
   hideAvatar: boolean
   onNewBubbleDisplayed: (blockId: string) => Promise<void>
-  onScrollToBottom: () => void
+  onScrollToBottom: (top?: number) => void
   onSubmit: (input: string) => void
   onSkip: () => void
   onAllBubblesDisplayed: () => void
@@ -31,7 +31,7 @@ export const ChatChunk = (props: Props) => {
     props.onScrollToBottom()
   })
 
-  const displayNextMessage = async () => {
+  const displayNextMessage = async (bubbleOffsetTop?: number) => {
     const lastBubbleBlockId = props.messages[displayedMessageIndex()].id
     await props.onNewBubbleDisplayed(lastBubbleBlockId)
     setDisplayedMessageIndex(
@@ -39,7 +39,7 @@ export const ChatChunk = (props: Props) => {
         ? displayedMessageIndex()
         : displayedMessageIndex() + 1
     )
-    props.onScrollToBottom()
+    props.onScrollToBottom(bubbleOffsetTop)
     if (displayedMessageIndex() === props.messages.length) {
       props.onAllBubblesDisplayed()
     }

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

@@ -44,7 +44,6 @@ type Props = {
 
 export const ConversationContainer = (props: Props) => {
   let chatContainer: HTMLDivElement | undefined
-  let bottomSpacer: HTMLDivElement | undefined
   const [chatChunks, setChatChunks] = createSignal<
     Pick<ChatReply, 'messages' | 'input' | 'clientSideActions'>[]
   >([
@@ -153,10 +152,9 @@ export const ConversationContainer = (props: Props) => {
     ])
   }
 
-  const autoScrollToBottom = () => {
-    if (!bottomSpacer) return
+  const autoScrollToBottom = (offsetTop?: number) => {
     setTimeout(() => {
-      chatContainer?.scrollTo(0, chatContainer.scrollHeight)
+      chatContainer?.scrollTo(0, offsetTop ?? chatContainer.scrollHeight)
     }, 50)
   }
 
@@ -227,14 +225,11 @@ export const ConversationContainer = (props: Props) => {
           </div>
         )}
       </Show>
-      <BottomSpacer ref={bottomSpacer} />
+      <BottomSpacer />
     </div>
   )
 }
 
-type BottomSpacerProps = {
-  ref: HTMLDivElement | undefined
-}
-const BottomSpacer = (props: BottomSpacerProps) => {
-  return <div ref={props.ref} class="w-full h-32 flex-shrink-0" />
+const BottomSpacer = () => {
+  return <div class="w-full h-32 flex-shrink-0" />
 }