@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.17

package/src/components/Header/Header.css

@@ -186,10 +186,16 @@
     opacity: 0.6;
 }
 
-/* Logout action */
-.memori-dropdown--action-button.memori-dropdown--action-button--logout {
+/* Logout action — full-width labeled control inside user menu */
+.memori-dropdown--action-button.memori-dropdown--action-button--logout,
+.memori-widget
+    .memori-icon-button.memori-icon-button--labeled.memori-dropdown--action-button--logout.memori-button {
     display: flex;
     width: 100%;
+    min-width: 0;
+    max-width: none;
+    height: auto;
+    min-height: var(--memori-icon-button-size, 36px);
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
@@ -240,8 +246,8 @@
 }
 
 .memori-header--button svg {
-    width: 1em;
-    height: 1em;
+    width: 1.25em;
+    height: 1.25em;
     font-size: 1em;
     line-height: 1;
 }
@@ -250,6 +256,19 @@
     fill: currentColor;
 }
 
+/* Accedi / login CTA — ~1.8:1 horizontal:vertical padding, height aligned to icon tools */
+.memori-header .memori-header--button-login.memori-button {
+    height: var(--memori-icon-button-size, 40px);
+    min-height: var(--memori-icon-button-size, 40px);
+    padding: 0.5rem 0.9rem;
+    gap: 0.4rem;
+}
+
+.memori-header .memori-header--button-login.memori-button svg {
+    width: var(--memori-icon-button-icon-size, 20px);
+    height: var(--memori-icon-button-icon-size, 20px);
+}
+
 .memori-header--position {
     display: inline-flex;
     align-items: center;
@@ -302,10 +321,175 @@
     pointer-events: none;
 }
 
-.memori-header .memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled),
+.memori-header .memori-icon-button.memori-button.memori-icon-button--active:not(:disabled):not(.memori-button--disabled),
 .memori-header
-    .memori-dropdown--user-trigger-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary, #3b82f6) 40%, transparent);
+    .memori-dropdown--user-trigger-button.memori-icon-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
+    /* Soft active owned by IconButton.css — do not use CTA ring/fill here */
+    box-shadow: none;
+}
+
+/* Header (+ mobile overflow) icon tools: primary icon on hover (not logout / recording) */
+.memori-widget
+    .memori-header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording,
+        .memori-dropdown--action-button--logout
+    ),
+.memori-widget
+    .memori-fullpage-header-row
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    ),
+.memori-widget
+    .memori-chat-layout--header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    ),
+.memori-widget
+    .memori-chat-layout--overflow-trigger.memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled
+    ) {
+    color: var(--memori-primary);
+}
+
+.memori-widget
+    .memori-header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording,
+        .memori-dropdown--action-button--logout
+    )
+    svg,
+.memori-widget
+    .memori-fullpage-header-row
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    )
+    svg,
+.memori-widget
+    .memori-chat-layout--header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    )
+    svg,
+.memori-widget
+    .memori-chat-layout--overflow-trigger.memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled
+    )
+    svg {
+    color: var(--memori-primary);
+}
+
+/* Dark: keep white at rest, but still use primary on hover for icon tools */
+.memori-widget[data-theme='dark']
+    .memori-header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording,
+        .memori-dropdown--action-button--logout
+    ),
+[data-theme='dark']
+    .memori-widget
+    .memori-header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording,
+        .memori-dropdown--action-button--logout
+    ),
+.memori-widget[data-theme='dark']
+    .memori-fullpage-header-row
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    ),
+[data-theme='dark']
+    .memori-widget
+    .memori-fullpage-header-row
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    ),
+.memori-widget[data-theme='dark']
+    .memori-chat-layout--overflow-trigger.memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled
+    ),
+[data-theme='dark']
+    .memori-widget
+    .memori-chat-layout--overflow-trigger.memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled
+    ) {
+    color: var(--memori-primary);
+}
+
+.memori-widget[data-theme='dark']
+    .memori-header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording,
+        .memori-dropdown--action-button--logout
+    )
+    svg,
+[data-theme='dark']
+    .memori-widget
+    .memori-header
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording,
+        .memori-dropdown--action-button--logout
+    )
+    svg,
+.memori-widget[data-theme='dark']
+    .memori-fullpage-header-row
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    )
+    svg,
+[data-theme='dark']
+    .memori-widget
+    .memori-fullpage-header-row
+    .memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled,
+        .memori-icon-button--recording
+    )
+    svg,
+.memori-widget[data-theme='dark']
+    .memori-chat-layout--overflow-trigger.memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled
+    )
+    svg,
+[data-theme='dark']
+    .memori-widget
+    .memori-chat-layout--overflow-trigger.memori-icon-button.memori-button:hover:not(
+        :disabled,
+        .memori-button--disabled
+    )
+    svg {
+    color: var(--memori-primary);
 }
 
 .memori-dropdown--avatar-input {
@@ -576,19 +760,9 @@
     gap: 0.5rem;
 }
 
