Пример определения флага mobile

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

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

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

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

export const ChatWithAssistant: 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 <FloatingAssistantChat {...props} mobile={isMobile} />;
};

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней