feat(quantic): rich text formatting for quantic RGA

packages/quantic/.gitignore

@@ -38,6 +38,8 @@ scratch-def.ci.json
 # Static resources copied from node_modules
 force-app/main/default/staticresources/coveoheadless
 force-app/main/default/staticresources/coveobueno
+force-app/main/default/staticresources/marked
+force-app/main/default/staticresources/dompurify
 
 # Test Coverage & Report
 coverage

packages/quantic/copy-static-resources.js

@@ -12,7 +12,45 @@ const copy = async (source, dest) => {
 };
 
 const main = async () => {
-  console.info('Begin copy.');
+  console.info('Begin copy static resources');
+  await copyHeadless();
+  await copyBueno();
+  await copyMarked();
+  await copyDompurify();
+};
+
+const copyDompurify = async () => {
+  console.info('Begin copy DOMPurify.');
+
+  await mkdir('./force-app/main/default/staticresources/dompurify', {
+    recursive: true,
+  });
+
+  await copy(
+    '../../node_modules/dompurify/dist/purify.min.js',
+    './force-app/main/default/staticresources/dompurify/purify.min.js'
+  );
+
+  console.info('DOMPurify copied.');
+};
+
+const copyMarked = async () => {
+  console.info('Begin copy Marked.');
+
+  await mkdir('./force-app/main/default/staticresources/marked', {
+    recursive: true,
+  });
+
+  await copy(
+    '../../node_modules/marked/marked.min.js',
+    './force-app/main/default/staticresources/marked/marked.min.js'
+  );
+
+  console.info('Marked copied.');
+};
+
+const copyHeadless = async () => {
+  console.info('Begin copy Headless.');
 
   await mkdir(
     './force-app/main/default/staticresources/coveoheadless/case-assist',
@@ -30,15 +68,6 @@ const main = async () => {
     './force-app/main/default/staticresources/coveoheadless/definitions/',
     {recursive: true}
   );
-  await mkdir('./force-app/main/default/staticresources/coveobueno/browser', {
-    recursive: true,
-  });
-  await mkdir(
-    './force-app/main/default/staticresources/coveobueno/definitions',
-    {
-      recursive: true,
-    }
-  );
   await copy(
     '../../node_modules/@coveo/headless/dist/quantic/headless.js',
     './force-app/main/default/staticresources/coveoheadless/headless.js'
@@ -59,6 +88,22 @@ const main = async () => {
     '../../node_modules/@coveo/headless/dist/definitions',
     './force-app/main/default/staticresources/coveoheadless/definitions'
   );
+
+  console.info('Headless copied.');
+};
+
+const copyBueno = async () => {
+  console.info('Begin copy Bueno.');
+
+  await mkdir('./force-app/main/default/staticresources/coveobueno/browser', {
+    recursive: true,
+  });
+  await mkdir(
+    './force-app/main/default/staticresources/coveobueno/definitions',
+    {
+      recursive: true,
+    }
+  );
   await copy(
     '../../node_modules/@coveo/bueno/dist/browser/bueno.js',
     './force-app/main/default/staticresources/coveobueno/browser/bueno.js'
@@ -68,7 +113,7 @@ const main = async () => {
     './force-app/main/default/staticresources/coveobueno/definitions'
   );
 
-  console.info('Headless copied.');
+  console.info('Bueno copied.');
 };
 
 main().then(() => {

packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-expectations.ts

@@ -155,12 +155,30 @@ function generatedAnswerExpectations(selector: GeneratedAnswerSelector) {
         .log(`the generated answer should contain "${answer}"`);
     },
 
+    generatedAnswerContentContainsHTML: (findSelector: string) => {
+      selector
+        .generatedAnswerContentContainer()
+        .find(findSelector)
+        .log(
+          `the generated answer content should contain an element matching "${findSelector}"`
+        );
+    },
+
+    generatedAnswerContentContainsText: (text: string) => {
+      selector
+        .generatedAnswerContentContainer()
+        .contains(text)
+        .log(
+          `the generated answer content should contain text matching "${text}"`
+        );
+    },
+
     generatedAnswerIsStreaming: (isStreaming: boolean) => {
       selector
-        .generatedAnswer()
+        .generatedAnswerContentContainer()
         .should(
           isStreaming ? 'have.class' : 'not.have.class',
-          'generated-answer__answer--streaming'
+          'generated-answer-content__answer--streaming'
         )
         .log(`the generated answer ${should(isStreaming)} be streaming`);
     },

packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-selectors.ts

@@ -14,6 +14,7 @@ export interface GeneratedAnswerSelector extends ComponentSelector {
   retryButton: () => CypressSelector;
   toggleGeneratedAnswerButton: () => CypressSelector;
   generatedAnswerContent: () => CypressSelector;
+  generatedAnswerContentContainer: () => CypressSelector;
   feedbackModal: () => CypressSelector;
   feedbackOption: (index: number) => CypressSelector;
   feedbackSubmitButton: () => CypressSelector;
@@ -77,6 +78,10 @@ export const GeneratedAnswerSelectors: GeneratedAnswerSelector = {
     GeneratedAnswerSelectors.get().find(
       '[data-cy="generated-answer__content"]'
     ),
+  generatedAnswerContentContainer: () =>
+    GeneratedAnswerSelectors.get().find(
+      '[data-cy="generated-answer__content-container"]'
+    ),
   feedbackModal: () => cy.get('lightning-modal'),
   feedbackOption: (index: number) =>
     cy.get('lightning-modal').find('lightning-radio-group input').eq(index),

packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer.cypress.ts

@@ -215,6 +215,177 @@ describe('quantic-generated-answer', () => {
           });
         });
 
+        describe('handling text/markdown', () => {
+          const streamId = crypto.randomUUID();
+          const genQaMarkdownTypePayload = {
+            payloadType: 'genqa.headerMessageType',
+            payload: JSON.stringify({
+              answerStyle: 'default',
+              contentFormat: 'text/markdown',
+            }),
+          };
+
+          beforeEach(() => {
+            mockSearchWithGeneratedAnswer(streamId, param.useCase);
+          });
+
+          it('should display the generated answer content in markdown format', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta: '# Some markdown text',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+          });
+
+          it('should properly create divs instead of headings', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta: '# level1\n ## level2\n ### level3',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+            Expect.generatedAnswerContentContainsHTML(
+              'div[data-level="answer-heading-1"]'
+            );
+            Expect.generatedAnswerContentContainsText('level1');
+            Expect.generatedAnswerContentContainsHTML(
+              'div[data-level="answer-heading-2"]'
+            );
+            Expect.generatedAnswerContentContainsText('level2');
+            Expect.generatedAnswerContentContainsHTML(
+              'div[data-level="answer-heading-3"]'
+            );
+            Expect.generatedAnswerContentContainsText('level3');
+          });
+
+          it('should properly close bold tags even before receiving the closing tag', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta: '**bold text',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+            Expect.generatedAnswerContentContainsHTML('strong');
+            Expect.generatedAnswerContentContainsText('bold text');
+          });
+
+          it('should properly close code tags even before receiving the closing tag', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta: '`code text',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+            Expect.generatedAnswerContentContainsHTML('code');
+            Expect.generatedAnswerContentContainsText('code text');
+          });
+
+          it('should properly render lists as ul and li', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta: '- list item 1\n- list item 2',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+            Expect.generatedAnswerContentContainsHTML('ul');
+            Expect.generatedAnswerContentContainsHTML('li');
+            Expect.generatedAnswerContentContainsText('list item 1');
+            Expect.generatedAnswerContentContainsText('list item 2');
+          });
+
+          it('should properly render tables as scrollable-tables', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta:
+                  '| Tables | Are | Cool |\n|----------|-------------|------|\n| col1 | col2 | col3 |',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+            Expect.generatedAnswerContentContainsHTML(
+              'div.scrollable-table > table > thead'
+            );
+            Expect.generatedAnswerContentContainsHTML('th');
+            Expect.generatedAnswerContentContainsText('Tables Are Cool');
+            Expect.generatedAnswerContentContainsText('col1 col2 col3');
+          });
+
+          it('should properly render code blocks', () => {
+            const genQaMarkdownTextPayload = {
+              payloadType: 'genqa.messageType',
+              payload: JSON.stringify({
+                textDelta: '```\nconst foo = "bar";\nconsole.log(foo);\n```',
+              }),
+              finishReason: 'COMPLETED',
+            };
+            mockStreamResponse(streamId, [
+              genQaMarkdownTypePayload,
+              genQaMarkdownTextPayload,
+            ]);
+            visitGeneratedAnswer({
+              useCase: param.useCase,
+            });
+            Expect.displayGeneratedAnswerCard(true);
+            Expect.generatedAnswerContentContainsHTML('pre > code');
+            Expect.generatedAnswerContentContainsText('const foo = "bar";');
+            Expect.generatedAnswerContentContainsText('console.log(foo);');
+          });
+        });
+
         describe('when a custom value is provided to the fields to include in citations attribute', () => {
           const streamId = crypto.randomUUID();
           const customFields = 'foo,bar';

packages/quantic/cypress/page-objects/search.ts

@@ -524,8 +524,20 @@ export function mockStreamResponse(streamId: string, body: unknown) {
       url: `**/machinelearning/streaming/${streamId}`,
     },
     (request) => {
-      request.reply(200, `data: ${JSON.stringify(body)} \n\n`, {
-        'content-type': 'text/event-stream',
+      let bodyText = '';
+      if (!Array.isArray(body)) {
+        bodyText = `data: ${JSON.stringify(body)} \n\n`;
+      } else {
+        body.forEach((data) => {
+          bodyText += `data: ${JSON.stringify(data)} \n\n`;
+        });
+      }
+      request.reply({
+        statusCode: 200,
+        body: bodyText,
+        headers: {
+          'content-type': 'text/event-stream',
+        },
       });
     }
   ).as(getStreamInterceptAlias(streamId).substring(1));