-.memori-header--auth-icon-button {
-    width: 38px;
-    min-width: 38px;
-    height: 38px;
-    min-height: 38px;
-    padding: 8px;
-    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
-    background: transparent;
-}
-
 .memori-header--auth-icon-button:has(.memori-header--action-label) {
     width: auto;
-    min-width: 38px;
+    min-width: var(--memori-icon-button-size, 36px);
     gap: 0.35rem;
     padding-inline: 10px;
 }
@@ -600,10 +774,6 @@
     white-space: nowrap;
 }
 
-.memori-header--auth-icon-button:hover {
-    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
-}
-
 .memori-dropdown--auth-menu {
     min-width: 320px;
     padding: 0.45rem;

package/src/components/Header/Header.tsx

@@ -44,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';
 
@@ -58,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;
@@ -98,6 +101,7 @@ const Header: React.FC<Props> = ({
   setVenue,
   positionPopoverOpen,
   setPositionPopoverOpen,
+  autoStartPositionGeolocation = false,
   setShowSettingsDrawer,
   setShowChatHistoryDrawer,
   setShowKnownFactsDrawer,
@@ -419,7 +423,7 @@ const Header: React.FC<Props> = ({
   const fullscreenLabel = fullScreen
     ? t('fullscreenExit') || 'Exit fullscreen'
     : t('fullscreenEnter') || 'Full screen';
-  const isAuthenticated = !!loginToken && !!user;
+  const isAuthenticated = !!loginToken && !!user?.userID;
   const isConversationStarted = Boolean(sessionID && hasUserActivatedSpeak);
 
   const brandTitle = memori?.name?.trim() || '';
@@ -479,7 +483,7 @@ const Header: React.FC<Props> = ({
       placement="bottom"
     >
       <span style={{ display: 'inline-flex' }}>
-        <Button
+        <IconButton
           variant={buttonVariant}
           className="memori-header--chat-history-button"
           disabled={!loginToken}
@@ -487,15 +491,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}
@@ -519,13 +527,11 @@ 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',
-                        userPopoverOpen && 'memori-button--active'
-                      )}
+                      className="memori-dropdown--user-trigger-button"
                       aria-label={t('login.user') || 'User'}
                       icon={<UserIcon />}
                     />
@@ -615,15 +621,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>
           }
         >
@@ -661,6 +669,7 @@ const Header: React.FC<Props> = ({
                 venue={position}
                 setVenue={setVenue}
                 open={positionPopoverOpen}
+                autoStartGeolocation={autoStartPositionGeolocation}
                 onOpenChange={open => {
                   setPositionPopoverOpen(open);
                   if (open) {
@@ -683,7 +692,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 />}
@@ -697,7 +706,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 />}
@@ -728,7 +737,7 @@ const Header: React.FC<Props> = ({
       {showFullscreen && fullScreenAvailable && (
         <Tooltip title={fullscreenLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               title={fullscreenLabel}
               aria-label={fullscreenLabel}
@@ -807,7 +816,7 @@ const Header: React.FC<Props> = ({
             placement="bottom"
           >
             <span style={{ display: 'inline-flex' }}>
-              <Button
+              <IconButton
                 variant={buttonVariant}
                 icon={<Brain />}
                 aria-label={t('knownFacts.title') || 'Known facts'}
@@ -822,7 +831,7 @@ const Header: React.FC<Props> = ({
           placement="bottom"
         >
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               icon={<Users />}
               disabled={!hasUserActivatedSpeak || !sessionID}
@@ -837,9 +846,9 @@ const Header: React.FC<Props> = ({
       {enableAudio && (
         <Tooltip title={soundLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
-              icon={speakerMuted ? <VolumeX /> : <Volume2 />}
+              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)}
@@ -856,7 +865,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'}
@@ -915,13 +924,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 />}
                     />
@@ -1017,7 +1024,7 @@ const Header: React.FC<Props> = ({
       {showFullscreen && fullScreenAvailable && (
         <Tooltip title={fullscreenLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               className="memori-header--auth-icon-button"
               title={fullscreenLabel}
@@ -1085,12 +1092,12 @@ const Header: React.FC<Props> = ({
       {enableAudio && (
         <Tooltip title={soundLabel} placement="bottom">
           <span style={{ display: 'inline-flex' }}>
-            <Button
+            <IconButton
               variant={buttonVariant}
               className="memori-header--auth-icon-button"
               title={soundLabel}
               aria-label={soundLabel}
-              icon={speakerMuted ? <VolumeX /> : <Volume2 />}
+              icon={speakerMuted ? <VolumeX size={20} strokeWidth={2.35} aria-hidden /> : <Volume2 size={20} strokeWidth={2} aria-hidden />}
               onClick={() => setSpeakerMuted(!speakerMuted)}
             />
           </span>
@@ -1103,6 +1110,7 @@ const Header: React.FC<Props> = ({
               venue={position}
               setVenue={setVenue}
               open={positionPopoverOpen}
+              autoStartGeolocation={autoStartPositionGeolocation}
               onOpenChange={open => {
                 setPositionPopoverOpen(open);
                 if (open) {
@@ -1190,10 +1198,10 @@ const Header: React.FC<Props> = ({
         {enableAudio && (
           <Tooltip title={soundLabel} placement="left">
             <span style={{ display: 'inline-flex' }}>
-              <Button
+              <IconButton
                 variant={buttonVariant}
                 className="memori-totem-rail--button"
-                icon={speakerMuted ? <VolumeX /> : <Volume2 />}
+                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}
@@ -1205,7 +1213,7 @@ const Header: React.FC<Props> = ({
         {showFullscreen && fullScreenAvailable && (
           <Tooltip title={fullscreenLabel} placement="left">
             <span style={{ display: 'inline-flex' }}>
-              <Button
+              <IconButton
                 variant={buttonVariant}
                 className="memori-totem-rail--button"
                 icon={fullScreen ? <Minimize /> : <Maximize />}
@@ -1255,13 +1263,13 @@ const Header: React.FC<Props> = ({
               render: (props: React.ComponentProps<typeof Button>) => (
                 <Tooltip title={totemAccountLabel} placement="left">
                   <span style={{ display: 'inline-flex' }}>
-                    <Button
+                    <IconButton
                       {...props}
+                      active={userPopoverOpen}
                       variant={buttonVariant}
                       className={cx(
                         'memori-totem-rail--button',
-                        'memori-totem-rail--account-trigger',
-                        userPopoverOpen && 'memori-button--active'
+                        'memori-totem-rail--account-trigger'
                       )}
                       title={totemAccountLabel}
                       aria-label={totemAccountLabel}
@@ -1274,7 +1282,7 @@ const Header: React.FC<Props> = ({
           }}
           content={
             <div className="memori-totem-rail--menu-content">
-              {isAuthenticated && (
+              {showLogin && isAuthenticated && (
                 <div className="memori-totem-rail--menu-identity">
                   <span className="memori-totem-rail--menu-identity-name">
                     {user?.userName || t('login.welcomeUser')}
@@ -1334,23 +1342,23 @@ const Header: React.FC<Props> = ({
                   {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 && (
+              {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"
@@ -1365,8 +1373,7 @@ const Header: React.FC<Props> = ({
                   >
                     {t('login.login') || 'Login'}
                   </Button>
-                )
-              )}
+                ))}
             </div>
           }
         >