@memori.ai/memori-react 7.10.0 → 7.11.0

package/esm/locales/fr.json

@@ -55,6 +55,9 @@
     "birthDateHelper": "Nous demandons votre date de naissance uniquement pour activer ou désactiver les fonctionnalités qui ont des restrictions d'âge",
     "underage": "Vous devez être au moins {{age}} ans pour s'inscrire.",
     "underageTwinSession": "Vous devez être au moins {{age}} ans pour interagir avec ce Twin.",
+    "errorFetchingSession": "Erreur lors du chargement de la session",
+    "errorGettingReferralURL": "Erreur lors du chargement du référent",
+    "errorReopeningSession": "Erreur lors de la re-ouverture de la session",
     "ageVerification": "Vérification de l'âge",
     "ageVerificationText": "Pour interagir avec ce Twin, vous devez être au minimum {{minAge}} ans.",
     "nsfw": "NSFW : Ce jumeau contient du contenu pour adultes",

package/esm/locales/it.json

@@ -55,6 +55,9 @@
     "birthDateHelper": "Ti chiediamo la data di nascita esclusivamente per abilitare o disabilitare le funzionalità che hanno restrizioni in base all'età",
     "underage": "Devi avere almeno {{age}} anni per registrarti.",
     "underageTwinSession": "Devi avere almeno {{age}} anni per interagire con questo Twin.",
+    "errorFetchingSession": "Errore durante il caricamento della sessione",
+    "errorGettingReferralURL": "Errore durante il caricamento del riferimento",
+    "errorReopeningSession": "Errore durante il riapertura della sessione",
     "ageVerification": "Verifica dell'età",
     "ageVerificationText": "Per interagire con questo Twin, devi aver almeno {{minAge}} anni.",
     "nsfw": "NSFW: Questo Twin contiene contenuti per adulti",
@@ -108,6 +111,7 @@
         "pageTryMeExplanation": "Per parlare con me clicca sul pulsante INIZIAMO per cominciare",
         "instructButton": "ISTRUISCIMI",
         "tryMeButton": "INIZIAMO",
+        "resumeButton": "RIPRENDI",
         "chatHistory": "Cronologia chat",
         "exportChatHistory": "Esporta la cronologia chat",
         "exportChatHistoryMessage": "Vuoi esportare la cronologia chat?",

package/package.json

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

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -1,5 +1,5 @@
 .age-verification-modal {
-    z-index: 1001;
+    z-index: 9999;
 }
 
 .age-verification-modal,

package/src/components/Chat/Chat.tsx

