@memori.ai/memori-react 7.9.1 → 7.11.0

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,32 +29,15 @@ 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,
   gfm: true,
   pedantic: true,
   renderer: {
-    link(href: string, title: string | null | undefined, text: string) {
+    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,78 +169,29 @@ const ChatBubble: React.FC<Props> = ({
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
 
-  const text = message.translatedText || message.text;
+  if (useMathFormatting) {
+    marked.use(
+      markedKatex({
+        throwOnError: false,
+        output: 'htmlAndMathml',
+      })
+    );
+  }
 
-  // remove redundant mathjax delimiters: old code
-  // .replaceAll(/(?<!\\)\[/g, '\\[')
-  // .replaceAll(/(?<!\\)\]/g, '\\]')
-  // since old Safari < 16.4 doesn't support negative lookbehind, we need to use a workaround
-  const parseSquaredBrackets = (text: string) => {
-    let result = '';
-    let isEscaped = false;
-    for (let i = 0; i < text.length; i++) {
-      if (text[i] === '[' && !isEscaped) {
-        result += '\\[';
-      } else if (text[i] === ']' && !isEscaped) {
-        result += '\\]';
-      } else {
-        result += text[i];
-      }
-      isEscaped = text[i] === '\\' && !isEscaped;
-    }
-    return result;
-  };
+  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 = message.fromUser ? text : 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)
@@ -178,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 (
     <>

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

@@ -12,7 +12,9 @@ exports[`renders ChatBubble from user with avatar as react element unchanged 1`]
         class="memori-chat--bubble-content"
         dir="auto"
       >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
       </div>
     </div>
     <div
@@ -38,7 +40,9 @@ exports[`renders ChatBubble from user with avatar unchanged 1`] = `
         class="memori-chat--bubble-content"
         dir="auto"
       >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
       </div>
     </div>
     <picture
@@ -66,7 +70,9 @@ exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
         class="memori-chat--bubble-content"
         dir="auto"
       >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
       </div>
     </div>
     <picture
@@ -3422,6 +3428,235 @@ exports[`renders ChatBubble with complex markdown and math 5 unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ChatBubble with complex markdown and math but disabled unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container"
+  >
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+      title="Memori"
+    >
+      <img
+        alt="Memori"
+        class="memori-chat--bubble-avatar-img"
+        src="https://aisuru.com/images/aisuru/square_logo.png"
+      />
+    </picture>
+    <div
+      class="memori-chat--bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <div
+        class="memori-chat--bubble-content"
+        dir="auto"
+      >
+        <p>
+          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.
+        </p>
+        <br />
+        <p>
+          La formula è:
+        </p>
+        <br />
+        <p>
+          [ c = \\sqrt{a^2 + b^2} ]
+        </p>
+        <br />
+        <p>
+          Dove:
+          <br />
+          - $c$ è l'ipotenusa.
+          <br />
+          - $a$ e $ b $ sono i due cateti del triangolo.
+        </p>
+        <br />
+        <h3>
+          Passaggi per il Calcolo
+        </h3>
+        <br />
+        <ol>
+          <br />
+          <li>
+            <p>
+              <strong>
+                Misura o identifica i cateti $ a $ e $ b $
+              </strong>
+              :
+              <br />
+              I cateti sono i due lati che formano l'angolo retto.
+            </p>
+            <br />
+          </li>
+          <br />
+          <li>
+            <p>
+              <strong>
+                Calcola i quadrati dei cateti
+              </strong>
+              :
+              <br />
+              Eleva al quadrato entrambe le misure dei cateti: $ a^2 $ e $ b^2 $.
+            </p>
+            <br />
+          </li>
+          <br />
+          <li>
+            <p>
+              <strong>
+                Somma i quadrati dei cateti
+              </strong>
+              :
+              <br />
+              Somma i risultati ottenuti: $ a^2 + b^2 $.
+            </p>
+            <br />
+          </li>
+          <br />
+          <li>
+            <p>
+              <strong>
+                Calcola la radice quadrata della somma
+              </strong>
+              :
+              <br />
+              Prendi la radice quadrata della somma per trovare l'ipotenusa: $ c = \\sqrt{a^2 + b^2} $.
+            </p>
+            <br />
+          </li>
+          <br />
+        </ol>
+        <br />
+        <h3>
+          Esempio di Calcolo
+        </h3>
+        <br />
+        <p>
+          Supponiamo di avere un triangolo rettangolo con i cateti di lunghezza 3 cm e 4 cm.
+        </p>
+        <br />
+        <ol>
+          <br />
+          <li>
+            <strong>
+              Cateto $ a $
+            </strong>
+            : 3 cm
+          </li>
+          <br />
+          <li>
+            <strong>
+              Cateto $ b $
+            </strong>
+            : 4 cm
+          </li>
+          <br />
+        </ol>
+        <br />
+        <p>
+          Usiamo la formula:
+        </p>
+        <br />
+        <p>
+          [ c = \\sqrt{a^2 + b^2} ]
+        </p>
+        <br />
+        <p>
+          [ c = \\sqrt{(3 , \\text{cm})^2 + (4 , \\text{cm})^2} ]
+        </p>
+        <br />
+        <p>
+          [ c = \\sqrt{9 , \\text{cm}^2 + 16 , \\text{cm}^2} ]
+        </p>
+        <br />
+        <p>
+          [ c = \\sqrt{25 , \\text{cm}^2} ]
+        </p>
+        <br />
+        <p>
+          [ c = 5 , \\text{cm} ]
+        </p>
+        <br />
+        <p>
+          Quindi, l'ipotenusa del triangolo è di 5 cm.
+        </p>
+      </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copyRawCode"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 9.5 8 12l2 2.5"
+              />
+              <path
+                d="m14 9.5 2 2.5-2 2.5"
+              />
+              <rect
+                height="18"
+                rx="2"
+                width="18"
+                x="3"
+                y="3"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ChatBubble with copy disabled unchanged 1`] = `
 <div>
   <div
@@ -4174,7 +4409,9 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
         class="memori-chat--bubble-content"
         dir="auto"
       >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
       </div>
       <div
         class="memori-chat--bubble-addon"
@@ -4257,7 +4494,9 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
         class="memori-chat--bubble-content"
         dir="auto"
       >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
       </div>
       <div
         class="memori-chat--bubble-addon"
@@ -4472,7 +4711,9 @@ exports[`renders ChatBubble with user msg unchanged 1`] = `
         class="memori-chat--bubble-content"
         dir="auto"
       >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
       </div>
     </div>
     <div

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -5,6 +5,7 @@ import I18nWrapper from '../../I18nWrapper';
 import MemoriWidget, { Props } from './MemoriWidget';
 
 import './MemoriWidget.css';
+import { VisemeProvider } from '../../context/visemeContext';
 
 const meta: Meta = {
   title: 'Widget/Default',
@@ -36,7 +37,9 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <MemoriWidget {...args} />
+    <VisemeProvider>
+      <MemoriWidget {...args} />
+    </VisemeProvider>
   </I18nWrapper>
 );
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test