@coveo/quantic 3.10.0 → 3.11.1

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/fixture.ts

@@ -0,0 +1,87 @@
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {GeneratedAnswerObject} from './pageObject';
+import genQaData from './data';
+import type {GenQaData} from './data';
+
+const pageUrl = 's/quantic-generated-answer';
+
+interface GeneratedAnswerOptions {
+  fieldsToIncludeInCitations: string;
+  collapsible: boolean;
+  withToggle: boolean;
+  useCase: string;
+}
+
+type QuanticGeneratedAnswerE2ESearchFixtures = {
+  genQaData: GenQaData;
+  generatedAnswer: GeneratedAnswerObject;
+  search: SearchObject;
+  options: Partial<GeneratedAnswerOptions>;
+};
+
+type QuanticGeneratedAnswerE2EInsightFixtures =
+  QuanticGeneratedAnswerE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticGeneratedAnswerE2ESearchFixtures>({
+    genQaData,
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, searchRequestRegex));
+    },
+    generatedAnswer: async (
+      {page, options, configuration, search, genQaData: data},
+      use
+    ) => {
+      const generatedAnswerObject = new GeneratedAnswerObject(
+        page,
+        data.streamId
+      );
+      await page.goto(pageUrl);
+      await search.mockSearchWithGenerativeQuestionAnsweringId(data.streamId);
+      await generatedAnswerObject.mockStreamResponse(data.streams);
+      await configuration.configure(options);
+      await search.waitForSearchResponse();
+      await use(generatedAnswerObject);
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticGeneratedAnswerE2EInsightFixtures>({
+    genQaData,
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, insightSearchRequestRegex));
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    generatedAnswer: async (
+      {page, options, search, configuration, insightSetup, genQaData: data},
+      use
+    ) => {
+      const generatedAnswerObject = new GeneratedAnswerObject(
+        page,
+        data.streamId
+      );
+      await page.goto(pageUrl);
+      await search.mockSearchWithGenerativeQuestionAnsweringId(data.streamId);
+      await generatedAnswerObject.mockStreamResponse(data.streams);
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(generatedAnswerObject);
+    },
+  });
+
+export {expect} from '@playwright/test';

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/pageObject.ts

