@memori.ai/memori-react 9.0.0-alpha.20 → 9.0.0-alpha.22

package/src/components/Header/Header.css

@@ -24,7 +24,7 @@
     padding: var(--memori-spacing-md);
     border: 1px solid rgba(0, 0, 0, 0.06);
     border-radius: 14px;
-    background: var(--memori-background, #fff);
+    background: var(--memori-secondary-background, #fff);
     box-shadow: var(--memori-shadow-lg);
 }
 
@@ -161,7 +161,7 @@
 .memori-dropdown--user-email {
     overflow: hidden;
     margin: 0;
-    color: var(--memori-text-muted, #666);
+    color: var(--memori-neutral, #666);
     font-size: 0.875rem;
     line-height: 1.35;
     text-overflow: ellipsis;
@@ -316,7 +316,7 @@
     height: 0.5rem;
     border-radius: 50%;
     background: #22c55e;
-    box-shadow: 0 0 0 2px var(--memori-secondary-background, var(--memori-background, #fff));
+    box-shadow: 0 0 0 2px var(--memori-secondary-background, var(--memori-secondary-background, #fff));
     content: '';
     pointer-events: none;
 }
@@ -513,6 +513,11 @@
     margin-left: -10px;
 }
 
+/* Nested inside the session Popover (z-index 1300); default Dropdown is 1001. */
+.memori-dropdown__positioner:has(.memori-dropdown--sustainability-menu) {
+    z-index: 1400;
+}
+
 .memori-dropdown--sustainability-title {
     padding-bottom: 12px;
     border-bottom: 1px solid rgba(15, 23, 42, 0.08);

package/src/components/Header/Header.stories.tsx

@@ -11,7 +11,7 @@ import './Header.css';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Widget/Header',
+  title: 'Compositions/Header',
   component: Header,
   argTypes: {
     showShare: {

package/src/components/Header/Header.tsx

@@ -426,9 +426,7 @@ const Header: React.FC<Props> = ({
   const isAuthenticated = !!loginToken && !!user?.userID;
   const isConversationStarted = Boolean(sessionID && hasUserActivatedSpeak);
   const showKnownFacts =
-    !!memori.enableDeepThought &&
-    !!loginToken &&
-    !!user?.pAndCUAccepted;
+    !!memori.enableDeepThought && !!loginToken && !!user?.pAndCUAccepted;
   const showSessionInfoMenu =
     isConversationStarted &&
     showFullpageDividers &&
@@ -441,8 +439,7 @@ const Header: React.FC<Props> = ({
     return raw
       .replace(/<[^>]+>/g, ' ')
       .replace(/\s+/g, ' ')
-      .trim()
-      .slice(0, 140);
+      .trim();
   }, [memori?.description]);
 
   const brandAvatarSrc = useMemo(() => {
@@ -497,7 +494,9 @@ const Header: React.FC<Props> = ({
   const showLoginDivider =
     showFullpageChromeDividers &&
     !!showLogin &&
-    (isAuthenticated ? loggedInSecondaryHasActions : fullpageSecondaryHasContent);
+    (isAuthenticated
+      ? loggedInSecondaryHasActions
+      : fullpageSecondaryHasContent);
 
   const chatHistoryNode = showChatHistory && !!loginToken && (
     <Tooltip
@@ -829,20 +828,20 @@ const Header: React.FC<Props> = ({
         </Tooltip>
       )}
       {showKnownFacts && isConversationStarted && (
-          <Tooltip
-            title={t('knownFacts.title') || 'Known facts'}
-            placement="bottom"
-          >
-            <span style={{ display: 'inline-flex' }}>
-              <IconButton
-                variant={buttonVariant}
-                icon={<Brain />}
-                aria-label={t('knownFacts.title') || 'Known facts'}
-                onClick={() => setShowKnownFactsDrawer(true)}
-              />
-            </span>
-          </Tooltip>
-        )}
+        <Tooltip
+          title={t('knownFacts.title') || 'Known facts'}
+          placement="bottom"
+        >
+          <span style={{ display: 'inline-flex' }}>
+            <IconButton
+              variant={buttonVariant}
+              icon={<Brain />}
+              aria-label={t('knownFacts.title') || 'Known facts'}
+              onClick={() => setShowKnownFactsDrawer(true)}
+            />
+          </span>
+        </Tooltip>
+      )}
       {memori.enableBoardOfExperts && (
         <Tooltip
           title={t('widget.showExpertsInTheBoard') || 'Experts in this board'}
@@ -866,7 +865,13 @@ const Header: React.FC<Props> = ({
           <span style={{ display: 'inline-flex' }}>
             <IconButton
               variant={buttonVariant}
-              icon={speakerMuted ? <VolumeX size={20} strokeWidth={2.35} aria-hidden /> : <Volume2 size={20} strokeWidth={2} aria-hidden />}
+              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)}
@@ -974,7 +979,8 @@ const Header: React.FC<Props> = ({
                       {t('knownFacts.title') || 'Known facts'}
                     </span>
                     <span className="memori-dropdown--auth-subtitle">
-                      {t('widget.knownFactsHint') || 'What I remember about you'}
+                      {t('widget.knownFactsHint') ||
+                        'What I remember about you'}
                     </span>
                   </span>
                   {/* <ChevronRight size={16} aria-hidden /> */}
@@ -982,60 +988,60 @@ const Header: React.FC<Props> = ({
               )}
               {showMessageConsumption &&
                 (hasChatConsumptionData ? (
-                <ChatConsumptionDropdown
-                  history={history}
-                  triggerVariant={buttonVariant}
-                  menuAlign="start"
-                  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
-                      )}
-                    >
-                      <span className="memori-dropdown--auth-icon-wrap">
-                        <GasStation />
-                      </span>
-                      <span className="memori-dropdown--auth-copy">
-                        <span className="memori-dropdown--auth-title">
-                          {t('widget.aiConsumption') || 'AI usage'}
+                  <ChatConsumptionDropdown
+                    history={history}
+                    triggerVariant={buttonVariant}
+                    menuAlign="start"
+                    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
+                        )}
+                      >
+                        <span className="memori-dropdown--auth-icon-wrap">
+                          <GasStation />
                         </span>
-                        <span className="memori-dropdown--auth-subtitle">
-                          {sessionInfoConsumptionSubtitle}
+                        <span className="memori-dropdown--auth-copy">
+                          <span className="memori-dropdown--auth-title">
+                            {t('widget.aiConsumption') || 'AI usage'}
+                          </span>
+                          <span className="memori-dropdown--auth-subtitle">
+                            {sessionInfoConsumptionSubtitle}
+                          </span>
                         </span>
-                      </span>
-                      {open ? (
-                        <ChevronDown size={16} aria-hidden />
-                      ) : (
-                        <ChevronUp size={16} aria-hidden />
-                      )}
-                    </button>
-                  )}
-                />
-              ) : (
-                <button
-                  type="button"
-                  disabled
-                  className="memori-dropdown--auth-row memori-dropdown--auth-row--navigable memori-dropdown--auth-row--disabled"
-                >
-                  <span className="memori-dropdown--auth-icon-wrap">
-                    <GasStation />
-                  </span>
-                  <span className="memori-dropdown--auth-copy">
-                    <span className="memori-dropdown--auth-title">
-                      {t('widget.aiConsumption') || 'AI usage'}
+                        {open ? (
+                          <ChevronDown size={16} aria-hidden />
+                        ) : (
+                          <ChevronUp size={16} aria-hidden />
+                        )}
+                      </button>
+                    )}
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    disabled
+                    className="memori-dropdown--auth-row memori-dropdown--auth-row--navigable memori-dropdown--auth-row--disabled"
+                  >
+                    <span className="memori-dropdown--auth-icon-wrap">
+                      <GasStation />
                     </span>
-                    <span className="memori-dropdown--auth-subtitle">
-                      {sessionInfoConsumptionSubtitle}
+                    <span className="memori-dropdown--auth-copy">
+                      <span className="memori-dropdown--auth-title">
+                        {t('widget.aiConsumption') || 'AI usage'}
+                      </span>
+                      <span className="memori-dropdown--auth-subtitle">
+                        {sessionInfoConsumptionSubtitle}
+                      </span>
                     </span>
-                  </span>
-                  <ChevronUp size={16} aria-hidden />
-                </button>
-              ))}
+                    <ChevronUp size={16} aria-hidden />
+                  </button>
+                ))}
             </div>
           }
         >
@@ -1118,7 +1124,13 @@ const Header: React.FC<Props> = ({
               className="memori-header--auth-icon-button"
               title={soundLabel}
               aria-label={soundLabel}
-              icon={speakerMuted ? <VolumeX size={20} strokeWidth={2.35} aria-hidden /> : <Volume2 size={20} strokeWidth={2} aria-hidden />}
+              icon={
+                speakerMuted ? (
+                  <VolumeX size={20} strokeWidth={2.35} aria-hidden />
+                ) : (
+                  <Volume2 size={20} strokeWidth={2} aria-hidden />
+                )
+              }
               onClick={() => setSpeakerMuted(!speakerMuted)}
             />
           </span>
@@ -1170,9 +1182,7 @@ const Header: React.FC<Props> = ({
     </div>
   );
 
-  const handleTotemFullscreen = (
-    e: React.MouseEvent<HTMLButtonElement>
-  ) => {
+  const handleTotemFullscreen = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (fullScreenHandler) {
       fullScreenHandler(e);
       return;
@@ -1194,13 +1204,15 @@ const Header: React.FC<Props> = ({
   const totemResetLabel = t('reload') || 'Restart conversation';
   const totemSettingsLabel = t('widget.settings') || 'Settings';
   const totemKnownFactsLabel = t('knownFacts.title') || 'Known facts';
+  const totemChatHistoryLabel =
+    t('write_and_speak.chatHistory') || 'Chat history';
   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.
+  // Tier 1 (visible): session utilities — audio, fullscreen, share, reload, settings, history.
+  // Tier 2 (profile menu): account items — user data, logout.
   const totemRail = (
     <div
       className={cx('memori-totem-rail', className)}
@@ -1217,7 +1229,13 @@ const Header: React.FC<Props> = ({
               <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 />}
+                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}
@@ -1255,6 +1273,50 @@ const Header: React.FC<Props> = ({
             className="memori-totem-rail--button"
           />
         )}
+        {showReload && (
+          <Tooltip title={totemResetLabel} placement="left">
+            <span style={{ display: 'inline-flex' }}>
+              <IconButton
+                variant={buttonVariant}
+                className="memori-totem-rail--button"
+                icon={<RefreshCw />}
+                title={totemResetLabel}
+                aria-label={totemResetLabel}
+                onClick={() => {
+                  window.location.reload();
+                }}
+              />
+            </span>
+          </Tooltip>
+        )}
+        {totemShowSettings && (
+          <Tooltip title={totemSettingsLabel} placement="left">
+            <span style={{ display: 'inline-flex' }}>
+              <IconButton
+                variant={buttonVariant}
+                className="memori-totem-rail--button"
+                icon={<Settings />}
+                title={totemSettingsLabel}
+                aria-label={totemSettingsLabel}
+                onClick={() => setShowSettingsDrawer(true)}
+              />
+            </span>
+          </Tooltip>
+        )}
+        {showChatHistory && !!loginToken && (
+          <Tooltip title={totemChatHistoryLabel} placement="left">
+            <span style={{ display: 'inline-flex' }}>
+              <IconButton
+                variant={buttonVariant}
+                className="memori-totem-rail--button"
+                icon={<MessageCircle />}
+                title={totemChatHistoryLabel}
+                aria-label={totemChatHistoryLabel}
+                onClick={() => setShowChatHistoryDrawer(true)}
+              />
+            </span>
+          </Tooltip>
+        )}
       </div>
 
       <div className="memori-totem-rail--divider" aria-hidden="true" />
@@ -1310,38 +1372,6 @@ const Header: React.FC<Props> = ({
                   )}
                 </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"
@@ -1506,12 +1536,11 @@ const Header: React.FC<Props> = ({
                 </span>
               ) : null}
               {brandRole ? (
-                <span
-                  className="memori-fullpage-header-brand-role"
-                  title={brandRole}
-                >
-                  {brandRole}
-                </span>
+                <Tooltip title={brandRole} placement="bottom">
+                  <span className="memori-fullpage-header-brand-role">
+                    {brandRole}
+                  </span>
+                </Tooltip>
               ) : null}
             </div>
           )}

package/src/components/KnownFacts/KnownFacts.css

@@ -21,7 +21,7 @@
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
-    border: 1px solid var(--memori-color-border, #e2e8f0);
+    border: 1px solid var(--memori-border-color, #e2e8f0);
     border-radius: 8px;
 }
 

package/src/components/KnownFacts/KnownFacts.stories.tsx

@@ -9,7 +9,7 @@ import './KnownFacts.css';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Known Facts',
+  title: 'Surfaces/Known Facts',
   component: KnownFacts,
   argTypes: {
     visible: {
@@ -40,8 +40,6 @@ const Template: Story<Props> = args => (
   </I18nWrapper>
 );
 
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 Default.args = {
   visible: true,
@@ -61,23 +59,3 @@ WithPaginatedData.args = {
     knownFactID: fact.knownFactID + index,
   })),
 };
-
-export const WithRealDataLocalhost = Template.bind({});
-WithRealDataLocalhost.args = {
-  visible: true,
-  sessionID: '5841f5f9-3315-4a5a-9b62-33b13d5a27fd',
-  memori: {
-    memoriName: 'test memori',
-    ownerUserName: 'nicola',
-    memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
-    ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-    tenantID: 'app.memorytwin.com',
-    apiURL: 'http://localhost:7778',
-    baseURL: 'http://localhost:3000',
-    uiLang: 'EN',
-    lang: 'IT',
-    layout: 'FULLPAGE',
-    showShare: 'true',
-    integrationID: '82f017cc-450b-4c47-acf5-47910d336ce9',
-  },
-};

package/src/components/KnownFacts/KnownFacts.tsx

@@ -14,12 +14,9 @@ import {
   Table,
   useAlertManager,
   createAlertOptions,
+  type ColumnDef,
 } from '@memori.ai/ui';
-import type {
-  ColumnDef,
-  PaginationState,
-  Updater,
-} from '@tanstack/react-table';
+import type { PaginationState, Updater } from '@tanstack/react-table';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
 import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
@@ -124,10 +121,6 @@ const KnownFacts = ({
     () =>
       t('knownFacts.selectedRows', {
         count: bulkDeleteIds.length,
-        defaultValue:
-          bulkDeleteIds.length === 1
-            ? '{{count}} row selected'
-            : '{{count}} rows selected',
       }),
     [bulkDeleteIds.length, t]
   );
@@ -186,6 +179,7 @@ const KnownFacts = ({
           <Modal
           container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
+          stacking="stacked"
           open={bulkDeleteModalVisible}
           closable
           title={
@@ -213,7 +207,6 @@ const KnownFacts = ({
             <>
               <Button
                 variant="ghost"
-                danger
                 onClick={() => {
                   setBulkDeleteModalVisible(false);
                   setBulkDeleteIds([]);
@@ -328,6 +321,7 @@ const KnownFacts = ({
         <Modal
           container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
+          stacking="stacked"
           open={deleteModalVisibleFor !== undefined}
           closable
           title={t('knownFacts.deleteConfirmTitle')}
@@ -341,7 +335,6 @@ const KnownFacts = ({
             <>
               <Button
                 variant="ghost"
-                danger
                 onClick={() => {
                   setDeleteModalVisibleFor(undefined);
                 }}

package/src/components/LoginDrawer/LoginDrawer.css

@@ -1,6 +1,6 @@
 /* ===== LOGIN DRAWER BASE STYLES ===== */
 .memori--login-drawer {
-    z-index: 10000;
+    z-index: 1400;
 }
 
 .memori--login-drawer .memori-drawer__body {
@@ -28,21 +28,12 @@
 }
 
 .memori--login-drawer .memori-drawer--panel {
-    --memori-drawer--width: 100%;
-    --memori-drawer--width--md: 60%;
-    --memori-drawer--width--lg: 40%;
     height: 100vh;
     border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
     box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
 }
 
-.memori--login-drawer.memori--login-drawer--logged .memori-drawer--panel {
-    --memori-drawer--width: 100%;
-    --memori-drawer--width--md: 40%;
-    --memori-drawer--width--lg: 30%;
-}
-
 .memori--login-drawer--title {
     margin: 0;
     font-size: inherit;
@@ -632,7 +623,12 @@ p.memori--login-drawer--inline-error {
 
 .memori--login-drawer--otp-digit-input.error {
     border-color: #ef4444;
-    background: #fff;
+    background: color-mix(in srgb, #ef4444 10%, var(--memori-main-background, #fff));
+}
+
+[data-theme='dark'] .memori--login-drawer--otp-digit-input.error,
+.memori-widget[data-theme='dark'] .memori--login-drawer--otp-digit-input.error {
+    background: color-mix(in srgb, #ef4444 18%, var(--memori-main-background, #1f2937));
 }
 
 .memori--login-drawer--otp-email-input {
@@ -866,13 +862,20 @@ p.memori--login-drawer--inline-error {
     border-radius: var(--memori-radius-box);
     margin: var(--memori-spacing-lg) 0;
     animation: errorSlide 0.3s ease-out;
-    background: linear-gradient(135deg, #fee2e2, #fecaca);
-    color: var(--memori-text-color);
+    background: #fee2e2;
+    color: #991b1b;
     font-size: 0.95rem;
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
 }
 
+[data-theme='dark'] .memori--login-drawer--otp-error,
+.memori-widget[data-theme='dark'] .memori--login-drawer--otp-error {
+    border-color: #f87171;
+    background: color-mix(in srgb, #ef4444 18%, var(--memori-main-background, #1f2937));
+    color: #fecaca;
+}
+
 @keyframes errorSlide {
     from {
         opacity: 0;
@@ -959,7 +962,6 @@ p.memori--login-drawer--inline-error {
     }
 
     .memori--login-drawer .memori-drawer--panel {
-        --memori-drawer--width: 100%;
         border-radius: 20px 20px 0 0;
     }
 

package/src/components/LoginDrawer/LoginDrawer.stories.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import I18nWrapper from '../../I18nWrapper';
 import LoginDrawer, { Props } from './LoginDrawer';
-import { tenant, user } from '../../mocks/data';
+import { tenant } from '../../mocks/data';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import './LoginDrawer.css';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Widget/LoginDrawer',
+  title: 'Surfaces/LoginDrawer',
   component: LoginDrawer,
   argTypes: {
     open: {
@@ -53,53 +53,3 @@ NeedsMissingData.args = {
   open: true,
   __TEST__needMissingData: true,
 };
-
-export const Signup = Template.bind({});
-Signup.args = {
-  open: true,
-  __TEST__signup: true,
-};
-
-export const SignupWaitingForOtp = Template.bind({});
-SignupWaitingForOtp.args = {
-  open: true,
-  __TEST__signup: true,
-};
-
-export const ChangePassword = Template.bind({});
-ChangePassword.args = {
-  open: true,
-  __TEST__changePwd: true,
-};
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  open: true,
-  user,
-  loginToken: 'token',
-};
-
-export const OtpForm = Template.bind({});
-OtpForm.args = {
-  open: true,
-  // Note: OTP form is shown by default in the new implementation
-  // when user is not logged in and not in signup mode
-};
-
-export const OtpFormWithTimer = Template.bind({});
-OtpFormWithTimer.args = {
-  open: true,
-  // Timer will be shown when OTP form is active
-};
-
-export const OtpFormWithError = Template.bind({});
-OtpFormWithError.args = {
-  open: true,
-  // Error state would be shown during OTP validation
-};
-
-export const OtpFormLoading = Template.bind({});
-OtpFormLoading.args = {
-  open: true,
-  // Loading state would be shown during OTP validation
-};