@coveo/quantic 3.13.1 → 3.14.0

package/docs/out/quantic-docs.json

@@ -1021,6 +1021,15 @@
                         "required": false,
                         "defaultValue": "{false}",
                         "type": "boolean"
+                    },
+                    {
+                        "name": "maxCollapsedHeight",
+                        "attribute": "max-collapsed-height",
+                        "access": "@api",
+                        "description": "<p>The maximum height (in px units) of the generated answer when it is collapsed.</p>",
+                        "required": false,
+                        "defaultValue": "{250}",
+                        "type": "number"
                     }
                 ]
             },
@@ -1894,7 +1903,7 @@
                         "access": "@api",
                         "description": "<p>The initial selection for the number of result per page. This should be part of the <code>choicesDisplayed</code> option. By default, this is set to the first value in <code>choicesDisplayed</code>.</p>",
                         "required": false,
-                        "defaultValue": "`10`",
+                        "defaultValue": "`the first value in 'choicesDisplayed'`",
                         "type": "number"
                     }
                 ]
@@ -5635,7 +5644,7 @@
                         "access": "@api",
                         "description": "<p>The initial selection for the number of result per page. This should be part of the <code>choicesDisplayed</code> option. By default, this is set to the first value in <code>choicesDisplayed</code>.</p>",
                         "required": false,
-                        "defaultValue": "`10`",
+                        "defaultValue": "`the first value in 'choicesDisplayed'`",
                         "type": "number"
                     }
                 ]

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

@@ -1444,10 +1444,10 @@
   </labels>
   <labels>
     <fullName>quantic_RecentQueryAriaLabel</fullName>
-    <value>Recent query,</value>
+    <value>recent query,</value>
     <language>en_US</language>
     <protected>false</protected>
-    <shortDescription>Recent query,</shortDescription>
+    <shortDescription>recent query,</shortDescription>
   </labels>
   <labels>
     <fullName>quantic_QuerySuggestionAriaLabel</fullName>

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

@@ -114,6 +114,12 @@ function cleanup() {
 }
 
 describe('c-quantic-breadcrumb-manager', () => {
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+    mockStoreState();
+  });
+
   afterEach(() => {
     breadcrumbManagerState = initialBreadcrumbManagerState;
     storeState = initialStoreState;
@@ -155,18 +161,6 @@ describe('c-quantic-breadcrumb-manager', () => {
     });
   });
 