@@ -0,0 +1,279 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {
+  isUaClickEvent,
+  isUaCustomEvent,
+} from '../../../../../../playwright/utils/requests';
+
+const minimumCitationTooltipDisplayDurationMs = 1500;
+
+export class GeneratedAnswerObject {
+  constructor(
+    public page: Page,
+    public streamId: string
+  ) {
+    this.page = page;
+    this.streamId = streamId;
+  }
+
+  get likeButton(): Locator {
+    return this.page.getByRole('button', {name: 'This answer was helpful'});
+  }
+
+  get dislikeButton(): Locator {
+    return this.page.getByRole('button', {name: 'This answer was not helpful'});
+  }
+
+  get copyToClipboardButton(): Locator {
+    return this.page.getByRole('button', {name: 'Copy'});
+  }
+
+  get toggleButton(): Locator {
+    return this.page.getByTestId('generated-answer__toggle-button');
+  }
+
+  questionContainer(questionId: string): Locator {
+    return this.page.getByTestId(questionId);
+  }
+
+  answerOption(questionId: string, answerValue: string): Locator {
+    return this.questionContainer(questionId).locator('.slds-radio_button', {
+      hasText: new RegExp(`^${answerValue}$`),
+    });
+  }
+
+  get feedbackDocumentUrlInput(): Locator {
+    return this.page.locator(
+      '.feedback-modal-qna__body input[name="documentUrl"]'
+    );
+  }
+
+  get feedbackDetailsInput(): Locator {
+    return this.page
+      .locator('.feedback-modal-qna__body [data-name="details"]')
+      .getByRole('textbox');
+  }
+
+  get submitFeedbackButton(): Locator {
+    return this.page.getByRole('button', {name: /Send feedback/i});
+  }
+
+  get citationLink(): Locator {
+    return this.page
+      .getByTestId('generated-answer__citations')
+      .locator('.citation__link');
+  }
+
+  async hoverOverCitation(index: number): Promise<void> {
+    // waiting 500ms to allow the component to render completely, cause any re-rendering abort the hover action.
+    await this.page.waitForTimeout(500);
+    await this.citationLink.nth(index).hover();
+    await this.page.waitForTimeout(minimumCitationTooltipDisplayDurationMs);
+    await this.page.mouse.move(0, 0);
+  }
+
+  async clickOnCitation(index: number): Promise<void> {
+    await this.citationLink.nth(index).click();
+  }
+
+  async typeInFeedbackDocumentUrlInput(text: string): Promise<void> {
+    await this.feedbackDocumentUrlInput.fill(text);
+  }
+
+  async typeInFeedbackDetailsInput(text: string): Promise<void> {
+    await this.feedbackDetailsInput.fill(text);
+  }
+
+  async clickSubmitFeedbackButton(): Promise<void> {
+    await this.submitFeedbackButton.click();
+  }
+
+  async fillFeedbackForm(answers: Record<string, string>): Promise<void> {
+    for (const [questionId, answerValue] of Object.entries(answers)) {
+      const option = this.answerOption(questionId, answerValue);
+      // eslint-disable-next-line no-await-in-loop
+      await option.click();
+    }
+  }
+
+  async clickLikeButton(): Promise<void> {
+    await this.likeButton.click();
+  }
+
+  async clickDislikeButton(): Promise<void> {
+    await this.dislikeButton.click();
+  }
+
+  async clickCopyToClipboardButton(): Promise<void> {
+    await this.copyToClipboardButton.click();
+  }
+
+  async clickToggleButton(): Promise<void> {
+    await this.toggleButton.click();
+  }
+
+  async waitForStreamEndUaAnalytics(): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'generatedAnswerStreamEnd'
+    );
+  }
+
+  async waitForLikeGeneratedAnswerUaAnalytics(): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics('likeGeneratedAnswer');
+  }
+
+  async waitForDislikeGeneratedAnswerUaAnalytics(): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'dislikeGeneratedAnswer'
+    );
+  }
+
+  async waitForCopyToClipboardUaAnalytics(): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'generatedAnswerCopyToClipboard'
+    );
+  }
+
+  async waitForShowAnswersUaAnalytics(): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'generatedAnswerShowAnswers'
+    );
+  }
+
+  async waitForHideAnswersUaAnalytics(): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'generatedAnswerHideAnswers'
+    );
+  }
+
+  async waitForSourceHoverUaAnalytics(
+    expectedFields: Record<string, any>
+  ): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'generatedAnswerSourceHover',
+      (customData: Record<string, any>) => {
+        return Object.keys(expectedFields).every(
+          (key) => customData?.[key] === expectedFields[key]
+        );
+      }
+    );
+  }
+
+  async waitForFeedbackSubmitUaAnalytics(
+    expectedFields: Record<string, any>
+  ): Promise<Request> {
+    return this.waitForGeneratedAnswerCustomUaAnalytics(
+      'generatedAnswerFeedbackSubmitV2',
+      (customData: Record<string, any>) => {
+        return Object.keys(expectedFields).every(
+          (key) => customData?.[key] === expectedFields[key]
+        );
+      }
+    );
+  }
+
+  async waitForCitationClickUaAnalytics(
+    expectedFields: Record<string, any>,
+    expectedCustomFields: Record<string, any>
+  ): Promise<Request> {
+    return this.waitForGeneratedAnswerClickUaAnalytics(
+      'generatedAnswerCitationClick',
+      (data: Record<string, any>, customData: Record<string, any>) => {
+        return (
+          Object.keys(expectedFields).every(
+            (key) => data?.[key] === expectedFields[key]
+          ) &&
+          Object.keys(expectedCustomFields).every(
+            (key) => customData?.[key] === expectedCustomFields[key]
+          )
+        );
+      }
+    );
+  }
+
+  async waitForGeneratedAnswerClickUaAnalytics(
+    actionCause: string,
+    customChecker?: Function
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaClickEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const requestData = JSON.parse(requestBody.clickEvent);
+
+        const expectedFields: Record<string, any> = {
+          actionCause,
+        };
+
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestData?.[key] === expectedFields[key]
+        );
+
+        const customData = requestData?.customData;
+
+        const matchesGenerativeId =
+          customData?.generativeQuestionAnsweringId === this.streamId;
+
+        return (
+          matchesExpectedFields &&
+          matchesGenerativeId &&
+          (customChecker ? customChecker(requestData, customData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async waitForGeneratedAnswerCustomUaAnalytics(
+    eventValue: string,
+    customChecker?: Function
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaCustomEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const expectedFields: Record<string, any> = {
+          eventType: 'generatedAnswer',
+          eventValue: eventValue,
+        };
+
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+
+        const customData = requestBody?.customData;
+
+        const matchesGenerativeId =
+          customData?.generativeQuestionAnsweringId === this.streamId;
+
+        return (
+          matchesExpectedFields &&
+          matchesGenerativeId &&
+          (customChecker ? customChecker(customData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async mockStreamResponse(
+    body: Array<{payloadType: string; payload: string; finishReason?: string}>
+  ) {
+    await this.page.route(
+      `**/machinelearning/streaming/${this.streamId}`,
+      (route) => {
+        let bodyText = '';
+        body.forEach((data) => {
+          bodyText += `data: ${JSON.stringify(data)} \n\n`;
+        });
+
+        route.fulfill({
+          status: 200,
+          body: bodyText,
+          headers: {
+            'content-type': 'text/event-stream',
+          },
+        });
+      }
+    );
+  }
+}

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/quanticGeneratedAnswer.e2e.ts

@@ -0,0 +1,178 @@
+import {testSearch, testInsight} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+import genQaData from './data';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic generated answer ${useCase.label}`, () => {
+    test.use({
+      genQaData,
+    });
+
+    test.describe('when the answer has been generated', () => {
+      test('should send a stream end analytics event', async ({
+        generatedAnswer,
+      }) => {
+        await generatedAnswer.waitForStreamEndUaAnalytics();
+      });
+    });
+
+    test.describe('when providing positive feedback', () => {
+      test('should send positive feedback analytics containing all details', async ({
+        generatedAnswer,
+      }) => {
+        const likeAnalyticRequestPromise =
+          generatedAnswer.waitForLikeGeneratedAnswerUaAnalytics();
+        await generatedAnswer.clickLikeButton();
+        await likeAnalyticRequestPromise;
+
+        const exampleDocumentUrl = 'https://www.coveo.com/';
+        const exampleDetails = 'example details...';
+        await generatedAnswer.fillFeedbackForm({
+          correctTopic: 'Yes',
+          hallucinationFree: 'Yes',
+          documented: 'Not sure',
+          readable: 'Yes',
+        });
+        await generatedAnswer.typeInFeedbackDocumentUrlInput(
+          exampleDocumentUrl
+        );
+        await generatedAnswer.typeInFeedbackDetailsInput(exampleDetails);
+
+        const feedbackAnalyticRequestPromise =
+          generatedAnswer.waitForFeedbackSubmitUaAnalytics({
+            correctTopic: 'yes',
+            hallucinationFree: 'yes',
+            documented: 'unknown',
+            readable: 'yes',
+            documentUrl: exampleDocumentUrl,
+            details: exampleDetails,
+            helpful: true,
+          });
+        await generatedAnswer.clickSubmitFeedbackButton();
+        await feedbackAnalyticRequestPromise;
+      });
+    });
+
+    test.describe('when providing negative feedback', () => {
+      test('should send negative feedback analytics containing all details', async ({
+        generatedAnswer,
+      }) => {
+        const dislikeAnalyticRequestPromise =
+          generatedAnswer.waitForDislikeGeneratedAnswerUaAnalytics();
+        await generatedAnswer.clickDislikeButton();
+        await dislikeAnalyticRequestPromise;
+
+        const exampleDocumentUrl = 'https://www.coveo.com/';
+        const exampleDetails = 'example details...';
+        await generatedAnswer.fillFeedbackForm({
+          correctTopic: 'No',
+          hallucinationFree: 'Not sure',
+          documented: 'No',
+          readable: 'No',
+        });
+        await generatedAnswer.typeInFeedbackDocumentUrlInput(
+          exampleDocumentUrl
+        );
+        await generatedAnswer.typeInFeedbackDetailsInput(exampleDetails);
+
+        const feedbackAnalyticRequestPromise =
+          generatedAnswer.waitForFeedbackSubmitUaAnalytics({
+            correctTopic: 'no',
+            hallucinationFree: 'unknown',
+            documented: 'no',
+            readable: 'no',
+            documentUrl: exampleDocumentUrl,
+            details: exampleDetails,
+            helpful: false,
+          });
+        await generatedAnswer.clickSubmitFeedbackButton();
+        await feedbackAnalyticRequestPromise;
+      });
+    });
+
+    test.describe('when copying the generated answer to clipboard', () => {
+      test('should send a copy to clipboard analytics event', async ({
+        generatedAnswer,
+      }) => {
+        const analyticRequestPromise =
+          generatedAnswer.waitForCopyToClipboardUaAnalytics();
+        await generatedAnswer.clickCopyToClipboardButton();
+        await analyticRequestPromise;
+      });
+    });
+
+    test.describe('when the property withToggle is set to true', () => {
+      test.use({
+        options: {
+          withToggle: true,
+        },
+      });
+
+      test('should allow toggeling the generated OFF and ON and log analytics', async ({
+        generatedAnswer,
+      }) => {
+        const hideAnswerAnalyticRequestPromise =
+          generatedAnswer.waitForHideAnswersUaAnalytics();
+        await generatedAnswer.clickToggleButton();
+        await hideAnswerAnalyticRequestPromise;
+
+        const showAnswerAnalyticRequestPromise =
+          generatedAnswer.waitForShowAnswersUaAnalytics();
+        await generatedAnswer.clickToggleButton();
+        await showAnswerAnalyticRequestPromise;
+      });
+    });
+
+    test.describe('when interacting with citations', () => {
+      test.describe('when hovering over a citation', () => {
+        test('should log citation hover analytics', async ({
+          generatedAnswer,
+        }) => {
+          const citationIndex = 0;
+          const {id, permanentid} = genQaData.citations[citationIndex];
+          const citationHoverAnalyticRequestPromise =
+            generatedAnswer.waitForSourceHoverUaAnalytics({
+              citationId: id,
+              permanentId: permanentid,
+            });
+          await generatedAnswer.hoverOverCitation(citationIndex);
+          await citationHoverAnalyticRequestPromise;
+        });
+      });
+
+      test.describe('when clicking on a citation', () => {
+        test('should log citation click analytics', async ({
+          generatedAnswer,
+        }) => {
+          const citationIndex = 0;
+          const {id, title, source, uri, clickUri, permanentid} =
+            genQaData.citations[citationIndex];
+          const citationClickAnalyticRequestPromise =
+            generatedAnswer.waitForCitationClickUaAnalytics(
+              {
+                documentTitle: title,
+                sourceName: source,
+                documentPosition: citationIndex + 1,
+                documentUri: uri,
+                documentUrl: clickUri,
+              },
+              {
+                citationId: id,
+                contentIDKey: 'permanentid',
+                contentIDValue: permanentid,
+              }
+            );
+          await generatedAnswer.clickOnCitation(citationIndex);
+          await citationClickAnalyticRequestPromise;
+        });
+      });
+    });
+  });
+});

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html

@@ -1,14 +1,18 @@
 <template>
   <template lwc:if={shouldDisplayGeneratedAnswer}>
-    <div data-cy="generated-answer__card" class="slds-box">
+    <div data-testid="generated-answer__card" class="slds-box">
       <div class="generated-answer__card-header slds-grid">
         <span
+          data-testid="generated-answer__badge"
           class="generated-answer__badge slds-var-p-around_x-small slds-text-title_bold"
           >{labels.generatedAnswerForYou}</span
         >
         <div class="generated-answer__header-actions slds-grid">
           <template lwc:if={shouldDisplayActions}>
-            <div class="slds-grid flex-one slds-grid_align-end">
+            <div
+              data-testid="generated-answer__actions"
+              class="slds-grid flex-one slds-grid_align-end"
+            >
               <c-quantic-feedback
                 state={feedbackState}
                 onquantic__like={handleLike}
@@ -24,7 +28,7 @@
                 data-cy="generated-answer__feedback"
               ></c-quantic-feedback>
               <c-quantic-generated-answer-copy-to-clipboard
-                data-cy="generated-answer__copy-to-clipboard"
+                data-testid="generated-answer__copy-to-clipboard"
                 answer={answer}
                 class="slds-var-m-horizontal_xx-small"
               ></c-quantic-generated-answer-copy-to-clipboard>
@@ -49,34 +53,44 @@
               answer-content-format={answerContentFormat}
               answer={answer}
               is-streaming={isStreaming}
-              data-cy="generated-answer__content">
+              data-cy="generated-answer__content"
+            >
             </c-quantic-generated-answer-content>
           </div>
           <div
             data-cy="generated-answer__footer"
             class={generatedAnswerFooterCssClass}
           >
-            <div class={generatedAnswerFooterRowClass} data-cy="generated-answer__footer-row">
+            <div
+              class={generatedAnswerFooterRowClass}
+              data-cy="generated-answer__footer-row"
+            >
               <template lwc:if={shouldDisplayCitations}>
                 <div class="slds-var-m-top_small">
                   <c-quantic-source-citations
                     engine-id={engineId}
-                    data-cy="generated-answer__citations"
+                    data-testid="generated-answer__citations"
                     citations={citations}
                     citation-hover-handler={handleCitationHover}
                   ></c-quantic-source-citations>
                 </div>
               </template>
             </div>
-            <div class={generatedAnswerFooterRowClass} data-cy="generated-answer__footer-row">
+            <div
+              class={generatedAnswerFooterRowClass}
+              data-cy="generated-answer__footer-row"
+            >
               <template lwc:if={shouldShowCollapseGeneratingMessage}>
-                <div class="generated-answer__collapse-generating-message">
+                <div
+                  data-testid="generated-answer__collapse-generating-message"
+                  class="generated-answer__collapse-generating-message"
+                >
                   {labels.generatingAnswer}...
                 </div>
               </template>
               <template lwc:if={shouldShowToggleCollapseAnswer}>
                 <lightning-button
-                  data-cy="generated-answer__answer-toggle"
+                  data-testid="generated-answer__answer-toggle"
                   icon-name={toggleCollapseAnswerIcon}
                   variant="base"
                   label={toggleCollapseAnswerLabel}
@@ -89,7 +103,7 @@
               <template lwc:if={shouldShowDisclaimer}>
                 <div
                   class="generated-answer__disclaimer slds-grid_vertical-align-center slds-col slds-text-color_weak slds-text-body_small"
-                  data-cy="generated-answer__disclaimer"
+                  data-testid="generated-answer__disclaimer"
                 >
                   <slot name="disclaimer"> {labels.rgaDisclaimer} </slot>
                 </div>

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/retryPrompt.html

@@ -1,7 +1,7 @@
 <template>
   <template lwc:if={shouldDisplayGeneratedAnswer}>
     <div
-      data-cy="generated-answer__card"
+      data-testid="generated-answer__card"
       class="slds-box"
     >
       <div
@@ -15,7 +15,7 @@
       <div>{labels.couldNotGenerateAnAnswer}</div>
       <div class="slds-var-m-top_small">
         <lightning-button
-          data-cy="generated-answer__retry-button"
+          data-testid="generated-answer__retry-button"
           variant="brand-outline"
           label={labels.tryAgain}
           title={labels.tryAgain}

package/force-app/main/default/lwc/quanticGeneratedAnswerToggle/quanticGeneratedAnswerToggle.html

@@ -2,7 +2,7 @@
   <div class="slds-is-relative" onmouseenter={handleMouseEnter}
   onmouseleave={handleMouseLeave}>
     <lightning-input
-      data-cy="generated-answer__toggle-button"
+      data-testid="generated-answer__toggle-button"
       type="toggle"
       onchange={toggleGeneratedAnswer}
       checked={isGeneratedAnswerVisible}