@@ -69,6 +69,7 @@ export interface Props {
   userAvatar?: MemoriProps['userAvatar'];
   user?: User;
   experts?: ExpertReference[];
+  useMathFormatting?: boolean;
 }
 
 const Chat: React.FC<Props> = ({
@@ -115,6 +116,7 @@ const Chat: React.FC<Props> = ({
   user,
   userAvatar,
   experts,
+  useMathFormatting = false,
 }) => {
   const scrollToBottom = () => {
     setTimeout(() => {
@@ -132,7 +134,7 @@ const Chat: React.FC<Props> = ({
 
   const onTextareaFocus = () => {
     stopListening();
-    const hasTouch = hasTouchscreen();  
+    const hasTouch = hasTouchscreen();
 
     if (hasTouch) setEnableFocusChatInput(true);
     // if the user is on mobile and had not recorded audio, add the chat-focused class to the chat wrapper
@@ -229,6 +231,7 @@ const Chat: React.FC<Props> = ({
                 userAvatar={userAvatar}
                 experts={experts}
                 showCopyButton={showCopyButton}
+                useMathFormatting={useMathFormatting}
               />
               {showDates && !!message.timestamp && (
                 <small

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

@@ -341,11 +341,38 @@ MarkdownWithSquareBrackets.args = {
   },
 };
 
+export const MarkdownWithSquareBracketsAndTable = Template.bind({});
+MarkdownWithSquareBracketsAndTable.args = {
+  memori,
+  apiUrl: 'https://backend.memori.ai',
+  tenant,
+  message: {
+    fromUser: false,
+    initial: false,
+    generatedByAI: true,
+    text: `<table border="1" style="border-collapse: collapse; width: 100%; table-layout: fixed; font-family: Arial, sans-serif;">
+<tr style="background-color: #f0f0f0;">
+ <th style="text-align: left; padding: 8px; width: 200px;">Attività</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Dic 2024</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Gen 2025</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Feb 2025</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Mar 2025</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Apr 2025</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Mag 2025</th>
+ <th colspan="4" style="text-align: center; padding: 8px;">Giu 2025</th>
+</tr>
+</table>
+
+[Vuoi che continui con l'intera tabella mantenendo lo stesso formato della precedente ma con table-layout: fixed per garantire celle di uguale dimensione?]`,
+  },
+};
+
 export const ComplexMarkdownMath1 = Template.bind({});
 ComplexMarkdownMath1.args = {
   memori,
   apiUrl: 'https://backend.memori.ai',
   tenant,
+  useMathFormatting: true,
   message: {
     fromUser: false,
     initial: false,
@@ -359,6 +386,7 @@ ComplexMarkdownMath2.args = {
   memori,
   apiUrl: 'https://backend.memori.ai',
   tenant,
+  useMathFormatting: true,
   message: {
     fromUser: false,
     initial: false,
@@ -372,6 +400,7 @@ ComplexMarkdownMath3.args = {
   memori,
   apiUrl: 'https://backend.memori.ai',
   tenant,
+  useMathFormatting: true,
   message: {
     fromUser: false,
     initial: false,
@@ -385,6 +414,7 @@ ComplexMarkdownMath4.args = {
   memori,
   apiUrl: 'https://backend.memori.ai',
   tenant,
+  useMathFormatting: true,
   message: {
     fromUser: false,
     initial: false,
@@ -397,6 +427,7 @@ export const ComplexMarkdownMath5 = Template.bind({});
 ComplexMarkdownMath5.args = {
   memori,
   tenant,
+  useMathFormatting: true,
   apiUrl: 'https://backend.memori.ai',
   message: {
     fromUser: false,
@@ -410,6 +441,7 @@ export const ComplexMarkdownMath6 = Template.bind({});
 ComplexMarkdownMath6.args = {
   memori,
   tenant,
+  useMathFormatting: true,
   apiUrl: 'https://backend.memori.ai',
   message: {
     fromUser: false,
@@ -439,6 +471,7 @@ ComplexMarkdownMath7.args = {
   memori,
   tenant,
   apiUrl: 'https://backend.memori.ai',
+  useMathFormatting: true,
   message: {
     fromUser: false,
     initial: false,

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -266,12 +266,30 @@ it('renders ChatBubble with markdown table unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders ChatBubble with complex markdown and math but disabled unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      useMathFormatting={false}
+      message={{
+        fromUser: false,
+        text: `Per calcolare l'ipotenusa di un triangolo rettangolo, puoi usare il Teorema di Pitagora. Il teorema afferma che in un triangolo rettangolo, il quadrato dell'ipotenusa (la lato opposto all'angolo retto) è uguale alla somma dei quadrati degli altri due lati.\n\nLa formula è:\n\n\\[ c = \\sqrt{a^2 + b^2} \\]\n\nDove:\n- $c$ è l'ipotenusa.\n- $a$ e $ b $ sono i due cateti del triangolo.\n\n### Passaggi per il Calcolo\n\n1. **Misura o identifica i cateti $ a $ e $ b $**:\n   I cateti sono i due lati che formano l'angolo retto.\n\n2. **Calcola i quadrati dei cateti**:\n   Eleva al quadrato entrambe le misure dei cateti: $ a^2 $ e $ b^2 $.\n\n3. **Somma i quadrati dei cateti**:\n   Somma i risultati ottenuti: $ a^2 + b^2 $.\n\n4. **Calcola la radice quadrata della somma**:\n   Prendi la radice quadrata della somma per trovare l'ipotenusa: $ c = \\sqrt{a^2 + b^2} $.\n\n### Esempio di Calcolo\n\nSupponiamo di avere un triangolo rettangolo con i cateti di lunghezza 3 cm e 4 cm.\n\n1. **Cateto $ a $**: 3 cm\n2. **Cateto $ b $**: 4 cm\n\nUsiamo la formula:\n\n\\[ c = \\sqrt{a^2 + b^2} \\]\n\n\\[ c = \\sqrt{(3 \\, \\text{cm})^2 + (4 \\, \\text{cm})^2} \\]\n\n\\[ c = \\sqrt{9 \\, \\text{cm}^2 + 16 \\, \\text{cm}^2} \\]\n\n\\[ c = \\sqrt{25 \\, \\text{cm}^2} \\]\n\n\\[ c = 5 \\, \\text{cm} \\]\n\nQuindi, l'ipotenusa del triangolo è di 5 cm.`,
+        initial: false,
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders ChatBubble with complex markdown and math 1 unchanged', () => {
   const { container } = render(
     <ChatBubble
       memori={memori}
       tenant={tenant}
       sessionID={sessionID}
+      useMathFormatting
       message={{
         fromUser: false,
         text: `Per calcolare l'ipotenusa di un triangolo rettangolo, puoi usare il Teorema di Pitagora. Il teorema afferma che in un triangolo rettangolo, il quadrato dell'ipotenusa (la lato opposto all'angolo retto) è uguale alla somma dei quadrati degli altri due lati.\n\nLa formula è:\n\n\\[ c = \\sqrt{a^2 + b^2} \\]\n\nDove:\n- $c$ è l'ipotenusa.\n- $a$ e $ b $ sono i due cateti del triangolo.\n\n### Passaggi per il Calcolo\n\n1. **Misura o identifica i cateti $ a $ e $ b $**:\n   I cateti sono i due lati che formano l'angolo retto.\n\n2. **Calcola i quadrati dei cateti**:\n   Eleva al quadrato entrambe le misure dei cateti: $ a^2 $ e $ b^2 $.\n\n3. **Somma i quadrati dei cateti**:\n   Somma i risultati ottenuti: $ a^2 + b^2 $.\n\n4. **Calcola la radice quadrata della somma**:\n   Prendi la radice quadrata della somma per trovare l'ipotenusa: $ c = \\sqrt{a^2 + b^2} $.\n\n### Esempio di Calcolo\n\nSupponiamo di avere un triangolo rettangolo con i cateti di lunghezza 3 cm e 4 cm.\n\n1. **Cateto $ a $**: 3 cm\n2. **Cateto $ b $**: 4 cm\n\nUsiamo la formula:\n\n\\[ c = \\sqrt{a^2 + b^2} \\]\n\n\\[ c = \\sqrt{(3 \\, \\text{cm})^2 + (4 \\, \\text{cm})^2} \\]\n\n\\[ c = \\sqrt{9 \\, \\text{cm}^2 + 16 \\, \\text{cm}^2} \\]\n\n\\[ c = \\sqrt{25 \\, \\text{cm}^2} \\]\n\n\\[ c = 5 \\, \\text{cm} \\]\n\nQuindi, l'ipotenusa del triangolo è di 5 cm.`,
@@ -288,6 +306,7 @@ it('renders ChatBubble with complex markdown and math 2 unchanged', () => {
       memori={memori}
       tenant={tenant}
       sessionID={sessionID}
+      useMathFormatting
       message={{
         fromUser: false,
         text: "Per calcolare le resistenze dei materiali per le verifiche rispetto ad azioni antropiche e ambientali secondo la Specifica Tecnica ST-VAL4, si procede in questo modo:\n\n1. **Determinazione della resistenza dei materiali:**\n   La resistenza dei materiali da utilizzare nelle verifiche accurate si determina a partire dalle indagini sull’opera. La caratterizzazione deve essere distinta per tutti i materiali presenti nell'opera, in accordo con la ST-PI. Le resistenze per verifiche rispetto ad azioni antropiche come i carichi da traffico e le azioni ambientali sono definite dalle LG20. Questo include la distinzione rispetto a quelle utilizzate per le azioni sismiche, come dettagliato dalle NTC18 e CIR19  .\n\n2. **Calcolo della resistenza:**\n   Il valore della resistenza dei materiali $ f_d $ da utilizzare nelle verifiche per carichi gravitazionali si ottiene mediante la seguente espressione:\n\n   \\[\n   f_d = \\min \\left( \\frac{f_m}{FC \\cdot \\gamma_M}, \\frac{f_k}{FC} \\right)\n   \\]\n\n   Dove:\n   - $ f_m $ è il valor medio della resistenza valutato dai risultati delle prove effettuate sui campioni prelevati in situ;\n   - $ f_k $ è la resistenza caratteristica calcolata sulla base dei risultati delle prove sui campioni prelevati in situ;\n   - $ FC $ è il Fattore di Confidenza associato al Livello di Conoscenza raggiunto;\n   - $ \\gamma_M $ è il fattore parziale di sicurezza del materiale   .\n\n3. **Caratterizzazione dei materiali:**\n   I valori medi, caratteristici e di progetto delle resistenze a compressione e trazione per il calcestruzzo, e delle resistenze a snervamento per l’acciaio ordinario sono determinati a partire dai risultati delle prove. Specifiche espressioni e metodi sono forniti per diversi materiali nell'Appendice 13 della ST-VAL4  .\n\n4. **Stima della resistenza da prove non distruttive:**\n   Per valutare le resistenze dei materiali, si possono anche utilizzare prove non distruttive come le prove SonReb per il calcestruzzo e le prove di durezza per l'acciaio ordinario e armonico. Formulazioni specifiche per queste prove si trovano in Appendice al §13.1 della ST-VAL4 .\n\n5. **Analisi dei risultati delle indagini:**\n   Gli esiti delle prove devono essere attentamente analizzati per confermare le caratteristiche originarie o rilevare eventuali decadimenti del materiale. Questo processo include anche l'identificazione delle cause di dispersione significative nei risultati delle prove  .\n\nSeguendo questi passaggi, si ottiene una stima accurata delle resistenze dei materiali che possono essere utilizzate per le verifiche di sicurezza rispetto ad azioni antropiche e ambientali.",
@@ -304,6 +323,7 @@ it('renders ChatBubble with complex markdown and math 3 unchanged', () => {
       memori={memori}
       tenant={tenant}
       sessionID={sessionID}
+      useMathFormatting
       message={{
         fromUser: false,
         initial: false,
@@ -320,6 +340,7 @@ it('renders ChatBubble with complex markdown and math 4 unchanged', () => {
       memori={memori}
       tenant={tenant}
       sessionID={sessionID}
+      useMathFormatting
       message={{
         fromUser: false,
         initial: false,
@@ -336,6 +357,7 @@ it('renders ChatBubble with complex markdown and math 5 unchanged', () => {
       memori={memori}
       tenant={tenant}
       sessionID={sessionID}
+      useMathFormatting
       message={{
         fromUser: false,
         initial: false,

package/src/components/ChatBubble/ChatBubble.tsx

@@ -29,24 +29,6 @@ import markedLinkifyIt from 'marked-linkify-it';
 import markedKatex from 'marked-katex-extension';
 import markedExtendedTables from '../../helpers/markedExtendedTables';
 
-export interface Props {
-  message: Message;
-  memori: Memori;
-  sessionID: string;
-  tenant?: Tenant;
-  baseUrl?: string;
-  apiUrl?: string;
-  showFeedback?: boolean;
-  showWhyThisAnswer?: boolean;
-  showCopyButton?: boolean;
-  showTranslationOriginal?: boolean;
-  simulateUserPrompt?: (msg: string) => void;
-  showAIicon?: boolean;
-  isFirst?: boolean;
-  userAvatar?: MemoriProps['userAvatar'];
-  user?: User;
-  experts?: ExpertReference[];
-}
 
 marked.use({
   async: false,
@@ -55,6 +37,7 @@ marked.use({
   renderer: {
     link: ({ href, title, text }) => {
       const cleanHref = cleanUrl(href);
+
       if (cleanHref === null) {
         return text;
       }
@@ -69,14 +52,100 @@ marked.use({
   },
 });
 marked.use(markedLinkifyIt());
-marked.use(
-  markedKatex({
-    throwOnError: false,
-    output: 'htmlAndMathml',
-  })
-);
 marked.use(markedExtendedTables());
 
+const parseSquaredBrackets = (text: string) => {
+  const rows = text.split('\n');
+
+  return rows.reduce((acc, row) => {
+    if (row.includes('=')) {
+      let result = '';
+      let isEscaped = false;
+      for (let i = 0; i < row.length; i++) {
+        if (row[i] === '[' && !isEscaped) {
+          result += '\\[';
+        } else if (row[i] === ']' && !isEscaped) {
+          result += '\\]';
+        } else {
+          result += row[i];
+        }
+        isEscaped = row[i] === '\\' && !isEscaped;
+      }
+
+      return acc?.length ? `${acc}\n${result}` : result;
+    } else {
+      return acc?.length ? `${acc}\n${row}` : row;
+    }
+  }, '');
+};
+
+const renderMsg = (text: string, useMathFormatting = false) => {
+  try {
+    let parsedText = DOMPurify.sanitize(
+      (
+        marked.parse(
+          text
+            // remove leading and trailing whitespaces
+            .trim()
+            // remove markdown links
+            .replaceAll(
+              /\[([^\]]+)\]\(([^\)]+)\)/g,
+              '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+            )
+            // remove markdown multiline code blocks but keep the content
+            .replaceAll(/```markdown([^```]+)```/g, '$1')
+            .replaceAll('($', '( $')
+            .replaceAll(':$', ': $')
+            .replaceAll('\frac', '\\frac')
+            .replaceAll('\beta', '\\beta')
+            .replaceAll('cdot', '\\cdot')
+        ) as string
+      )
+        .trim()
+        .replace(/\n/g, '<br>'),
+      {
+        ADD_ATTR: ['target'],
+      }
+    );
+
+    if (useMathFormatting) {
+      parsedText = parseSquaredBrackets(parsedText);
+    }
+
+    return (
+      parsedText
+        // replace consecutive <br> with a single <br>
+        .replace(/(<br>)+/g, '<br>')
+        // remove empty paragraphs
+        .replace(/<p><\/p>/g, '<br>')
+        .replace(/<p><br><\/p>/g, '<br>')
+    );
+  } catch (e) {
+    console.error(e);
+    return text;
+  }
+};
+
+export interface Props {
+  message: Message;
+  memori: Memori;
+  sessionID: string;
+  tenant?: Tenant;
+  baseUrl?: string;
+  apiUrl?: string;
+  showFeedback?: boolean;
+  showWhyThisAnswer?: boolean;
+  showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
+  simulateUserPrompt?: (msg: string) => void;
+  showAIicon?: boolean;
+  useMathFormatting?: boolean;
+  isFirst?: boolean;
+  userAvatar?: MemoriProps['userAvatar'];
+  user?: User;
+  experts?: ExpertReference[];
+}
+
 const ChatBubble: React.FC<Props> = ({
   message,
   memori,
@@ -91,6 +160,7 @@ const ChatBubble: React.FC<Props> = ({
   simulateUserPrompt,
   showAIicon = true,
   isFirst = false,
+  useMathFormatting = false,
   user,
   userAvatar,
   experts,
@@ -99,83 +169,29 @@ const ChatBubble: React.FC<Props> = ({
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
 
-  const text = message.translatedText || message.text;
-
-  const parseSquaredBrackets = (text: string) => {
-    const rows = text.split('\n');
+  if (useMathFormatting) {
+    marked.use(
+      markedKatex({
+        throwOnError: false,
+        output: 'htmlAndMathml',
+      })
+    );
+  }
 
-    return rows.reduce((acc, row) => {
-      if (row.includes('=')) {
-        let result = '';
-        let isEscaped = false;
-        for (let i = 0; i < row.length; i++) {
-          if (row[i] === '[' && !isEscaped) {
-            result += '\\[';
-          } else if (row[i] === ']' && !isEscaped) {
-            result += '\\]';
-          } else {
-            result += row[i];
-          }
-          isEscaped = row[i] === '\\' && !isEscaped;
-        }
-
-        return acc?.length ? `${acc}\n${result}` : result;
-      } else {
-        return acc?.length ? `${acc}\n${row}` : row;
-      }
-    }, '');
-  };
+  const text = message.translatedText || message.text;
 
-  const renderMsg = (text: string) => {
-    try {
-      return (
-        parseSquaredBrackets(
-          DOMPurify.sanitize(
-            (
-              marked.parse(
-                text
-                  // remove leading and trailing whitespaces
-                  .trim()
-                  // remove markdown links
-                  .replaceAll(
-                    /\[([^\]]+)\]\(([^\)]+)\)/g,
-                    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
-                  )
-                  // remove markdown multiline code blocks but keep the content
-                  .replaceAll(/```markdown([^```]+)```/g, '$1')
-                  .replaceAll('($', '( $')
-                  .replaceAll(':$', ': $')
-                  .replaceAll('\frac', '\\frac')
-                  .replaceAll('\beta', '\\beta')
-                  .replaceAll('cdot', '\\cdot')
-              ) as string
-            )
-              .trim()
-              .replace(/\n/g, '<br>'),
-            {
-              ADD_ATTR: ['target'],
-            }
-          )
-        )
-          // replace consecutive <br> with a single <br>
-          .replace(/(<br>)+/g, '<br>')
-          // remove empty paragraphs
-          .replace(/<p><\/p>/g, '<br>')
-          .replace(/<p><br><\/p>/g, '<br>')
-      );
-    } catch (e) {
-      console.error(e);
-      return text;
-    }
-  };
-  const renderedText = renderMsg(text);
+  const renderedText = renderMsg(text, useMathFormatting);
 
   const plainText = message.fromUser
     ? text
     : stripHTML(stripOutputTags(renderedText));
 
   useLayoutEffect(() => {
-    if (typeof window !== 'undefined' && !message.fromUser) {
+    if (
+      typeof window !== 'undefined' &&
+      !message.fromUser &&
+      useMathFormatting
+    ) {
       // @ts-ignore
       // eslint-disable-next-line no-undef
       if ('MathJax' in window && window.MathJax.typesetPromise)
@@ -183,7 +199,7 @@ const ChatBubble: React.FC<Props> = ({
         // eslint-disable-next-line no-undef
         window.MathJax.typesetPromise(['.memori-chat--bubble-content']);
     }
-  }, [message.text, message.fromUser]);
+  }, [message.text, message.fromUser, useMathFormatting]);
 
   return (
     <>