@memori.ai/memori-react 9.0.0-alpha.21 → 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">

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;

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/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: {