@memori.ai/memori-react 7.25.1 → 7.26.1

package/esm/locales/fr.json

@@ -148,6 +148,22 @@
         "attachmentsLabel": "Enrichissez votre message",
         "iWantToTalkToIn": "je veux parler à {{name}} dans"
     },
+    "upload": {
+        "loginRequired": "Connexion requise",
+        "loginRequiredDescription": "Veuillez vous connecter pour télécharger des images",
+        "uploadFiles": "Télécharger des fichiers",
+        "uploadImage": "Télécharger une image",
+        "uploadDocument": "Télécharger un document",
+        "replace": "Remplacer",
+        "remaining": "restant",
+        "maxReached": "Limite atteinte",
+        "maxImagesReached": "Vous pouvez télécharger jusqu'à {{max}} images",
+        "apiClientNotConfigured": "API client non configuré correctement pour le téléchargement de médias",
+        "fileReadingFailed": "Échec de la lecture du fichier",
+        "uploadFailed": "Échec du téléchargement",
+        "uploadSuccess": "Téléchargement réussi",
+        "uploadSuccessDescription": "Le fichier a été téléchargé avec succès"
+    },
     "media": {
         "title": "Titre",
         "editAttributes": "Modifier les attributs du média",

package/esm/locales/it.json

@@ -187,6 +187,28 @@
         "linkValue": "Titolo link",
         "insertThisLink": "Inserisci un link a {{url}} con titolo {{title}}"
     },
