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

package/src/components/ChatHistoryDrawer/ChatHistory.css

@@ -356,6 +356,7 @@
     flex-wrap: wrap;
     align-items: center;
     padding: var(--memori-spacing-md);
+    padding-left: 0;
     margin: auto;
     gap: var(--memori-spacing-sm);
 }
@@ -798,6 +799,10 @@
     color: var(--memori-text-color);
 }
 
+.memori-chat-history-drawer--list-item--meta-badge-functions {
+    color: var(--memori-text-color);
+}
+
 .memori-chat-history-drawer--list-item--meta-badge-boe {
     background-color: var(--color-background-secondary, var(--memori-primary-subtle));
     color: var(--color-text-primary, var(--memori-primary));

package/src/components/ChatHistoryDrawer/ChatHistory.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import ChatHistoryDrawer from './ChatHistory';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { memori } from '../../mocks/data';
@@ -93,6 +93,82 @@ it('renders ChatHistoryDrawer with selected chat log unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('counts function calls apart from attached files', async () => {
+  const chatLog = {
+    chatLogID: 'chat-log-with-functions',
+    sessionID: 'other-session',
+    lines: [
+      {
+        timestamp: '2024-01-01T10:00:00.000Z',
+        inbound: true,
+        text: 'Elenca i tool del server MCP',
+        media: [
+          { mimeType: 'image/png', url: 'https://example.com/shot.png' },
+          { mimeType: 'application/pdf', url: 'https://example.com/doc.pdf' },
+        ],
+      },
+      {
+        timestamp: '2024-01-01T10:00:05.000Z',
+        inbound: false,
+        text: 'Ecco i tool disponibili',
+        media: [
+          {
+            mimeType: 'text/plain',
+            content: '- Result: {"success":true}',
+            title: 'Function Call to "LISTA_TOOLS"',
+            properties: {
+              functionCache: 'true',
+              functionSignature: 'LISTA_TOOLS()',
+            },
+          },
+          {
+            mimeType: 'text/plain',
+            content: '- Result: {"success":true}',
+            properties: { functionSignature: 'ALTRA_FUNZIONE()' },
+          },
+        ],
+      },
+    ],
+  };
+
+  const apiClientWithLogs = {
+    ...client,
+    chatLogs: {
+      ...client.chatLogs,
+      getUserChatLogsByTokenPaged: jest
+        .fn()
+        .mockResolvedValue({ chatLogs: [chatLog], count: 1 }),
+    },
+  } as unknown as ReturnType<typeof memoriApiClient>;
+
+  render(
+    <AlertProvider>
+      <ChatHistoryDrawer
+        history={[]}
+        open={true}
+        onClose={jest.fn()}
+        apiClient={apiClientWithLogs}
+        sessionId="test-session"
+        memori={memori}
+        resumeSession={jest.fn()}
+        baseUrl="https://www.aisuru.com"
+        apiUrl="https://backend.memori.ai"
+        loginToken="test-login-token"
+        language="EN"
+        userLang="EN"
+      />
+    </AlertProvider>
+  );
+
+  expect(await screen.findByText('1 write_and_speak.file')).toBeInTheDocument();
+  expect(
+    await screen.findByText('2 write_and_speak.functions')
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByText('1 write_and_speak.image')
+  ).toBeInTheDocument();
+});
+
 it('renders ChatHistoryDrawer closed unchanged', () => {
   const { container } = render(
     <AlertProvider>

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -5,6 +5,7 @@ import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import {
   ChatLog,
   ChatLogLine,
+  ChatMedium,
   Memori,
   Message,
   ChatLogFilters,
@@ -21,6 +22,7 @@ import { stripAllInternalTags } from '../../helpers/message';
 import debounce from 'lodash/debounce';
 import { Spin } from '@memori.ai/ui';
 import { SelectBox } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
 import ChatResumeDrawer from './ChatResumeDrawer';
@@ -55,7 +57,19 @@ type ContentTypeFilter = 'all' | 'with_images' | 'with_files';
 const isImageMimeType = (mimeType?: string) =>
   mimeType?.startsWith('image/') ?? false;
 
-const isFileMimeType = (mimeType?: string) => !isImageMimeType(mimeType);
+/**
+ * Media carrying a function call or its cached result: the engine ships them as
+ * regular media, but they are tool invocations and not attachments.
+ */
+const isFunctionCallMedium = (medium: ChatMedium) =>
+  Boolean(medium.properties?.functionSignature) ||
+  Boolean(medium.properties?.functionCache);
+
+const isFileMedium = (medium: ChatMedium) =>
+  !isFunctionCallMedium(medium) && !isImageMimeType(medium.mimeType);
+
+const isImageMedium = (medium: ChatMedium) =>
+  !isFunctionCallMedium(medium) && isImageMimeType(medium.mimeType);
 
 // This function calculates the title of the chat log based on the most meaningful user message
 const calculateTitle = (lines: ChatLogLine[]): string => {
@@ -440,6 +454,7 @@ const ChatHistoryDrawer = ({
   userLang,
   isMultilanguageEnabled = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
@@ -485,19 +500,20 @@ const ChatHistoryDrawer = ({
 
   const getChatLogStats = (chatLog: ChatLog) => {
     const imageCount = chatLog.lines.reduce((total, line) => {
-      const imagesInLine =
-        line.media?.filter(medium => isImageMimeType(medium.mimeType))
-          .length || 0;
+      const imagesInLine = line.media?.filter(isImageMedium).length || 0;
       return total + imagesInLine;
     }, 0);
 
     const fileCount = chatLog.lines.reduce((total, line) => {
-      const filesInLine =
-        line.media?.filter(medium => isFileMimeType(medium.mimeType))
-          .length || 0;
+      const filesInLine = line.media?.filter(isFileMedium).length || 0;
       return total + filesInLine;
     }, 0);
 
+    const functionCount = chatLog.lines.reduce((total, line) => {
+      const functionsInLine = line.media?.filter(isFunctionCallMedium).length || 0;
+      return total + functionsInLine;
+    }, 0);
+
     const assistantReplies = chatLog.lines.filter(
       line => !line.inbound && line.text?.trim()
     );
@@ -516,6 +532,7 @@ const ChatHistoryDrawer = ({
     return {
       imageCount,
       fileCount,
+      functionCount,
       preview,
       isTestConversation,
       messageCount: chatLog.lines.length,
@@ -849,34 +866,39 @@ const ChatHistoryDrawer = ({
       summary:
         t('write_and_speak.sessionSummaryDescription') ||
         'Hai caricato un file Markdown con la presentazione del gruppo. L’AI stava elaborando una risposta.',
-      messages: selectedChatLog.lines.map((line, index) => ({
-        id: `${selectedChatLog.chatLogID}-${index}`,
-        role: line.inbound ? ('user' as const) : ('assistant' as const),
-        content: line.text || '',
-        timestamp: line.timestamp,
-        media: (line.media || []).map((medium, mediumIndex) => ({
-          ...medium,
-          mediumID:
-            (medium as { mediumID?: string }).mediumID ||
-            `${selectedChatLog.chatLogID}-${index}-${mediumIndex}`,
-        })),
-        status:
-          !line.inbound && !line.text?.trim() && hasInterruptedLine
-            ? ('interrupted' as const)
-            : ('completed' as const),
-        attachment:
-          line.inbound && Array.isArray(line.media) && line.media.length > 0
+      messages: selectedChatLog.lines.map((line, index) => {
+        const attachmentMedium = line.inbound
+          ? (line.media || []).find(isFileMedium)
+          : undefined;
+
+        return {
+          id: `${selectedChatLog.chatLogID}-${index}`,
+          role: line.inbound ? ('user' as const) : ('assistant' as const),
+          content: line.text || '',
+          timestamp: line.timestamp,
+          media: (line.media || []).map((medium, mediumIndex) => ({
+            ...medium,
+            mediumID:
+              (medium as { mediumID?: string }).mediumID ||
+              `${selectedChatLog.chatLogID}-${index}-${mediumIndex}`,
+          })),
+          status:
+            !line.inbound && !line.text?.trim() && hasInterruptedLine
+              ? ('interrupted' as const)
+              : ('completed' as const),
+          attachment: attachmentMedium
             ? {
                 name:
-                  line.media[0].url?.split('/').pop() ||
-                  line.media[0].url ||
+                  attachmentMedium.url?.split('/').pop() ||
+                  attachmentMedium.url ||
                   'Attachment file',
                 type: 'Markdown',
                 size: '2.4 KB',
                 ext: 'MD',
               }
             : undefined,
-      })),
+        };
+      }),
       quickActions: [
         {
           label:
@@ -1071,6 +1093,15 @@ const ChatHistoryDrawer = ({
                           )}
                         </span>
                       )}
+                      {stats.functionCount > 0 && (
+                        <span className="memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-functions">
+                          {formatCountLabel(
+                            stats.functionCount,
+                            t('write_and_speak.function') || 'function',
+                            t('write_and_speak.functions') || 'functions'
+                          )}
+                        </span>
+                      )}
                       {chatLog.boardOfExperts && (
                         <span className="memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-boe">
                           boe
@@ -1136,6 +1167,7 @@ const ChatHistoryDrawer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       className="memori-chat-history-drawer"
       open={open}
       onClose={onClose}

package/src/components/ChatHistoryDrawer/ChatResumeDrawer.css

@@ -60,10 +60,15 @@
     display: flex;
     align-items: center;
     padding: 14px 16px 12px;
-    /* border-bottom: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb)); */
     gap: 8px;
 }
 
+@media (max-width: 768px) {
+    .memori-chat-resume-drawer--header {
+        border-bottom: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb));
+    }
+}
+
 .memori-chat-resume-drawer--header-icon-button {
     display: inline-flex;
     width: 28px;