@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/esm/components/Header/Header.d.ts

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Memori, Message, Tenant, Venue, User } from '@memori.ai/memori-api-client/dist/types';
+import { Button } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
 export interface Props {
     className?: string;
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
     memori: Memori;
     tenant?: Tenant;
     history: Message[];
     position?: Venue;
-    setShowPositionDrawer: (show: boolean) => void;
+    setVenue: (venue?: Venue) => void;
+    positionPopoverOpen: boolean;
+    setPositionPopoverOpen: (open: boolean) => void;
     setShowSettingsDrawer: (show: boolean) => void;
     setShowChatHistoryDrawer: (show: boolean) => void;
     setShowKnownFactsDrawer: (show: boolean) => void;
@@ -35,6 +39,8 @@ export interface Props {
     layout?: WidgetProps['layout'];
     additionalSettings?: WidgetProps['additionalSettings'];
     showMessageConsumption?: boolean;
+    showFullscreen?: boolean;
+    extraActions?: React.ReactNode;
 }
 declare const Header: React.FC<Props>;
 export default Header;

package/esm/components/Header/Header.js

@@ -1,44 +1,137 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import cx from 'classnames';
-import Button from '../ui/Button';
-import Dropdown from '../ui/Dropdown';
-import MapMarker from '../icons/MapMarker';
-import SoundDeactivated from '../icons/SoundDeactivated';
-import Sound from '../icons/Sound';
+import { Button, Popover, Tooltip, useAlertManager, createAlertOptions, } from '@memori.ai/ui';
+import { VolumeX, Volume2, Settings, Minimize, Maximize, MoreVertical, RefreshCw, Brain, ChevronDown, Users, User as UserIcon, MessageCircle, LogOut, Trash2, Camera, } from 'lucide-react';
 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';
-import Logout from '../icons/Logout';
+import PositionPopover from '../PositionPopover/PositionPopover';
+import GasStation from '../icons/GasStation';
 import { getErrori18nKey } from '../../helpers/error';
-import toast from 'react-hot-toast';
 import ChatConsumptionDropdown from './ChatConsumptionDropdown';
-const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
-const Header = ({ className, memori, tenant, history, position, setShowPositionDrawer, setShowSettingsDrawer, setShowChatHistoryDrawer, setShowKnownFactsDrawer, setShowExpertsDrawer, enableAudio = true, speakerMuted, setSpeakerMuted, hasUserActivatedSpeak = false, showShare = true, showSettings = true, showReload = false, showClear = false, showLogin = true, setShowLoginDrawer, clearHistory, loginToken, user, sessionID, showChatHistory = true, fullScreenHandler, baseUrl, onLogout, apiClient, layout, additionalSettings, showMessageConsumption = false, }) => {
+import { imgMimeTypes } from '../../helpers/utils';
+import { getResourceUrl } from '../../helpers/media';
+const Header = ({ className, buttonVariant = 'ghost', memori, tenant, history, position, setVenue, positionPopoverOpen, setPositionPopoverOpen, setShowSettingsDrawer, setShowChatHistoryDrawer, setShowKnownFactsDrawer, setShowExpertsDrawer, enableAudio = true, speakerMuted, setSpeakerMuted, hasUserActivatedSpeak = false, showShare = true, showSettings = true, showReload = false, showClear = false, showLogin = true, setShowLoginDrawer, clearHistory, loginToken, user, sessionID, showChatHistory = true, fullScreenHandler, baseUrl, onLogout, apiClient, layout, additionalSettings, showMessageConsumption = false, showFullscreen = true, extraActions, }) => {
     const { t, i18n } = useTranslation();
+    const { add } = useAlertManager();
     const { uploadAsset, pwlUpdateUser } = apiClient.backend;
     const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
     const [fullScreen, setFullScreen] = useState(false);
+    const [userPopoverOpen, setUserPopoverOpen] = useState(false);
+    const [infoPopoverOpen, setInfoPopoverOpen] = useState(false);
+    const getMetricValue = (metric) => {
+        if (typeof metric === 'number' && Number.isFinite(metric))
+            return metric;
+        if (!metric || typeof metric !== 'object')
+            return undefined;
+        if (typeof metric.parsedValue === 'number' &&
+            Number.isFinite(metric.parsedValue)) {
+            return metric.parsedValue;
+        }
+        if (typeof metric.source === 'string') {
+            const parsed = Number(metric.source);
+            if (Number.isFinite(parsed))
+                return parsed;
+        }
+        return undefined;
+    };
+    const formatMetricValue = (value, locale) => new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: Math.abs(value) >= 1 ? 3 : 4,
+    }).format(value);
+    const formatImpactInReadableUnit = (value, metricType, locale) => {
+        const absValue = Math.abs(value);
+        if (metricType === 'energy') {
+            if (absValue >= 1)
+                return `${formatMetricValue(value, locale)} kWh`;
+            const wh = value * 1000;
+            if (Math.abs(wh) >= 1)
+                return `${formatMetricValue(wh, locale)} Wh`;
+            return `${formatMetricValue(wh * 1000, locale)} mWh`;
+        }
+        if (metricType === 'co2') {
+            if (absValue >= 1)
+                return `${formatMetricValue(value, locale)} kg`;
+            const g = value * 1000;
+            if (Math.abs(g) >= 1)
+                return `${formatMetricValue(g, locale)} g`;
+            return `${formatMetricValue(g * 1000, locale)} mg`;
+        }
+        if (absValue >= 1)
+            return `${formatMetricValue(value, locale)} L`;
+        const ml = value * 1000;
+        if (Math.abs(ml) >= 1)
+            return `${formatMetricValue(ml, locale)} mL`;
+        return `${formatMetricValue(ml * 1000, locale)} μL`;
+    };
+    const currentLocale = i18n.language || navigator.language || 'en';
+    const chatLog = useMemo(() => ({ lines: history }), [history]);
+    const sustainabilityTotals = useMemo(() => {
+        var _a;
+        const totals = { energy: 0, gwp: 0, wcf: 0 };
+        ((_a = chatLog === null || chatLog === void 0 ? void 0 : chatLog.lines) !== null && _a !== void 0 ? _a : []).forEach(line => {
+            var _a, _b, _c, _d;
+            const energyImpact = (_a = line.llmUsage) === null || _a === void 0 ? void 0 : _a.energyImpact;
+            if (!energyImpact)
+                return;
+            totals.energy += (_b = getMetricValue(energyImpact.energy)) !== null && _b !== void 0 ? _b : 0;
+            totals.gwp += (_c = getMetricValue(energyImpact.gwp)) !== null && _c !== void 0 ? _c : 0;
+            totals.wcf += (_d = getMetricValue(energyImpact.wcf)) !== null && _d !== void 0 ? _d : 0;
+        });
+        return totals;
+    }, [chatLog]);
+    const hasSustainabilityData = useMemo(() => {
+        var _a;
+        return ((_a = chatLog === null || chatLog === void 0 ? void 0 : chatLog.lines) !== null && _a !== void 0 ? _a : []).some(line => {
+            var _a;
+            return !!((_a = line.llmUsage) === null || _a === void 0 ? void 0 : _a.energyImpact);
+        });
+    }, [chatLog]);
+    const hasChatConsumptionData = useMemo(() => {
+        var _a;
+        return ((_a = chatLog === null || chatLog === void 0 ? void 0 : chatLog.lines) !== null && _a !== void 0 ? _a : []).some(line => !!line.llmUsage);
+    }, [chatLog]);
     useEffect(() => {
         if (document.fullscreenEnabled) {
             setFullScreenAvailable(true);
         }
     }, []);
+    useEffect(() => {
+        const handleFullscreenChange = () => {
+            var _a;
+            const isFs = !!document.fullscreenElement;
+            setFullScreen(isFs);
+            if (!isFs) {
+                const memoriWidget = document.querySelector('.memori-widget');
+                if (((_a = memoriWidget === null || memoriWidget === void 0 ? void 0 : memoriWidget.dataset) === null || _a === void 0 ? void 0 : _a.memoriPrevBgColor) !== undefined) {
+                    memoriWidget.style.backgroundColor =
+                        memoriWidget.dataset.memoriPrevBgColor;
+                    delete memoriWidget.dataset.memoriPrevBgColor;
+                }
+            }
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    }, []);
+    const [showFullpageDividers, setShowFullpageDividers] = useState(() => {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return true;
+        return !window.matchMedia('(max-width: 767px)').matches;
+    });
+    useEffect(() => {
+        if (!window.matchMedia)
+            return;
+        const mq = window.matchMedia('(max-width: 767px)');
+        const update = () => setShowFullpageDividers(!mq.matches);
+        update();
+        mq.addEventListener('change', update);
+        return () => mq.removeEventListener('change', update);
+    }, []);
     const hasSettingsContent = useCallback((layout, additionalSettings) => {
         return (layout === 'TOTEM' ||
-            (additionalSettings && Object.keys(additionalSettings).length > 0) || false);
+            (additionalSettings && Object.keys(additionalSettings).length > 0) ||
+            false);
     }, [layout, additionalSettings]);
-    const hasSpacedButtons = layout === 'FULLPAGE' ||
-        layout === 'CHAT' ||
-        layout === 'ZOOMED_FULL_BODY';
     const updateAvatar = async (avatar) => {
         if (avatar && loginToken) {
             const reader = new FileReader();
@@ -48,21 +141,39 @@ const Header = ({ className, memori, tenant, history, position, setShowPositionD
                     const { asset: avatarAsset, ...resp } = await uploadAsset((_a = avatar.name) !== null && _a !== void 0 ? _a : 'avatar', (_b = e.target) === null || _b === void 0 ? void 0 : _b.result, loginToken !== null && loginToken !== void 0 ? loginToken : '');
                     if (resp.resultCode !== 0) {
                         console.error('[updateAvatar] Upload failed:', resp);
-                        toast.error(t(getErrori18nKey(resp.resultCode)));
+                        add(createAlertOptions({
+                            description: t(getErrori18nKey(resp.resultCode)),
+                            severity: 'error',
+                        }));
                     }
                     else if (avatarAsset) {
                         let newUser = {
                             userID: user === null || user === void 0 ? void 0 : user.userID,
                             avatarURL: avatarAsset.assetURL,
                         };
-                        const { user: patchedUser, ...resp } = await pwlUpdateUser(loginToken !== null && loginToken !== void 0 ? loginToken : '', (_c = user === null || user === void 0 ? void 0 : user.userID) !== null && _c !== void 0 ? _c : '', newUser);
+                        const { user: patchedUser, ...updateResp } = await pwlUpdateUser(loginToken !== null && loginToken !== void 0 ? loginToken : '', (_c = user === null || user === void 0 ? void 0 : user.userID) !== null && _c !== void 0 ? _c : '', newUser);
+                        if (updateResp.resultCode !== 0) {
+                            add(createAlertOptions({
+                                description: t(getErrori18nKey(updateResp.resultCode)),
+                                severity: 'error',
+                            }));
+                        }
+                        else {
+                            add(createAlertOptions({
+                                description: t('login.avatarUploadSuccess'),
+                                severity: 'success',
+                            }));
+                        }
                     }
                 }
                 catch (e) {
                     let err = e;
                     console.error('[updateAvatar] Error:', err);
                     if (err === null || err === void 0 ? void 0 : err.message)
-                        toast.error(err.message);
+                        add(createAlertOptions({
+                            description: err.message,
+                            severity: 'error',
+                        }));
                 }
             };
             reader.readAsDataURL(avatar);
@@ -72,55 +183,232 @@ const Header = ({ className, memori, tenant, history, position, setShowPositionD
                 avatar,
                 loginToken,
             });
-            toast.error(t('login.avatarUploadError'));
+            add(createAlertOptions({
+                description: t('login.avatarUploadError'),
+                severity: 'error',
+            }));
         }
     };
-    return (_jsxs("div", { className: cx('memori-header', hasSpacedButtons && 'memori-header--spaced', 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: cx('memori-header--button', 'memori-header--button--position', hasSpacedButtons && 'memori-header--button-spaced'), title: t('widget.position') || 'Position', icon: _jsx(MapMarker, {}), onClick: () => setShowPositionDrawer(true) })] })), showReload && (_jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button--reload', hasSpacedButtons && 'memori-header--button-spaced'), title: t('reload') || 'Reload', icon: _jsx(Refresh, {}), onClick: () => {
-                    window.location.reload();
-                } })), showClear && (_jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button--clear', hasSpacedButtons && 'memori-header--button-spaced'), title: t('clearHistory') || 'Clear chat', icon: _jsx(Clear, {}), onClick: clearHistory })), showChatHistory && !!loginToken && (_jsx(Button, { primary: true, disabled: !loginToken, shape: "circle", className: cx('memori-header--button', 'memori-header--button--chat-history', hasSpacedButtons && 'memori-header--button-spaced'), title: t('write_and_speak.chatHistory') || 'Chat history', icon: _jsx(MessageIcon, {}), onClick: () => setShowChatHistoryDrawer(true) })), showMessageConsumption && (_jsx(ChatConsumptionDropdown, { history: history, hasSpacedButtons: hasSpacedButtons })), fullScreenAvailable && (_jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button--fullscreen', hasSpacedButtons && 'memori-header--button-spaced'), title: fullScreen
+    const isFullPageChrome = layout === 'FULLPAGE' || layout === 'CHAT';
+    const showFullpageChromeDividers = layout !== 'CHAT' && showFullpageDividers;
+    const fullpageGuestChrome = layout === 'FULLPAGE' && !loginToken;
+    const chatHistoryButtonLabel = layout === 'TOTEM'
+        ? undefined
+        : layout === 'FULLPAGE' || layout === 'CHAT' || layout === 'HIDDEN_CHAT'
+            ? t('widget.headerHistory') || t('write_and_speak.chatHistory')
+            : t('write_and_speak.chatHistory');
+    const fullpageHeaderProfileLabel = t('widget.headerProfile') || t('login.user') || 'Profile';
+    const fullpageHeaderLoginLabel = t('widget.headerLogin') || t('login.login') || 'Login';
+    const isAuthenticated = !!loginToken && !!user;
+    const isConversationStarted = Boolean(sessionID && hasUserActivatedSpeak);
+    const brandAvatarSrc = useMemo(() => {
+        if (!isFullPageChrome || !memori)
+            return undefined;
+        if (memori.avatarURL && memori.avatarURL.length > 0) {
+            return getResourceUrl({
+                type: 'avatar',
+                tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
+                resourceURI: memori.avatarURL,
+                baseURL: baseUrl,
+                apiURL: '',
+            });
+        }
+        return getResourceUrl({
+            type: 'avatar',
+            tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
+            baseURL: baseUrl,
+            apiURL: '',
+        });
+    }, [isFullPageChrome, memori, tenant, baseUrl]);
+    const fullpagePrimaryHasContent = (showChatHistory && !!loginToken) || showLogin;
+    const fullpageSecondaryHasContent = !!memori.needsPosition ||
+        showReload ||
+        showClear ||
+        showMessageConsumption ||
+        (showFullscreen && fullScreenAvailable) ||
+        (memori.enableDeepThought &&
+            !!loginToken &&
+            !!(user === null || user === void 0 ? void 0 : user.pAndCUAccepted) &&
+            hasUserActivatedSpeak &&
+            !!sessionID) ||
+        !!memori.enableBoardOfExperts ||
+        enableAudio ||
+        !!(showSettings && hasSettingsContent(layout, additionalSettings)) ||
+        showShare;
+    const chatHistoryNode = showChatHistory && !!loginToken && (_jsx(Tooltip, { title: t('write_and_speak.chatHistory') || 'Chat history', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, className: "memori-header--chat-history-button", disabled: !loginToken, "aria-label": t('write_and_speak.chatHistory') || 'Chat history', icon: _jsx(MessageCircle, {}), onClick: () => setShowChatHistoryDrawer(true), children: chatHistoryButtonLabel }) }) }));
+    const loginNode = showLogin && (_jsx(_Fragment, { children: loginToken && user ? (_jsx(Popover, { className: "memori-header--dropdown", open: userPopoverOpen, onOpenChange: open => {
+                setUserPopoverOpen(open);
+                if (open) {
+                    setInfoPopoverOpen(false);
+                    setPositionPopoverOpen(false);
+                }
+            }, placement: "bottom-end", sideOffset: 8, closable: false, contentClassName: "memori-dropdown--menu", slotProps: {
+                trigger: {
+                    className: cx('memori-dropdown--user-trigger', isFullPageChrome && 'memori-dropdown--user-trigger--fullpage'),
+                    render: (props) => (_jsx(Tooltip, { title: t('login.user') || 'User', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { ...props, variant: buttonVariant, className: cx('memori-dropdown--user-trigger-button', isFullPageChrome &&
+                                    'memori-header--fullpage-labeled-trigger', userPopoverOpen && 'memori-button--active'), "aria-label": t('login.user') || 'User', icon: _jsx(UserIcon, {}), children: isFullPageChrome ? fullpageHeaderProfileLabel : null }) }) })),
+                },
+            }, content: _jsxs("div", { className: "memori-dropdown--content", children: [_jsx("div", { className: "memori-dropdown--user-item", children: _jsxs("div", { className: "memori-dropdown--user-info", children: [_jsx("div", { className: "memori-dropdown--avatar-wrap", children: user.avatarURL ? (_jsxs(_Fragment, { children: [_jsx("img", { src: user.avatarURL, alt: user.userName || user.eMail, className: "memori-dropdown--avatar" }), _jsx("span", { className: "memori-dropdown--avatar-overlay", "aria-hidden": true, children: _jsx(Camera, { size: 20, strokeWidth: 2 }) }), _jsx("label", { htmlFor: "avatar", className: "sr-only", children: t('login.avatarChange') }), _jsx("input", { type: "file", name: "avatar", id: "avatar", className: "memori-dropdown--avatar-input", onChange: e => {
+                                                    var _a, _b;
+                                                    return updateAvatar((_b = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null);
+                                                }, accept: imgMimeTypes.join(', ') })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "memori-dropdown--avatar-placeholder", children: [_jsx("span", { className: "memori-dropdown--avatar-initial", children: (user.userName || user.eMail || 'U')
+                                                        .charAt(0)
+                                                        .toUpperCase() }), _jsx("span", { className: "memori-dropdown--avatar-overlay", "aria-hidden": true, children: _jsx(Camera, { size: 20, strokeWidth: 2 }) }), _jsx("label", { htmlFor: "avatar", className: "sr-only", children: t('login.avatarChange') }), _jsx("input", { type: "file", name: "avatar", id: "avatar", className: "memori-dropdown--avatar-input", onChange: e => {
+                                                        var _a, _b;
+                                                        return updateAvatar((_b = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null);
+                                                    }, accept: imgMimeTypes.join(', ') })] }) })) }), _jsxs("div", { className: "memori-dropdown--user-details", children: [_jsx("h3", { className: "memori-dropdown--user-name", children: user.userName || t('login.welcomeUser') }), _jsx("p", { className: "memori-dropdown--user-email", children: user.eMail }), _jsx("div", { className: "memori-dropdown--user-badge", children: user.birthDate
+                                                ? new Date(user.birthDate).toLocaleDateString()
+                                                : t('login.notSet') })] })] }) }), _jsx("div", { className: "memori-dropdown--separator" }), _jsx(Button, { type: "button", variant: buttonVariant, onClick: onLogout, className: "memori-dropdown--action-button memori-dropdown--action-button--logout", icon: _jsx(LogOut, { size: 18, strokeWidth: 2, "aria-hidden": true }), children: t('login.logout') || 'Logout' })] }), children: null })) : (_jsx(Tooltip, { title: t('login.login') || 'Login', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, className: "memori-header--button memori-header--button-login", icon: _jsx(UserIcon, {}), "aria-label": t('login.login') || 'Login', onClick: () => setShowLoginDrawer(true), children: isFullPageChrome ? fullpageHeaderLoginLabel : null }) }) })) }));
+    const headerActionsBeforeChatHistory = (_jsxs(_Fragment, { children: [memori.needsPosition && (_jsx("div", { className: "memori-header--position", children: _jsx(Tooltip, { title: t('widget.position') || 'Position', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(PositionPopover, { venue: position, setVenue: setVenue, open: positionPopoverOpen, onOpenChange: open => {
+                                setPositionPopoverOpen(open);
+                                if (open) {
+                                    setInfoPopoverOpen(false);
+                                    setUserPopoverOpen(false);
+                                }
+                            }, triggerButtonVariant: buttonVariant, triggerAriaLabel: t('widget.position') || 'Position', positionerClassName: layout === 'WEBSITE_ASSISTANT'
+                                ? 'memori-position-popover__positioner--website-assistant'
+                                : undefined }) }) }) })), showReload && (_jsx(Tooltip, { title: t('reload') || 'Reload', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, "aria-label": t('reload') || 'Reload', icon: _jsx(RefreshCw, {}), onClick: () => {
+                            window.location.reload();
+                        } }) }) })), showClear && (_jsx(Tooltip, { title: t('clearHistory') || 'Clear chat', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, "aria-label": t('clearHistory') || 'Clear chat', icon: _jsx(Trash2, {}), onClick: () => {
+                            clearHistory();
+                            add(createAlertOptions({
+                                description: t('clearHistoryDone'),
+                                severity: 'success',
+                            }));
+                        } }) }) }))] }));
+    const headerActionsAfterChatHistory = (_jsxs(_Fragment, { children: [showMessageConsumption && (_jsx(ChatConsumptionDropdown, { history: history, triggerVariant: buttonVariant })), showFullscreen && fullScreenAvailable && (_jsx(Tooltip, { title: fullScreen
                     ? t('fullscreenExit') || 'Exit fullscreen'
-                    : t('fullscreenEnter') || 'Enter fullscreen', icon: fullScreen ? _jsx(FullscreenExit, {}) : _jsx(Fullscreen, {}), onClick: fullScreenHandler ||
-                    (() => {
-                        if (!document.fullscreenElement) {
-                            const body = layout !== 'HIDDEN_CHAT' && layout !== 'WEBSITE_ASSISTANT'
-                                ? document.body
-                                : document.querySelector('.memori-widget');
-                            if (body) {
-                                const memoriReact = document.querySelector('.memori-widget');
-                                if (memoriReact) {
-                                    memoriReact.style.backgroundColor =
-                                        '#FFFFFF';
+                    : t('fullscreenEnter') || 'Enter fullscreen', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, "aria-label": fullScreen
+                            ? t('fullscreenExit') || 'Exit fullscreen'
+                            : t('fullscreenEnter') || 'Enter fullscreen', icon: fullScreen ? _jsx(Maximize, {}) : _jsx(Minimize, {}), onClick: fullScreenHandler ||
+                            (() => {
+                                var _a;
+                                if (!document.fullscreenElement) {
+                                    const body = layout !== 'HIDDEN_CHAT' && layout !== 'WEBSITE_ASSISTANT'
+                                        ? document.body
+                                        : document.querySelector('.memori-widget');
+                                    if (body) {
+                                        const memoriWidget = document.querySelector('.memori-widget');
+                                        if (memoriWidget) {
+                                            if (memoriWidget.dataset.memoriPrevBgColor === undefined)
+                                                memoriWidget.dataset.memoriPrevBgColor =
+                                                    (_a = memoriWidget.style.backgroundColor) !== null && _a !== void 0 ? _a : '';
+                                            memoriWidget.style.backgroundColor = '';
+                                        }
+                                        body
+                                            .requestFullscreen()
+                                            .then(() => setFullScreen(true))
+                                            .catch(err => {
+                                            console.warn('Error attempting to enable fullscreen:', err);
+                                        });
+                                    }
                                 }
-                                body
-                                    .requestFullscreen()
-                                    .then(() => setFullScreen(true))
-                                    .catch(err => {
-                                    console.warn('Error attempting to enable fullscreen:', err);
-                                });
-                            }
-                        }
-                        else {
-                            if (document.exitFullscreen) {
-                                document
-                                    .exitFullscreen()
-                                    .then(() => setFullScreen(false))
-                                    .catch(err => {
-                                    console.warn('Error attempting to exit fullscreen:', err);
-                                });
+                                else {
+                                    if (document.exitFullscreen) {
+                                        document
+                                            .exitFullscreen()
+                                            .then(() => {
+                                            var _a;
+                                            setFullScreen(false);
+                                            const memoriWidget = document.querySelector('.memori-widget');
+                                            if (((_a = memoriWidget === null || memoriWidget === void 0 ? void 0 : memoriWidget.dataset) === null || _a === void 0 ? void 0 : _a.memoriPrevBgColor) !==
+                                                undefined) {
+                                                memoriWidget.style.backgroundColor =
+                                                    memoriWidget.dataset.memoriPrevBgColor;
+                                                delete memoriWidget.dataset.memoriPrevBgColor;
+                                            }
+                                        })
+                                            .catch(err => {
+                                            console.warn('Error attempting to exit fullscreen:', err);
+                                        });
+                                    }
+                                }
+                            }) }) }) })), memori.enableDeepThought &&
+                !!loginToken &&
+                (user === null || user === void 0 ? void 0 : user.pAndCUAccepted) &&
+                hasUserActivatedSpeak &&
+                !!sessionID && (_jsx(Tooltip, { title: t('knownFacts.title') || 'Known facts', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, icon: _jsx(Brain, {}), "aria-label": t('knownFacts.title') || 'Known facts', onClick: () => setShowKnownFactsDrawer(true) }) }) })), memori.enableBoardOfExperts && (_jsx(Tooltip, { title: t('widget.showExpertsInTheBoard') || 'Experts in this board', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, icon: _jsx(Users, {}), disabled: !hasUserActivatedSpeak || !sessionID, "aria-label": t('widget.showExpertsInTheBoard') || 'Experts in this board', onClick: () => setShowExpertsDrawer(true) }) }) })), enableAudio && (_jsx(Tooltip, { title: t('widget.sound') || 'Sound', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, icon: speakerMuted ? _jsx(VolumeX, {}) : _jsx(Volume2, {}), "aria-label": t('widget.sound') || 'Sound', onClick: () => setSpeakerMuted(!speakerMuted) }) }) })), showSettings && hasSettingsContent(layout, additionalSettings) && (_jsx(Tooltip, { title: t('widget.settings') || 'Settings', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, icon: _jsx(Settings, {}), "aria-label": t('widget.settings') || 'Settings', onClick: () => setShowSettingsDrawer(true) }) }) })), showShare && (_jsx(ShareButton, { title: memori.name, memori: memori, sessionID: sessionID, tenant: tenant, showQrCode: true, align: "left", baseUrl: baseUrl, history: history, triggerVariant: buttonVariant }))] }));
+    const sessionInfoConsumptionSubtitle = hasSustainabilityData
+        ? `${formatImpactInReadableUnit(sustainabilityTotals.energy, 'energy', currentLocale)} • ${formatImpactInReadableUnit(sustainabilityTotals.gwp, 'co2', currentLocale)}`
+        : t('widget.noData', { defaultValue: 'Nessun dato disponibile' });
+    const loggedInFullpageRightControls = (_jsxs("div", { className: "memori-header--auth-icon-controls", children: [isConversationStarted && showFullpageDividers && (_jsx(Popover, { className: "memori-header--dropdown", open: infoPopoverOpen, onOpenChange: open => {
+                    setInfoPopoverOpen(open);
+                    if (open) {
+                        setUserPopoverOpen(false);
+                        setPositionPopoverOpen(false);
+                    }
+                }, placement: "bottom-end", sideOffset: 8, closable: false, contentClassName: "memori-dropdown--menu memori-dropdown--auth-menu", slotProps: {
+                    trigger: {
+                        render: (props) => (_jsx(Tooltip, { title: "Info sessione", placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { ...props, variant: buttonVariant, className: cx('memori-header--auth-icon-button', infoPopoverOpen && 'memori-button--active'), "aria-label": "Info sessione", icon: _jsx(MoreVertical, {}) }) }) })),
+                    },
+                }, content: _jsxs("div", { className: "memori-dropdown--auth-content", children: [_jsxs("button", { type: "button", className: "memori-dropdown--auth-row memori-dropdown--auth-row--navigable", onClick: () => {
+                                setShowKnownFactsDrawer(true);
+                                setInfoPopoverOpen(false);
+                            }, children: [_jsx("span", { className: "memori-dropdown--auth-icon-wrap", children: _jsx(Brain, { size: 16 }) }), _jsxs("span", { className: "memori-dropdown--auth-copy", children: [_jsx("span", { className: "memori-dropdown--auth-title", children: t('knownFacts.title') || 'Known facts' }), _jsx("span", { className: "memori-dropdown--auth-subtitle", children: t('widget.knownFactsHint') || 'What I remember about you' })] })] }), hasChatConsumptionData ? (_jsx(ChatConsumptionDropdown, { history: history, triggerVariant: buttonVariant, menuAlign: "start", trigger: triggerProps => (_jsxs("button", { ...triggerProps, type: "button", className: cx('memori-dropdown--auth-row', 'memori-dropdown--auth-row--navigable', triggerProps.className), children: [_jsx("span", { className: "memori-dropdown--auth-icon-wrap", children: _jsx(GasStation, {}) }), _jsxs("span", { className: "memori-dropdown--auth-copy", children: [_jsx("span", { className: "memori-dropdown--auth-title", children: t('widget.aiConsumption') || 'AI usage' }), _jsx("span", { className: "memori-dropdown--auth-subtitle", children: sessionInfoConsumptionSubtitle })] }), _jsx(ChevronDown, { size: 16, "aria-hidden": true })] })) })) : (_jsxs("button", { type: "button", disabled: true, className: "memori-dropdown--auth-row memori-dropdown--auth-row--navigable memori-dropdown--auth-row--disabled", children: [_jsx("span", { className: "memori-dropdown--auth-icon-wrap", children: _jsx(GasStation, {}) }), _jsxs("span", { className: "memori-dropdown--auth-copy", children: [_jsx("span", { className: "memori-dropdown--auth-title", children: t('widget.aiConsumption') || 'AI usage' }), _jsx("span", { className: "memori-dropdown--auth-subtitle", children: sessionInfoConsumptionSubtitle })] }), _jsx(ChevronDown, { size: 16, "aria-hidden": true })] }))] }), children: null })), showFullscreen && fullScreenAvailable && (_jsx(Tooltip, { title: fullScreen
+                    ? t('fullscreenExit') || 'Exit fullscreen'
+                    : t('fullscreenEnter') || 'Enter fullscreen', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, className: "memori-header--auth-icon-button", "aria-label": fullScreen
+                            ? t('fullscreenExit') || 'Exit fullscreen'
+                            : t('fullscreenEnter') || 'Enter fullscreen', icon: fullScreen ? _jsx(Minimize, {}) : _jsx(Maximize, {}), onClick: fullScreenHandler ||
+                            (() => {
+                                var _a;
+                                if (!document.fullscreenElement) {
+                                    const body = layout !== 'HIDDEN_CHAT' && layout !== 'WEBSITE_ASSISTANT'
+                                        ? document.body
+                                        : document.querySelector('.memori-widget');
+                                    if (body) {
+                                        const memoriWidget = document.querySelector('.memori-widget');
+                                        if (memoriWidget) {
+                                            if (memoriWidget.dataset.memoriPrevBgColor === undefined)
+                                                memoriWidget.dataset.memoriPrevBgColor =
+                                                    (_a = memoriWidget.style.backgroundColor) !== null && _a !== void 0 ? _a : '';
+                                            memoriWidget.style.backgroundColor = '';
+                                        }
+                                        body
+                                            .requestFullscreen()
+                                            .then(() => setFullScreen(true))
+                                            .catch(err => {
+                                            console.warn('Error attempting to enable fullscreen:', err);
+                                        });
+                                    }
+                                }
+                                else if (document.exitFullscreen) {
+                                    document
+                                        .exitFullscreen()
+                                        .then(() => {
+                                        var _a;
+                                        setFullScreen(false);
+                                        const memoriWidget = document.querySelector('.memori-widget');
+                                        if (((_a = memoriWidget === null || memoriWidget === void 0 ? void 0 : memoriWidget.dataset) === null || _a === void 0 ? void 0 : _a.memoriPrevBgColor) !== undefined) {
+                                            memoriWidget.style.backgroundColor =
+                                                memoriWidget.dataset.memoriPrevBgColor;
+                                            delete memoriWidget.dataset.memoriPrevBgColor;
+                                        }
+                                    })
+                                        .catch(err => {
+                                        console.warn('Error attempting to exit fullscreen:', err);
+                                    });
+                                }
+                            }) }) }) })), enableAudio && (_jsx(Tooltip, { title: t('widget.sound') || 'Sound', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(Button, { variant: buttonVariant, className: "memori-header--auth-icon-button", "aria-label": t('widget.sound') || 'Sound', icon: speakerMuted ? _jsx(VolumeX, {}) : _jsx(Volume2, {}), onClick: () => setSpeakerMuted(!speakerMuted) }) }) })), memori.needsPosition && (_jsx(Tooltip, { title: t('widget.position') || 'Position', placement: "bottom", children: _jsx("span", { style: { display: 'inline-flex' }, children: _jsx(PositionPopover, { venue: position, setVenue: setVenue, open: positionPopoverOpen, onOpenChange: open => {
+                            setPositionPopoverOpen(open);
+                            if (open) {
+                                setInfoPopoverOpen(false);
+                                setUserPopoverOpen(false);
                             }
-                        }
-                    }) })), memori.enableDeepThought && !!loginToken && (user === null || user === void 0 ? void 0 : user.pAndCUAccepted) && (_jsx(Button, { primary: !!sessionID && !!hasUserActivatedSpeak, shape: "circle", icon: _jsx(DeepThought, {}), className: cx('memori-header--button', 'memori-header--button--knownfacts', hasSpacedButtons && 'memori-header--button-spaced'), disabled: !hasUserActivatedSpeak || !sessionID, onClick: () => setShowKnownFactsDrawer(true), title: t('knownFacts.title') || 'Known facts' })), memori.enableBoardOfExperts && (_jsx(Button, { primary: true, shape: "circle", icon: _jsx(Group, {}), className: cx('memori-header--button', 'memori-header--button--experts', hasSpacedButtons && 'memori-header--button-spaced'), disabled: !hasUserActivatedSpeak || !sessionID, onClick: () => setShowExpertsDrawer(true), title: t('widget.showExpertsInTheBoard') || 'Experts in this board' })), enableAudio && (_jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button--speaker', hasSpacedButtons && 'memori-header--button-spaced', { 'memori-header--button--speaker-muted': speakerMuted }), icon: speakerMuted ? _jsx(SoundDeactivated, {}) : _jsx(Sound, {}), onClick: () => setSpeakerMuted(!speakerMuted), title: t('widget.sound') || 'Sound' })), showSettings &&
-                hasSettingsContent(layout, additionalSettings) && (_jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button-settings', hasSpacedButtons && 'memori-header--button-spaced'), icon: _jsx(Setting, {}), onClick: () => setShowSettingsDrawer(true), title: t('widget.settings') || 'Settings' })), showShare && (_jsx(ShareButton, { className: cx('memori-header--button', 'memori-header--button-share', hasSpacedButtons && 'memori-header--button-spaced'), title: memori.name, memori: memori, sessionID: sessionID, tenant: tenant, showQrCode: true, align: "left", baseUrl: baseUrl, history: history })), showLogin && (_jsx(_Fragment, { children: loginToken && user ? (_jsxs(Dropdown, { placement: "bottom-right", trigger: _jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button-login', hasSpacedButtons && 'memori-header--button-spaced'), icon: _jsx(UserIcon, {}), title: t('login.user') || 'User' }), children: [_jsx("div", { className: "memori-dropdown--user-profile", children: _jsxs("div", { className: "memori-dropdown--user-info", children: [user.avatarURL ? (_jsxs(_Fragment, { children: [_jsx("img", { src: user.avatarURL, alt: user.userName || user.eMail, className: "memori-dropdown--avatar" }), _jsx("input", { type: "file", name: "avatar", id: "avatar", className: "memori-dropdown--avatar-input", onChange: e => {
-                                                    var _a, _b;
-                                                    return updateAvatar((_b = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null);
-                                                }, accept: imgMimeTypes.join(', ') })] })) : (_jsxs("div", { className: "memori-dropdown--avatar-placeholder", children: [_jsx("span", { children: (user.userName || user.eMail || 'U')
-                                                    .charAt(0)
-                                                    .toUpperCase() }), _jsx("input", { type: "file", name: "avatar", id: "avatar", className: "memori-dropdown--avatar-input", onChange: e => {
-                                                    var _a, _b;
-                                                    return updateAvatar((_b = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null);
-                                                }, accept: imgMimeTypes.join(', ') })] })), _jsxs("div", { className: "memori-dropdown--user-details", children: [_jsx("h3", { className: "memori-dropdown--user-name", children: user.userName || t('login.welcomeUser') }), _jsx("p", { className: "memori-dropdown--user-email", children: user.eMail }), _jsx("div", { className: "memori-dropdown--user-badge", children: user.birthDate
-                                                    ? new Date(user.birthDate).toLocaleDateString()
-                                                    : t('login.notSet') })] })] }) }), _jsx("div", { className: "memori-dropdown--actions", children: _jsxs("button", { className: "memori-dropdown--action-button memori-dropdown--action-button--logout", onClick: onLogout, children: [_jsx(Logout, { className: "memori-dropdown--action-icon" }), t('login.logout') || 'Logout'] }) })] })) : (_jsx(Button, { primary: true, shape: "circle", className: cx('memori-header--button', 'memori-header--button-login', hasSpacedButtons && 'memori-header--button-spaced'), icon: _jsx(UserIcon, {}), onClick: () => setShowLoginDrawer(true), title: t('login.login') || 'Login' })) }))] }));
+                        }, triggerButtonVariant: buttonVariant, triggerClassName: "memori-header--auth-icon-button", triggerAriaLabel: t('widget.position') || 'Position', positionerClassName: layout === 'WEBSITE_ASSISTANT'
+                            ? 'memori-position-popover__positioner--website-assistant'
+                            : undefined }) }) })), showShare && (_jsx("span", { className: "memori-header--auth-share-button-wrap", children: _jsx(ShareButton, { title: memori.name, memori: memori, sessionID: sessionID, tenant: tenant, showQrCode: true, align: "left", baseUrl: baseUrl, history: history, triggerVariant: buttonVariant, className: "memori-header--auth-share-button" }) }))] }));
+    const headerControls = (_jsxs("div", { className: cx('memori-header', className, isFullPageChrome && 'memori-header--fullpage', fullpageGuestChrome && 'memori-header--fullpage-guest'), children: [isFullPageChrome && isAuthenticated ? (_jsxs(_Fragment, { children: [fullpagePrimaryHasContent && (_jsx("div", { className: "memori-header--fullpage-primary", children: chatHistoryNode })), fullpagePrimaryHasContent &&
+                        showFullpageChromeDividers &&
+                        !fullpageGuestChrome && (_jsx("div", { className: "memori-header--fullpage-divider", "aria-hidden": "true" })), _jsxs("div", { className: "memori-header--fullpage-secondary", children: [loggedInFullpageRightControls, showFullpageChromeDividers && (_jsx("div", { className: "memori-header--fullpage-divider", "aria-hidden": "true" })), loginNode] })] })) : isFullPageChrome ? (_jsxs(_Fragment, { children: [fullpagePrimaryHasContent && (_jsx("div", { className: "memori-header--fullpage-primary", children: chatHistoryNode })), fullpagePrimaryHasContent &&
+                        fullpageSecondaryHasContent &&
+                        showFullpageChromeDividers &&
+                        !fullpageGuestChrome && (_jsx("div", { className: "memori-header--fullpage-divider", "aria-hidden": "true" })), _jsxs("div", { className: "memori-header--fullpage-secondary", children: [headerActionsBeforeChatHistory, headerActionsAfterChatHistory, fullpagePrimaryHasContent &&
+                                fullpageSecondaryHasContent &&
+                                showFullpageChromeDividers && (_jsx("div", { className: "memori-header--fullpage-divider", "aria-hidden": "true" })), loginNode] })] })) : (_jsxs(_Fragment, { children: [headerActionsBeforeChatHistory, chatHistoryNode, headerActionsAfterChatHistory, loginNode] })), extraActions] }));
+    if (!isFullPageChrome) {
+        return headerControls;
+    }
+    return (_jsxs(_Fragment, { children: [memori && (_jsxs("div", { className: "memori-fullpage-header-brand", children: [brandAvatarSrc ? (_jsx("img", { className: "memori-fullpage-header-brand-icon memori-fullpage-header-brand-icon--avatar", src: brandAvatarSrc, alt: "", role: "presentation" })) : (_jsx("span", { className: "memori-fullpage-header-brand-icon", "aria-hidden": true })), isConversationStarted && (_jsx("span", { className: "memori-fullpage-header-brand-name", title: memori.name, children: memori.name }))] })), _jsx("div", { className: "memori-fullpage-header-actions", children: headerControls })] }));
 };
 export default Header;
 //# sourceMappingURL=Header.js.map