@coveo/quantic 3.42.0 → 3.43.0

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

@@ -5,6 +5,7 @@ import {
 } from '../../../../../../playwright/utils/analyticsMode';
 import {AnalyticsObject} from '../../../../../../playwright/page-object/analytics';
 import {isRgaEvaluationRequest} from '../../../../../../playwright/utils/requests';
+import type {AgentMessage} from './agentData';
 
 const minimumCitationTooltipDisplayDurationMs = 1500;
 const removeUnknownFields = (object: Record<string, unknown>) => {
@@ -24,32 +25,45 @@ const facetElementsSelectors = {
   },
 };
 
+export interface GeneratedAnswerObjectConfig {
+  answerApiEnabled?: boolean;
+  headAnswerRequestRegex?: RegExp;
+  agentFollowUpRequestRegex?: RegExp;
+  isAgent?: boolean;
+  withFacets?: boolean;
+}
+
 export class GeneratedAnswerObject {
   private analyticsMode: AnalyticsMode;
+  private answerApiEnabled: boolean;
+  private headAnswerRequestRegex?: RegExp;
+  private agentFollowUpRequestRegex?: RegExp;
+  private withFacets: boolean;
+  private isAgent: boolean;
 
   constructor(
     private page: Page,
     private streamId: string,
     private analytics: AnalyticsObject,
-    private answerApiEnabled: boolean,
-    private generateRequestRegex: RegExp,
-    private withFacets: boolean
+    config: GeneratedAnswerObjectConfig = {}
   ) {
     this.page = page;
     this.streamId = streamId;
     this.analytics = analytics;
     this.analyticsMode = this.analytics.analyticsMode;
-    this.answerApiEnabled = answerApiEnabled;
-    this.generateRequestRegex = generateRequestRegex;
-    this.withFacets = withFacets;
+    this.answerApiEnabled = config.answerApiEnabled ?? false;
+    this.headAnswerRequestRegex = config.headAnswerRequestRegex;
+    this.agentFollowUpRequestRegex = config.agentFollowUpRequestRegex;
+    this.withFacets = config.withFacets ?? false;
+    this.isAgent = config.isAgent ?? false;
   }
 
   get likeButton(): Locator {
-    return this.page.getByRole('button', {name: 'This answer was helpful'});
+    return this.page.getByRole('button', {name: this.isAgent ? 'Like' : 'This answer was helpful', exact: true});
   }
 
   get dislikeButton(): Locator {
-    return this.page.getByRole('button', {name: 'This answer was not helpful'});
+    return this.page.getByRole('button', {name: this.isAgent ? 'Dislike' : 'This answer was not helpful', exact: true});
   }
 
   get copyToClipboardButton(): Locator {
@@ -118,7 +132,7 @@ export class GeneratedAnswerObject {
 
   get citationLink(): Locator {
     return this.page
-      .getByTestId('generated-answer__citations')
+      .getByTestId(this.isAgent ? 'generated-answer-body__citations' : 'generated-answer__citations')
       .locator('.citation__link');
   }
 
@@ -126,6 +140,22 @@ export class GeneratedAnswerObject {
     return this.page.getByTestId('generated-answer__answer-toggle');
   }
 
+  get showPreviousAnswersButton(): Locator {
+    return this.page.getByTestId('show-previous-button');
+  }
+
+  get threadItems(): Locator {
+    return this.page.locator('c-quantic-thread-item');
+  }
+
+  get threadItemTitleButton(): Locator {
+    return this.threadItems.getByTestId('thread-item-title-button');
+  }
+
+  get generatedAnswerBody(): Locator {
+    return this.page.locator('c-quantic-generated-answer-body');
+  }
+
   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);
@@ -166,10 +196,18 @@ export class GeneratedAnswerObject {
     await this.likeButton.click();
   }
 
+  async clickNthLikeButton(answerIndex: number): Promise<void> {
+    await this.likeButton.nth(answerIndex).click();
+  }
+
   async clickDislikeButton(): Promise<void> {
     await this.dislikeButton.click();
   }
 
+  async clickNthDislikeButton(answerIndex: number): Promise<void> {
+    await this.dislikeButton.nth(answerIndex).click();
+  }
+
   async clickCopyToClipboardButton(): Promise<void> {
     await this.copyToClipboardButton.click();
   }
@@ -178,8 +216,26 @@ export class GeneratedAnswerObject {
     await this.toggleButton.click();
   }
 
-  async waitForGenerateRequest(): Promise<Request> {
-    return this.page.waitForRequest(this.generateRequestRegex);
+  async clickShowPreviousAnswersButton(): Promise<void> {
+    await this.showPreviousAnswersButton.click();
+  }
+
+  async clickNthThreadItem(index: number): Promise<void> {
+    await this.threadItemTitleButton.nth(index).click();
+  }
+
+  async waitForHeadAnswerRequest(): Promise<Request> {
+    if (!this.headAnswerRequestRegex) {
+      throw new Error('headAnswerRequestRegex is not configured');
+    }
+    return this.page.waitForRequest(this.headAnswerRequestRegex);
+  }
+
+  async waitForAgentFollowUpRequest(): Promise<Request> {
+    if (!this.agentFollowUpRequestRegex) {
+      throw new Error('agentFollowUpRequestRegex is not configured');
+    }
+    return this.page.waitForRequest(this.agentFollowUpRequestRegex);
   }
 
   async waitForStreamEndAnalytics(): Promise<Request | boolean> {
@@ -200,6 +256,12 @@ export class GeneratedAnswerObject {
   }
 
   async waitForLikeGeneratedAnswerAnalytics(): Promise<Request> {
+    return this.waitForLikeGeneratedAnswerAnalyticsForId(this.streamId);
+  }
+
+  async waitForLikeGeneratedAnswerAnalyticsForId(
+    answerId: string
+  ): Promise<Request> {
     if (this.analyticsMode === AnalyticsModeEnum.legacy) {
       return this.analytics.waitForCustomUaAnalytics(
         {
@@ -207,7 +269,7 @@ export class GeneratedAnswerObject {
           eventValue: 'likeGeneratedAnswer',
         },
         (event) =>
-          event?.customData?.generativeQuestionAnsweringId === this.streamId
+          event?.customData?.generativeQuestionAnsweringId === answerId
       );
     }
     return this.analytics.waitForEventProtocolAnalytics(
@@ -217,6 +279,12 @@ export class GeneratedAnswerObject {
   }
 
   async waitForDislikeGeneratedAnswerAnalytics(): Promise<Request> {
+    return this.waitForDislikeGeneratedAnswerAnalyticsForId(this.streamId);
+  }
+
+  async waitForDislikeGeneratedAnswerAnalyticsForId(
+    answerId: string
+  ): Promise<Request> {
     if (this.analyticsMode === AnalyticsModeEnum.legacy) {
       return this.analytics.waitForCustomUaAnalytics(
         {
@@ -224,7 +292,7 @@ export class GeneratedAnswerObject {
           eventValue: 'dislikeGeneratedAnswer',
         },
         (event) =>
-          event?.customData?.generativeQuestionAnsweringId === this.streamId
+          event?.customData?.generativeQuestionAnsweringId === answerId
       );
     }
     return this.analytics.waitForEventProtocolAnalytics(
@@ -446,6 +514,83 @@ export class GeneratedAnswerObject {
     });
   }
 
+  async mockAgentAnswerResponse(
+    body: Array<AgentMessage>
+  ) {
+    await this.page.route('**/agents/*/answer', (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'},
+      });
+    });
+  }
+
+  async mockAgentFollowUpResponse(
+    bodies: Array<Array<AgentMessage>>
+  ) {
+    let callCount = 0;
+    await this.page.route('**/agents/*/follow-up', (route) => {
+      // After all provided response bodies are used, keep returning the last one
+      // so any additional intercepted follow-up requests still receive a mocked stream.
+      const streams = bodies[Math.min(callCount, bodies.length - 1)];
+      callCount++;
+
+      let bodyText = '';
+      streams.forEach((data) => {
+        bodyText += `data:${JSON.stringify(data)} \n\n`;
+      });
+      route.fulfill({
+        status: 200,
+        body: bodyText,
+        headers: {'content-type': 'text/event-stream'},
+      });
+    });
+  }
+
+  get followUpInput(): Locator {
+    return this.page.locator(
+      'c-quantic-generated-answer-follow-up-input textarea'
+    );
+  }
+
+  get followUpSubmitButton(): Locator {
+    return this.page
+      .locator('c-quantic-generated-answer-follow-up-input')
+      .getByRole('button', {name: 'Submit follow-up'});
+  }
+
+  async typeFollowUpQuestion(question: string): Promise<void> {
+    await this.followUpInput.fill(question);
+  }
+
+  async submitFollowUp(): Promise<void> {
+    await this.followUpSubmitButton.click();
+  }
+
+  async waitForFollowUpStreamEndAnalytics(
+    followUpAnswerId: string
+  ): Promise<Request | boolean> {
+    if (this.analyticsMode === AnalyticsModeEnum.legacy) {
+      return this.analytics.waitForCustomUaAnalytics(
+        {
+          eventType: 'generatedAnswer',
+          eventValue: 'generatedAnswerStreamEnd',
+        },
+        (event) =>
+          event?.customData?.generativeQuestionAnsweringId === followUpAnswerId
+      );
+    }
+    return this.analytics.waitForEventProtocolAnalytics(
+      'Rga.AnswerReceived',
+      (event) => event.answerGenerated === true
+    );
+  }
+
   streamEndAnalyticRequestPromise!: Promise<boolean | Request>;
   generateRequestPromise!: Promise<Request>;
 }

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

@@ -14,10 +14,6 @@ useCaseTestCases.forEach((useCase) => {
   let test = fixtures[useCase.value];
 
   test.describe(`quantic generated answer ${useCase.label}`, () => {
-    test.use({
-      genQaData,
-    });
-
     analyticsModeTest.forEach((analytics) => {
       test.describe(analytics.label, () => {
         test.use({
@@ -309,7 +305,7 @@ useCaseTestCases.forEach((useCase) => {
                   await generatedAnswer.streamEndAnalyticRequestPromise;
 
                   const generateRequestPromise =
-                    generatedAnswer.waitForGenerateRequest();
+                    generatedAnswer.waitForHeadAnswerRequest();
 
                   const streamEndAnalyticRequestPromise =
                     generatedAnswer.waitForStreamEndAnalytics();

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

@@ -0,0 +1,233 @@
+import {testAgent, expect} from './fixture-agent';
+import agentData from './agentData';
+import {
+  analyticsModeTest,
+  AnalyticsModeEnum,
+} from '../../../../../../playwright/utils/analyticsMode';
+
+const exampleAgentId = '5fd0b5ea-d368-488e-bdeb-f6221ec0fb98';
+
+analyticsModeTest.forEach((analytics) => {
+  testAgent.describe(`quantic generated answer - agent - ${analytics.label}`, () => {
+    testAgent.use({
+      analyticsMode: analytics.mode,
+      options: {agentId: exampleAgentId},
+      permissions: ['clipboard-read', 'clipboard-write'],
+    });
+
+    if (analytics.mode !== AnalyticsModeEnum.legacy) {
+      testAgent.fixme(true, 'Agent next analytics mode not yet implemented');
+      return;
+    }
+
+    testAgent(
+      'should handle multiple answer generation, feedback, clipboard, citation, and follow-up interactions',
+      async ({generatedAnswer, page}) => {
+        await testAgent.step(
+          'should send a stream end analytics event when the first answer is generated',
+          async () => {
+            await generatedAnswer.streamEndAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should send like analytics event when liking the first answer',
+          async () => {
+            const likeAnalyticRequestPromise =
+              generatedAnswer.waitForLikeGeneratedAnswerAnalytics();
+            await generatedAnswer.clickLikeButton();
+            await likeAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should send dislike analytics event when disliking the first answer',
+          async () => {
+            const dislikeAnalyticRequestPromise =
+              generatedAnswer.waitForDislikeGeneratedAnswerAnalytics();
+            await generatedAnswer.clickDislikeButton();
+            await dislikeAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should send a copy to clipboard analytics event and update the clipboard with the first answer content',
+          async () => {
+            const analyticRequestPromise =
+              generatedAnswer.waitForCopyToClipboardAnalytics();
+            await generatedAnswer.clickCopyToClipboardButton();
+            await analyticRequestPromise;
+            
+            const clipboardContent = await page.evaluate(() =>
+              navigator.clipboard.readText()
+            );
+            expect(clipboardContent).toContain('Testing in Coveo');
+          }
+        );
+
+        await testAgent.step(
+          'should log citation hover analytics when hovering over a citation from the first answer',
+          async () => {
+            const citationIndex = 0;
+            const {id, permanentid} = agentData.citations[citationIndex];
+            const citationHoverAnalyticRequestPromise =
+              generatedAnswer.waitForSourceHoverAnalytics({
+                citationId: id,
+                permanentId: permanentid,
+              });
+
+            await generatedAnswer.hoverOverCitation(citationIndex);
+            await citationHoverAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should log citation click analytics when clicking on a citation from the first answer',
+          async () => {
+            const citationIndex = 0;
+            const {id, title, source, uri, clickUri, permanentid} =
+              agentData.citations[citationIndex];
+            const citationClickAnalyticRequestPromise =
+              generatedAnswer.waitForCitationClickAnalytics({
+                documentTitle: title,
+                sourceName: source,
+                documentPosition: citationIndex + 1,
+                documentUri: uri,
+                documentUrl: clickUri,
+                citationId: id,
+                contentIDKey: 'permanentid',
+                contentIDValue: permanentid,
+              });
+            await generatedAnswer.clickOnCitation(citationIndex);
+            await citationClickAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'FIRST FOLLOW-UP: should send the follow-up request with the correct conversationId and conversationToken',
+          async () => {
+            const followUpRequestPromise =
+              generatedAnswer.waitForAgentFollowUpRequest();
+
+            await generatedAnswer.typeFollowUpQuestion('follow-up question');
+            await generatedAnswer.submitFollowUp();
+
+            const followUpRequest = await followUpRequestPromise;
+            const followUpRequestBody = followUpRequest.postDataJSON();
+            expect(followUpRequestBody.conversationId).toBe(
+              agentData.conversationId
+            );
+            expect(followUpRequestBody.conversationToken).toBe(
+              agentData.conversationToken
+            );
+          }
+        );
+
+        await testAgent.step(
+          'should send stream end analytics with the right answerId for the follow-up',
+          async () => {
+            const followUpStreamEndPromise =
+              generatedAnswer.waitForFollowUpStreamEndAnalytics(
+                agentData.answerId2
+              );
+            await followUpStreamEndPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should send like analytics with the follow-up answerId when liking the first follow-up answer',
+          async () => {
+            const likeAnalyticRequestPromise =
+              generatedAnswer.waitForLikeGeneratedAnswerAnalyticsForId(
+                agentData.answerId2
+              );
+            // Should be the first like button, since the previous answers are collapsed and the follow-up answer is the only one visible.
+            await generatedAnswer.clickNthLikeButton(0);
+            await likeAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'SECOND FOLLOW-UP: should send the second follow-up request with the correct conversationId and conversationToken',
+          async () => {
+            const followUpRequestPromise =
+              generatedAnswer.waitForAgentFollowUpRequest();
+
+            await generatedAnswer.typeFollowUpQuestion(
+              'second follow-up question'
+            );
+            await generatedAnswer.submitFollowUp();
+
+            const followUpRequest = await followUpRequestPromise;
+            const followUpRequestBody = followUpRequest.postDataJSON();
+            expect(followUpRequestBody.conversationId).toBe(
+              agentData.conversationId
+            );
+            expect(followUpRequestBody.conversationToken).toBe(
+              agentData.conversationToken
+            );
+          }
+        );
+
+        await testAgent.step(
+          'should send stream end analytics with the right answerId for the second follow-up',
+          async () => {
+            const followUpStreamEndPromise =
+              generatedAnswer.waitForFollowUpStreamEndAnalytics(
+                agentData.answerId3
+              );
+            await followUpStreamEndPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should send dislike analytics with the right answerId for the second follow-up when disliking the second follow-up answer',
+          async () => {
+            const dislikeAnalyticRequestPromise =
+              generatedAnswer.waitForDislikeGeneratedAnswerAnalyticsForId(
+                agentData.answerId3
+              );
+            // Should be the first dislike button, since the previous answers are collapsed and the second follow-up answer is the only one visible.
+            await generatedAnswer.clickNthDislikeButton(0);
+            await dislikeAnalyticRequestPromise;
+          }
+        );
+
+        await testAgent.step(
+          'should expand previous answers when clicking on the "Show previous answers" button',
+          async () => {
+            await generatedAnswer.clickShowPreviousAnswersButton();
+            await expect(generatedAnswer.threadItems).toHaveCount(3);
+          }
+        );
+
+        await testAgent.step(
+          'should expand the first answer when clicking on the toggle button of the first answer',
+          async () => {
+            await generatedAnswer.clickNthThreadItem(0);
+            await expect(generatedAnswer.generatedAnswerBody.nth(0)).toBeVisible();
+            await expect(generatedAnswer.generatedAnswerBody.nth(1)).not.toBeVisible();
+            await expect(generatedAnswer.generatedAnswerBody.nth(2)).toBeVisible();
+          }
+        );
+
+        await testAgent.step(
+          'should allow to like the first answer, sending the correct analytics and not affecting the other answers',
+          async () => {
+            const likeAnalyticRequestPromise =
+              generatedAnswer.waitForLikeGeneratedAnswerAnalyticsForId(
+                agentData.answerId1
+              );
+            await generatedAnswer.clickNthLikeButton(0);
+            await likeAnalyticRequestPromise;
+            await expect(generatedAnswer.likeButton.nth(0)).toHaveAttribute('aria-pressed', 'true');
+            await expect(generatedAnswer.dislikeButton.nth(0)).toHaveAttribute('aria-pressed', 'false');
+            // Only two answers are visible, so only 2 like/dislike buttons visible.
+            await expect(generatedAnswer.dislikeButton.nth(1)).toHaveAttribute('aria-pressed', 'true');
+            await expect(generatedAnswer.likeButton.nth(1)).toHaveAttribute('aria-pressed', 'false');
+          }
+        );
+      }
+    );
+  });
+});

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

@@ -43,7 +43,7 @@
           >
           </c-quantic-generated-answer-thread>
         </div>
-        <div class="slds-p-horizontal_large slds-p-vertical_medium">
+        <div class="slds-border_top slds-p-horizontal_large slds-p-vertical_medium">
           <c-quantic-generated-answer-follow-up-input
             onquantic__submitfollowup={handleFollowUpSubmit}
             submit-button-disabled={isAnswerGenerationOngoing}