@memori.ai/memori-react/esm/components/Header/Header.js

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import cx from 'classnames';
import Button from '../ui/Button';
import MapMarker from '../icons/MapMarker';
import SoundDeactivated from '../icons/SoundDeactivated';
import Sound from '../icons/Sound';
import { useTranslation } from 'react-i18next';
import Setting from '../icons/Setting';
import ShareButton from '../ShareButton/ShareButton';
import FullscreenExit from '../icons/FullscreenExit';
import Fullscreen from '../icons/Fullscreen';
import Refresh from '../icons/Refresh';
import Clear from '../icons/Clear';
import DeepThought from '../icons/DeepThought';
import Group from '../icons/Group';
import UserIcon from '../icons/User';
import MessageIcon from '../icons/Message';
const Header = ({ className, memori, tenant, position, setShowPositionDrawer, setShowSettingsDrawer, setShowChatHistoryDrawer, setShowKnownFactsDrawer, setShowExpertsDrawer, enableAudio = true, speakerMuted, setSpeakerMuted, hasUserActivatedSpeak = false, showShare = true, showSettings = true, showSpeaker = true, showReload = false, showClear = false, showLogin = true, setShowLoginDrawer, clearHistory, loginToken, user, sessionID, showChatHistory = true, fullScreenHandler, baseUrl, }) => {
    const { t } = useTranslation();
    const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
    const [fullScreen, setFullScreen] = useState(false);
    useEffect(() => {
        if (document.fullscreenEnabled) {
            setFullScreenAvailable(true);
        }
    }, []);
    return (_jsxs("div", { className: cx('memori-header', className), children: [memori.needsPosition && position && (_jsxs("div", { className: "memori-header--position", children: [position.latitude !== 0 && position.longitude !== 0 && (_jsx("span", { className: "memori-header--position-placeName", children: position.placeName })), _jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button--position", title: t('widget.position') || 'Position', icon: _jsx(MapMarker, {}), onClick: () => setShowPositionDrawer(true) })] })), showReload && (_jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button--reload", title: t('reload') || 'Reload', icon: _jsx(Refresh, {}), onClick: () => {
                    window.location.reload();
                } })), showClear && (_jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button--clear", title: t('clearHistory') || 'Clear chat', icon: _jsx(Clear, {}), onClick: clearHistory })), showChatHistory && !!loginToken && (_jsx(Button, { primary: true, disabled: !loginToken, shape: "circle", className: "memori-header--button memori-header--button--chat-history", title: t('write_and_speak.chatHistory') || 'Chat history', icon: _jsx(MessageIcon, {}), onClick: () => setShowChatHistoryDrawer(true) })), fullScreenAvailable && (_jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button--fullscreen", title: fullScreen
                    ? t('fullscreenExit') || 'Exit fullscreen'
                    : t('fullscreenEnter') || 'Enter fullscreen', icon: fullScreen ? _jsx(FullscreenExit, {}) : _jsx(Fullscreen, {}), onClick: fullScreenHandler ||
                    (() => {
                        if (!document.fullscreenElement) {
                            const memoriWidget = document.querySelector('.memori-widget');
                            if (memoriWidget) {
                                memoriWidget.style.backgroundColor =
                                    '#FFFFFF';
                                memoriWidget.requestFullscreen().catch(err => {
                                    console.warn('Error attempting to enable fullscreen:', err);
                                });
                            }
                            setFullScreen(true);
                        }
                        else if (document.exitFullscreen) {
                            const memoriWidget = document.querySelector('.memori-widget');
                            if (memoriWidget) {
                                memoriWidget.style.backgroundColor = '';
                            }
                            document.exitFullscreen().catch(err => {
                                console.warn('Error attempting to exit fullscreen:', err);
                            });
                            setFullScreen(false);
                        }
                    }) })), memori.enableDeepThought && !!loginToken && (user === null || user === void 0 ? void 0 : user.pAndCUAccepted) && (_jsx(Button, { primary: !!sessionID && !!hasUserActivatedSpeak, shape: "circle", icon: _jsx(DeepThought, {}), className: "memori-header--button memori-header--button--knownfacts", disabled: !hasUserActivatedSpeak || !sessionID, onClick: () => setShowKnownFactsDrawer(true), title: t('knownFacts.title') || 'Known facts' })), memori.enableBoardOfExperts && (_jsx(Button, { primary: true, shape: "circle", icon: _jsx(Group, {}), className: "memori-header--button memori-header--button--experts", disabled: !hasUserActivatedSpeak || !sessionID, onClick: () => setShowExpertsDrawer(true), title: t('widget.showExpertsInTheBoard') || 'Experts in this board' })), enableAudio && showSpeaker && (_jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button--speaker", icon: speakerMuted ? _jsx(SoundDeactivated, {}) : _jsx(Sound, {}), onClick: () => setSpeakerMuted(!speakerMuted), title: t('widget.sound') || 'Sound' })), showSettings && (_jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button-settings", icon: _jsx(Setting, {}), onClick: () => setShowSettingsDrawer(true), title: t('widget.settings') || 'Settings' })), showShare && (_jsx(ShareButton, { className: "memori-header--button memori-header--button-share", title: memori.name, memori: memori, sessionID: sessionID, tenant: tenant, showQrCode: true, align: "left", baseUrl: baseUrl })), showLogin && (_jsx(Button, { primary: true, shape: "circle", className: "memori-header--button memori-header--button-login", icon: _jsx(UserIcon, {}), onClick: () => setShowLoginDrawer(true), title: loginToken ? t('login.user') || 'User' : t('login.login') || 'Login' }))] }));
};
export default Header;
//# sourceMappingURL=Header.js.map