feat(atomic): added Generated Answer component

.cspell.json

@@ -257,6 +257,7 @@
     "ytlikecount",
     "ytvideoduration",
     "ytvideoid",
-    "ytviewcount"
+    "ytviewcount",
+    "genqa"
   ]
 }

packages/atomic/cypress/e2e/generated-answer-actions.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {RouteAlias} from '../fixtures/fixture-common';
+import {TestFixture, generateComponentHTML} from '../fixtures/test-fixture';
+
+export const getStreamInterceptAlias = (streamId: string) =>
+  `${RouteAlias.GenQAStream}-${streamId}`;
+
+export function mockStreamResponse(streamId: string, body: any) {
+  cy.intercept(
+    {
+      method: 'GET',
+      url: `**/machinelearning/streaming/${streamId}`,
+    },
+    (request) => {
+      request.reply(200, `data: ${JSON.stringify(body)} \n\n`, {
+        'content-type': 'text/event-stream',
+      });
+    }
+  ).as(getStreamInterceptAlias(streamId).substring(1));
+}
+
+export function mockStreamError(streamId: string, errorCode: number) {
+  cy.intercept(
+    {
+      method: 'GET',
+      url: `**/machinelearning/streaming/${streamId}`,
+    },
+    (request) => {
+      request.reply(
+        errorCode,
+        {},
+        {
+          'content-type': 'text/event-stream',
+        }
+      );
+    }
+  ).as(getStreamInterceptAlias(streamId).substring(1));
+}
+
+export const addGeneratedAnswer =
+  (streamId?: string) => (fixture: TestFixture) => {
+    const element = generateComponentHTML('atomic-generated-answer');
+    fixture.withElement(element).withCustomResponse((response) => {
+      if (streamId) {
+        response.extendedResults = {
+          generativeQuestionAnsweringId: streamId,
+        };
+      }
+    });
+  };

packages/atomic/cypress/e2e/generated-answer-selectors.ts

@@ -0,0 +1,26 @@
+export const generatedAnswerComponent = 'atomic-generated-answer';
+export const GeneratedAnswerSelectors = {
+  shadow: () => cy.get(generatedAnswerComponent).shadow(),
+  container: () => GeneratedAnswerSelectors.shadow().find('[part="container"]'),
+  content: () =>
+    GeneratedAnswerSelectors.shadow().find('[part="generated-content"]'),
+  answer: () =>
+    GeneratedAnswerSelectors.shadow().find('[part="generated-text"]'),
+  headerLabel: () =>
+    GeneratedAnswerSelectors.shadow().find('[part="header-label"]'),
+  likeButton: () =>
+    GeneratedAnswerSelectors.shadow().find('.feedback-button.like'),
+  dislikeButton: () =>
+    GeneratedAnswerSelectors.shadow().find('.feedback-button.dislike'),
+  citation: () => GeneratedAnswerSelectors.shadow().find('.citation'),
+  citationsLabel: () =>
+    GeneratedAnswerSelectors.shadow().find('.citations-label'),
+  citationTitle: () =>
+    GeneratedAnswerSelectors.citation().find('.citation-title'),
+  citationIndex: () =>
+    GeneratedAnswerSelectors.citation().find('.citation-index'),
+  loader: () => GeneratedAnswerSelectors.shadow().find('.typing-indicator'),
+  retryContainer: () =>
+    GeneratedAnswerSelectors.shadow().find('[part="retry-container"]'),
+  retryButton: () => GeneratedAnswerSelectors.retryContainer().find('button'),
+};

packages/atomic/cypress/e2e/generated-answer.cypress.ts

