fix(quantic): CRGA component not showing collapsed when answer appear…

…s without streaming (#4840)

[SFINT-5914](https://coveord.atlassian.net/browse/SFINT-5914)

## ISSUE:

This is following a maintenance case where some cases of customers would
trigger a CRGA answer directly without the stream. This would cause the
answer to show fully rather than collapsed.

The culprit is caused by the following code:

<img width="504" alt="image"
src="https://github.com/user-attachments/assets/3972a842-4178-479f-a55e-73efc3e5a270"
/>

The `generatedAnswerElementHeight`, when `isStreaming` is false ( case
where the answer is generated in one shot rather than being streamed),
is essentially 0. Therefore, the `this._exceedsMaximumHeight = 0 >
250px` which is false and therefore does not result in the answer being
collapsed. This is happening since the component does not re-render and
therefore does not re-calculates the height and CSS variables.

## SOLUTION:

Adding `quantic__answergenerated` event.

We are proposing dispatching an event from the
`quanticGeneratedAnswerContent` component when the answer's HTML is
updated. We then listen for this event in the `quanticGeneratedAnswer`
component and recalculate the CSS variables.

When the event is triggered, it calls this function:

<img width="341" alt="image"
src="https://github.com/user-attachments/assets/7ddc3ae1-9c1b-4f30-9b7d-ebf88c128ee8"
/>


## E2E: 

<img width="780" alt="image"
src="https://github.com/user-attachments/assets/dc5795dc-30be-41a8-8cf9-a86178fb6b36"
/>



[SFINT-5914]:
https://coveord.atlassian.net/browse/SFINT-5914?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: GitHub Actions Bot <>

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/data.ts

@@ -3,7 +3,7 @@ const genQaMarkdownTextPayload = {
   payloadType: 'genqa.messageType',
   payload: JSON.stringify({
     textDelta:
-      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+      'THIS IS SOME LOREM IPSUM: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan felis vel nulla venenatis, vel volutpat mauris suscipit. Praesent aliquam, ex et dapibus fermentum, ligula metus condimentum nunc, non vehicula magna magna a nulla. Integer efficitur nunc eget semper facilisis. Quisque nec tortor at nunc blandit dictum sit amet vel mauris. Duis at tellus sit amet mi pharetra tincidunt. Nullam id risus eget risus accumsan molestie ac quis velit. Vivamus consectetur nisi vel enim finibus, nec laoreet risus facilisis. Integer a lacinia ligula. Etiam cursus urna nisi, ut tincidunt elit consectetur quis. Pellentesque nec sem vel neque malesuada euismod vitae nec augue. Suspendisse non ligula eu purus posuere dictum quis et magna. Curabitur dignissim, magna non feugiat consectetur, lorem orci fringilla sapien, sit amet vehicula eros nulla eget enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan felis vel nulla venenatis, vel volutpat mauris suscipit. Praesent aliquam, ex et dapibus fermentum, ligula metus condimentum nunc, non vehicula magna magna a nulla. Integer efficitur nunc eget semper facilisis. Quisque nec tortor at nunc blandit dictum sit amet vel mauris. Duis at tellus sit amet mi pharetra tincidunt. Nullam id risus eget risus accumsan molestie ac quis velit. Vivamus consectetur nisi vel enim finibus, nec laoreet risus facilisis. Integer a lacinia ligula. Etiam cursus urna nisi, ut tincidunt elit consectetur quis. Pellentesque nec sem vel neque malesuada euismod vitae nec augue. Suspendisse non ligula eu purus posuere dictum quis et magna. Curabitur dignissim, magna non feugiat consectetur, lorem orci fringilla sapien, sit amet vehicula eros nulla eget enim.',
   }),
   finishReason: 'COMPLETED',
 };

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

@@ -63,6 +63,10 @@ export class GeneratedAnswerObject {
       .locator('.citation__link');
   }
 
+  get showMoreButton(): Locator {
+    return this.page.getByTestId('generated-answer__answer-toggle');
+  }
+
   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);

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/quanticGeneratedAnswer.e2e.ts

@@ -1,4 +1,4 @@
-import {testSearch, testInsight} from './fixture';
+import {testSearch, testInsight, expect} from './fixture';
 import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
 import genQaData from './data';
 
@@ -174,5 +174,26 @@ useCaseTestCases.forEach((useCase) => {
         });
       });
     });
+
+    test.describe('when the answer is generated in a single shot and the answer exceeds the maximum height', () => {
+      test.use({
+        options: {
+          collapsible: true,
+        },
+      });
+      test('should display the answer as collapsed', async ({
+        generatedAnswer,
+      }) => {
+        const expectedShowMoreLabel = 'Show more';
+        await generatedAnswer.waitForStreamEndUaAnalytics();
+
+        const showMoreButton = generatedAnswer.showMoreButton;
+        expect(showMoreButton).not.toBeNull();
+
+        const showMoreButtonLabel = await showMoreButton.textContent();
+        expect(showMoreButtonLabel).not.toBeNull();
+        expect(showMoreButtonLabel).toEqual(expectedShowMoreLabel);
+      });
+    });
   });
 });

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.js

@@ -151,13 +151,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   renderedCallback() {
     initializeWithHeadless(this, this.engineId, this.initialize);
     if (this.collapsible) {
-      // 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._exceedsMaximumHeight =
-        answerElementHeight > this._maximumAnswerHeight;
+      this._exceedsMaximumHeight = this.isMaximumHeightExceeded();
     }
   }
 
@@ -224,6 +218,16 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     }
   }
 
+  isMaximumHeightExceeded() {
+    // 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;
+
+    return answerElementHeight > this._maximumAnswerHeight;
+  }
+
   getGeneratedAnswerStatus() {
     if (!this.state.isVisible) {
       return this.labels.generatedAnswerIsHidden;
@@ -348,6 +352,14 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     }
   };
 
+  handleAnswerContentUpdated = (event) => {
+    event.stopPropagation();
+    if (this.collapsible) {
+      this._exceedsMaximumHeight = this.isMaximumHeightExceeded();
+    }
+    this.updateGeneratedAnswerCSSVariables();
+  };
+
   handleToggleCollapseAnswer() {
     this.state?.expanded
       ? this.generatedAnswer.collapse()

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

@@ -53,6 +53,7 @@
               answer-content-format={answerContentFormat}
               answer={answer}
               is-streaming={isStreaming}
+              onquantic__answercontentupdated={handleAnswerContentUpdated}
               data-cy="generated-answer__content"
             >
             </c-quantic-generated-answer-content>

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js

@@ -11,6 +11,7 @@ import generatedTextContentTemplate from './templates/generatedTextContent.html'
 /**
  * The `QuanticGeneratedAnswerContent` component displays the generated answer content.
  * @category Internal
+ * @fires CustomEvent#quantic__answercontentupdated
  * @example
  * <c-quantic-generated-answer-content answer-content-format={answerContentFormat} answer={answer} is-streaming={isStreaming}></c-quantic-generated-answer-content>
  */
@@ -110,6 +111,7 @@ export default class QuanticGeneratedAnswerContent extends LightningElement {
     else {
       answerContainer.textContent = this.answer;
     }
+    this.dispatchEvent(new CustomEvent('quantic__answercontentupdated'));
   }
 
   get generatedAnswerContentClass() {