@botonic/react/lib/esm/webchat/hooks/use-webchat-dimensions.js

Build Chatbots using React

import { useCallback, useContext } from 'react';
import { WebchatContext } from '../../webchat/context';
export const useWebchatDimensions = () => {
    const { webchatContainerRef, headerRef, inputPanelRef, webchatState: { isWebchatOpen }, } = useContext(WebchatContext);
    const calculateResizedPercentualWebchatHeight = useCallback(() => {
        const webchatElement = webchatContainerRef.current;
        if (!isWebchatOpen || !webchatElement)
            return 0;
        const webchatHeight = webchatElement.clientHeight || 0;
        const keyboardOffset = (window.visualViewport && window.visualViewport.height) ||
            window.innerHeight;
        let newWebchatPercentualHeight = keyboardOffset / webchatHeight;
        newWebchatPercentualHeight =
            Math.round(newWebchatPercentualHeight * 100 * 100) / 100; // Two decimal places
        return newWebchatPercentualHeight;
    }, [isWebchatOpen]);
    const calculateResizedPxChatAreaHeight = useCallback(() => {
        const webchatElement = webchatContainerRef.current;
        const headerElement = headerRef.current;
        const inputPanelElement = inputPanelRef.current;
        if (!isWebchatOpen || !webchatElement)
            return 0;
        const headerElementHeight = headerElement ? headerElement.clientHeight : 0;
        const inputPanelElementHeight = inputPanelElement
            ? inputPanelElement.clientHeight
            : 0;
        return (webchatElement.clientHeight -
            headerElementHeight -
            inputPanelElementHeight);
    }, [isWebchatOpen]);
    return {
        calculateResizedPercentualWebchatHeight,
        calculateResizedPxChatAreaHeight,
    };
};
//# sourceMappingURL=use-webchat-dimensions.js.map