@@ -0,0 +1,187 @@
+import {TestFixture} from '../fixtures/test-fixture';
+import {
+  addGeneratedAnswer,
+  getStreamInterceptAlias,
+  mockStreamError,
+  mockStreamResponse,
+} from './generated-answer-actions';
+import {GeneratedAnswerSelectors} from './generated-answer-selectors';
+
+describe('Generated Answer Test Suites', () => {
+  describe('Generated Answer', () => {
+    function setupGeneratedAnswer(streamId?: string) {
+      new TestFixture().with(addGeneratedAnswer(streamId)).init();
+    }
+
+    describe('when no stream ID is returned', () => {
+      beforeEach(() => {
+        setupGeneratedAnswer();
+      });
+
+      it('should not display the component', () => {
+        GeneratedAnswerSelectors.container().should('not.exist');
+      });
+    });
+
+    describe('when a stream ID is returned', () => {
+      describe('when a message event is received', () => {
+        const streamId = crypto.randomUUID();
+
+        const testTextDelta = 'Some text';
+        const testMessagePayload = {
+          payloadType: 'genqa.messageType',
+          payload: JSON.stringify({
+            textDelta: testTextDelta,
+          }),
+          finishReason: 'COMPLETED',
+        };
+
+        beforeEach(() => {
+          mockStreamResponse(streamId, testMessagePayload);
+          setupGeneratedAnswer(streamId);
+        });
+
+        it('should log the stream ID in the search event custom data', () => {
+          TestFixture.getUACustomData().then((customData) => {
+            expect(customData).to.have.property(
+              'generativeQuestionAnsweringId',
+              streamId
+            );
+          });
+        });
+
+        it('should display the message', () => {
+          cy.wait(getStreamInterceptAlias(streamId));
+
+          GeneratedAnswerSelectors.answer().should('have.text', testTextDelta);
+        });
+
+        it('should display feedback buttons', () => {
+          cy.wait(getStreamInterceptAlias(streamId));
+
+          GeneratedAnswerSelectors.likeButton().should('exist');
+          GeneratedAnswerSelectors.dislikeButton().should('exist');
+        });
+      });
+
+      describe('when a citation event is received', () => {
+        const streamId = crypto.randomUUID();
+
+        const testCitation = {
+          id: 'some-id-123',
+          title: 'Some Title',
+          uri: 'https://www.coveo.com',
+          permanentid: 'some-permanent-id-123',
+          clickUri: 'https://www.coveo.com/en',
+        };
+        const testMessagePayload = {
+          payloadType: 'genqa.citationsType',
+          payload: JSON.stringify({
+            citations: [testCitation],
+          }),
+          finishReason: 'COMPLETED',
+        };
+
+        beforeEach(() => {
+          mockStreamResponse(streamId, testMessagePayload);
+          setupGeneratedAnswer(streamId);
+        });
+
+        it('should display the citation link', () => {
+          cy.wait(getStreamInterceptAlias(streamId));
+
+          GeneratedAnswerSelectors.citationsLabel().should(
+            'have.text',
+            'Learn more'
+          );
+          GeneratedAnswerSelectors.citationTitle().should(
+            'have.text',
+            testCitation.title
+          );
+          GeneratedAnswerSelectors.citationIndex().should('have.text', '1');
+          GeneratedAnswerSelectors.citation().should(
+            'have.attr',
+            'href',
+            testCitation.clickUri
+          );
+        });
+      });
+
+      describe('when an error event is received', () => {
+        const streamId = crypto.randomUUID();
+
+        const testErrorPayload = {
+          finishReason: 'ERROR',
+          errorMessage: 'An error message',
+          errorCode: 500,
+        };
+
+        beforeEach(() => {
+          mockStreamResponse(streamId, testErrorPayload);
+          setupGeneratedAnswer(streamId);
+        });
+
+        it('should not display the component', () => {
+          cy.wait(getStreamInterceptAlias(streamId));
+
+          GeneratedAnswerSelectors.container().should('not.exist');
+        });
+      });
+
+      describe('when the stream connection fails', () => {
+        const streamId = crypto.randomUUID();
+
+        describe('Non-retryable error (4XX)', () => {
+          beforeEach(() => {
+            mockStreamError(streamId, 406);
+            setupGeneratedAnswer(streamId);
+          });
+
+          it('should not show the component', () => {
+            cy.wait(getStreamInterceptAlias(streamId));
+
+            GeneratedAnswerSelectors.container().should('not.exist');
+          });
+        });
+
+        describe('Retryable error', () => {
+          [500, 429].forEach((errorCode) => {
+            describe(`${errorCode} error`, () => {
+              beforeEach(() => {
+                Cypress.on('uncaught:exception', () => false);
+                mockStreamError(streamId, 500);
+                setupGeneratedAnswer(streamId);
+              });
+
+              it('should retry the stream 3 times then offer a retry button', () => {
+                cy.wait(getStreamInterceptAlias(streamId));
+
+                GeneratedAnswerSelectors.container().should('not.exist');
+
+                cy.wait(getStreamInterceptAlias(streamId));
+
+                GeneratedAnswerSelectors.container().should('not.exist');
+
+                cy.wait(getStreamInterceptAlias(streamId));
+
+                GeneratedAnswerSelectors.container().should('not.exist');
+
+                cy.wait(getStreamInterceptAlias(streamId));
+
+                const retryAlias = '@retrySearch';
+                cy.intercept({
+                  method: 'POST',
+                  url: '**/rest/search/v2?*',
+                }).as(retryAlias.substring(1));
+
+                GeneratedAnswerSelectors.retryButton().click();
+
+                cy.wait(retryAlias);
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+});

packages/atomic/cypress/fixtures/fixture-common.ts

@@ -28,6 +28,7 @@ export const RouteAlias = {
   FacetSearch: '@coveoFacetSearch',
   Quickview: '@coveoQuickview',
   Locale: '@locale',
+  GenQAStream: '@genQAStream',
 };
 
 export const ConsoleAliases = {

packages/atomic/src/components.d.ts

@@ -346,6 +346,8 @@ export namespace Components {
     }
     interface AtomicFrequentlyBoughtTogether {
     }
+    interface AtomicGeneratedAnswer {
+    }
     interface AtomicHtml {
         /**
           * Specify if the content should be sanitized, using [`DOMPurify`](https://www.npmjs.com/package/dompurify).
@@ -2124,6 +2126,12 @@ declare global {
         prototype: HTMLAtomicFrequentlyBoughtTogetherElement;
         new (): HTMLAtomicFrequentlyBoughtTogetherElement;
     };
+    interface HTMLAtomicGeneratedAnswerElement extends Components.AtomicGeneratedAnswer, HTMLStencilElement {
+    }
+    var HTMLAtomicGeneratedAnswerElement: {
+        prototype: HTMLAtomicGeneratedAnswerElement;
+        new (): HTMLAtomicGeneratedAnswerElement;
+    };
     interface HTMLAtomicHtmlElement extends Components.AtomicHtml, HTMLStencilElement {
     }
     var HTMLAtomicHtmlElement: {
@@ -2822,6 +2830,7 @@ declare global {
         "atomic-format-number": HTMLAtomicFormatNumberElement;
         "atomic-format-unit": HTMLAtomicFormatUnitElement;
         "atomic-frequently-bought-together": HTMLAtomicFrequentlyBoughtTogetherElement;
+        "atomic-generated-answer": HTMLAtomicGeneratedAnswerElement;
         "atomic-html": HTMLAtomicHtmlElement;
         "atomic-icon": HTMLAtomicIconElement;
         "atomic-insight-edit-toggle": HTMLAtomicInsightEditToggleElement;
@@ -3253,6 +3262,8 @@ declare namespace LocalJSX {
     }
     interface AtomicFrequentlyBoughtTogether {
     }
+    interface AtomicGeneratedAnswer {
+    }
     interface AtomicHtml {
         /**
           * Specify if the content should be sanitized, using [`DOMPurify`](https://www.npmjs.com/package/dompurify).
@@ -4779,6 +4790,7 @@ declare namespace LocalJSX {
         "atomic-format-number": AtomicFormatNumber;
         "atomic-format-unit": AtomicFormatUnit;
         "atomic-frequently-bought-together": AtomicFrequentlyBoughtTogether;
+        "atomic-generated-answer": AtomicGeneratedAnswer;
         "atomic-html": AtomicHtml;
         "atomic-icon": AtomicIcon;
         "atomic-insight-edit-toggle": AtomicInsightEditToggle;
@@ -4917,6 +4929,7 @@ declare module "@stencil/core" {
             "atomic-format-number": LocalJSX.AtomicFormatNumber & JSXBase.HTMLAttributes<HTMLAtomicFormatNumberElement>;
             "atomic-format-unit": LocalJSX.AtomicFormatUnit & JSXBase.HTMLAttributes<HTMLAtomicFormatUnitElement>;
             "atomic-frequently-bought-together": LocalJSX.AtomicFrequentlyBoughtTogether & JSXBase.HTMLAttributes<HTMLAtomicFrequentlyBoughtTogetherElement>;
+            "atomic-generated-answer": LocalJSX.AtomicGeneratedAnswer & JSXBase.HTMLAttributes<HTMLAtomicGeneratedAnswerElement>;
             "atomic-html": LocalJSX.AtomicHtml & JSXBase.HTMLAttributes<HTMLAtomicHtmlElement>;
             "atomic-icon": LocalJSX.AtomicIcon & JSXBase.HTMLAttributes<HTMLAtomicIconElement>;
             "atomic-insight-edit-toggle": LocalJSX.AtomicInsightEditToggle & JSXBase.HTMLAttributes<HTMLAtomicInsightEditToggleElement>;