@coveo/quantic 3.40.0 → 3.42.0

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;
+}

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

@@ -0,0 +1,63 @@
+<template>
+  <template lwc:if={shouldDisplayGeneratedAnswer}>
+    <div
+      data-testid="generated-answer__card"
+      class="slds-box slds-p-around_none"
+    >
+      <header
+        data-testid="generated-answer__header"
+        class={generatedAnswerHeaderClass}
+      >
+        <div
+          class="generated-answer__header-title slds-grid slds-grid_vertical-align-center"
+        >
+          <lightning-icon
+            icon-name="utility:sparkles"
+            size="x-small"
+            alternative-text={labels.generatedAnswerForYou}
+            class="slds-current-color slds-var-m-right_x-small"
+          ></lightning-icon>
+          <span
+            data-testid="generated-answer__header-title"
+            class="slds-text-title_bold slds-p-vertical_x-small"
+            >{labels.generatedAnswerForYou}
+          </span>
+        </div>
+        <template lwc:if={withToggle}>
+          <c-quantic-generated-answer-toggle
+            is-generated-answer-visible={isVisible}
+          ></c-quantic-generated-answer-toggle>
+        </template>
+      </header>
+      <template lwc:if={isVisible}>
+        <div
+          class="slds-p-horizontal_large slds-p-top_medium generated-answer__content--scrollable"
+        >
+          <c-quantic-generated-answer-thread
+            engine-id={engineId}
+            onquantic__generatedanswerlike={handleLike}
+            onquantic__generatedanswerdislike={handleDislike}
+            onquantic__citationhover={handleCitationHover}
+            generated-answers={allGeneratedAnswers}
+            disable-citation-anchoring={disableCitationAnchoring}
+          >
+          </c-quantic-generated-answer-thread>
+        </div>
+        <div class="slds-p-horizontal_large slds-p-vertical_medium">
+          <c-quantic-generated-answer-follow-up-input
+            onquantic__submitfollowup={handleFollowUpSubmit}
+            submit-button-disabled={isAnswerGenerationOngoing}
+          ></c-quantic-generated-answer-follow-up-input>
+          <footer
+            data-testid="generated-answer__footer"
+            class="generated-answer__disclaimer slds-grid slds-grid_vertical-align-center slds-grid_align-end slds-text-color_weak slds-text-body_small slds-var-m-top_xx-small"
+          >
+            <div data-testid="generated-answer__disclaimer">
+              <slot name="disclaimer">{labels.rgaDisclaimer}</slot>
+            </div>
+          </footer>
+        </div>
+      </template>
+    </div>
+  </template>
+</template>

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

@@ -9,11 +9,6 @@
   word-wrap: break-word;
 }
 
-.generated-answer__content--scrollable {
-  overflow-y: auto;
-  height: var(--quantic-generated-answer-content-fixed-height, 50vh);
-}
-
 .generated-answer__footer {
   gap: 1rem;
 }
@@ -59,9 +54,3 @@
   opacity: 0.2;
   visibility: hidden;
 }
-
-@keyframes cursor-blink {
-  100% {
-    visibility: hidden;
-  }
-}

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

@@ -27,7 +27,7 @@
       <template lwc:if={isVisible}>
         <section
           data-testid="generated-answer__body"
-          class={contentSectionClass}
+          class="generated-answer__content slds-p-top_medium slds-p-horizontal_large"
         >
           <div
             data-testid="generated-answer__answer"
@@ -50,7 +50,7 @@
                   engine-id={engineId}
                   data-testid="generated-answer__citations"
                   citations={citations}
-                  citation-hover-handler={handleCitationHover}
+                  citation-hover-handler={logCitationHover}
                   disable-citation-anchoring={disableCitationAnchoring}
                 ></c-quantic-source-citations>
               </div>