@coveo/quantic 3.37.9 → 3.38.0

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

@@ -106,6 +106,17 @@ describe('c-quantic-feedback', () => {
     expect(question.textContent).toBe(exampleQuestion);
   });
 
+  it('should not render the feedback question when question is empty', async () => {
+    const element = createTestComponent({...defaultOptions, question: ''});
+    await flushPromises();
+
+    const question = element.shadowRoot.querySelector(
+      selectors.feedbackQuestion
+    );
+
+    expect(question).toBeNull();
+  });
+
   describe('when the component is in a neutral state', () => {
     it('should display the feedback buttons in a neutral state', async () => {
       const element = createTestComponent();

package/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html

@@ -1,7 +1,9 @@
 <template>
   <div class="slds-grid feedback__main-section">
-    <span class="slds-var-p-right_small slds-text-color_weak feedback__question"
-      id="feedback__question">{question}</span>
+    <template lwc:if={hasQuestion}>
+      <span class="slds-var-p-right_small slds-text-color_weak feedback__question"
+        id="feedback__question">{question}</span>
+    </template>
     <c-quantic-stateful-button selected={liked} data-testid="feedback__like-button" tooltip={likeLabel}
       icon-name={likeIconName} onquantic__select={handleLike} onquantic__deselect={handleLike} without-borders selected-state-color="#2e844a"
       label={likeButtonLabel} icon-size={size}></c-quantic-stateful-button>
@@ -9,10 +11,10 @@
       icon-name={dislikeIconName} onquantic__select={handleDislike} onquantic__deselect={handleDislike} without-borders selected-state-color="#ea001e"
       label={dislikeButtonLabel} icon-size={size}></c-quantic-stateful-button>
   </div>
-  <template if:true={displaySuccessMessage}>
+  <template lwc:if={displaySuccessMessage}>
     <div class="slds-grid feedback__success-message">
       <span class="slds-var-p-vertical_x-small">{successMessage}</span>
-      <template if:false={hideExplainWhyButton}>
+      <template lwc:if={shouldShowExplainWhyButton}>
         <lightning-button data-testid="feedback__explain-why-button" class="slds-var-m-left_x-small feedback__explain-why"
           variant="base" label={labels.explainWhy} onclick={handlePressExplainWhyButton}></lightning-button>
       </template>

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

@@ -168,4 +168,12 @@ export default class QuanticFeedback extends LightningElement {
     if (this.hideLabels) return '';
     return this.dislikeLabel;
   }
+
+  get hasQuestion() {
+    return !!this.question?.trim();
+  }
+
+  get shouldShowExplainWhyButton() {
+    return !this.hideExplainWhyButton;
+  }
 }

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

@@ -73,8 +73,11 @@ function createTestComponent(options = defaultOptions, assignedElements = []) {
 const selectors = {
   initializationError: 'c-quantic-component-error',
   generatedAnswerCard: '[data-testid="generated-answer__card"]',
+  generatedAnswerHeader: '[data-testid="generated-answer__header"]',
+  generatedAnswerBody: '[data-testid="generated-answer__body"]',
+  generatedAnswerFooter: '[data-testid="generated-answer__footer"]',
   generatedAnswer: '[data-testid="generated-answer__answer"]',
-  generatedAnswerBadge: '[data-testid="generated-answer__badge"]',
+  generatedAnswerBadge: '[data-testid="generated-answer__header-title"]',
   generatedAnswerRetryButton: '[data-testid="generated-answer__retry-button"]',
   generatedAnswerActions: '[data-testid="generated-answer__actions"]',
   generatedAnswerToggleButton: 'c-quantic-generated-answer-toggle',
@@ -471,7 +474,7 @@ describe('c-quantic-generated-answer', () => {
         expect(generatedAnswerActions).toBeNull();
       });
 
-      it('should not display the generated answer disclaimer', async () => {
+      it('should not display the generated answer disclaimer in the footer', async () => {
         const element = createTestComponent();
         await flushPromises();
 
@@ -727,24 +730,50 @@ describe('c-quantic-generated-answer', () => {
         const element = createTestComponent();
         await flushPromises();
 
+        const generatedAnswerBody = element.shadowRoot.querySelector(
+          selectors.generatedAnswerBody
+        );
         const generatedAnswerActions = element.shadowRoot.querySelector(
           selectors.generatedAnswerActions
         );
 
+        expect(generatedAnswerBody).not.toBeNull();
         expect(generatedAnswerActions).not.toBeNull();
+        expect(generatedAnswerActions.closest('section')).toBe(
+          generatedAnswerBody
+        );
       });
 
-      it('should not display the generated answer disclaimer', async () => {
+      it('should display the generated answer disclaimer', async () => {
         const element = createTestComponent();
         await flushPromises();
 
+        const generatedAnswerFooter = element.shadowRoot.querySelector(
+          selectors.generatedAnswerFooter
+        );
         const generatedAnswerDisclaimer = element.shadowRoot.querySelector(
           selectors.generatedAnswerDisclaimer
         );
 
+        expect(generatedAnswerFooter).not.toBeNull();
         expect(generatedAnswerDisclaimer).not.toBeNull();
       });
 
+      it('should display the generated answer header content', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const generatedAnswerHeader = element.shadowRoot.querySelector(
+          selectors.generatedAnswerHeader
+        );
+        const generatedAnswerBadge = element.shadowRoot.querySelector(
+          selectors.generatedAnswerBadge
+        );
+
+        expect(generatedAnswerHeader).not.toBeNull();
+        expect(generatedAnswerBadge).not.toBeNull();
+      });
+
       it('should pass the disableCitationAnchoring property to the source citations component', async () => {
         const element = createTestComponent();
         await flushPromises();

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

@@ -1,10 +1,3 @@
-.generated-answer__card-header {
-  justify-content: space-between;
-  align-items: center;
-}
-
-.generated-answer__badge {
-  background-color: var(--lwc-colorBackgroundButtonDefaultHover, #eef4ff);
+.generated-answer__header-title {
   color: var(--lwc-brandPrimary, #1b96ff);
-  border-radius: var(--lwc-border-radius-medium, 0.25rem);
 }

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

@@ -535,12 +535,12 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     ];
   }
 
-  get generatedAnswerFooterCssClass() {
-    return 'slds-grid slds-wrap slds-grid_align-spread generated-answer__footer';
-  }
-
-  get generatedAnswerFooterRowClass() {
-    return 'generated-answer__footer-row slds-grid slds-col slds-size_1-of-1 slds-wrap slds-grid_align-spread';
+  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';
+    return this.isVisible
+      ? `${headerBaseClass} slds-border_bottom`
+      : headerBaseClass;
   }
 
   get citationFields() {
@@ -565,28 +565,6 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return this.isAnswerCollapsed ? 'utility:chevrondown' : 'utility:chevronup';
   }
 
-  get shouldShowCollapseGeneratingMessage() {
-    // If the answer is collapsed and is still streaming,
-    // we should show a message letting the user know it's still generating.
-    return (
-      this.collapsible &&
-      this.isVisible &&
-      this.isStreaming &&
-      this._exceedsMaximumHeight
-    );
-  }
-
-  get shouldShowToggleCollapseAnswer() {
-    // Only show the toggle collapse button if the answer is
-    // collapsible, visible, not streaming, and exceeds the maximum height.
-    return (
-      this.collapsible &&
-      this.isVisible &&
-      !this.isStreaming &&
-      this._exceedsMaximumHeight
-    );
-  }
-
   /**
    * Returns the label to display in the generated answer show more|show less button.
    * @returns {string}

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

@@ -1,10 +1,5 @@
 @import '../quanticGeneratedAnswer.css';
 
-.generated-answer__header-actions {
-  align-items: center;
-  flex-wrap: wrap-reverse;
-}
-
 .generated-answer__answer {
   overflow: hidden;
   position: relative;
@@ -60,14 +55,6 @@
   visibility: hidden;
 }
 
-.generated-answer__disclaimer {
-  min-height: var(--lwc-lineHeightButton,1.875rem);
-}
-
-.flex-one {
-  flex: 1;
-}
-
 @keyframes cursor-blink {
   100% {
     visibility: hidden;

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

@@ -1,49 +1,34 @@
 <template>
   <template lwc:if={shouldDisplayGeneratedAnswer}>
-    <div data-testid="generated-answer__card" class="slds-box">
-      <div class="generated-answer__card-header slds-grid">
-        <span
-          data-testid="generated-answer__badge"
-          class="generated-answer__badge slds-var-p-around_x-small slds-text-title_bold"
-          >{labels.generatedAnswerForYou}</span
-        >
-        <div class="generated-answer__header-actions slds-grid">
-          <template lwc:if={shouldDisplayActions}>
-            <div
-              data-testid="generated-answer__actions"
-              class="slds-grid flex-one slds-grid_align-end"
-            >
-              <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="xx-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}
-                class="slds-var-m-horizontal_xx-small"
-              ></c-quantic-generated-answer-copy-to-clipboard>
-            </div>
-          </template>
-          <template lwc:if={withToggle}>
-            <div class="slds-grid flex-one slds-grid_align-end">
-              <c-quantic-generated-answer-toggle
-                is-generated-answer-visible={isVisible}
-              ></c-quantic-generated-answer-toggle>
-            </div>
-          </template>
+    <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>
-      </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="generated-answer__content slds-var-m-top_medium">
+        <section
+          data-testid="generated-answer__body"
+          class="generated-answer__content slds-p-top_medium slds-p-horizontal_large"
+        >
           <div
             data-testid="generated-answer__answer"
             class={generatedAnswerClass}
@@ -56,63 +41,100 @@
             >
             </c-quantic-generated-answer-content>
           </div>
-          <div class={generatedAnswerFooterCssClass}>
-            <div class={generatedAnswerFooterRowClass}>
-              <template lwc:if={shouldDisplayCitations}>
-                <div class="slds-var-m-top_small">
-                  <c-quantic-source-citations
-                    engine-id={engineId}
-                    data-testid="generated-answer__citations"
-                    citations={citations}
-                    citation-hover-handler={handleCitationHover}
-                    disable-citation-anchoring={disableCitationAnchoring}
-                  ></c-quantic-source-citations>
-                </div>
-              </template>
-            </div>
-            <div class={generatedAnswerFooterRowClass}>
-              <template lwc:if={shouldShowCollapseGeneratingMessage}>
+          <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={handleCitationHover}
+                  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__collapse-generating-message"
-                  class="generated-answer__collapse-generating-message"
+                  data-testid="generated-answer__actions"
+                  class="slds-grid slds-grid_vertical-align-center"
                 >
-                  {labels.generatingAnswer}...
+                  <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>
-              </template>
-              <template lwc:if={shouldShowToggleCollapseAnswer}>
-                <lightning-button
-                  data-testid="generated-answer__answer-toggle"
-                  icon-name={toggleCollapseAnswerIcon}
-                  variant="base"
-                  label={toggleCollapseAnswerLabel}
-                  title={toggleCollapseAnswerLabel}
-                  onclick={handleToggleCollapseAnswer}
-                  icon-position="right"
-                  class="generated-answer__answer-toggle slds-shrink-none slds-var-m-right_large"
-                ></lightning-button>
-              </template>
-              <template lwc:if={shouldShowDisclaimer}>
-                <div
-                  class="generated-answer__disclaimer slds-grid_vertical-align-center slds-col slds-text-color_weak slds-text-body_small"
-                  data-testid="generated-answer__disclaimer"
-                >
-                  <slot name="disclaimer"> {labels.rgaDisclaimer} </slot>
+              </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"
+                    >
+                      {labels.generatingAnswer}...
+                    </div>
+                  </template>
+                  <template lwc:else>
+                    <lightning-button
+                      data-testid="generated-answer__answer-toggle"
+                      icon-name={toggleCollapseAnswerIcon}
+                      variant="base"
+                      label={toggleCollapseAnswerLabel}
+                      title={toggleCollapseAnswerLabel}
+                      onclick={handleToggleCollapseAnswer}
+                      icon-position="right"
+                      class="generated-answer__answer-toggle slds-shrink-none slds-var-m-right_large"
+                    ></lightning-button>
+                  </template>
                 </div>
-              </template>
-            </div>
+              </div>
+            </template>
           </div>
-        </div>
+        </section>
+        <template lwc:if={shouldShowDisclaimer}>
+          <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-p-horizontal_large slds-p-bottom_medium"
+          >
+            <div data-testid="generated-answer__disclaimer">
+              <slot name="disclaimer"> {labels.rgaDisclaimer} </slot>
+            </div>
+          </footer>
+        </template>
       </template>
     </div>
   </template>
   <template lwc:if={cannotAnswer}>
     <template lwc:if={isManualAnswerGeneration}>
       <div data-testid="generated-answer__no-answer-card" class="slds-box">
-        <div class="generated-answer__card-header slds-grid">
-          <span
-            class="generated-answer__badge slds-var-p-around_x-small slds-text-title_bold"
-            >{labels.generatedAnswerForYou}</span
-          >
+        <div class="generated-answer__card-header slds-grid slds-grid_vertical-align-center slds-border_bottom slds-p-around_x-small">
+          <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 class="slds-text-title_bold">{labels.generatedAnswerForYou}</span>
+          </div>
         </div>
         <div
           data-testid="generated-answer__no-answer-message"
@@ -127,11 +149,16 @@
     <template lwc:else>
       <template lwc:if={hasCustomNoAnswerMessage}>
         <div data-testid="generated-answer__no-answer-card" class="slds-box">
-          <div class="generated-answer__card-header slds-grid">
-            <span
-              class="generated-answer__badge slds-var-p-around_x-small slds-text-title_bold"
-              >{labels.generatedAnswerForYou}</span
-            >
+          <div class="generated-answer__card-header slds-grid slds-grid_vertical-align-center slds-border_bottom slds-p-around_x-small">
+            <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 class="slds-text-title_bold">{labels.generatedAnswerForYou}</span>
+            </div>
           </div>
           <div class="generated-answer__content slds-var-m-top_medium">
             <div class={generatedAnswerClass}>

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

@@ -2,25 +2,34 @@
   <template lwc:if={shouldDisplayGeneratedAnswer}>
     <div
       data-testid="generated-answer__card"
-      class="slds-box"
+      class="slds-box slds-p-around_none"
     >
       <div
-        class="slds-var-m-bottom_medium slds-grid generated-answer__card-header"
+        class="generated-answer__card-header slds-grid slds-grid_vertical-align-center slds-border_bottom slds-p-vertical_small slds-p-horizontal_large"
       >
-        <span
-          class="generated-answer__badge slds-var-p-around_x-small slds-text-title_bold"
-          >{labels.generatedAnswerForYou}</span
-        >
+        <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 class="slds-text-title_bold slds-p-vertical_x-small"
+            >{labels.generatedAnswerForYou}</span
+          >
+        </div>
       </div>
-      <div>{labels.couldNotGenerateAnAnswer}</div>
-      <div class="slds-var-m-top_small">
-        <lightning-button
-          data-testid="generated-answer__retry-button"
-          variant="brand-outline"
-          label={labels.tryAgain}
-          title={labels.tryAgain}
-          onclick={handleRetry}
-        ></lightning-button>
+      <div class="slds-p-vertical_medium slds-p-horizontal_large">
+        <div>{labels.couldNotGenerateAnAnswer}</div>
+        <div class="slds-var-m-top_medium">
+          <lightning-button
+            data-testid="generated-answer__retry-button"
+            variant="brand-outline"
+            label={labels.tryAgain}
+            title={labels.tryAgain}
+            onclick={handleRetry}
+          ></lightning-button>
+        </div>
       </div>
     </div>
   </template>

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

@@ -0,0 +1,125 @@
+/* eslint-disable jest/no-focused-tests */
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticGeneratedAnswerCopyToClipboard from '../quanticGeneratedAnswerCopyToClipboard';
+import {copyToClipboard} from 'c/quanticUtils';
+
+const defaultCopyLabel = 'Copy';
+const defaultCopiedLabel = 'Copied';
+const defaultSize = 'xx-small';
+
+jest.mock(
+  '@salesforce/label/c.quantic_Copy',
+  () => ({default: defaultCopyLabel}),
+  {
+    virtual: true,
+  }
+);
+
+jest.mock(
+  '@salesforce/label/c.quantic_Copied',
+  () => ({default: defaultCopiedLabel}),
+  {
+    virtual: true,
+  }
+);
+
+jest.mock('c/quanticUtils', () => ({
+  copyToClipboard: jest.fn(() => Promise.resolve()),
+}));
+
+const selectors = {
+  copyButton: 'c-quantic-stateful-button',
+};
+
+const defaultOptions = {
+  answer: 'Example generated answer',
+  size: defaultSize,
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement(
+    'c-quantic-generated-answer-copy-to-clipboard',
+    {
+      is: QuanticGeneratedAnswerCopyToClipboard,
+    }
+  );
+
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+
+  document.body.appendChild(element);
+  return element;
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  // eslint-disable-next-line @lwc/lwc/no-async-operation
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe('c-quantic-generated-answer-copy-to-clipboard', () => {
+  function cleanup() {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+    jest.clearAllMocks();
+  }
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the copy button with default size', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+
+    const copyButton = element.shadowRoot.querySelector(selectors.copyButton);
+
+    expect(copyButton).not.toBeNull();
+    expect(copyButton.iconName).toBe('utility:copy');
+    expect(copyButton.iconSize).toBe(defaultSize);
+    expect(copyButton.tooltip).toBe(defaultCopyLabel);
+    expect(copyButton.selected).toBe(false);
+    expect(copyButton.withoutBorders).toBe(true);
+  });
+
+  it('should apply a custom valid size', async () => {
+    const customSize = 'large';
+    const element = createTestComponent({...defaultOptions, size: customSize});
+    await flushPromises();
+
+    const copyButton = element.shadowRoot.querySelector(selectors.copyButton);
+
+    expect(copyButton).not.toBeNull();
+    expect(copyButton.iconSize).toBe(customSize);
+  });
+
+  it('should ignore an invalid size and keep the default value', async () => {
+    const element = createTestComponent({
+      ...defaultOptions,
+      size: 'oliphant',
+    });
+    await flushPromises();
+
+    const copyButton = element.shadowRoot.querySelector(selectors.copyButton);
+
+    expect(copyButton).not.toBeNull();
+    expect(copyButton.iconSize).toBe(defaultSize);
+  });
+
+  it('should copy the answer and dispatch the #quantic__generatedanswercopy event', async () => {
+    const element = createTestComponent();
+    const handler = jest.fn();
+    element.addEventListener('quantic__generatedanswercopy', handler);
+    await flushPromises();
+
+    const copyButton = element.shadowRoot.querySelector(selectors.copyButton);
+    copyButton.dispatchEvent(new CustomEvent('quantic__select'));
+    await flushPromises();
+
+    expect(copyToClipboard).toHaveBeenCalledWith(defaultOptions.answer);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});

package/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.html

@@ -6,6 +6,6 @@
     onquantic__select={handleCopyToClipboard}
     without-borders
     selected-state-color="#2e844a"
-    icon-size="xx-small"
+    icon-size={size}
   ></c-quantic-stateful-button>
 </template>