@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
121 lines • 6.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect, useRef } from 'react';
import Spin from '../ui/Spin';
import { useTranslation } from 'react-i18next';
import QuestionHelp from '../icons/QuestionHelp';
import Close from '../icons/Close';
const HiddenChatLayout = ({ Header, headerProps, Chat, chatProps, startPanelProps, sessionId, hasUserActivatedSpeak, autoStart, StartPanel, }) => {
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const [fullScreen, setFullScreen] = useState(false);
const { onClickStart, hasInitialSession } = startPanelProps || {};
const originalSidebarStyles = useRef({
right: '',
width: '',
backgroundColor: '',
});
useEffect(() => {
const handleFullscreenChange = () => {
if (!document.fullscreenElement && fullScreen) {
restoreFromFullscreen();
}
};
document.addEventListener('fullscreenchange', handleFullscreenChange);
return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange);
};
}, [fullScreen]);
useEffect(() => {
const mainDiv = document.body;
if (isOpen) {
if (!fullScreen) {
mainDiv.style.width = 'calc(100% - 350px)';
mainDiv.style.marginRight = '300px';
mainDiv.style.transition = 'all 0.5s';
}
else {
mainDiv.style.width = '100%';
mainDiv.style.marginLeft = '0';
}
}
else {
mainDiv.style.width = '100%';
mainDiv.style.marginRight = '0';
mainDiv.style.marginLeft = '0';
}
}, [isOpen, fullScreen]);
const handleSidebarToggle = () => {
console.log('autoStart', autoStart);
console.log('sessionId', sessionId);
console.log('hasInitialSession', hasInitialSession);
if ((autoStart || autoStart === undefined) && (!sessionId || hasInitialSession)) {
onClickStart === null || onClickStart === void 0 ? void 0 : onClickStart();
}
if (fullScreen && isOpen) {
if (document.fullscreenElement) {
document.exitFullscreen().catch(err => {
console.warn('Error attempting to exit fullscreen:', err);
});
}
restoreFromFullscreen();
}
setIsOpen(prev => {
return !prev;
});
};
const restoreFromFullscreen = () => {
const sidebarElement = document.querySelector('.memori-sidebar');
if (sidebarElement) {
const closeButton = document.querySelector('.memori-close-label');
if (closeButton) {
closeButton.style.display = 'flex';
}
const sidebar = sidebarElement;
sidebar.style.right = originalSidebarStyles.current.right;
sidebar.style.width = originalSidebarStyles.current.width;
sidebar.style.backgroundColor =
originalSidebarStyles.current.backgroundColor;
sidebar.classList.remove('memori-sidebar-fullscreen');
}
setFullScreen(false);
};
const handleFullscreenToggle = () => {
if (!document.fullscreenElement) {
const sidebarElement = document.querySelector('.memori-sidebar');
if (sidebarElement) {
const sidebar = sidebarElement;
const closeButton = document.querySelector('.memori-close-label');
if (closeButton) {
closeButton.style.display = 'none';
}
originalSidebarStyles.current = {
right: sidebar.style.right,
width: sidebar.style.width,
backgroundColor: sidebar.style.backgroundColor,
};
sidebar.style.right = '0';
sidebar.style.width = '100%';
sidebar.style.backgroundColor = '#FFFFFF';
sidebar.requestFullscreen().catch(err => {
console.warn('Error attempting to enable fullscreen:', err);
});
}
setFullScreen(true);
}
else {
if (document.exitFullscreen) {
document.exitFullscreen().catch(err => {
console.warn('Error attempting to exit fullscreen:', err);
});
}
restoreFromFullscreen();
}
};
return (_jsxs(_Fragment, { children: [_jsx("input", { type: "checkbox", id: "memori-sidebar-toggle", className: "memori-sidebar-toggle", checked: isOpen, onChange: handleSidebarToggle }), _jsxs("div", { className: "memori-sidebar-container", children: [_jsx("label", { htmlFor: "memori-sidebar-toggle", className: "memori-sidebar-toggle-label memori-open-label", children: _jsx(QuestionHelp, { className: "memori-icon", "aria-label": t('expand') }) }), _jsxs("aside", { className: `memori-sidebar ${fullScreen ? 'memori-sidebar-fullscreen' : ''}`, children: [_jsx("label", { htmlFor: "memori-sidebar-toggle", className: "memori-sidebar-toggle-label memori-close-label", children: _jsx("span", { children: _jsx(Close, { className: "memori-icon-close", "aria-label": t('collapse') }) }) }), _jsx("div", { className: "memori-sidebar-content", children: _jsx("div", { className: "memori-hidden-chat-layout--header", children: Header && headerProps && (_jsx(Header, { position: {
latitude: 0,
longitude: 0,
placeName: '',
}, ...headerProps, className: "memori-hidden-chat-layout-header--layout", fullScreenHandler: handleFullscreenToggle })) }) }), _jsx("div", { id: "extension" }), _jsx("div", { className: "memori-hidden-chat-layout--controls", children: sessionId && hasUserActivatedSpeak && Chat && chatProps ? (_jsx(Chat, { ...chatProps })) : !autoStart && startPanelProps ? (_jsx("div", { className: "memori-loading", children: _jsx(StartPanel, { ...startPanelProps }) })) : (_jsx("div", { className: "memori-loading", children: _jsx(Spin, {}) })) })] })] })] }));
};
export default HiddenChatLayout;
//# sourceMappingURL=HiddenChat.js.map