diff --git a/packages/botonic-react/src/util/dom.js b/packages/botonic-react/src/util/dom.js index 8fd46bc960..54d9b9b36b 100644 --- a/packages/botonic-react/src/util/dom.js +++ b/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)) { diff --git a/packages/botonic-react/src/webchat/hooks/use-scroll-to-bottom.ts b/packages/botonic-react/src/webchat/hooks/use-scroll-to-bottom.ts index 5886a585f5..74f3a24769 100644 --- a/packages/botonic-react/src/webchat/hooks/use-scroll-to-bottom.ts +++ b/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)