+    "upload": {
+        "loginRequired": "Login richiesto",
+        "loginRequiredDescription": "Per caricare immagini, devi prima accedere",
+        "uploadFiles": "Carica file",
+        "uploadImage": "Carica immagine",
+        "uploadDocument": "Carica documento",
+        "replace": "Sostituisci documento",
+        "maxImagesReached": "Puoi caricare fino a {{max}} immagini",
+        "apiClientNotConfigured": "Client API non configurato correttamente per il caricamento di media",
+        "fileReadingFailed": "Lettura del file fallita",
+        "uploadFailed": "Caricamento fallito",
+        "uploadSuccess": "Caricamento riuscito",
+        "remaining": "rimanenti",
+        "maxReached": "Limite raggiunto",
+        "titleImage": "Immagine: {{title}}",
+        "titleImageUpload": "Carica immagini",
+        "titleHelp": "Aggiungi un titolo descrittivo per aiutare l'AI a fornire risposte più appropriate.",
+        "titlePlaceholder": "Inserisci il titolo dell'immagine",
+        "uploadSuccessDescription": "Il file è stato caricato con successo",
+        "partialUpload": "Solo {{uploaded}} immagini su {{total}} immagini saranno caricate. Massimo {{max}} immagini consentite.",
+        "cancel": "Annulla"
+    },
     "gamification": {
         "level": "Livello",
         "points": "punti",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.25.1",
+  "version": "7.26.1",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Chat/Chat.stories.tsx

@@ -9,6 +9,7 @@ import {
   sessionID,
   dialogState as dialogStateWithHints,
   historyWithExpandable,
+  historyWithLongHTMLTable,
 } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import Chat, { Props } from './Chat';
@@ -301,4 +302,15 @@ WithExpandable.args = {
   sendMessage: (msg: string) => console.log(msg),
   stopListening: () => {},
   resetTranscript: () => {},
+};
+
+
+export const WithLongHTMLTable = Template.bind({});
+WithLongHTMLTable.args = {
+  memori,
+  tenant,
+  sessionID,
+  history: historyWithLongHTMLTable,
+  dialogState,
+  layout: 'DEFAULT',
 };

package/src/components/Chat/Chat.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, memo } from 'react';
+import React, { useEffect, memo, useState } from 'react';
 import cx from 'classnames';
 import {
   DialogState,
   ExpertReference,
+  Medium,
   Memori,
   Message,
   Tenant,
@@ -57,13 +58,7 @@ export interface Props {
   onChangeUserMessage: (userMessage: string) => void;
   sendMessage: (
     msg: string,
-    media?: {
-      mediumID: string;
-      mimeType: string;
-      content: string;
-      title?: string;
-      properties?: { [key: string]: any };
-    }
+    media?: (Medium & { type: string })[]
   ) => void;
   listening?: boolean;
   setEnableFocusChatInput: (enableFocusChatInput: boolean) => void;
@@ -78,6 +73,7 @@ export interface Props {
   user?: User;
   experts?: ExpertReference[];
   useMathFormatting?: boolean;
+  showFunctionCache?: boolean;
 }
 
 const Chat: React.FC<Props> = ({
@@ -125,6 +121,7 @@ const Chat: React.FC<Props> = ({
   showUpload = false,
   experts,
   useMathFormatting = false,
+  showFunctionCache = false,
 }) => {
   const scrollToBottom = () => {
     setTimeout(() => {
@@ -230,6 +227,7 @@ const Chat: React.FC<Props> = ({
                 experts={experts}
                 showCopyButton={showCopyButton}
                 useMathFormatting={useMathFormatting}
+                showFunctionCache={showFunctionCache}
               />
 
               {showDates && !!message.timestamp && (
@@ -340,6 +338,7 @@ const Chat: React.FC<Props> = ({
 
       {showInputs && (
         <ChatInputs
+          apiURL={apiUrl || ''}
           resetTranscript={resetTranscript}
           userMessage={userMessage}
           onChangeUserMessage={onChangeUserMessage}
@@ -350,6 +349,7 @@ const Chat: React.FC<Props> = ({
           microphoneMode={microphoneMode}
           sendOnEnter={sendOnEnter}
           setSendOnEnter={setSendOnEnter}
+          sessionID={sessionID}
           showUpload={showUpload}
           attachmentsMenuOpen={attachmentsMenuOpen}
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}

package/src/components/ChatBubble/ChatBubble.css

@@ -305,3 +305,13 @@
 .memori-chat--bubble.memori-chat--user-bubble .memori-expandable > button {
     color: var(--memori-primary-text);
 }
+
+.memori-chat--function-cache-modal .memori-modal--panel {
+    width: 80%;
+    height: 100%;
+    /* padding: 20px; */
+    max-height: 80vh;
+    border-radius: 10px;
+    background-color: #fff;
+    overflow-y: auto;
+}

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -91,7 +91,6 @@ FromUserWithLink.args = {
   },
 };
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   memori,
@@ -617,3 +616,206 @@ WithHTML.args = {
 `,
   },
 };
+
+// 9. Complex HTML Table
+export const ComplexHTMLTable = Template.bind({});
+ComplexHTMLTable.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: `<table border="1" style="border-collapse: collapse; width: 100%;">
+    <thead>
+      <tr style="background-color: #f2f2f2;">
+        <th colspan="3" style="text-align: center; padding: 8px;">Project Timeline</th>
+      </tr>
+      <tr style="background-color: #f2f2f2;">
+        <th style="text-align: left; padding: 8px;">Phase</th>
+        <th style="text-align: left; padding: 8px;">Start Date</th>
+        <th style="text-align: left; padding: 8px;">End Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="padding: 8px;">Planning</td>
+        <td style="padding: 8px;">Jan 15, 2025</td>
+        <td style="padding: 8px;">Feb 28, 2025</td>
+      </tr>
+      <tr style="background-color: #f9f9f9;">
+        <td style="padding: 8px;">Development</td>
+        <td style="padding: 8px;">Mar 1, 2025</td>
+        <td style="padding: 8px;">Jun 30, 2025</td>
+      </tr>
+      <tr>
+        <td style="padding: 8px;">Testing</td>
+        <td style="padding: 8px;">Jul 1, 2025</td>
+        <td style="padding: 8px;">Aug 15, 2025</td>
+      </tr>
+      <tr style="background-color: #f9f9f9;">
+        <td style="padding: 8px;">Deployment</td>
+        <td style="padding: 8px;">Aug 16, 2025</td>
+        <td style="padding: 8px;">Sep 30, 2025</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr style="background-color: #f2f2f2;">
+        <td colspan="3" style="text-align: center; padding: 8px;">Total Duration: 8.5 months</td>
+      </tr>
+    </tfoot>
+  </table>`,
+    initial: false,
+  },
+};
+ComplexHTMLTable.parameters = {
+  docs: {
+    description: {
+      story:
+        'A message containing a complex HTML table that should trigger the loading spinner before rendering.',
+    },
+  },
+};
+
+//10. Long text message
+export const MediumLongTextMessage = Template.bind({});
+MediumLongTextMessage.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: Array(100)
+      .fill(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.'
+      )
+      .join('\n\n'),
+    initial: false,
+  },
+};
+
+export const LongTextMessage = Template.bind({});
+LongTextMessage.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: Array(200)
+      .fill(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.'
+      )
+      .join('\n\n'),
+    initial: false,
+  },
+};
+
+export const LongTextMessageWithHTML = Template.bind({});
+LongTextMessageWithHTML.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text:
+      Array(200)
+        .fill(
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.'
+        )
+        .join('\n\n') +
+      `
+    <div>
+    <div style="width: 30%; margin-bottom: 20px;">
+    <img src="https://www.e-stayon.com/images/thumbs/0244280_lenovo-ideapad-3-chromebook-15-intel-celeron-4gb-64gb_360.jpeg" style="width:100%">
+    <h3>Lenovo IdeaPad 3 Chromebook</h3>
+    <p>Intel Celeron, 15", 4GB RAM, 64GB</p>
+    <p>Prezzo: €194,88 (sconto 12% da €221,59)</p>
+    </div>`,
+  },
+};
+
+// 10. Message with an embedded helper function to show requiresFormatting detection
+export const FormattingDetectionDemo = Template.bind({});
+FormattingDetectionDemo.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: 'This message demonstrates how the formatting detection works.\n\nBelow are some examples of content that will be detected as requiring formatting:\n\n1. HTML tags: <div>Example</div>\n2. Markdown tables: | Header | Content |\n3. Code blocks: ```javascript\nconst x = 1;\n```\n4. Math formulas: $E = mc^2$\n5. Tabbed data: Name\tAge\tLocation\n\nThe requiresFormatting function will detect these patterns and show a loading spinner.',
+    initial: false,
+  },
+};
+FormattingDetectionDemo.parameters = {
+  docs: {
+    description: {
+      story:
+        'A demonstration of different content patterns that trigger the loading spinner.',
+    },
+  },
+};
+
+export const HTMLTable = Template.bind({});
+HTMLTable.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: `Ecco la lista formattata in HTML dei task e dei relativi assegnatari:
+<table>
+ <tr>
+ <th>Task</th>
+ <th>Assegnato a</th>
+ </tr>
+ <tr><td>Market Research</td><td>Alice</td></tr>
+ <tr><td>Content Creation</td><td>Bob</td></tr>
+ <tr><td>Social Media Planning</td><td>Charlie</td></tr>
+ <tr><td>Campaign Analysis</td><td>Daisy</td></tr>
+ <tr><td>Prototype Development</td><td>Ethan</td></tr>
+ <tr><td>Quality Assurance</td><td>Fiona</td></tr>
+ <tr><td>User Interface Design</td><td>Gabriel</td></tr>
+ <tr><td>Service Improvement</td><td>Hannah</td></tr>
+ <tr><td>Ticket Resolution</td><td>Ian</td></tr>
+ <tr><td>Customer Feedback</td><td>Julia</td></tr>
+ <tr><td>Budget Analysis</td><td>Kevin</td></tr>
+ <tr><td>Financial Reporting</td><td>Mark</td></tr>
+ <tr><td>Investment Planning</td><td>Mark</td></tr>
+ <tr><td>Market Trends Analysis</td><td>Nathan</td></tr>
+ <tr><td>Data Collection</td><td>Olivia</td></tr>
+ <tr><td>Research Paper Writing</td><td>Peter</td></tr>
+ <tr><td>Software Development</td><td>Quinn</td></tr>
+ <tr><td>Feature Enhancement</td><td>Rachel</td></tr>
+ <tr><td>Code Review</td><td>Sam</td></tr>
+ <tr><td>Manufacturing</td><td>Tim</td></tr>
+ <tr><td>Product Design</td><td>Uma</td></tr>
+ <tr><td>UX Research</td><td>Victor</td></tr>
+ <tr><td>API Development</td><td>Wendy</td></tr>
+ <tr><td>Database Management</td><td>Xavier</td></tr>
+ <tr><td>Cloud Infrastructure</td><td>Yara</td></tr>
+ <tr><td>Security Testing</td><td>Zack</td></tr>
+ <tr><td>Documentation</td><td>Adam</td></tr>
+ <tr><td>Technical Support</td><td>Beth</td></tr>
+ <tr><td>Project Management</td><td>Carl</td></tr>
+ <tr><td>Business Analysis</td><td>Diana</td></tr>
+ <tr><td>DevOps Engineering</td><td>Erik</td></tr>
+ <tr><td>Mobile Development</td><td>Faith</td></tr>
+ <tr><td>Frontend Development</td><td>George</td></tr>
+ <tr><td>Backend Development</td><td>Helen</td></tr>
+ <tr><td>System Architecture</td><td>Isaac</td></tr>
+ <tr><td>Data Analysis</td><td>Jane</td></tr>
+ <tr><td>Machine Learning</td><td>Kyle</td></tr>
+ <tr><td>AI Development</td><td>Lisa</td></tr>
+ <tr><td>Network Security</td><td>Mike</td></tr>
+ <tr><td>Performance Testing</td><td>Nina</td></tr>
+ <tr><td>Load Testing</td><td>Oscar</td></tr>
+ <tr><td>Penetration Testing</td><td>Penny</td></tr>
+ <tr><td>Automation Testing</td><td>Quentin</td></tr>
+ <tr><td>Release Management</td><td>Rose</td></tr>
+ <tr><td>Configuration Management</td><td>Steve</td></tr>
+ <tr><td>Change Management</td><td>Tina</td></tr>
+ <tr><td>Risk Management</td><td>Ulysses</td></tr>
+ <tr><td>Resource Planning</td><td>Violet</td></tr>
+ <tr><td>Capacity Planning</td><td>Walter</td></tr>
+ <tr><td>Strategic Planning</td><td>Xena</td></tr>
+ <tr><td>Operations Management</td><td>Yuki</td></tr>
+ <tr><td>Quality Management</td><td>Zara</td></tr>
+</table>
+
+Ho mostrato i primi 20 task per brevità. La tabella include il nome del task e la persona assegnata.`,
+    initial: false,
+  },
+};

package/src/components/ChatBubble/ChatBubble.tsx

@@ -20,11 +20,12 @@ import Button from '../ui/Button';
 import QuestionHelp from '../icons/QuestionHelp';
 import Copy from '../icons/Copy';
 import Code from '../icons/Code';
+import Bug from '../icons/Bug';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
 import { stripHTML, stripOutputTags } from '../../helpers/utils';
-import FilePreview from '../FilePreview/FilePreview';
 import { renderMsg, truncateMessage } from '../../helpers/message';
 import Expandable from '../ui/Expandable';
+import Modal from '../ui/Modal';
 
 // Always import and load MathJax
 import { installMathJax } from '../../helpers/utils';
@@ -56,6 +57,7 @@ export interface Props {
   userAvatar?: MemoriProps['userAvatar'];
   user?: User;
   experts?: ExpertReference[];
+  showFunctionCache?: boolean;
 }
 
 const ChatBubble: React.FC<Props> = ({
@@ -76,10 +78,12 @@ const ChatBubble: React.FC<Props> = ({
   user,
   userAvatar,
   experts,
+  showFunctionCache = false,
 }) => {
   const { t, i18n } = useTranslation();
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
+  const [openFunctionCache, setOpenFunctionCache] = useState(false);
 
   // Initialize MathJax on component mount
   useEffect(() => {
@@ -94,10 +98,12 @@ const ChatBubble: React.FC<Props> = ({
     ? truncateMessage(text)
     : stripHTML(stripOutputTags(renderedText));
 
-  // Render MathJax whenever message content changes
+  // Format function cache content
+  const functionCacheData = message.media?.find(
+    m => m.properties?.functionCache === 'true'
+  );
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {
-      // Allow a short delay for the DOM to update
       const timer = setTimeout(() => {
         if (window.MathJax && window.MathJax.typesetPromise) {
           try {
@@ -105,9 +111,21 @@ const ChatBubble: React.FC<Props> = ({
               '.memori-chat--bubble-content'
             );
             if (elements.length > 0) {
+              // Salva la posizione di scroll corrente
+              const scrollContainer = document.querySelector('.memori-chat--history');
+              const currentScrollTop = scrollContainer?.scrollTop || 0;
+              const currentScrollHeight = scrollContainer?.scrollHeight || 0;
+              
               window.MathJax.typesetPromise([
                 '.memori-chat--bubble-content',
-              ]).catch(err =>
+              ]).then(() => {
+                // Ripristina la posizione di scroll dopo il rendering MathJax
+                if (scrollContainer) {
+                  const newScrollHeight = scrollContainer.scrollHeight;
+                  const heightDifference = newScrollHeight - currentScrollHeight;
+                  scrollContainer.scrollTop = currentScrollTop + heightDifference;
+                }
+              }).catch(err =>
                 console.error('MathJax typesetting failed:', err)
               );
             }
@@ -116,11 +134,10 @@ const ChatBubble: React.FC<Props> = ({
           }
         }
       }, 100);
-
+  
       return () => clearTimeout(timer);
     }
   }, [message.text, message.fromUser, renderedText]);
-
   return (
     <>
       {(message.initial || isFirst) && (
@@ -282,6 +299,21 @@ const ChatBubble: React.FC<Props> = ({
                   />
                 )}
 
+              {!message.fromUser &&
+                showFunctionCache &&
+                message.media?.some(
+                  m => m.properties?.functionCache === 'true'
+                ) && (
+                  <Button
+                    ghost
+                    shape="circle"
+                    title="Debug"
+                    className="memori-chat--bubble-action-icon"
+                    icon={<Bug aria-label="Debug" />}
+                    onClick={() => setOpenFunctionCache(true)}
+                  />
+                )}
+
               {showFeedback && !!simulateUserPrompt && (
                 <FeedbackButtons
                   memori={memori}
@@ -355,22 +387,6 @@ const ChatBubble: React.FC<Props> = ({
                 )}
             </div>
           )}
-
-          {message.fromUser &&
-            message.media &&
-            message.media?.length > 0 &&
-            message.media[0].properties?.isAttachedFile && (
-              <FilePreview
-                previewFiles={message.media.map(m => ({
-                  name: m.title ?? '',
-                  id: m.mediumID,
-                  content: m.content ?? '',
-                }))}
-                removeFile={() => {}}
-                allowRemove={false}
-                isMessagePreview={true}
-              />
-            )}
         </Transition.Child>
 
         {message.fromUser && (
@@ -445,6 +461,17 @@ const ChatBubble: React.FC<Props> = ({
           sessionID={sessionID}
         />
       )}
+
+      <Modal
+        title={functionCacheData?.title}
+        open={openFunctionCache}
+        onClose={() => setOpenFunctionCache(false)}
+        className="memori-chat--function-cache-modal"
+      >
+        <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
+          {functionCacheData?.content}
+        </pre>
+      </Modal>
     </>
   );
 };