Определение флага 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} />;
};