Определение флага mobile

Обновлено 15 января 2024

Для определения флага mobile может использоваться ResizeObserver.

Если флаг mobile установлен, чат будет запущен в режиме для мобильных устройств — будет раскрываться на весь экран.

import React, { FC } from 'react';
import { createAssistantClient } from '@salutejs/client';
import { FloatingAssistantChatLottie } from '@sberdevices/assistant-web-sdk/floatingAssistantChatLottie';

const MOBILE_WIDTH = 560; // ширина экрана с которой начинается mobile-версия

export const FloatingChatWithAssistant: FC = () => {
    const [isMobile, setIsMobile] = useState(window.document.documentElement.offsetWidth < MOBILE_WIDTH);

    useLayoutEffect(() => {
        // Observer для определения isMobile в зависимости от ширины экрана
        const element = window.document.documentElement;
        const resizeObserver = new window.ResizeObserver((entries: ResizeObserverEntry[]) => {
            for (const entry of entries) {
                setIsMobile(entry.contentRect.width < MOBILE_WIDTH);
            }
        });
        
        resizeObserver.observe(element);

        return () => {
            resizeObserver.unobserve(element);
        };
    }, []);

    return <FloatingAssistantChatLottie {...props} mobile={isMobile} />;
};