@coveo/quantic 3.42.1 → 3.43.1

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/quanticGeneratedAnswer.js

@@ -1,23 +1,14 @@
 import answerGenerated from '@salesforce/label/c.quantic_AnswerGenerated';
 import couldNotGenerateAnAnswer from '@salesforce/label/c.quantic_CouldNotGenerateAnAnswer';
-import feedback from '@salesforce/label/c.quantic_Feedback';
 import feedbackHelpUsImprove from '@salesforce/label/c.quantic_FeedbackHelpUsImprove';
 import generatedAnswerForYou from '@salesforce/label/c.quantic_GeneratedAnswerForYou';
 import generatedAnswerIsHidden from '@salesforce/label/c.quantic_GeneratedAnswerIsHidden';
 import showLess from '@salesforce/label/c.quantic_GeneratedAnswerShowLess';
 import showMore from '@salesforce/label/c.quantic_GeneratedAnswerShowMore';
 import generatingAnswer from '@salesforce/label/c.quantic_GeneratingAnswer';
-import harmful from '@salesforce/label/c.quantic_Harmful';
-import inaccurate from '@salesforce/label/c.quantic_Inaccurate';
-import irrelevant from '@salesforce/label/c.quantic_Irrelevant';
 import loading from '@salesforce/label/c.quantic_Loading';
-import other from '@salesforce/label/c.quantic_Other';
-import outOfDate from '@salesforce/label/c.quantic_OutOfDate';
 import rgaDisclaimer from '@salesforce/label/c.quantic_RGADisclaimer';
-import thisAnswerWasHelpful from '@salesforce/label/c.quantic_ThisAnswerWasHelpful';
-import thisAnswerWasNotHelpful from '@salesforce/label/c.quantic_ThisAnswerWasNotHelpful';
 import tryAgain from '@salesforce/label/c.quantic_TryAgain';
