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

package/src/components/FilePreview/FilePreview.tsx

@@ -3,9 +3,16 @@ import { File, X } from 'lucide-react';
 import { Button } from '@memori.ai/ui';
 import ContentPreviewModal from '../ContentPreviewModal';
 import Snippet from '../Snippet/Snippet';
-import { stripHTML, stripDocumentAttachmentTags } from '../../helpers/utils';
-import { getFileExtensionFromMime } from '../MediaWidget/MediaItemWidget.utils';
+import {
+  stripHTML,
+  stripDocumentAttachmentTags,
+  isOfficeNativeFilename,
+  getDocumentAttachmentAssetUrl,
+} from '../../helpers/utils';
+import { getDocumentBadgeLabel } from '../MediaWidget/MediaItemWidget.utils';
 import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import { maxDocumentsPerMessage as defaultMaxDocumentsPerMessage } from '../../helpers/constants';
 
 type FilePreviewProps = {
   previewFiles: any;
@@ -13,6 +20,7 @@ type FilePreviewProps = {
   allowRemove?: boolean;
   showAnonymousRetentionNotice?: boolean;
   uploadingCount?: number;
+  maxDocumentsPerMessage?: number;
 };
 
 const FilePreview = ({
@@ -21,6 +29,7 @@ const FilePreview = ({
   allowRemove = true,
   showAnonymousRetentionNotice = false,
   uploadingCount = 0,
+  maxDocumentsPerMessage = defaultMaxDocumentsPerMessage,
 }: FilePreviewProps) => {
   const { t } = useTranslation();
   const [selectedFile, setSelectedFile] = useState<{
@@ -60,6 +69,15 @@ const FilePreview = ({
         return 'CSV';
       case 'html':
         return 'HTML';
+      case 'doc':
+      case 'docx':
+      case 'dotx':
+        return 'Word';
+      case 'xls':
+      case 'xltx':
+        return 'Excel';
+      case 'potx':
+        return 'PowerPoint';
       case 'jpg':
       case 'jpeg':
         return 'JPEG';
@@ -111,9 +129,7 @@ const FilePreview = ({
     if (isHtmlFile(file)) {
       let htmlContent = content;
       if (htmlContent.includes('&lt;') || htmlContent.includes('&quot;')) {
-        const div = document.createElement('div');
-        div.innerHTML = htmlContent;
-        htmlContent = div.textContent || div.innerText || htmlContent;
+        htmlContent = stripHTML(htmlContent) || htmlContent;
       }
       htmlContent = stripDocumentAttachmentTags(htmlContent);
       return htmlContent;
@@ -140,6 +156,16 @@ const FilePreview = ({
     <>
       {(previewFiles.length > 0 || uploadingCount > 0) && (
         <div className="memori--preview-container">
+          {previewFiles.length > 0 && (
+            <div
+              className={cx('memori--document-count', {
+                'memori--document-count-full':
+                  previewFiles.length >= maxDocumentsPerMessage,
+              })}
+            >
+              {previewFiles.length}/{maxDocumentsPerMessage}
+            </div>
+          )}
           {showAnonymousRetentionNotice && (
             <small
               style={{
@@ -169,7 +195,16 @@ const FilePreview = ({
                 <button
                   type="button"
                   className="memori--preview-item-trigger"
-                  onClick={() => setSelectedFile(file)}
+                  onClick={() => {
+                    if (isOfficeNativeFilename(file.name || '')) {
+                      const url = getDocumentAttachmentAssetUrl(file);
+                      if (url) {
+                        window.open(url, '_blank', 'noopener,noreferrer');
+                      }
+                    } else {
+                      setSelectedFile(file);
+                    }
+                  }}
                   aria-label={file.name}
                 >
                   {isImageContent(file.content, file.type) ? (
@@ -184,7 +219,7 @@ const FilePreview = ({
                     <span className="memori--preview-filename">{file.name}</span>
                     <span className="memori--preview-filetype">
                       {file.mimeType
-                        ? getFileExtensionFromMime(file.mimeType)
+                        ? getDocumentBadgeLabel(file.mimeType, file.name)
                         : getFileType(file.name, file.type)}
                     </span>
                   </div>

package/src/components/FilePreview/__snapshots__/FilePreview.test.tsx.snap

@@ -7,6 +7,13 @@ exports[`renders FilePreview with one file 1`] = `
   <div
     class="memori--preview-container"
   >
+    <div
+      class="memori--document-count"
+    >
+      1
+      /
+      10
+    </div>
     <div
       class="memori--preview-list"
     >
@@ -95,6 +102,13 @@ exports[`renders FilePreview with two files 1`] = `
   <div
     class="memori--preview-container"
   >
+    <div
+      class="memori--document-count"
+    >
+      2
+      /
+      10
+    </div>
     <div
       class="memori--preview-list"
     >

package/src/components/Header/ChatConsumptionDropdown.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Message } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import GasStation from '../icons/GasStation';
 import { BADGE_EMOJI } from '../../helpers/llmUsage';
 
@@ -28,7 +29,8 @@ export interface ChatConsumptionDropdownProps {
   menuAlign?: 'start' | 'center' | 'end';
   trigger?:
     | ((
-        props: React.ButtonHTMLAttributes<HTMLButtonElement>
+        props: React.ButtonHTMLAttributes<HTMLButtonElement>,
+        state: { open: boolean }
       ) => React.ReactElement)
     | React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>>;
 }
@@ -263,6 +265,7 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   trigger,
 }) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
 
   const hasConsumptionData = useMemo(
     () =>
@@ -279,11 +282,15 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   const renderDefaultTrigger = (
     triggerButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>
   ) => (
-    <Button
+    <IconButton
       {...triggerButtonProps}
       variant={triggerVariant}
       shape="default"
-      className="memori-header--button memori-header--button--sustainability"
+      active={open}
+      className={cx(
+        'memori-header--button memori-header--button--sustainability',
+        triggerButtonProps.className
+      )}
       aria-label={triggerLabel}
       title={triggerLabel}
       icon={
@@ -295,7 +302,8 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
     triggerButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>
   ) => {
     if (!trigger) return renderDefaultTrigger(triggerButtonProps);
-    if (typeof trigger === 'function') return trigger(triggerButtonProps);
+    if (typeof trigger === 'function')
+      return trigger(triggerButtonProps, { open });
     if (
       !React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(
         trigger
@@ -323,7 +331,11 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   };
 
   return (
-    <Dropdown className="memori-header--dropdown">
+    <Dropdown
+      className="memori-header--dropdown"
+      open={open}
+      onOpenChange={setOpen}
+    >
       <Dropdown.Trigger
         showChevron={false}
         render={props => renderTrigger(props)}

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 and 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: #fff;
+}
+
+.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: #fff;
 }
 
 .memori-dropdown--avatar-input {
@@ -518,18 +702,18 @@
 /* Full-page layout: labeled primary actions, utility cluster, shared control chrome */
 .memori-header.memori-header--fullpage {
     width: auto;
-    min-width: 100%;
+    min-width: 0;
     max-width: 100%;
     height: auto;
     min-height: 40px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
     padding: 0;
     margin-left: 0;
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
-    gap: 0.5rem;
+    gap: 0.75rem;
     text-align: right;
 }
 
@@ -548,21 +732,16 @@
 
 .memori-header--fullpage-secondary {
     justify-content: flex-end;
-    /* margin-left: auto; */
 }
 
 .memori-header--fullpage-divider {
     width: 1px;
+    height: 28px;
     min-height: 28px;
-    align-self: stretch;
-    margin: 0 0.125rem;
+    flex-shrink: 0;
+    align-self: center;
+    margin: 0;
     background: color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
-    /* margin-left: auto; */
-}
-
-/* Tighter spacing before Profile / login (divider sits in secondary row) */
-.memori-header--fullpage-secondary > .memori-header--fullpage-divider {
-    margin-right: calc(0.125rem - 5px);
 }
 
 .memori-header--fullpage .memori-dropdown--user-trigger--fullpage {
@@ -570,29 +749,24 @@
     border-radius: 8px;
 }
 
-.memori-header--fullpage .memori-header--fullpage-labeled-trigger {
-    gap: 0.5rem;
-}
-
 .memori-header--auth-icon-controls {
     display: inline-flex;
     align-items: center;
     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);
-    /* border-radius: 8px; */
-    background: transparent;
+.memori-header--auth-icon-button:has(.memori-header--action-label) {
+    width: auto;
+    min-width: var(--memori-icon-button-size, 36px);
+    gap: 0.35rem;
+    padding-inline: 10px;
 }
 
-.memori-header--auth-icon-button:hover {
-    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
+.memori-header--action-label {
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    font-weight: var(--memori-text-weight-medium, 500);
+    line-height: 1.2;
+    white-space: nowrap;
 }
 
 .memori-dropdown--auth-menu {
@@ -630,7 +804,8 @@
     text-align: left;
 }
 
-.memori-dropdown--auth-row:hover {
+.memori-dropdown--auth-row:hover,
+.memori-dropdown--auth-row--active {
     background: color-mix(in srgb, var(--memori-text-color, #111827) 7%, transparent);
 }
 
@@ -723,10 +898,6 @@
     .memori-header.memori-header--fullpage .memori-button:not(.memori-button--icon-only) .memori-button__content {
         display: none !important;
     }
-
-    .memori-header.memori-header--fullpage .memori-header--fullpage-labeled-trigger {
-        gap: 0;
-    }
 }
 
 [data-theme='dark'] .memori-widget .memori-header--fullpage .memori-header--fullpage-divider,

package/src/components/Header/Header.test.tsx

@@ -1,9 +1,35 @@
 import React from 'react';
-import { render } from '../../testUtils';
+import { render, screen } from '../../testUtils';
 import { memori, history, user } from '../../mocks/data';
 import Header from './Header';
 import memoriApiClient from '@memori.ai/memori-api-client';
 
+const loggedInFullpageProps = {
+  memori,
+  history,
+  setVenue: jest.fn(),
+  positionPopoverOpen: false,
+  setPositionPopoverOpen: jest.fn(),
+  setShowSettingsDrawer: jest.fn(),
+  setShowKnownFactsDrawer: jest.fn(),
+  setShowExpertsDrawer: jest.fn(),
+  speakerMuted: false,
+  setSpeakerMuted: jest.fn(),
+  hasUserActivatedSpeak: true,
+  showShare: false,
+  showSettings: false,
+  showFullscreen: false,
+  enableAudio: false,
+  clearHistory: jest.fn(),
+  sessionID: '1234',
+  loginToken: 'abcd',
+  user,
+  layout: 'FULLPAGE' as const,
+  setShowLoginDrawer: jest.fn(),
+  setShowChatHistoryDrawer: jest.fn(),
+  apiClient: memoriApiClient(),
+};
+
 it('renders Header unchanged', () => {
   const { container } = render(
     <Header
@@ -397,3 +423,31 @@ it('renders Header for board of experts with session open unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('hides the session menu when deep thought and AI consumption are off', () => {
+  render(<Header {...loggedInFullpageProps} />);
+
+  expect(screen.queryByLabelText('Info sessione')).toBeNull();
+  expect(screen.queryByText('knownFacts.title')).toBeNull();
+  expect(screen.queryByText('widget.aiConsumption')).toBeNull();
+});
+
+it('shows the session menu when deep thought is enabled', () => {
+  render(
+    <Header
+      {...loggedInFullpageProps}
+      memori={{
+        ...memori,
+        enableDeepThought: true,
+      }}
+    />
+  );
+
+  expect(screen.getByLabelText('Info sessione')).toBeTruthy();
+});
+
+it('shows the session menu when AI consumption is enabled', () => {
+  render(<Header {...loggedInFullpageProps} showMessageConsumption />);
+
+  expect(screen.getByLabelText('Info sessione')).toBeTruthy();
+});