@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/components/Header/Header.tsx

@@ -26,6 +26,7 @@ import {
   Brain,
   MapPin,
   ChevronDown,
+  ChevronUp,
   ChevronRight,
   Users,
   User as UserIcon,
@@ -43,6 +44,7 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
 import { BADGE_EMOJI } from '../../helpers/llmUsage';
 import ChatConsumptionDropdown from './ChatConsumptionDropdown';
+import IconButton from '../IconButton/IconButton';
 import { imgMimeTypes } from '../../helpers/utils';
 import { getResourceUrl } from '../../helpers/media';
 
@@ -57,6 +59,8 @@ export interface Props {
   setVenue: (venue?: Venue) => void;
   positionPopoverOpen: boolean;
   setPositionPopoverOpen: (open: boolean) => void;
+  /** Start geolocation automatically when the position popover opens (StartPanel CTA). */
+  autoStartPositionGeolocation?: boolean;
   setShowSettingsDrawer: (show: boolean) => void;
   setShowChatHistoryDrawer: (show: boolean) => void;
   setShowKnownFactsDrawer: (show: boolean) => void;
@@ -97,6 +101,7 @@ const Header: React.FC<Props> = ({
   setVenue,
   positionPopoverOpen,
   setPositionPopoverOpen,
+  autoStartPositionGeolocation = false,
   setShowSettingsDrawer,
   setShowChatHistoryDrawer,
   setShowKnownFactsDrawer,
@@ -375,20 +380,70 @@ const Header: React.FC<Props> = ({
   };
 
   const isFullPageChrome = layout === 'FULLPAGE' || layout === 'CHAT';
-  const showFullpageChromeDividers = layout !== 'CHAT' && showFullpageDividers;
+  const showFullpageChromeDividers = showFullpageDividers;
   const fullpageGuestChrome = layout === 'FULLPAGE' && !loginToken;
+
+  // Sticky header solid background when the conversation list scrolls.
+  useEffect(() => {
+    if (!isFullPageChrome) return;
+
+    const historyEl = document.querySelector(
+      '.memori-widget .memori-chat--history'
+    ) as HTMLElement | null;
+    if (!historyEl) return;
+
+    const syncScrolled = () => {
+      const scrolled = historyEl.scrollTop > 2;
+      document
+        .querySelectorAll(
+          '.memori-widget .memori-chat-layout--header, .memori-widget .memori-fullpage-top-header, .memori-widget .memori-fullpage-header-row'
+        )
+        .forEach(node => {
+          node.classList.toggle('memori-header--scrolled', scrolled);
+        });
+    };
+
+    syncScrolled();
+    historyEl.addEventListener('scroll', syncScrolled, { passive: true });
+    return () => {
+      historyEl.removeEventListener('scroll', syncScrolled);
+      document
+        .querySelectorAll('.memori-header--scrolled')
+        .forEach(node => node.classList.remove('memori-header--scrolled'));
+    };
+  }, [isFullPageChrome, sessionID, hasUserActivatedSpeak]);
+
   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';
+    layout === 'TOTEM' ? undefined : t('widget.headerHistory') || 'History';
   const fullpageHeaderLoginLabel =
     t('widget.headerLogin') || t('login.login') || 'Login';
-  const isAuthenticated = !!loginToken && !!user;
+  const soundLabel = speakerMuted
+    ? t('widget.soundOff', { defaultValue: 'Audio off' })
+    : t('widget.sound', { defaultValue: 'Audio' });
+  const fullscreenLabel = fullScreen
+    ? t('fullscreenExit') || 'Exit fullscreen'
+    : t('fullscreenEnter') || 'Full screen';
+  const isAuthenticated = !!loginToken && !!user?.userID;
   const isConversationStarted = Boolean(sessionID && hasUserActivatedSpeak);
+  const showKnownFacts =
+    !!memori.enableDeepThought &&
+    !!loginToken &&
+    !!user?.pAndCUAccepted;
+  const showSessionInfoMenu =
+    isConversationStarted &&
+    showFullpageDividers &&
+    (showKnownFacts || showMessageConsumption);
+
+  const brandTitle = memori?.name?.trim() || '';
+  const brandRole = useMemo(() => {
+    const raw = memori?.description?.trim();
+    if (!raw) return '';
+    return raw
+      .replace(/<[^>]+>/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .slice(0, 140);
+  }, [memori?.description]);
 
   const brandAvatarSrc = useMemo(() => {
     if (!isFullPageChrome || !memori) return undefined;
@@ -411,8 +466,7 @@ const Header: React.FC<Props> = ({
     });
   }, [isFullPageChrome, memori, tenant, baseUrl]);
 
-  const fullpagePrimaryHasContent =
-    (showChatHistory && !!loginToken) || showLogin;
+  const fullpagePrimaryHasContent = showChatHistory && !!loginToken;
 
   const fullpageSecondaryHasContent =
     !!memori.needsPosition ||
@@ -420,23 +474,38 @@ const Header: React.FC<Props> = ({
     showClear ||
     showMessageConsumption ||
     (showFullscreen && fullScreenAvailable) ||
-    (memori.enableDeepThought &&
-      !!loginToken &&
-      !!user?.pAndCUAccepted &&
-      hasUserActivatedSpeak &&
-      !!sessionID) ||
+    (showKnownFacts && isConversationStarted) ||
     !!memori.enableBoardOfExperts ||
     enableAudio ||
     !!(showSettings && hasSettingsContent(layout, additionalSettings)) ||
     showShare;
 
+  const loggedInSecondaryHasActions =
+    showSessionInfoMenu ||
+    (showFullscreen && fullScreenAvailable) ||
+    enableAudio ||
+    !!memori.needsPosition ||
+    showShare;
+
+  const showHistoryDivider =
+    showFullpageChromeDividers &&
+    fullpagePrimaryHasContent &&
+    (isAuthenticated
+      ? loggedInSecondaryHasActions || !!showLogin
+      : fullpageSecondaryHasContent || !!showLogin);
+
+  const showLoginDivider =
+    showFullpageChromeDividers &&
+    !!showLogin &&
+    (isAuthenticated ? loggedInSecondaryHasActions : fullpageSecondaryHasContent);
+
   const chatHistoryNode = showChatHistory && !!loginToken && (
     <Tooltip
       title={t('write_and_speak.chatHistory') || 'Chat history'}
       placement="bottom"
     >
       <span style={{ display: 'inline-flex' }}>
-        <Button
+        <IconButton
           variant={buttonVariant}
           className="memori-header--chat-history-button"
           disabled={!loginToken}
@@ -444,15 +513,19 @@ const Header: React.FC<Props> = ({
           icon={<MessageCircle />}
           onClick={() => setShowChatHistoryDrawer(true)}
         >
-          {chatHistoryButtonLabel}
-        </Button>
+          {chatHistoryButtonLabel ? (
+            <span className="memori-header--action-label">
+              {chatHistoryButtonLabel}
+            </span>
+          ) : null}
+        </IconButton>
       </span>
     </Tooltip>
   );
 
   const loginNode = showLogin && (
     <>
-      {loginToken && user ? (
+      {loginToken && user?.userID ? (
         <Popover
           className="memori-header--dropdown"
           open={userPopoverOpen}
@@ -476,20 +549,14 @@ const Header: React.FC<Props> = ({
               render: (props: React.ComponentProps<typeof Button>) => (
                 <Tooltip title={t('login.user') || 'User'} placement="bottom">
                   <span style={{ display: 'inline-flex' }}>
-                    <Button
+                    <IconButton
                       {...props}
+                      active={userPopoverOpen}
                       variant={buttonVariant}
-                      className={cx(
-                        'memori-dropdown--user-trigger-button',
-                        isFullPageChrome &&
-                          'memori-header--fullpage-labeled-trigger',
-                        userPopoverOpen && 'memori-button--active'
-                      )}
+                      className="memori-dropdown--user-trigger-button"
                       aria-label={t('login.user') || 'User'}
                       icon={<UserIcon />}
-                    >
-                      {isFullPageChrome ? fullpageHeaderProfileLabel : null}
-                    </Button>
+                    />
                   </span>
                 </Tooltip>
               ),
@@ -576,15 +643,17 @@ const Header: React.FC<Props> = ({
                 </div>
               </div>
               <div className="memori-dropdown--separator" />
-              <Button
+              <IconButton
                 type="button"
                 variant={buttonVariant}
                 onClick={onLogout}
                 className="memori-dropdown--action-button memori-dropdown--action-button--logout"
                 icon={<LogOut size={18} strokeWidth={2} aria-hidden />}
               >
-                {t('login.logout') || 'Logout'}
-              </Button>
+                <span className="memori-header--action-label">
+                  {t('login.logout') || 'Logout'}
+                </span>
+              </IconButton>
             </div>
           }
         >
@@ -594,9 +663,10 @@ const Header: React.FC<Props> = ({
         <Tooltip title={t('login.login') || 'Login'} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
             <Button
-              variant={buttonVariant}
+              variant={isFullPageChrome ? 'primary' : buttonVariant}
               className="memori-header--button memori-header--button-login"
               icon={<UserIcon />}
+              title={t('login.login') || 'Login'}
               aria-label={t('login.login') || 'Login'}
               onClick={() => setShowLoginDrawer(true)}
             >
@@ -621,6 +691,7 @@ const Header: React.FC<Props> = ({
                 venue={position}
                 setVenue={setVenue}
                 open={positionPopoverOpen}
+                autoStartGeolocation={autoStartPositionGeolocation}
                 onOpenChange={open => {
                   setPositionPopoverOpen(open);
                   if (open) {
@@ -643,7 +714,7 @@ const Header: React.FC<Props> = ({
       {showReload && (
         <Tooltip title={t('reload') || 'Reload'} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               aria-label={t('reload') || 'Reload'}
               icon={<RefreshCw />}
@@ -657,7 +728,7 @@ const Header: React.FC<Props> = ({
       {showClear && (
         <Tooltip title={t('clearHistory') || 'Clear chat'} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               aria-label={t('clearHistory') || 'Clear chat'}
               icon={<Trash2 />}
@@ -686,22 +757,12 @@ const Header: React.FC<Props> = ({
         />
       )}
       {showFullscreen && fullScreenAvailable && (
-        <Tooltip
-          title={
-            fullScreen
-              ? t('fullscreenExit') || 'Exit fullscreen'
-              : t('fullscreenEnter') || 'Enter fullscreen'
-          }
-          placement="bottom"
-        >
+        <Tooltip title={fullscreenLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
-              aria-label={
-                fullScreen
-                  ? t('fullscreenExit') || 'Exit fullscreen'
-                  : t('fullscreenEnter') || 'Enter fullscreen'
-              }
+              title={fullscreenLabel}
+              aria-label={fullscreenLabel}
               icon={fullScreen ? <Maximize /> : <Minimize />}
               onClick={
                 fullScreenHandler ||
@@ -767,17 +828,13 @@ const Header: React.FC<Props> = ({
           </span>
         </Tooltip>
       )}
-      {memori.enableDeepThought &&
-        !!loginToken &&
-        user?.pAndCUAccepted &&
-        hasUserActivatedSpeak &&
-        !!sessionID && (
+      {showKnownFacts && isConversationStarted && (
           <Tooltip
             title={t('knownFacts.title') || 'Known facts'}
             placement="bottom"
           >
             <span style={{ display: 'inline-flex' }}>
-              <Button
+              <IconButton
                 variant={buttonVariant}
                 icon={<Brain />}
                 aria-label={t('knownFacts.title') || 'Known facts'}
@@ -792,7 +849,7 @@ const Header: React.FC<Props> = ({
           placement="bottom"
         >
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               icon={<Users />}
               disabled={!hasUserActivatedSpeak || !sessionID}
@@ -805,12 +862,13 @@ const Header: React.FC<Props> = ({
         </Tooltip>
       )}
       {enableAudio && (
-        <Tooltip title={t('widget.sound') || 'Sound'} placement="bottom">
+        <Tooltip title={soundLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
-              icon={speakerMuted ? <VolumeX /> : <Volume2 />}
-              aria-label={t('widget.sound') || 'Sound'}
+              icon={speakerMuted ? <VolumeX size={20} strokeWidth={2.35} aria-hidden /> : <Volume2 size={20} strokeWidth={2} aria-hidden />}
+              title={soundLabel}
+              aria-label={soundLabel}
               onClick={() => setSpeakerMuted(!speakerMuted)}
             />
           </span>
@@ -825,7 +883,7 @@ const Header: React.FC<Props> = ({
       {showSettings && hasSettingsContent(layout, additionalSettings) && (
         <Tooltip title={t('widget.settings') || 'Settings'} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               icon={<Settings />}
               aria-label={t('widget.settings') || 'Settings'}
@@ -864,7 +922,7 @@ const Header: React.FC<Props> = ({
 
   const loggedInFullpageRightControls = (
     <div className="memori-header--auth-icon-controls">
-      {isConversationStarted && showFullpageDividers && (
+      {showSessionInfoMenu && (
         <Popover
           className="memori-header--dropdown"
           open={infoPopoverOpen}
@@ -884,13 +942,11 @@ const Header: React.FC<Props> = ({
               render: (props: React.ComponentProps<typeof Button>) => (
                 <Tooltip title="Info sessione" placement="bottom">
                   <span style={{ display: 'inline-flex' }}>
-                    <Button
+                    <IconButton
                       {...props}
+                      active={infoPopoverOpen}
                       variant={buttonVariant}
-                      className={cx(
-                        'memori-header--auth-icon-button',
-                        infoPopoverOpen && 'memori-button--active'
-                      )}
+                      className="memori-header--auth-icon-button"
                       aria-label="Info sessione"
                       icon={<MoreVertical />}
                     />
@@ -901,39 +957,43 @@ const Header: React.FC<Props> = ({
           }}
           content={
             <div className="memori-dropdown--auth-content">
-              <button
-                type="button"
-                className="memori-dropdown--auth-row memori-dropdown--auth-row--navigable"
-                onClick={() => {
-                  setShowKnownFactsDrawer(true);
-                  setInfoPopoverOpen(false);
-                }}
-              >
-                <span className="memori-dropdown--auth-icon-wrap">
-                  <Brain size={16} />
-                </span>
-                <span className="memori-dropdown--auth-copy">
-                  <span className="memori-dropdown--auth-title">
-                    {t('knownFacts.title') || 'Known facts'}
+              {showKnownFacts && (
+                <button
+                  type="button"
+                  className="memori-dropdown--auth-row memori-dropdown--auth-row--navigable"
+                  onClick={() => {
+                    setShowKnownFactsDrawer(true);
+                    setInfoPopoverOpen(false);
+                  }}
+                >
+                  <span className="memori-dropdown--auth-icon-wrap">
+                    <Brain size={16} />
                   </span>
-                  <span className="memori-dropdown--auth-subtitle">
-                    {t('widget.knownFactsHint') || 'What I remember about you'}
+                  <span className="memori-dropdown--auth-copy">
+                    <span className="memori-dropdown--auth-title">
+                      {t('knownFacts.title') || 'Known facts'}
+                    </span>
+                    <span className="memori-dropdown--auth-subtitle">
+                      {t('widget.knownFactsHint') || 'What I remember about you'}
+                    </span>
                   </span>
-                </span>
-                {/* <ChevronRight size={16} aria-hidden /> */}
-              </button>
-              {hasChatConsumptionData ? (
+                  {/* <ChevronRight size={16} aria-hidden /> */}
+                </button>
+              )}
+              {showMessageConsumption &&
+                (hasChatConsumptionData ? (
                 <ChatConsumptionDropdown
                   history={history}
                   triggerVariant={buttonVariant}
                   menuAlign="start"
-                  trigger={triggerProps => (
+                  trigger={(triggerProps, { open }) => (
                     <button
                       {...triggerProps}
                       type="button"
                       className={cx(
                         'memori-dropdown--auth-row',
                         'memori-dropdown--auth-row--navigable',
+                        open && 'memori-dropdown--auth-row--active',
                         triggerProps.className
                       )}
                     >
@@ -948,7 +1008,11 @@ const Header: React.FC<Props> = ({
                           {sessionInfoConsumptionSubtitle}
                         </span>
                       </span>
-                      <ChevronDown size={16} aria-hidden />
+                      {open ? (
+                        <ChevronDown size={16} aria-hidden />
+                      ) : (
+                        <ChevronUp size={16} aria-hidden />
+                      )}
                     </button>
                   )}
                 />
@@ -969,9 +1033,9 @@ const Header: React.FC<Props> = ({
                       {sessionInfoConsumptionSubtitle}
                     </span>
                   </span>
-                  <ChevronDown size={16} aria-hidden />
+                  <ChevronUp size={16} aria-hidden />
                 </button>
-              )}
+              ))}
             </div>
           }
         >
@@ -979,23 +1043,13 @@ const Header: React.FC<Props> = ({
         </Popover>
       )}
       {showFullscreen && fullScreenAvailable && (
-        <Tooltip
-          title={
-            fullScreen
-              ? t('fullscreenExit') || 'Exit fullscreen'
-              : t('fullscreenEnter') || 'Enter fullscreen'
-          }
-          placement="bottom"
-        >
+        <Tooltip title={fullscreenLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               className="memori-header--auth-icon-button"
-              aria-label={
-                fullScreen
-                  ? t('fullscreenExit') || 'Exit fullscreen'
-                  : t('fullscreenEnter') || 'Enter fullscreen'
-              }
+              title={fullscreenLabel}
+              aria-label={fullscreenLabel}
               icon={fullScreen ? <Minimize /> : <Maximize />}
               onClick={
                 fullScreenHandler ||
@@ -1057,13 +1111,14 @@ const Header: React.FC<Props> = ({
         </Tooltip>
       )}
       {enableAudio && (
-        <Tooltip title={t('widget.sound') || 'Sound'} placement="bottom">
+        <Tooltip title={soundLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               className="memori-header--auth-icon-button"
-              aria-label={t('widget.sound') || 'Sound'}
-              icon={speakerMuted ? <VolumeX /> : <Volume2 />}
+              title={soundLabel}
+              aria-label={soundLabel}
+              icon={speakerMuted ? <VolumeX size={20} strokeWidth={2.35} aria-hidden /> : <Volume2 size={20} strokeWidth={2} aria-hidden />}
               onClick={() => setSpeakerMuted(!speakerMuted)}
             />
           </span>
@@ -1076,6 +1131,7 @@ const Header: React.FC<Props> = ({
               venue={position}
               setVenue={setVenue}
               open={positionPopoverOpen}
+              autoStartGeolocation={autoStartPositionGeolocation}
               onOpenChange={open => {
                 setPositionPopoverOpen(open);
                 if (open) {
@@ -1114,6 +1170,235 @@ const Header: React.FC<Props> = ({
     </div>
   );
 
+  const handleTotemFullscreen = (
+    e: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    if (fullScreenHandler) {
+      fullScreenHandler(e);
+      return;
+    }
+    if (!document.fullscreenElement) {
+      document.documentElement
+        .requestFullscreen?.()
+        .then(() => setFullScreen(true))
+        .catch(() => {});
+    } else {
+      document
+        .exitFullscreen?.()
+        .then(() => setFullScreen(false))
+        .catch(() => {});
+    }
+  };
+
+  const totemAccountLabel = t('login.user') || 'Account';
+  const totemResetLabel = t('reload') || 'Restart conversation';
+  const totemSettingsLabel = t('widget.settings') || 'Settings';
+  const totemKnownFactsLabel = t('knownFacts.title') || 'Known facts';
+  const totemShowSettings =
+    showSettings && hasSettingsContent(layout, additionalSettings);
+  const totemShowKnownFacts = showKnownFacts && isConversationStarted;
+
+  // TOTEM rail: two-tier grouping inside one bordered container (section 5).
+  // Tier 1 (visible): session utilities — audio, fullscreen, share.
+  // Tier 2 (profile menu): account items — reset, settings, user data, logout.
+  const totemRail = (
+    <div
+      className={cx('memori-totem-rail', className)}
+      role="toolbar"
+      aria-label={String(
+        t('widget.sessionControls', { defaultValue: 'Controlli' })
+      )}
+      aria-orientation="vertical"
+    >
+      <div className="memori-totem-rail--group">
+        {enableAudio && (
+          <Tooltip title={soundLabel} placement="left">
+            <span style={{ display: 'inline-flex' }}>
+              <IconButton
+                variant={buttonVariant}
+                className="memori-totem-rail--button"
+                icon={speakerMuted ? <VolumeX size={20} strokeWidth={2.35} aria-hidden /> : <Volume2 size={20} strokeWidth={2} aria-hidden />}
+                title={soundLabel}
+                aria-label={soundLabel}
+                aria-pressed={speakerMuted}
+                onClick={() => setSpeakerMuted(!speakerMuted)}
+              />
+            </span>
+          </Tooltip>
+        )}
+        {showFullscreen && fullScreenAvailable && (
+          <Tooltip title={fullscreenLabel} placement="left">
+            <span style={{ display: 'inline-flex' }}>
+              <IconButton
+                variant={buttonVariant}
+                className="memori-totem-rail--button"
+                icon={fullScreen ? <Minimize /> : <Maximize />}
+                title={fullscreenLabel}
+                aria-label={fullscreenLabel}
+                aria-pressed={fullScreen}
+                onClick={handleTotemFullscreen}
+              />
+            </span>
+          </Tooltip>
+        )}
+        {showShare && (
+          <ShareButton
+            title={memori.name}
+            memori={memori}
+            sessionID={sessionID}
+            tenant={tenant}
+            showQrCode
+            align="left"
+            baseUrl={baseUrl}
+            history={history}
+            triggerVariant={buttonVariant}
+            className="memori-totem-rail--button"
+          />
+        )}
+      </div>
+
+      <div className="memori-totem-rail--divider" aria-hidden="true" />
+
+      <div className="memori-totem-rail--group">
+        <Popover
+          className="memori-header--dropdown"
+          open={userPopoverOpen}
+          onOpenChange={open => {
+            setUserPopoverOpen(open);
+            if (open) {
+              setInfoPopoverOpen(false);
+              setPositionPopoverOpen(false);
+            }
+          }}
+          placement="left-start"
+          sideOffset={8}
+          closable={false}
+          contentClassName="memori-dropdown--menu memori-totem-rail--menu"
+          slotProps={{
+            trigger: {
+              render: (props: React.ComponentProps<typeof Button>) => (
+                <Tooltip title={totemAccountLabel} placement="left">
+                  <span style={{ display: 'inline-flex' }}>
+                    <IconButton
+                      {...props}
+                      active={userPopoverOpen}
+                      variant={buttonVariant}
+                      className={cx(
+                        'memori-totem-rail--button',
+                        'memori-totem-rail--account-trigger'
+                      )}
+                      title={totemAccountLabel}
+                      aria-label={totemAccountLabel}
+                      icon={<UserIcon />}
+                    />
+                  </span>
+                </Tooltip>
+              ),
+            },
+          }}
+          content={
+            <div className="memori-totem-rail--menu-content">
+              {showLogin && isAuthenticated && (
+                <div className="memori-totem-rail--menu-identity">
+                  <span className="memori-totem-rail--menu-identity-name">
+                    {user?.userName || t('login.welcomeUser')}
+                  </span>
+                  {user?.eMail && (
+                    <span className="memori-totem-rail--menu-identity-email">
+                      {user.eMail}
+                    </span>
+                  )}
+                </div>
+              )}
+              {showReload && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="memori-totem-rail--menu-item"
+                  icon={<RefreshCw size={18} aria-hidden />}
+                  title={totemResetLabel}
+                  aria-label={totemResetLabel}
+                  onClick={() => {
+                    setUserPopoverOpen(false);
+                    window.location.reload();
+                  }}
+                >
+                  {totemResetLabel}
+                </Button>
+              )}
+              {totemShowSettings && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="memori-totem-rail--menu-item"
+                  icon={<Settings size={18} aria-hidden />}
+                  title={totemSettingsLabel}
+                  aria-label={totemSettingsLabel}
+                  onClick={() => {
+                    setUserPopoverOpen(false);
+                    setShowSettingsDrawer(true);
+                  }}
+                >
+                  {totemSettingsLabel}
+                </Button>
+              )}
+              {totemShowKnownFacts && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="memori-totem-rail--menu-item"
+                  icon={<Brain size={18} aria-hidden />}
+                  title={totemKnownFactsLabel}
+                  aria-label={totemKnownFactsLabel}
+                  onClick={() => {
+                    setUserPopoverOpen(false);
+                    setShowKnownFactsDrawer(true);
+                  }}
+                >
+                  {totemKnownFactsLabel}
+                </Button>
+              )}
+              {showLogin &&
+                (isAuthenticated ? (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="memori-totem-rail--menu-item memori-totem-rail--menu-item--logout"
+                    icon={<LogOut size={18} aria-hidden />}
+                    title={t('login.logout') || 'Logout'}
+                    aria-label={t('login.logout') || 'Logout'}
+                    onClick={() => {
+                      setUserPopoverOpen(false);
+                      onLogout?.();
+                    }}
+                  >
+                    {t('login.logout') || 'Logout'}
+                  </Button>
+                ) : (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="memori-totem-rail--menu-item"
+                    icon={<UserIcon size={18} aria-hidden />}
+                    title={t('login.login') || 'Login'}
+                    aria-label={t('login.login') || 'Login'}
+                    onClick={() => {
+                      setUserPopoverOpen(false);
+                      setShowLoginDrawer(true);
+                    }}
+                  >
+                    {t('login.login') || 'Login'}
+                  </Button>
+                ))}
+            </div>
+          }
+        >
+          {null}
+        </Popover>
+      </div>
+    </div>
+  );
+
   const headerControls = (
     <div
       className={cx(
@@ -1130,56 +1415,51 @@ const Header: React.FC<Props> = ({
               {chatHistoryNode}
             </div>
           )}
-          {fullpagePrimaryHasContent &&
-            showFullpageChromeDividers &&
-            !fullpageGuestChrome && (
-              <div
-                className="memori-header--fullpage-divider"
-                aria-hidden="true"
-              />
-            )}
-          <div className="memori-header--fullpage-secondary">
-            {loggedInFullpageRightControls}
-            {showFullpageChromeDividers && (
-              <div
-                className="memori-header--fullpage-divider"
-                aria-hidden="true"
-              />
-            )}
-            {loginNode}
-          </div>
+          {showHistoryDivider && (
+            <div
+              className="memori-header--fullpage-divider"
+              aria-hidden="true"
+            />
+          )}
+          {loggedInSecondaryHasActions && (
+            <div className="memori-header--fullpage-secondary">
+              {loggedInFullpageRightControls}
+            </div>
+          )}
+          {showLoginDivider && (
+            <div
+              className="memori-header--fullpage-divider"
+              aria-hidden="true"
+            />
+          )}
+          {loginNode}
         </>
       ) : isFullPageChrome ? (
         <>
           {fullpagePrimaryHasContent && (
             <div className="memori-header--fullpage-primary">
               {chatHistoryNode}
-              {/* {loginNode} */}
             </div>
           )}
-
-          {fullpagePrimaryHasContent &&
-            fullpageSecondaryHasContent &&
-            showFullpageChromeDividers &&
-            !fullpageGuestChrome && (
-              <div
-                className="memori-header--fullpage-divider"
-                aria-hidden="true"
-              />
-            )}
-          <div className="memori-header--fullpage-secondary">
-            {headerActionsBeforeChatHistory}
-            {headerActionsAfterChatHistory}
-            {fullpagePrimaryHasContent &&
-              fullpageSecondaryHasContent &&
-              showFullpageChromeDividers && (
-                <div
-                  className="memori-header--fullpage-divider"
-                  aria-hidden="true"
-                />
-              )}
-            {loginNode}
-          </div>
+          {showHistoryDivider && (
+            <div
+              className="memori-header--fullpage-divider"
+              aria-hidden="true"
+            />
+          )}
+          {fullpageSecondaryHasContent && (
+            <div className="memori-header--fullpage-secondary">
+              {headerActionsBeforeChatHistory}
+              {headerActionsAfterChatHistory}
+            </div>
+          )}
+          {showLoginDivider && (
+            <div
+              className="memori-header--fullpage-divider"
+              aria-hidden="true"
+            />
+          )}
+          {loginNode}
         </>
       ) : (
         <>
@@ -1193,13 +1473,17 @@ const Header: React.FC<Props> = ({
     </div>
   );
 
+  if (layout === 'TOTEM') {
+    return totemRail;
+  }
+
   if (!isFullPageChrome) {
     return headerControls;
   }
 
   return (
     <>
-      {memori && (
+      {isConversationStarted && memori && (
         <div className="memori-fullpage-header-brand">
           {brandAvatarSrc ? (
             <img
@@ -1211,13 +1495,25 @@ const Header: React.FC<Props> = ({
           ) : (
             <span className="memori-fullpage-header-brand-icon" aria-hidden />
           )}
-          {isConversationStarted && (
-            <span
-              className="memori-fullpage-header-brand-name"
-              title={memori.name}
-            >
-              {memori.name}
-            </span>
+          {(brandTitle || brandRole) && (
+            <div className="memori-fullpage-header-brand-text">
+              {brandTitle ? (
+                <span
+                  className="memori-fullpage-header-brand-name"
+                  title={brandTitle}
+                >
+                  {brandTitle}
+                </span>
+              ) : null}
+              {brandRole ? (
+                <span
+                  className="memori-fullpage-header-brand-role"
+                  title={brandRole}
+                >
+                  {brandRole}
+                </span>
+              ) : null}
+            </div>
           )}
         </div>
       )}