-import whyGeneratedAnswerWasNotHelpful from '@salesforce/label/c.quantic_WhyGeneratedAnswerWasNotHelpful';
 import noGeneratedAnswer from '@salesforce/label/c.quantic_NoGeneratedAnswer';
 import FeedbackModalQna from 'c/quanticFeedbackModalQna';
 import {
@@ -25,7 +16,7 @@ import {
   initializeWithHeadless,
   getHeadlessBundle,
 } from 'c/quanticHeadlessLoader';
-import {AriaLiveRegion, I18nUtils, getAbsoluteHeight} from 'c/quanticUtils';
+import {AriaLiveRegion, I18nUtils} from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 // @ts-ignore
 import errorTemplate from './templates/errorTemplate.html';
@@ -42,15 +33,9 @@ import conversationTemplate from './templates/conversation.html';
 /** @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 */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").SearchStatusState} SearchStatusState */
 
-const FEEDBACK_LIKED_STATE = 'liked';
-const FEEDBACK_DISLIKED_STATE = 'disliked';
-const FEEDBACK_NEUTRAL_STATE = 'neutral';
-
 const DEFAULT_COLLAPSED_HEIGHT = 250;
 const MAX_VALID_COLLAPSED_HEIGHT = 500;
 const MIN_VALID_COLLAPSED_HEIGHT = 150;
@@ -143,18 +128,9 @@ export default class QuanticGeneratedAnswer extends LightningElement {
 
   labels = {
     generatedAnswerForYou,
-    thisAnswerWasNotHelpful,
-    thisAnswerWasHelpful,
     tryAgain,
     couldNotGenerateAnAnswer,
-    other,
-    harmful,
-    irrelevant,
-    inaccurate,
-    outOfDate,
     feedbackHelpUsImprove,
-    feedback,
-    whyGeneratedAnswerWasNotHelpful,
     generatingAnswer,
     generatedAnswerIsHidden,
     answerGenerated,
@@ -169,8 +145,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   generatedAnswer;
   /** @type {GeneratedAnswerState} */
   state;
-  /** @type {FeedbackState} */
-  feedbackState = 'neutral';
   /** @type {SearchStatus} */
   searchStatus;
   /** @type {SearchStatusState} */
@@ -185,6 +159,8 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   _exceedsMaximumHeight = false;
   /** @type {number} */
   _maxCollapsedHeight = DEFAULT_COLLAPSED_HEIGHT;
+  /** @type {number} */
+  generatedAnswerHeight = 0;
 
   connectedCallback() {
     registerComponentForInit(this, this.engineId);
@@ -266,7 +242,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
 
   updateState() {
     this.state = this.generatedAnswer.state;
-    this.updateFeedbackState();
     this.ariaLiveMessage.dispatchMessage(this.getGeneratedAnswerStatus());
 
     if (this.isCollapsibleEnabled) {
@@ -278,8 +253,8 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     // If we are still streaming add a little extra height to the answer element to account for the next answer chunk.
     // This helps a lot with the jankyness of the answer fading out when the chunk is close but not yet over the max height.
     const answerElementHeight = this.isStreaming
-      ? this.generatedAnswerElementHeight + 50
-      : this.generatedAnswerElementHeight;
+      ? this.generatedAnswerHeight + 50
+      : this.generatedAnswerHeight;
 
     return answerElementHeight > this.maxCollapsedHeight;
   }
@@ -309,25 +284,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     this.searchStatusState = this.searchStatus.state;
   }
 
-  updateFeedbackState() {
-    if (this.state?.liked) {
-      this.feedbackState = FEEDBACK_LIKED_STATE;
-    } else if (this.state?.disliked) {
-      this.feedbackState = FEEDBACK_DISLIKED_STATE;
-    } else {
-      this.feedbackState = FEEDBACK_NEUTRAL_STATE;
-    }
-  }
-
-  /**
-   * handles hovering over a citation.
-   * @param {string} id
-   * @param {number} citationHoverTimeMs
-   */
-  logCitationHover = (id, citationHoverTimeMs) => {
-    this.generatedAnswer.logCitationHover(id, citationHoverTimeMs);
-  };
-
   /**
    * handles liking the generated answer.
    * @param {CustomEvent} event
@@ -420,6 +376,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
 
   handleAnswerContentUpdated = (event) => {
     event.stopPropagation();
+    this.generatedAnswerHeight = event.detail?.height;
     if (this.isCollapsibleEnabled) {
       this._exceedsMaximumHeight = this.isMaximumHeightExceeded();
     }
@@ -453,15 +410,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return this.template.querySelector('.generated-answer__answer');
   }
 
-  /**
-   * Returns the generated answer height.
-   * @returns {number}
-   */
-  get generatedAnswerElementHeight() {
-    // @ts-ignore
-    return getAbsoluteHeight(this.generatedAnswerElement?.firstChild);
-  }
-
   /**
    * Sets the value of the CSS variable "--maxHeight" to the value of the maxCollapsedHeight property.
    */
@@ -476,31 +424,14 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return this?.state?.answer;
   }
 
-  get answerId() {
-    return this?.state?.answerId;
-  }
-
   get citations() {
     return this?.state?.citations;
   }
 
-  get answerContentFormat() {
-    return this?.state?.answerContentFormat;
-  }
-
-  get shouldDisplayCitations() {
-    const hasCitations = !!this.citations?.length;
-    return hasCitations && !this.isAnswerCollapsed;
-  }
-
   get isStreaming() {
     return this?.state?.isStreaming;
   }
 
-  get shouldDisplayActions() {
-    return this.isVisible && !this.isStreaming && !this.isAnswerCollapsed;
-  }
-
   get isVisible() {
     return this.state.isVisible;
   }
@@ -527,15 +458,18 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     );
   }
 
-  get allGeneratedAnswers() {
-    const initialAnswer = {
+  get initialAnswer() {
+    return {
       ...this.state,
       question: this.engine?.state.query?.q ?? '',
     };
+  }
+
+  get allGeneratedAnswers() {
     const followUpAnswers =
       this.generateAnswerWithFollowUps?.state.followUpAnswers
         ?.followUpAnswers ?? [];
-    return [initialAnswer, ...followUpAnswers];
+    return [this.initialAnswer, ...followUpAnswers];
   }
 
   get isCollapsibleEnabled() {
@@ -566,36 +500,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return !this?.searchStatusState?.hasError && this.state?.error?.isRetryable;
   }
 
-  /**
-   * Returns the options displayed in the Quantic Feedback Modal.
-   */
-  get options() {
-    return [
-      {
-        label: this.labels.irrelevant,
-        value: 'irrelevant',
-      },
-      {
-        label: this.labels.inaccurate,
-        value: 'notAccurate',
-      },
-      {
-        label: this.labels.outOfDate,
-        value: 'outOfDate',
-      },
-      {
-        label: this.labels.harmful,
-        value: 'harmful',
-      },
-      {
-        label: this.labels.other,
-        value: 'other',
-        withDetails: true,
-        detailsRequired: true,
-      },
-    ];
-  }
-
   get generatedAnswerHeaderClass() {
     const headerBaseClass =
       'generated-answer__card-header slds-grid slds-grid_vertical-align-center slds-grid_align-spread slds-p-horizontal_large slds-p-vertical_small';

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}

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

@@ -33,63 +33,24 @@
             data-testid="generated-answer__answer"
             class={generatedAnswerClass}
           >
-            <c-quantic-generated-answer-content
+            <c-quantic-generated-answer-body
               engine-id={engineId}
-              answer-id={answerId}
-              answer-content-format={answerContentFormat}
-              answer={answer}
-              is-streaming={isStreaming}
+              generated-answer={initialAnswer}
+              disable-citation-anchoring={disableCitationAnchoring}
+              onquantic__generatedanswerlike={handleLike}
+              onquantic__generatedanswerdislike={handleDislike}
+              onquantic__citationhover={handleCitationHover}
               onquantic__answercontentupdated={handleAnswerContentUpdated}
-            >
-            </c-quantic-generated-answer-content>
+            ></c-quantic-generated-answer-body>
           </div>
           <div class="slds-grid slds-grid_vertical">
-            <template lwc:if={shouldDisplayCitations}>
-              <div class="slds-size_1-of-1 slds-var-m-top_x-small">
-                <c-quantic-source-citations
-                  engine-id={engineId}
-                  data-testid="generated-answer__citations"
-                  citations={citations}
-                  citation-hover-handler={logCitationHover}
-                  disable-citation-anchoring={disableCitationAnchoring}
-                ></c-quantic-source-citations>
-              </div>
-            </template>
-            <template lwc:if={shouldDisplayActions}>
-              <div class="slds-size_1-of-1 slds-grid slds-grid_vertical-align-center slds-var-m-top_x-small slds-grid_align-start">
-                <div
-                  data-testid="generated-answer__actions"
-                  class="slds-grid slds-grid_vertical-align-center"
-                >
-                  <c-quantic-feedback
-                    state={feedbackState}
-                    onquantic__like={handleLike}
-                    onquantic__dislike={handleDislike}
-                    like-icon-name="utility:like"
-                    like-label={labels.thisAnswerWasHelpful}
-                    dislike-icon-name="utility:dislike"
-                    dislike-label={labels.thisAnswerWasNotHelpful}
-                    size="x-small"
-                    question=""
-                    hide-explain-why-button
-                    hide-labels
-                  ></c-quantic-feedback>
-                  <c-quantic-generated-answer-copy-to-clipboard
-                    data-testid="generated-answer__copy-to-clipboard"
-                    answer={answer}
-                    size="x-small"
-                    class="slds-var-m-horizontal_xx-small"
-                  ></c-quantic-generated-answer-copy-to-clipboard>
-                </div>
-              </div>
-            </template>
             <template lwc:if={isAnswerCollapsed}>
               <div class="slds-grid slds-size_1-of-1 slds-wrap slds-grid_vertical-align-center slds-var-m-top_x-small">
                 <div class="slds-grid slds-wrap slds-grid_vertical-align-center">
                   <template lwc:if={isStreaming}>
                     <div
                       data-testid="generated-answer__collapse-generating-message"
-                      class="generated-answer__collapse-generating-message slds-var-m-right_small"
+                      class="generated-answer__collapse-generating-message slds-var-m-right_small slds-var-m-bottom_medium"
                     >
                       {labels.generatingAnswer}...
                     </div>

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

@@ -5,6 +5,8 @@ import {createElement} from 'lwc';
 import {loadMarkdownDependencies} from 'c/quanticUtils';
 import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
 
+const mockAnswerHeight = 250;
+
 jest.mock('c/quanticHeadlessLoader');
 jest.mock('c/quanticUtils', () => ({
   loadMarkdownDependencies: jest.fn(
@@ -17,6 +19,7 @@ jest.mock('c/quanticUtils', () => ({
   LinkUtils: {
     bindAnalyticsToLink: jest.fn(() => jest.fn()),
   },
+  getAbsoluteHeight: jest.fn(() => mockAnswerHeight),
 }));
 
 const mockMarkedUse = jest.fn();
@@ -417,4 +420,28 @@ describe('c-quantic-generated-answer-content', () => {
       });
     });
   });
+
+  describe('the quantic__answercontentupdated event', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should dispatch the event with the measured height when the markdown content is updated', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        answerContentFormat: 'text/markdown',
+        answer: 'Hello, world!',
+      });
+      const handler = jest.fn();
+      element.addEventListener('quantic__answercontentupdated', handler);
+      await flushPromises();
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0][0];
+      expect(event.detail).toEqual({height: mockAnswerHeight});
+      expect(event.bubbles).toBe(true);
+      expect(event.composed).toBe(true);
+    });
+  });
 });

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

@@ -7,6 +7,7 @@ import {
   transformMarkdownToHtml,
   loadMarkdownDependencies,
   LinkUtils,
+  getAbsoluteHeight,
 } from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 // @ts-ignore
@@ -171,7 +172,13 @@ export default class QuanticGeneratedAnswerContent extends LightningElement {
     else {
       answerContainer.textContent = this.answer;
     }
-    this.dispatchEvent(new CustomEvent('quantic__answercontentupdated'));
+    this.dispatchEvent(
+      new CustomEvent('quantic__answercontentupdated', {
+        bubbles: true,
+        composed: true,
+        detail: {height: getAbsoluteHeight(answerContainer)},
+      })
+    );
   }
 
   /**