fix(engine): 🐛 Fix scrolling behavior and avatar position

packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx

@@ -38,10 +38,10 @@ export const AvatarSideContainer = () => {
               unmountOnExit
             >
               <div
-                className="fixed w-6 h-6 xs:w-10 xs:h-10 mb-4 xs:mb-2 flex items-center top-0"
+                className="absolute w-6 h-6 xs:w-10 xs:h-10 mb-4 xs:mb-2 flex items-center top-0"
                 style={{
                   top: `calc(${topOffset}px - ${marginBottom}px)`,
-                  transition: 'top 500ms ease-out',
+                  transition: 'top 350ms ease-out',
                 }}
               >
                 <HostAvatar typebotName={typebot.name} />

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { animateScroll as scroll } from 'react-scroll'
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import { ChatStep } from './ChatStep'
 import { AvatarSideContainer } from './AvatarSideContainer'
@@ -20,6 +19,7 @@ type ChatBlockProps = {
   steps: PublicStep[]
   startStepIndex: number
   blockIndex: number
+  onScroll: () => void
   onBlockEnd: (edgeId?: string) => void
 }
 
@@ -27,6 +27,7 @@ export const ChatBlock = ({
   steps,
   startStepIndex,
   blockIndex,
+  onScroll,
   onBlockEnd,
 }: ChatBlockProps) => {
   const { typebot, updateVariableValue } = useTypebot()
@@ -41,7 +42,7 @@ export const ChatBlock = ({
   }, [])
 
   useEffect(() => {
-    autoScrollToBottom()
+    onScroll()
     onNewStepDisplayed()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [displayedSteps])
@@ -69,13 +70,6 @@ export const ChatBlock = ({
     }
   }
 
-  const autoScrollToBottom = () => {
-    scroll.scrollToBottom({
-      duration: 500,
-      containerId: 'scrollable-container',
-    })
-  }
-
   const displayNextStep = (answerContent?: string) => {
     const currentStep = [...displayedSteps].pop()
     if (currentStep) {

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx

@@ -55,7 +55,9 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   const sendAvatarOffset = () => {
     if (!messageContainer.current) return
     const containerDimensions = messageContainer.current.getBoundingClientRect()
-    updateLastAvatarOffset(containerDimensions.top + containerDimensions.height)
+    updateLastAvatarOffset(
+      messageContainer.current.offsetTop + containerDimensions.height
+    )
   }
 
   return (

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx

@@ -44,8 +44,8 @@ export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
             className={
               'py-2 px-4 font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none mr-2 mb-2 typebot-button ' +
               (selectedIndices.includes(idx) || !step.options?.isMultipleChoice
-                ? 'active'
-                : '')
+                ? ''
+                : 'selectable')
             }
             data-testid="button"
           >

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/SendButton.tsx

@@ -17,7 +17,7 @@ export const SendButton = ({
       disabled={isDisabled}
       {...props}
       className={
-        'py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button active ' +
+        'py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button ' +
         props.className
       }
     >