fix: markdown formatting lists and newlines

memori-ai · Dec 6, 2024 · ff42a33 · ff42a33
1 parent 0f71164
commit ff42a33
Show file tree

Hide file tree

Showing 3 changed files with 546 additions and 320 deletions.
diff --git a/src/components/ChatBubble/ChatBubble.stories.tsx b/src/components/ChatBubble/ChatBubble.stories.tsx
@@ -253,7 +253,35 @@ WithMarkdown.args = {
   tenant,
   message: {
     fromUser: false,
-    text: '## Test\n\nEcco tutte le possibili personalizzazioni che puoi applicare:\n\n- **Colletto**:\n - Girocollo\n - Scollo a V\n\n- **Manica**:\n - Manica Lunga\n - Manica Corta\n\n- **Taglia**:\n - XS\n - S\n - M\n - L\n - XL\n - XXL\n - 3XL\n\n- **Posizione Stampa**:\n - Fronte Petto\n - Retro Schiena\n - Fronte DX\n - Fronte SX\n\n- **Generazione Immagine**:\n - Prompt generazione immagine\n\nSeleziona le personalizzazioni che desideri applicare.\n\n[Vedi altro](https://memori.ai)',
+    text: `## Test
+
+Ecco tutte le possibili personalizzazioni che puoi applicare:
+
+- **Colletto**:
+  - Girocollo
+  - Scollo a V
+- **Manica**:
+  - Manica Lunga
+  - Manica Corta
+- **Taglia**:
+  - XS
+  - S\
+  - M
+  - L
+  - XL
+  - XXL
+  - 3XL
+- **Posizione Stampa**:
+  - Fronte Petto
+  - Retro Schiena
+  - Fronte DX
+  - Fronte SX
+- **Generazione Immagine**:
+  - Prompt generazione immagine
+
+Seleziona le personalizzazioni che desideri applicare.
+
+[Vedi altro](https://memori.ai)`,
     initial: false,
     generatedByAI: true,
   },
@@ -367,6 +395,36 @@ MarkdownWithSquareBracketsAndTable.args = {
   },
 };
 
+export const MarkdownWithLists = Template.bind({});
+MarkdownWithLists.args = {
+  memori,
+  apiUrl: 'https://backend.memori.ai',
+  tenant,
+  message: {
+    fromUser: false,
+    initial: false,
+    generatedByAI: true,
+    text: `I buoni spesa sono acquistabili con il credito Fringe Benefit (pari a 1.000 € per l'anno 2024) e si distinguono in 3 tipologie:
+
+1. **Buoni Elettronici**:
+- Emessi digitalmente
+- Scaricabili/stampabili dalla piattaforma
+- Consegna in 3-4 giorni lavorativi
+
+2. **Buoni Fisici**:
+- Tessere fisiche inviate direttamente
+- Tempi di consegna più lunghi
+
+3. **Buoni Elettronici Locali**:
+- Emessi da fornitori della zona
+- Inviati in formato PDF
+
+**NOTA IMPORTANTE**: Non è possibile acquistare buoni Amazon sulla piattaforma TreCuori.
+
+Se hai bisogno di vedere quali buoni sono disponibili e dove spenderli, fammi sapere!`,
+  },
+};
+
 export const ComplexMarkdownMath1 = Template.bind({});
 ComplexMarkdownMath1.args = {
   memori,

diff --git a/src/components/ChatBubble/ChatBubble.tsx b/src/components/ChatBubble/ChatBubble.tsx
@@ -33,7 +33,7 @@ import markedExtendedTables from '../../helpers/markedExtendedTables';
 marked.use({
   async: false,
   gfm: true,
-  pedantic: true,
+  pedantic: false,
   renderer: {
     link: ({ href, title, text }) => {
       const cleanHref = cleanUrl(href);
@@ -81,37 +81,34 @@ const parseSquaredBrackets = (text: string) => {
 
 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'],
-      }
-    );
+    let parsedText = (
+      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();
 
     if (useMathFormatting) {
-      parsedText = parseSquaredBrackets(parsedText);
+      parsedText = parseSquaredBrackets(parsedText.replace(/\n/g, '<br>'));
     }
 
+    parsedText = DOMPurify.sanitize(parsedText, {
+      ADD_ATTR: ['target'],
+    });
+
     return (
       parsedText
         // replace consecutive <br> with a single <br>