-  beforeEach(() => {
-    mockSuccessfulHeadlessInitialization();
-    prepareHeadlessState();
-    mockStoreState();
-  });
-
-  afterEach(() => {
-    breadcrumbManagerState = initialBreadcrumbManagerState;
-    storeState = initialStoreState;
-    cleanup();
-  });
-
   describe('facet breadcrumbs rendering', () => {
     const exampleFacetBreadcrumbs = [
       {

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

@@ -4,7 +4,8 @@ import {createElement} from 'lwc';
 import QuanticGeneratedAnswer from 'c/quanticGeneratedAnswer';
 import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
 
-let mockAnswerHeight = 300;
+let mockAnswerHeight = 250;
+let mockedConsoleWarn;
 
 jest.mock('c/quanticHeadlessLoader');
 jest.mock('c/quanticUtils', () => ({
@@ -31,6 +32,7 @@ const defaultOptions = {
   answerConfigurationId: undefined,
   withToggle: false,
   collapsible: false,
+  maxCollapsedHeight: 250,
 };
 
 function createTestComponent(options = defaultOptions) {
@@ -48,6 +50,7 @@ function createTestComponent(options = defaultOptions) {
 const selectors = {
   initializationError: 'c-quantic-component-error',
   generatedAnswerCard: '[data-testid="generated-answer__card"]',
+  generatedAnswer: '[data-testid="generated-answer__answer"]',
   generatedAnswerBadge: '[data-testid="generated-answer__badge"]',
   generatedAnswerRetryButton: '[data-testid="generated-answer__retry-button"]',
   generatedAnswerActions: '[data-testid="generated-answer__actions"]',
@@ -101,7 +104,7 @@ const exampleEngine = {
   id: 'dummy engine',
 };
 let isInitialized = false;
-const maximumAnswerHeight = 250;
+const defaultAnswerHeight = 250;
 
 function prepareHeadlessState() {
   // @ts-ignore
@@ -142,6 +145,10 @@ function cleanup() {
 }
 
 describe('c-quantic-generated-answer', () => {
+  beforeEach(() => {
+    mockedConsoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+  });
+
   afterEach(() => {
     cleanup();
   });
@@ -342,7 +349,7 @@ describe('c-quantic-generated-answer', () => {
       describe('when the property collapsible is set to true', () => {
         describe('when the answer is shorter than the maximum answer height', () => {
           beforeEach(() => {
-            mockAnswerHeight = maximumAnswerHeight - 100;
+            mockAnswerHeight = defaultAnswerHeight - 100;
           });
 
           it('should not display the generating answer message', async () => {
@@ -363,7 +370,7 @@ describe('c-quantic-generated-answer', () => {
 
         describe('when the answer is longer than the maximum answer height', () => {
           beforeEach(() => {
-            mockAnswerHeight = maximumAnswerHeight + 100;
+            mockAnswerHeight = defaultAnswerHeight + 100;
           });
 
           it('should display the generating answer message', async () => {
@@ -489,7 +496,7 @@ describe('c-quantic-generated-answer', () => {
       describe('when the property collapsible is set to true', () => {
         describe('when the answer is shorter than the maximum answer height', () => {
           beforeEach(() => {
-            mockAnswerHeight = maximumAnswerHeight - 100;
+            mockAnswerHeight = defaultAnswerHeight - 100;
           });
 
           it('should not display the generating answer message', async () => {
@@ -525,7 +532,7 @@ describe('c-quantic-generated-answer', () => {
 
         describe('when the answer is longer than the maximum answer height', () => {
           beforeEach(() => {
-            mockAnswerHeight = maximumAnswerHeight + 100;
+            mockAnswerHeight = defaultAnswerHeight + 100;
           });
 
           it('should not display the generating answer message', async () => {
@@ -558,6 +565,106 @@ describe('c-quantic-generated-answer', () => {
             expect(generatedAnswerCollapseToggle).not.toBeNull();
           });
         });
+
+        describe('when the property maxCollapsedHeight is set to a custom value', () => {
+          // The valid range is between 150 and 500 pixels.
+          describe('when the maxCollapsedHeight value is within the valid range and the answer exceeds it', () => {
+            it('should display the generated answer as collapsed and set the maxHeight of the generated answer to the given custom value', async () => {
+              const expectedMaxCollapsibleAnswerHeight = 300;
+              mockAnswerHeight = 350;
+              const element = createTestComponent({
+                ...defaultOptions,
+                collapsible: true,
+                maxCollapsedHeight: expectedMaxCollapsibleAnswerHeight,
+              });
+              await flushPromises();
+
+              const generatedAnswer = element.shadowRoot.querySelector(
+                selectors.generatedAnswer
+              );
+              expect(generatedAnswer).not.toBeNull();
+
+              const generatedAnswerCollapseToggle =
+                element.shadowRoot.querySelector(
+                  selectors.generatedAnswerCollapseToggle
+                );
+              expect(generatedAnswerCollapseToggle).not.toBeNull();
+
+              const maxHeightValue =
+                generatedAnswer.style.getPropertyValue('--maxHeight');
+              expect(maxHeightValue).toEqual(
+                `${expectedMaxCollapsibleAnswerHeight}px`
+              );
+
+              expect(mockedConsoleWarn).not.toHaveBeenCalled();
+            });
+          });
+
+          describe('when the maxCollapsedHeight value is greater than the valid range', () => {
+            it('should set the generated answer height with the fallback default value and log a warning in the console', async () => {
+              const exampleMaxCollapsedHeightValue = 550;
+              const element = createTestComponent({
+                ...defaultOptions,
+                collapsible: true,
+                maxCollapsedHeight: exampleMaxCollapsedHeightValue,
+              });
+              await flushPromises();
+
+              const generatedAnswer = element.shadowRoot.querySelector(
+                selectors.generatedAnswer
+              );
+              expect(generatedAnswer).not.toBeNull();
+
+              const generatedAnswerCollapseToggle =
+                element.shadowRoot.querySelector(
+                  selectors.generatedAnswerCollapseToggle
+                );
+              expect(generatedAnswerCollapseToggle).not.toBeNull();
+
+              const maxHeightValue =
+                generatedAnswer.style.getPropertyValue('--maxHeight');
+              expect(maxHeightValue).toEqual(`${defaultAnswerHeight}px`);
+
+              expect(mockedConsoleWarn).toHaveBeenCalledTimes(1);
+              expect(mockedConsoleWarn).toHaveBeenCalledWith(
+                `Cannot set max-collapsed-height to (${exampleMaxCollapsedHeightValue}) it accepts a range between 150 and 500. The default value of 250px will be used.`
+              );
+            });
+          });
+
+          describe('when the maxCollapsedHeight value is smaller than the valid range', () => {
+            it('should set the generated answer height with the fallback default value and log a warning in the console', async () => {
+              const exampleMaxCollapsedHeightValue = 100;
+              const element = createTestComponent({
+                ...defaultOptions,
+                collapsible: true,
+                maxCollapsedHeight: exampleMaxCollapsedHeightValue,
+              });
+              await flushPromises();
+
+              const generatedAnswer = element.shadowRoot.querySelector(
+                selectors.generatedAnswer
+              );
+              expect(generatedAnswer).not.toBeNull();
+
+              const generatedAnswerCollapseToggle =
+                element.shadowRoot.querySelector(
+                  selectors.generatedAnswerCollapseToggle
+                );
+              expect(generatedAnswerCollapseToggle).not.toBeNull();
+
+              const maxHeightValue =
+                generatedAnswer.style.getPropertyValue('--maxHeight');
+
+              expect(maxHeightValue).toEqual(`${defaultAnswerHeight}px`);
+
+              expect(mockedConsoleWarn).toHaveBeenCalledTimes(1);
+              expect(mockedConsoleWarn).toHaveBeenCalledWith(
+                `Cannot set max-collapsed-height to (${exampleMaxCollapsedHeightValue}) it accepts a range between 150 and 500. The default value of 250px will be used.`
+              );
+            });
+          });
+        });
       });
 
       it('should display the generated answer content', async () => {

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

@@ -44,6 +44,10 @@ 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;
+
 const GENERATED_ANSWER_DATA_KEY = 'coveo-generated-answer-data';
 
 /**
@@ -86,6 +90,29 @@ export default class QuanticGeneratedAnswer extends LightningElement {
    * @type {string}
    */
   @api answerConfigurationId;
+  /**
+   * The maximum height (in px units) of the generated answer when it is collapsed.
+   * @api
+   * @type {number}
+   * @default {250}
+   */
+  @api
+  get maxCollapsedHeight() {
+    return this._maxCollapsedHeight;
+  }
+  set maxCollapsedHeight(value) {
+    if (
+      value >= MIN_VALID_COLLAPSED_HEIGHT &&
+      value <= MAX_VALID_COLLAPSED_HEIGHT
+    ) {
+      this._maxCollapsedHeight = value;
+    } else {
+      console.warn(
+        `Cannot set max-collapsed-height to (${value}) it accepts a range between ${MIN_VALID_COLLAPSED_HEIGHT} and ${MAX_VALID_COLLAPSED_HEIGHT}. The default value of ${DEFAULT_COLLAPSED_HEIGHT}px will be used.`
+      );
+      this._maxCollapsedHeight = DEFAULT_COLLAPSED_HEIGHT;
+    }
+  }
 
   labels = {
     generatedAnswerForYou,
@@ -125,14 +152,14 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   ariaLiveMessage;
   /** @type {boolean} */
   hasInitializationError = false;
-  /** @type {number} */
-  _maximumAnswerHeight = 250;
   /** @type {boolean} */
   _exceedsMaximumHeight = false;
   /** @type {boolean} */
   _liked = false;
   /** @type {boolean} */
   _disliked = false;
+  /** @type {number} */
+  _maxCollapsedHeight = DEFAULT_COLLAPSED_HEIGHT;
 
   connectedCallback() {
     registerComponentForInit(this, this.engineId);
@@ -225,7 +252,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
       ? this.generatedAnswerElementHeight + 50
       : this.generatedAnswerElementHeight;
 
-    return answerElementHeight > this._maximumAnswerHeight;
+    return answerElementHeight > this.maxCollapsedHeight;
   }
 
   getGeneratedAnswerStatus() {
@@ -397,12 +424,12 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   }
 
   /**
-   * Sets the the value of the CSS variable "--maxHeight" the value of the _maximumAnswerHeight property.
+   * Sets the value of the CSS variable "--maxHeight" to the value of the maxCollapsedHeight property.
    */
   updateGeneratedAnswerCSSVariables() {
     if (this._exceedsMaximumHeight) {
       const styles = this.generatedAnswerElement?.style;
-      styles.setProperty('--maxHeight', `${this._maximumAnswerHeight}px`);
+      styles?.setProperty('--maxHeight', `${this.maxCollapsedHeight}px`);
     }
   }
 

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

@@ -48,7 +48,7 @@
           data-cy="generated-answer__content"
           class="generated-answer__content slds-var-m-top_medium"
         >
-          <div data-cy="generated-answer__answer" class={generatedAnswerClass}>
+          <div data-testid="generated-answer__answer" class={generatedAnswerClass}>
             <c-quantic-generated-answer-content
               answer-content-format={answerContentFormat}
               answer={answer}