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

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -41,6 +41,8 @@ export interface Props {
   language: string;
   userLang: string;
   isMultilanguageEnabled?: boolean;
+  showFunctionCache?: boolean;
+  showMessageConsumption?: boolean;
 }
 
 const ITEMS_PER_PAGE = 8;
@@ -453,6 +455,8 @@ const ChatHistoryDrawer = ({
   language,
   userLang,
   isMultilanguageEnabled = false,
+  showFunctionCache = false,
+  showMessageConsumption = false,
 }: Props) => {
   const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
@@ -1187,6 +1191,8 @@ const ChatHistoryDrawer = ({
             onBack={handleCloseResumeDrawer}
             onClose={handleCloseResumeDrawer}
             onExportChat={handleExportSelectedChat}
+            showFunctionCache={showFunctionCache}
+            showMessageConsumption={showMessageConsumption}
           />
         </div>
       ) : (

package/src/components/ChatHistoryDrawer/ChatResumeDrawer.css

@@ -1,5 +1,5 @@
 .memori-chat-resume-drawer {
-    position: fixed;
+    position: absolute;
     z-index: 1200;
     inset: 0;
     pointer-events: none;

package/src/components/ChatHistoryDrawer/ChatResumeDrawer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from '@memori.ai/ui';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Button, Drawer } from '@memori.ai/ui';
 import {
   Message,
   Memori,
@@ -7,6 +7,7 @@ import {
 import { ArrowLeft, ArrowUpRight, Download } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { stripHTML } from '../../helpers/utils';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import Chat from '../Chat/Chat';
 
 export interface ResumeDrawerMessage {
@@ -29,6 +30,10 @@ export interface ChatResumeDrawerProps {
   onClose: () => void;
   onBack?: () => void;
   onExportChat: () => void;
+  /**
+   * When true, render panel content only (nested inside ChatHistory Drawer).
+   * When false, open as a library Drawer on the widget surface.
+   */
   embedded?: boolean;
   session: {
     title: string;
@@ -39,9 +44,10 @@ export interface ChatResumeDrawerProps {
   };
   onResume: (prompt?: string) => void;
   isLoading?: boolean;
+  showFunctionCache?: boolean;
+  showMessageConsumption?: boolean;
 }
 
-const ANIMATION_DURATION_MS = 280;
 const EMPTY_MEMORI = {
   memoriID: 'chat-resume-drawer',
   name: 'AI',
@@ -71,75 +77,19 @@ const ChatResumeDrawer = ({
   onResume,
   isLoading = false,
   onExportChat,
+  showFunctionCache = false,
+  showMessageConsumption = false,
 }: ChatResumeDrawerProps) => {
   const { t } = useTranslation();
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
+  const surfaceEl = useWidgetSurfaceEl();
   const backButtonRef = useRef<HTMLButtonElement>(null);
   const titleId = 'chat-resume-drawer-title';
-  const [shouldRender, setShouldRender] = useState(isOpen);
-  const [isVisible, setIsVisible] = useState(isOpen);
-
-  useEffect(() => {
-    if (isOpen) {
-      setShouldRender(true);
-      requestAnimationFrame(() => setIsVisible(true));
-      return;
-    }
-
-    setIsVisible(false);
-    const timeout = window.setTimeout(() => {
-      setShouldRender(false);
-    }, ANIMATION_DURATION_MS);
-
-    return () => window.clearTimeout(timeout);
-  }, [isOpen]);
 
   useEffect(() => {
     if (!isOpen) return;
     backButtonRef.current?.focus();
   }, [isOpen]);
 
-  useEffect(() => {
-    if (!isOpen || embedded) return;
-
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    const root = dialogRef.current;
-    if (!root) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-        return;
-      }
-
-      if (event.key !== 'Tab') return;
-
-      const focusableElements = root.querySelectorAll<HTMLElement>(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (!focusableElements.length) return;
-
-      const first = focusableElements[0];
-      const last = focusableElements[focusableElements.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-
-      if (event.shiftKey && active === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      previouslyFocused?.focus();
-    };
-  }, [embedded, isOpen, onClose]);
-
   const safeTitle = useMemo(() => {
     const cleaned = stripMarkdownChars(stripHTML(session.title || ''));
     return cleaned || 'Conversazione';
@@ -170,15 +120,11 @@ const ChatResumeDrawer = ({
     [session.messages]
   );
 
-  if (!embedded && !shouldRender) return null;
-
   const content = (
     <div
-      ref={panelRef}
       className={`memori-chat-resume-drawer--panel ${
         embedded ? 'memori-chat-resume-drawer--panel-embedded' : ''
       }`}
-      onClick={event => event.stopPropagation()}
     >
       <header className="memori-chat-resume-drawer--header">
         <Button
@@ -247,6 +193,8 @@ const ChatResumeDrawer = ({
               showCopyButton={true}
               isHistoryView={true}
               isChatlogPanel={true}
+              showFunctionCache={showFunctionCache}
+              showMessageConsumption={showMessageConsumption}
             />
           </div>
         )}
@@ -266,29 +214,24 @@ const ChatResumeDrawer = ({
   );
 
   if (embedded) {
+    if (!isOpen) return null;
     return (
       <div className="memori-chat-resume-drawer--embedded-shell">{content}</div>
     );
   }
 
   return (
-    <div
-      ref={dialogRef}
-      className={`memori-chat-resume-drawer ${
-        isVisible ? 'memori-chat-resume-drawer--open' : ''
-      }`}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={titleId}
+    <Drawer
+      container={surfaceEl ?? undefined}
+      open={isOpen}
+      onClose={onClose}
+      className="memori-chat-resume-drawer"
+      anchor="right"
+      size="md"
+      showCloseButton={false}
     >
-      <Button
-        className="memori-chat-resume-drawer--backdrop"
-        type="button"
-        aria-label={String(t('close', { defaultValue: 'Close' }))}
-        onClick={onClose}
-      />
       {content}
-    </div>
+    </Drawer>
   );
 };
 

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -8,7 +8,7 @@ import './ChatInputs.css';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Widget/Chat inputs (footer)',
+  title: 'Compositions/Chat inputs',
   component: ChatInputs,
   argTypes: {
     disabled: {
@@ -192,44 +192,6 @@ Disabled.args = {
   showMicrophone: true,
 };
 
-export const ContinuousSpeech = Template.bind({});
-ContinuousSpeech.args = {
-  dialogState,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-  microphoneMode: 'CONTINUOUS',
-};
-
-export const ContinuousSpeechListening = Template.bind({});
-ContinuousSpeechListening.args = {
-  dialogState,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: true,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-  microphoneMode: 'CONTINUOUS',
-};
-
 export const WithUploadButton = Template.bind({});
 WithUploadButton.args = {
   showUpload: true,

package/src/components/ChatInputs/ChatInputs.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '../../testUtils';
+import ChatInputs from './ChatInputs';
+import { dialogState, sessionID } from '../../mocks/data';
+
+const baseProps = {
+  dialogState,
+  sessionID,
+  userMessage: '',
+  sendOnEnter: 'keypress' as const,
+  setSendOnEnter: jest.fn(),
+  setAttachmentsMenuOpen: jest.fn(),
+  onChangeUserMessage: jest.fn(),
+  sendMessage: jest.fn(),
+  onTextareaFocus: jest.fn(),
+  onTextareaBlur: jest.fn(),
+  stopAudio: jest.fn(),
+  startListening: jest.fn(),
+  stopListening: jest.fn(),
+  showMicrophone: true,
+  microphoneMode: 'CONTINUOUS' as const,
+};
+
+it('disables the microphone while the agent is typing', () => {
+  const { container } = render(<ChatInputs {...baseProps} isTyping />);
+  const mic = container.querySelector('.memori-chat-inputs--mic-btn');
+  expect(mic).toBeDisabled();
+});
+
+it('keeps the microphone enabled when the agent is idle', () => {
+  const { container } = render(<ChatInputs {...baseProps} isTyping={false} />);
+  const mic = container.querySelector('.memori-chat-inputs--mic-btn');
+  expect(mic).not.toBeDisabled();
+});
+
+it('stops listening when the agent starts typing', () => {
+  const stopListening = jest.fn();
+  render(
+    <ChatInputs
+      {...baseProps}
+      listening
+      isTyping
+      stopListening={stopListening}
+    />
+  );
+  expect(stopListening).toHaveBeenCalled();
+});

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { DialogState, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
@@ -353,7 +353,17 @@ ${text}
     !hasActiveSession ||
     ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(dialogState?.state || '');
   const microphoneDisabled =
-    isDisabled || textareaDisabled || !hasActiveSession || !hasChatStarted;
+    isDisabled ||
+    textareaDisabled ||
+    !hasActiveSession ||
+    !hasChatStarted ||
+    isTyping;
+
+  useEffect(() => {
+    if (isTyping && listening) {
+      stopListening();
+    }
+  }, [isTyping, listening, stopListening]);
 
   return (
     <div className="memori-chat-inputs-wrapper">
@@ -374,6 +384,7 @@ ${text}
               removeFile={removeFile}
               showAnonymousRetentionNotice={!authToken}
               uploadingCount={uploadingCount}
+              maxDocumentsPerMessage={maxDocumentsPerMessage}
             />
           </div>
         )}

package/src/components/ChatTextArea/ChatTextArea.css

@@ -187,7 +187,7 @@ button.memori-chat-textarea--expand-button:focus {
 }
 
 [data-theme='dark'] textarea.memori-chat-textarea--input::placeholder {
-    color: var(--memori-text-color-muted, rgba(255, 255, 255, 0.5));
+    color: var(--memori-neutral, rgba(255, 255, 255, 0.5));
 }
 
 /* Layout-scoped dark pills: keep exact text/placeholder colors */

package/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx

@@ -55,7 +55,7 @@ const getStatusMessage = (status: string): string => {
 };
 
 const meta: Meta = {
-  title: 'Completion Provider Status',
+  title: 'Internals/Completion Provider Status',
   component: CompletionProviderStatus as React.ComponentType<any>,
   parameters: {
     layout: 'centered',

package/src/components/ContentPreviewModal/ContentPreviewModal.css

@@ -1,14 +1,5 @@
 /* ContentPreviewModal – modern preview modal for files and media */
-
-/*
- * @memori.ai/ui Modal uses memori-modal__backdrop (z-index 40) and memori-modal__viewport (z-index 50);
- * drawers use z-index 1001. className is applied to the viewport; raise both layers so previews
- * stack above chat history and artifact drawers.
- */
-.memori-modal__backdrop.memori-content-preview-modal-backdrop,
-.memori-content-preview-modal.memori-modal__viewport {
-    z-index: 2147483647 !important;
-}
+/* Stacking above drawers: Modal stacking="stacked" (library z-index 1600). */
 
 .memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
     overflow: hidden;
@@ -32,12 +23,18 @@
 }
 
 .memori-modal__viewport.memori-content-preview-modal .memori-modal__title {
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
     padding: 1rem 1.25rem 0.75rem;
+    padding-right: calc(var(--memori-icon-button-size, 40px) + 1.5rem);
     border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
     color: var(--memori-text-color);
     font-size: var(--memori-text-size-base);
     font-weight: var(--memori-text-weight-semibold);
     letter-spacing: -0.01em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-modal__viewport.memori-content-preview-modal .memori-modal__close {
@@ -45,28 +42,6 @@
     right: 0.75rem;
 }
 
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
-    color: var(--memori-text-color, #111827);
-    transition: background 0.2s ease, transform 0.15s ease;
-}
-
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button svg {
-    color: currentColor;
-}
-
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button:hover {
-    background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
-    transform: scale(1.05);
-}
-
-[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button,
-.memori-widget[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
-    background: color-mix(in srgb, var(--memori-main-background, #111) 85%, white);
-    color: var(--memori-text-color, #fff);
-}
-
 .memori-content-preview-modal--body--image {
     display: flex;
     align-items: center;

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -36,7 +36,7 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
       onClose={() => onClose()}
       width={width}
       widthMd={width}
-      backdropClassName="memori-content-preview-modal-backdrop"
+      stacking="stacked"
       className={cx('memori-content-preview-modal', className, {
         'memori-content-preview-modal--image': isImage,
       })}

package/src/components/ExpertsDrawer/ExpertsDrawer.css

@@ -1,10 +1,4 @@
 
-.memori--experts-drawer .memori-drawer--panel {
-    --memori-drawer--width: 100%;
-    --memori-drawer--width--md: 60%;
-    --memori-drawer--width--lg: 40%;
-}
-
 h2.memori--experts-drawer--title {
     margin: 0;
     font-size: inherit;

package/src/components/ExpertsDrawer/ExpertsDrawer.stories.tsx

@@ -6,7 +6,7 @@ import { tenant, expertReference } from '../../mocks/data';
 import './ExpertsDrawer.css';
 
 const meta: Meta = {
-  title: 'Widget/ExpertsDrawer',
+  title: 'Surfaces/ExpertsDrawer',
   component: ExpertsDrawer,
   argTypes: {
     open: {

package/src/components/FeedbackButtons/FeedbackButtons.stories.tsx

@@ -5,22 +5,16 @@ import FeedbackButtons, { Props } from './FeedbackButtons';
 import { memori } from '../../mocks/data';
 
 import './FeedbackButtons.css';
-import { AlertProvider } from '@memori.ai/ui';
+import { AlertProvider, AlertViewport } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Feedback Buttons',
+  title: 'Internals/Feedback Buttons',
   component: FeedbackButtons,
   argTypes: {},
   parameters: {
     controls: { expanded: true },
+    layout: 'centered',
   },
-  decorators: [
-    Story => (
-      <div style={{ textAlign: 'right', padding: '0 3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
 };
 
 export default meta;
@@ -28,7 +22,32 @@ export default meta;
 const Template: Story<Props> = args => (
   <I18nWrapper>
     <AlertProvider defaultDuration={5000}>
-      <FeedbackButtons {...args} />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div
+          style={{
+            display: 'inline-flex',
+            flex: 'none',
+            alignItems: 'center',
+            padding: '6px 10px',
+            borderRadius: 999,
+            background:
+              'color-mix(in srgb, var(--memori-main-background, #fff) 92%, transparent)',
+            boxShadow:
+              '0 4px 16px color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent)',
+          }}
+        >
+          <FeedbackButtons {...args} />
+        </div>
+      </div>
+      <AlertViewport />
     </AlertProvider>
   </I18nWrapper>
 );

package/src/components/FilePreview/FilePreview.css

@@ -1,6 +1,7 @@
 /* Updated FilePreview Styles */
 
 .memori--preview-container {
+    position: relative;
     z-index: 10;
     overflow: hidden;
     width: 100%;
@@ -12,6 +13,46 @@
     transition: all 0.3s ease;
 }
 
+.memori--preview-list {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 0.875rem;
+    padding-bottom: 0.625rem;
+    gap: 8px;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
+    scrollbar-width: thin;
+    touch-action: pan-x;
+}
+
+.memori--document-count {
+    position: absolute;
+    z-index: 5;
+    top: 8px;
+    right: 8px;
+    padding: calc(var(--memori-spacing-xs) / 4) calc(var(--memori-spacing-xs) + 2px);
+    border-radius: var(--memori-radius-box);
+    color: var(--memori-text-color);
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.memori--document-count-full {
+    background-color: #fa5252;
+}
+
+.memori--preview-container:has(.memori--document-count) .memori--preview-list {
+    padding-right: 2.75rem;
+}
+
 .memori--preview-container.slide-down {
     animation: slide-down 0.3s ease;
 }
@@ -106,26 +147,6 @@
     margin: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) 0;
 }
 
-.memori--preview-list {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: 0.875rem;
-    padding-bottom: 0.625rem;
-    gap: 8px;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-    overflow-y: hidden;
-    overscroll-behavior-x: contain;
-    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
-    scrollbar-width: thin;
-    touch-action: pan-x;
-}
-
 .memori--preview-item {
     position: relative;
     display: flex;

package/src/components/FilePreview/FilePreview.tsx

@@ -11,6 +11,8 @@ import {
 } 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;
@@ -18,6 +20,7 @@ type FilePreviewProps = {
   allowRemove?: boolean;
   showAnonymousRetentionNotice?: boolean;
   uploadingCount?: number;
+  maxDocumentsPerMessage?: number;
 };
 
 const FilePreview = ({
@@ -26,6 +29,7 @@ const FilePreview = ({
   allowRemove = true,
   showAnonymousRetentionNotice = false,
   uploadingCount = 0,
+  maxDocumentsPerMessage = defaultMaxDocumentsPerMessage,
 }: FilePreviewProps) => {
   const { t } = useTranslation();
   const [selectedFile, setSelectedFile] = useState<{
@@ -152,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={{

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"
     >