fix: fix scroll to bottom via querySelector instead of ref (#2918)

## Description
* use querySelector instead of ref for checking when to scroll to bottom

packages/botonic-react/src/util/dom.js

@@ -3,6 +3,9 @@ import { BotonicContainerId } from '../webchat/constants'
 export const getWebchatElement = host =>
   host && host.querySelector(`#${BotonicContainerId.Webchat}`)
 
+export const getScrollableMessagesListElement = host =>
+  host && host.querySelector(`#${BotonicContainerId.ScrollableMessagesList}`)
+
 // https://stackoverflow.com/questions/9457891/how-to-detect-if-domcontentloaded-was-fired
 export const onDOMLoaded = callback => {
   if (/complete|interactive|loaded/.test(document.readyState)) {

packages/botonic-react/src/webchat/hooks/use-scroll-to-bottom.ts

@@ -1,25 +1,22 @@
-import { useContext } from 'react'
-
-import { WebchatContext } from '../../contexts'
-import { getWebchatElement } from '../../util/dom'
+import {
+  getScrollableMessagesListElement,
+  getWebchatElement,
+} from '../../util/dom'
 
 export const useScrollToBottom = ({
   host,
   behavior = 'smooth',
   timeout = 200,
 }) => {
-  const {
-    webchatState: { isWebchatOpen },
-    scrollableMessagesListRef,
-  } = useContext(WebchatContext)
-
   const scrollToBottom = () => {
     const webchatElement = getWebchatElement(host)
     if (!webchatElement) return
-    if (!isWebchatOpen) return
+    const scrollableMessagesListElement = getScrollableMessagesListElement(host)
+    if (!scrollableMessagesListElement) return
+
     setTimeout(() => {
-      scrollableMessagesListRef.current?.scrollTo({
-        top: scrollableMessagesListRef.current?.scrollHeight,
+      scrollableMessagesListElement.scrollTo({
+        top: scrollableMessagesListElement.scrollHeight,
         behavior: behavior as ScrollBehavior,
       })
     }, timeout)