@memori.ai/memori-react 9.0.0-alpha.1 → 9.0.0-alpha.10

package/src/components/Header/Header.tsx

@@ -26,6 +26,7 @@ import {
   Brain,
   MapPin,
   ChevronDown,
+  ChevronUp,
   ChevronRight,
   Users,
   User as UserIcon,
@@ -377,19 +378,61 @@ const Header: React.FC<Props> = ({
   const isFullPageChrome = layout === 'FULLPAGE' || layout === 'CHAT';
   const showFullpageChromeDividers = layout !== 'CHAT' && 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 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;
   const isConversationStarted = Boolean(sessionID && hasUserActivatedSpeak);
 
+  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;
 
@@ -481,15 +524,11 @@ const Header: React.FC<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={<UserIcon />}
-                    >
-                      {isFullPageChrome ? fullpageHeaderProfileLabel : null}
-                    </Button>
+                    />
                   </span>
                 </Tooltip>
               ),
@@ -594,9 +633,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)}
             >
@@ -686,22 +726,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
               variant={buttonVariant}
-              aria-label={
-                fullScreen
-                  ? t('fullscreenExit') || 'Exit fullscreen'
-                  : t('fullscreenEnter') || 'Enter fullscreen'
-              }
+              title={fullscreenLabel}
+              aria-label={fullscreenLabel}
               icon={fullScreen ? <Maximize /> : <Minimize />}
               onClick={
                 fullScreenHandler ||
@@ -805,12 +835,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
               variant={buttonVariant}
               icon={speakerMuted ? <VolumeX /> : <Volume2 />}
-              aria-label={t('widget.sound') || 'Sound'}
+              title={soundLabel}
+              aria-label={soundLabel}
               onClick={() => setSpeakerMuted(!speakerMuted)}
             />
           </span>
@@ -927,13 +958,14 @@ const Header: React.FC<Props> = ({
                   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 +980,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,7 +1005,7 @@ const Header: React.FC<Props> = ({
                       {sessionInfoConsumptionSubtitle}
                     </span>
                   </span>
-                  <ChevronDown size={16} aria-hidden />
+                  <ChevronUp size={16} aria-hidden />
                 </button>
               )}
             </div>
@@ -979,23 +1015,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
               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,12 +1083,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
               variant={buttonVariant}
               className="memori-header--auth-icon-button"
-              aria-label={t('widget.sound') || 'Sound'}
+              title={soundLabel}
+              aria-label={soundLabel}
               icon={speakerMuted ? <VolumeX /> : <Volume2 />}
               onClick={() => setSpeakerMuted(!speakerMuted)}
             />
@@ -1114,6 +1141,241 @@ 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 =
+    !!memori.enableDeepThought &&
+    !!loginToken &&
+    !!user?.pAndCUAccepted &&
+    hasUserActivatedSpeak &&
+    !!sessionID;
+
+  // 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' }}>
+              <Button
+                variant={buttonVariant}
+                className="memori-totem-rail--button"
+                icon={speakerMuted ? <VolumeX /> : <Volume2 />}
+                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' }}>
+              <Button
+                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' }}>
+                    <Button
+                      {...props}
+                      variant={buttonVariant}
+                      className={cx(
+                        'memori-totem-rail--button',
+                        'memori-totem-rail--account-trigger',
+                        userPopoverOpen && 'memori-button--active'
+                      )}
+                      title={totemAccountLabel}
+                      aria-label={totemAccountLabel}
+                      icon={<UserIcon />}
+                    />
+                  </span>
+                </Tooltip>
+              ),
+            },
+          }}
+          content={
+            <div className="memori-totem-rail--menu-content">
+              {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>
+              )}
+              {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>
+              ) : (
+                showLogin && (
+                  <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(
@@ -1193,6 +1455,10 @@ const Header: React.FC<Props> = ({
     </div>
   );
 
+  if (layout === 'TOTEM') {
+    return totemRail;
+  }
+
   if (!isFullPageChrome) {
     return headerControls;
   }
@@ -1211,13 +1477,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>
       )}