@coveo/quantic 3.41.0 → 3.42.1

package/docs/out/quantic-docs.json

@@ -1031,6 +1031,15 @@
                         "defaultValue": "{undefined}",
                         "type": "string"
                     },
+                    {
+                        "name": "agentId",
+                        "attribute": "agent-id",
+                        "access": "@api",
+                        "description": "<p>The unique identifier of the agent to use to generate the answer.</p>",
+                        "required": false,
+                        "defaultValue": "{undefined}",
+                        "type": "string"
+                    },
                     {
                         "name": "maxCollapsedHeight",
                         "attribute": "max-collapsed-height",

package/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1715,4 +1715,18 @@
     <protected>false</protected>
     <shortDescription>Answer generated</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_Like</fullName>
+    <value>Like</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Like</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_Dislike</fullName>
+    <value>Dislike</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Dislike</shortDescription>
+  </labels>
 </CustomLabels>

package/force-app/main/default/lwc/quanticGeneratedAnswer/__tests__/quanticGeneratedAnswer.test.js

@@ -2,6 +2,7 @@
 // @ts-ignore
 import {createElement} from 'lwc';
 import QuanticGeneratedAnswer from 'c/quanticGeneratedAnswer';
+import FeedbackModalQna from 'c/quanticFeedbackModalQna';
 import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
 
 let mockAnswerHeight = 250;
@@ -25,6 +26,12 @@ const exampleCitations = [
 const exampleEngineId = 'example engine id';
 const exampleAnswerId = 'example answer id';
 jest.mock('c/quanticHeadlessLoader');
+jest.mock('c/quanticFeedbackModalQna', () => ({
+  __esModule: true,
+  default: {
+    open: jest.fn(() => Promise.resolve()),
+  },
+}));
 jest.mock('c/quanticUtils', () => ({
   AriaLiveRegion: jest.fn(() => ({
     dispatchMessage: jest.fn(),
@@ -95,6 +102,9 @@ const selectors = {
   generatedAnswerNoAnswerMessage:
     '[data-testid="generated-answer__no-answer-message"]',
   generatedAnswerCitations: 'c-quantic-source-citations',
+  generatedAnswerThread: 'c-quantic-generated-answer-thread',
+  generatedAnswerFollowUpInput: 'c-quantic-generated-answer-follow-up-input',
+  generatedAnswerFeedback: 'c-quantic-feedback',
   loadingSpinner: 'lightning-spinner',
 };
 
@@ -103,7 +113,10 @@ const initialSearchStatusState = {
 };
 let searchStatusState = initialSearchStatusState;
 
-const initialGeneratedAnswerState = {isVisible: true, cannotAnswer: false};
+const initialGeneratedAnswerState = {
+  isVisible: true,
+  cannotAnswer: false,
+};
 let generatedAnswerState = initialGeneratedAnswerState;
 
 const functionsMocks = {
@@ -111,6 +124,10 @@ const functionsMocks = {
     state: generatedAnswerState,
     subscribe: functionsMocks.generatedAnswerStateSubscriber,
     retry: functionsMocks.retry,
+    askFollowUp: functionsMocks.askFollowUp,
+    like: functionsMocks.like,
+    dislike: functionsMocks.dislike,
+    closeFeedbackModal: functionsMocks.closeFeedbackModal,
   })),
   buildSearchStatus: jest.fn(() => ({
     state: searchStatusState,
@@ -127,6 +144,10 @@ const functionsMocks = {
   generatedAnswerStateUnsubscriber: jest.fn(),
   searchStatusStateUnsubscriber: jest.fn(),
   retry: jest.fn(),
+  askFollowUp: jest.fn(),
+  like: jest.fn(),
+  dislike: jest.fn(),
+  closeFeedbackModal: jest.fn(),
 };
 
 /**
@@ -145,8 +166,10 @@ function flushPromises() {
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
 
+const exampleQuery = 'example query';
 const exampleEngine = {
   id: 'dummy engine',
+  state: {query: {q: exampleQuery}},
 };
 let isInitialized = false;
 const defaultAnswerHeight = 250;
@@ -339,6 +362,36 @@ describe('c-quantic-generated-answer', () => {
         );
       });
     });
+
+    describe('when the agent id property is passed to the component', () => {
+      it('should initialize the controller with the correct agent id value', async () => {
+        const exampleAgentId = 'example agent id';
+        createTestComponent({
+          ...defaultOptions,
+          agentId: exampleAgentId,
+        });
+        await flushPromises();
+
+        expect(functionsMocks.buildGeneratedAnswer).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildGeneratedAnswer).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.objectContaining({agentId: exampleAgentId})
+        );
+      });
+    });
+
+    describe('when the agent id property is not passed to the component', () => {
+      it('should initialize the controller without the agent id value', async () => {
+        createTestComponent();
+        await flushPromises();
+
+        expect(functionsMocks.buildGeneratedAnswer).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildGeneratedAnswer).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.not.objectContaining({agentId: expect.any(String)})
+        );
+      });
+    });
   });
 
   describe('the rendering of the generated answer', () => {
@@ -792,25 +845,119 @@ describe('c-quantic-generated-answer', () => {
       });
 
       describe('when follow-ups are enabled', () => {
-        // TODO SFINT-6786: Add test cases to cover the behavior of the component when follow-ups are enabled based on the actual implementation of the follow-up feature in the state.
-        it.skip('should render the content section with the scrollable class and ignore the collapsible feature', async () => {
-          mockAnswerHeight = defaultAnswerHeight + 100;
+        const exampleAgentId = 'example agent id';
+        const exampleFollowUpAnswers = [
+          {
+            answer: 'follow-up answer',
+            answerId: 'answer-id-2',
+            question: 'follow-up question',
+          },
+        ];
+        const followUpOptions = {...defaultOptions, agentId: exampleAgentId};
+
+        beforeEach(() => {
+          generatedAnswerState = {
+            ...initialGeneratedAnswerState,
+            answer: exampleAnswer,
+            answerId: 'answer-id-1',
+            followUpAnswers: {
+              isEnabled: true,
+              followUpAnswers: exampleFollowUpAnswers,
+            },
+          };
+        });
+
+        it('should render the conversation thread and follow-up input instead of the single answer body', async () => {
+          const element = createTestComponent(followUpOptions);
+          await flushPromises();
+
+          const thread = element.shadowRoot.querySelector(
+            selectors.generatedAnswerThread
+          );
+          const followUpInput = element.shadowRoot.querySelector(
+            selectors.generatedAnswerFollowUpInput
+          );
+          const singleAnswerBody = element.shadowRoot.querySelector(
+            selectors.generatedAnswerBody
+          );
+
+          expect(thread).not.toBeNull();
+          expect(followUpInput).not.toBeNull();
+          expect(singleAnswerBody).toBeNull();
+        });
+
+        it('should display the scrollable container', async () => {
+          const element = createTestComponent(followUpOptions);
+          await flushPromises();
+
+          const scrollableContainer = element.shadowRoot.querySelector(
+            '.generated-answer__content--scrollable'
+          );
+
+          expect(scrollableContainer).not.toBeNull();
+        });
+
+        it('should pass the engine, citation anchoring and the combined initial and follow-up answers to the thread', async () => {
           const element = createTestComponent({
-            ...defaultOptions,
-            collapsible: true,
+            ...followUpOptions,
+            disableCitationAnchoring: true,
           });
           await flushPromises();
 
-          const generatedAnswerBody = element.shadowRoot.querySelector(
-            selectors.generatedAnswerBody
+          const thread = element.shadowRoot.querySelector(
+            selectors.generatedAnswerThread
           );
 
-          expect(generatedAnswerBody).not.toBeNull();
-          expect(
-            generatedAnswerBody.classList.contains(
-              'generated-answer__content--scrollable'
-            )
-          ).toBe(true);
+          expect(thread.engineId).toBe(exampleEngineId);
+          expect(thread.disableCitationAnchoring).toBe(true);
+          expect(thread.generatedAnswers).toEqual([
+            expect.objectContaining({
+              answer: exampleAnswer,
+              question: exampleQuery,
+            }),
+            ...exampleFollowUpAnswers,
+          ]);
+        });
+
+        it('should ask a follow-up question when the follow-up input emits a submit event', async () => {
+          const element = createTestComponent(followUpOptions);
+          await flushPromises();
+
+          const followUpInput = element.shadowRoot.querySelector(
+            selectors.generatedAnswerFollowUpInput
+          );
+          const exampleFollowUpQuestion = 'example follow-up question';
+          followUpInput.dispatchEvent(
+            new CustomEvent('quantic__submitfollowup', {
+              detail: {value: exampleFollowUpQuestion},
+            })
+          );
+
+          expect(functionsMocks.askFollowUp).toHaveBeenCalledTimes(1);
+          expect(functionsMocks.askFollowUp).toHaveBeenCalledWith(
+            exampleFollowUpQuestion
+          );
+        });
+
+        it('should disable the follow-up submit button while an answer is being generated', async () => {
+          generatedAnswerState = {...generatedAnswerState, isStreaming: true};
+          const element = createTestComponent(followUpOptions);
+          await flushPromises();
+
+          const followUpInput = element.shadowRoot.querySelector(
+            selectors.generatedAnswerFollowUpInput
+          );
+
+          expect(followUpInput.submitButtonDisabled).toBe(true);
+        });
+
+        it('should ignore the collapsible feature and not render the single answer collapse toggle', async () => {
+          mockAnswerHeight = defaultAnswerHeight + 100;
+          const element = createTestComponent({
+            ...followUpOptions,
+            collapsible: true,
+          });
+          await flushPromises();
 
           const generatedAnswerCollapseToggle =
             element.shadowRoot.querySelector(
@@ -822,20 +969,19 @@ describe('c-quantic-generated-answer', () => {
       });
 
       describe('when follow-ups are not enabled', () => {
-        it('should not render the content section with the scrollable class', async () => {
+        it('should render the single answer body instead of the conversation thread', async () => {
           const element = createTestComponent();
           await flushPromises();
 
-          const generatedAnswerBody = element.shadowRoot.querySelector(
+          const singleAnswerBody = element.shadowRoot.querySelector(
             selectors.generatedAnswerBody
           );
+          const thread = element.shadowRoot.querySelector(
+            selectors.generatedAnswerThread
+          );
 
-          expect(generatedAnswerBody).not.toBeNull();
-          expect(
-            generatedAnswerBody.classList.contains(
-              'generated-answer__content--scrollable'
-            )
-          ).toBe(false);
+          expect(singleAnswerBody).not.toBeNull();
+          expect(thread).toBeNull();
         });
       });
     });
@@ -1238,4 +1384,107 @@ describe('c-quantic-generated-answer', () => {
       });
     });
   });
+
+  describe('the generated answer feedback', () => {
+    const exampleAnswer = 'answer generated successfully';
+    const exampleAgentId = 'example agent id';
+
+    describe.each([
+      {
+        action: 'like',
+        feedbackEvent: 'quantic__like',
+        threadEvent: 'quantic__generatedanswerlike',
+        controllerMethod: 'like',
+      },
+      {
+        action: 'dislike',
+        feedbackEvent: 'quantic__dislike',
+        threadEvent: 'quantic__generatedanswerdislike',
+        controllerMethod: 'dislike',
+      },
+    ])(
+      'when the user clicks the $action button',
+      ({feedbackEvent, threadEvent, controllerMethod}) => {
+        describe('when follow-ups are not enabled', () => {
+          beforeEach(() => {
+            generatedAnswerState = {
+              ...initialGeneratedAnswerState,
+              isStreaming: false,
+              answer: exampleAnswer,
+              answerContentFormat: 'text/markdown',
+              answerId: exampleAnswerId,
+              citations: exampleCitations,
+            };
+            mockSuccessfulHeadlessInitialization();
+            prepareHeadlessState();
+          });
+
+          afterAll(() => {
+            generatedAnswerState = initialGeneratedAnswerState;
+          });
+
+          it('should call the controller and open the feedback modal', async () => {
+            const element = createTestComponent();
+            await flushPromises();
+
+            const feedback = element.shadowRoot.querySelector(
+              selectors.generatedAnswerFeedback
+            );
+            feedback.dispatchEvent(
+              new CustomEvent(feedbackEvent, {
+                detail: {answerId: exampleAnswerId},
+              })
+            );
+            await flushPromises();
+
+            expect(functionsMocks[controllerMethod]).toHaveBeenCalledTimes(1);
+            expect(functionsMocks[controllerMethod]).toHaveBeenCalledWith(
+              exampleAnswerId
+            );
+            expect(FeedbackModalQna.open).toHaveBeenCalledTimes(1);
+          });
+        });
+
+        describe('when follow-ups are enabled', () => {
+          beforeEach(() => {
+            generatedAnswerState = {
+              ...initialGeneratedAnswerState,
+              answer: exampleAnswer,
+              followUpAnswers: {isEnabled: true, followUpAnswers: []},
+            };
+            mockSuccessfulHeadlessInitialization();
+            prepareHeadlessState();
+          });
+
+          afterAll(() => {
+            generatedAnswerState = initialGeneratedAnswerState;
+          });
+
+          it('should call the controller without opening the feedback modal', async () => {
+            const element = createTestComponent({
+              ...defaultOptions,
+              agentId: exampleAgentId,
+            });
+            await flushPromises();
+
+            const thread = element.shadowRoot.querySelector(
+              selectors.generatedAnswerThread
+            );
+            thread.dispatchEvent(
+              new CustomEvent(threadEvent, {
+                detail: {answerId: exampleAnswerId},
+              })
+            );
+            await flushPromises();
+
+            expect(functionsMocks[controllerMethod]).toHaveBeenCalledTimes(1);
+            expect(functionsMocks[controllerMethod]).toHaveBeenCalledWith(
+              exampleAnswerId
+            );
+            expect(FeedbackModalQna.open).not.toHaveBeenCalled();
+          });
+        });
+      }
+    );
+  });
 });

package/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.js

@@ -35,9 +35,12 @@ import generatedAnswerTemplate from './templates/generatedAnswer.html';
 import loadingTemplate from './templates/loading.html';
 // @ts-ignore
 import retryPromptTemplate from './templates/retryPrompt.html';
+// @ts-ignore
+import conversationTemplate from './templates/conversation.html';
 
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
 /** @typedef {import("coveo").GeneratedAnswer} GeneratedAnswer */
+/** @typedef {import("coveo").GeneratedAnswerWithFollowUps} GeneratedAnswerWithFollowUps */
 /** @typedef {import("coveo").GeneratedAnswerState} GeneratedAnswerState */
 /** @typedef {import("coveo").GeneratedAnswerCitation} GeneratedAnswerCitation */
 /** @typedef { 'neutral' | 'liked' | 'disliked'} FeedbackState */
@@ -100,6 +103,13 @@ export default class QuanticGeneratedAnswer extends LightningElement {
    * @default {undefined}
    */
   @api answerConfigurationId;
+  /**
+   * The unique identifier of the agent to use to generate the answer.
+   * @api
+   * @type {string}
+   * @default {undefined}
+   */
+  @api agentId;
   /**
    * The maximum height (in px units) of the generated answer when it is collapsed.
    * @api
@@ -155,7 +165,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     noGeneratedAnswer,
   };
 
-  /** @type {GeneratedAnswer} */
+  /** @type { GeneratedAnswer | GeneratedAnswerWithFollowUps} */
   generatedAnswer;
   /** @type {GeneratedAnswerState} */
   state;
@@ -172,13 +182,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   /** @type {boolean} */
   hasInitializationError = false;
   /** @type {boolean} */
-  _areFollowUpsEnabled = false;
-  /** @type {boolean} */
   _exceedsMaximumHeight = false;
-  /** @type {boolean} */
-  _liked = false;
-  /** @type {boolean} */
-  _disliked = false;
   /** @type {number} */
   _maxCollapsedHeight = DEFAULT_COLLAPSED_HEIGHT;
 
@@ -207,6 +211,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
    * @param {SearchEngine} engine
    */
   initialize = (engine) => {
+    this.engine = engine;
     this.ariaLiveMessage = AriaLiveRegion('GeneratedAnswer', this);
     this.headless = getHeadlessBundle(this.engineId);
     this.generatedAnswer = this.buildHeadlessGeneratedAnswerController(engine);
@@ -238,6 +243,9 @@ export default class QuanticGeneratedAnswer extends LightningElement {
       ...(this.answerConfigurationId && {
         answerConfigurationId: this.answerConfigurationId,
       }),
+      ...(this.agentId?.trim() && {
+        agentId: this.agentId.trim(),
+      }),
       fieldsToIncludeInCitations: this.citationFields,
     });
   }
@@ -316,7 +324,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
    * @param {string} id
    * @param {number} citationHoverTimeMs
    */
-  handleCitationHover = (id, citationHoverTimeMs) => {
+  logCitationHover = (id, citationHoverTimeMs) => {
     this.generatedAnswer.logCitationHover(id, citationHoverTimeMs);
   };
 
@@ -326,12 +334,8 @@ export default class QuanticGeneratedAnswer extends LightningElement {
    */
   async handleLike(event) {
     event.stopPropagation();
-    if (!this._liked) {
-      this._liked = true;
-      this._disliked = false;
-      this.generatedAnswer.like?.();
-    }
-    if (!this.feedbackSubmitted) {
+    this.generatedAnswer.like?.(event.detail?.answerId);
+    if (!this.feedbackSubmitted && !this.areFollowUpsEnabled) {
       // @ts-ignore
       await FeedbackModalQna.open({
         size: 'small',
@@ -344,18 +348,28 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     }
   }
 
+  /**
+   * handles hovering over a citation.
+   * @param {CustomEvent} event
+   */
+  handleCitationHover(event) {
+    event.stopPropagation();
+    const {citationId, citationHoverTimeMs, answerId} = event.detail;
+    this.generatedAnswer.logCitationHover(
+      citationId,
+      citationHoverTimeMs,
+      answerId
+    );
+  }
+
   /**
    * handles disliking the generated answer.
    * @param {CustomEvent} event
    */
   async handleDislike(event) {
     event.stopPropagation();
-    if (!this._disliked) {
-      this._disliked = true;
-      this._liked = false;
-      this.generatedAnswer.dislike?.();
-    }
-    if (!this.feedbackSubmitted) {
+    this.generatedAnswer.dislike?.(event.detail?.answerId);
+    if (!this.feedbackSubmitted && !this.areFollowUpsEnabled) {
       // @ts-ignore
       await FeedbackModalQna.open({
         size: 'small',
@@ -381,9 +395,13 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     this.generatedAnswer.retry();
   }
 
+  /**
+   * handles copying the generated answer to the clipboard.
+   * @param {CustomEvent} event
+   */
   handleGeneratedAnswerCopyToClipboard = (event) => {
     event.stopPropagation();
-    this.generatedAnswer.logCopyToClipboard();
+    this.generatedAnswer.logCopyToClipboard(event.detail?.answerId);
   };
 
   handleGeneratedAnswerToggle = (event) => {
@@ -487,9 +505,37 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return this.state.isVisible;
   }
 
+  /**
+   * Returns the generated answer controller narrowed to `GeneratedAnswerWithFollowUps`, or `null` if follow-ups are not available.
+   * @returns {GeneratedAnswerWithFollowUps | null}
+   */
+  get generateAnswerWithFollowUps() {
+    if (
+      !this.agentId ||
+      !this.generatedAnswer ||
+      !('askFollowUp' in this.generatedAnswer)
+    ) {
+      return null;
+    }
+    return /** @type {GeneratedAnswerWithFollowUps} */ (this.generatedAnswer);
+  }
+
   get areFollowUpsEnabled() {
-    // TODO SFINT-6786: Modify this getter to return the actual value from the state for follow-up enabled/agentId.
-    return this._areFollowUpsEnabled;
+    return (
+      this.generateAnswerWithFollowUps?.state.followUpAnswers?.isEnabled ===
+      true
+    );
+  }
+
+  get allGeneratedAnswers() {
+    const initialAnswer = {
+      ...this.state,
+      question: this.engine?.state.query?.q ?? '',
+    };
+    const followUpAnswers =
+      this.generateAnswerWithFollowUps?.state.followUpAnswers
+        ?.followUpAnswers ?? [];
+    return [initialAnswer, ...followUpAnswers];
   }
 
   get isCollapsibleEnabled() {
@@ -516,14 +562,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return `generated-answer__answer ${collapsedStateClass}`;
   }
 
-  get contentSectionClass() {
-    const baseClass =
-      'generated-answer__content slds-p-top_medium slds-p-horizontal_large';
-    return this.areFollowUpsEnabled
-      ? `${baseClass} generated-answer__content--scrollable`
-      : baseClass;
-  }
-
   get hasRetryableError() {
     return !this?.searchStatusState?.hasError && this.state?.error?.isRetryable;
   }
@@ -618,6 +656,17 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return this.state?.isLoading;
   }
 
+  get isAnswerGenerationOngoing() {
+    const initialAnswerPending = this.isStreaming || this.isLoading;
+    const followUpAnswers =
+      this.generateAnswerWithFollowUps?.state?.followUpAnswers
+        ?.followUpAnswers ?? [];
+    return (
+      initialAnswerPending ||
+      followUpAnswers.some((answer) => answer.isStreaming || answer.isLoading)
+    );
+  }
+
   get isManualAnswerGeneration() {
     return this.state?.answerGenerationMode === 'manual';
   }
@@ -629,6 +678,15 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     this.hasInitializationError = true;
   }
 
+  /**
+   * Handles the submission of a follow-up question from the `QuanticGeneratedAnswerFollowUpInput` component.
+   * @param {CustomEvent} event - The custom event containing the follow-up question details.
+   * @returns {void}
+   */
+  handleFollowUpSubmit = (event) => {
+    this.generateAnswerWithFollowUps?.askFollowUp(event.detail.value);
+  };
+
   render() {
     if (this.hasInitializationError) {
       return errorTemplate;
@@ -643,6 +701,9 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     if (this.hasRetryableError) {
       return retryPromptTemplate;
     }
+    if (this.areFollowUpsEnabled) {
+      return conversationTemplate;
+    }
     return generatedAnswerTemplate;
   }
 }

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

@@ -0,0 +1,7 @@
+@import '../quanticGeneratedAnswer.css';
+
+.generated-answer__content--scrollable {
+  overflow-y: auto;
+  height: var(--quantic-generated-answer-content-fixed-height, 50vh);
+  overflow-x: hidden;
+}