fix(atomic): make sure to escape any HTML generated by the AI model (#…

…4100) [SVCC-3883](https://coveord.atlassian.net/browse/SVCC-3883) An issue was reported where the AI model would generate an answer containing HTML elements (as examples). For instance, the generated answer would only contain an opening tag. The HTML element was not escaped and prevented the answer from being entirely displayed. This PR fixes the issue by escaping any HTML coming from the AI model. [SVCC-3883]: https://coveord.atlassian.net/browse/SVCC-3883?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
coveo · Jul 4, 2024 · 18d9646 · 18d9646
1 parent 3890010
commit 18d9646
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 25 deletions.
diff --git a/...es/atomic/src/components/common/generated-answer/generated-content/markdown-utils.test.ts b/...es/atomic/src/components/common/generated-answer/generated-content/markdown-utils.test.ts
@@ -88,6 +88,22 @@ describe('markdownUtils', () => {
       );
     });
 
+    it('should escape HTML in inline code', () => {
+      const text = '`<html>`';
+
+      const html = transformMarkdownToHtml(text);
+
+      expect(removeLineBreaks(html)).toBe(
+        removeLineBreaks(
+          unindentHtml(`
+            <p part="answer-paragraph">
+              <code part="answer-inline-code">&lt;html&gt;</code>
+            </p>
+          `)
+        )
+      );
+    });
+
     it('should transform unordered lists', () => {
       const text = '* item A\n* item B';
 
@@ -188,33 +204,90 @@ describe('markdownUtils', () => {
       );
     });
 
-    it('should transform tables', () => {
-      const text = '| Col A | Col B |\n| --- | --- |\n| A | B |';
+    describe('tables', () => {
+      it('should transform tables', () => {
+        const text = '| Col A | Col B |\n| --- | --- |\n| A | B |';
 
-      const html = transformMarkdownToHtml(text);
+        const html = transformMarkdownToHtml(text);
 
-      expect(removeLineBreaks(html)).toBe(
-        removeLineBreaks(
-          unindentHtml(`
-            <div part="answer-table-container" class="scrollable-table">
-              <table part="answer-table">
-                <thead>
-                  <tr>
-                    <th part="answer-table-header">Col A</th>
-                    <th part="answer-table-header">Col B</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td part="answer-table-content">A</td>
-                    <td part="answer-table-content">B</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          `)
-        )
-      );
+        expect(removeLineBreaks(html)).toBe(
+          removeLineBreaks(
+            unindentHtml(`
+              <div part="answer-table-container" class="scrollable-table">
+                <table part="answer-table">
+                  <thead>
+                    <tr>
+                      <th part="answer-table-header">Col A</th>
+                      <th part="answer-table-header">Col B</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td part="answer-table-content">A</td>
+                      <td part="answer-table-content">B</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            `)
+          )
+        );
+      });
+
+      it('should escape HTML in table cell', () => {
+        const text = '| Example |\n| --- |\n| <html> |';
+
+        const html = transformMarkdownToHtml(text);
+
+        expect(removeLineBreaks(html)).toBe(
+          removeLineBreaks(
+            unindentHtml(`
+              <div part="answer-table-container" class="scrollable-table">
+                <table part="answer-table">
+                  <thead>
+                    <tr>
+                      <th part="answer-table-header">Example</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td part="answer-table-content">&lt;html&gt;</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>`)
+          )
+        );
+      });
+
+      it('should keep HTML from Markdown formatting', () => {
+        const text = '| Example |\n| --- |\n| **bold text** |';
+
+        const html = transformMarkdownToHtml(text);
+
+        expect(removeLineBreaks(html)).toBe(
+          removeLineBreaks(
+            unindentHtml(`
+              <div part="answer-table-container" class="scrollable-table">
+                <table part="answer-table">
+                  <thead>
+                    <tr>
+                      <th part="answer-table-header">Example</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td part="answer-table-content">
+                        <strong part="answer-strong">bold text</strong>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            `)
+          )
+        );
+      });
     });
 
     describe('headings', () => {

diff --git a/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts b/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts
@@ -51,6 +51,10 @@ const customRenderer = {
     return `<div part="answer-heading-${level}" aria-label="${text}">${text}</div>`;
   },
 
+  html(text: string) {
+    return escapeHtml(text);
+  },
+
   list(body: string, ordered: boolean, start: number | '') {
     const type = ordered ? 'ol' : 'ul';
     const part = ordered ? 'answer-ordered-list' : 'answer-unordered-list';