@coveo/quantic 3.41.0 → 3.42.0

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>

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

@@ -67,6 +67,7 @@ const selectors = {
   error: '[data-testid="generated-answer-body__error"]',
   noAnswer: '[data-testid="generated-answer-body__no-answer-message"]',
   content: 'c-quantic-generated-answer-content',
+  streamOfThought: 'c-quantic-generated-answer-stream-of-thought',
 };
 
 const createTestComponent = buildCreateTestComponent(
@@ -80,7 +81,7 @@ describe('c-quantic-generated-answer-body', () => {
     cleanup();
   });
 
-  it('should pass answer and answerContentFormat to the QuanticGeneratedAnswerContent component', async () => {
+  it('should pass the answer, answerContentFormat, engineId, and answerId properties to the QuanticGeneratedAnswerContent component', async () => {
     const element = createTestComponent();
     await flushPromises();
 
@@ -90,6 +91,42 @@ describe('c-quantic-generated-answer-body', () => {
     expect(content.answerContentFormat).toBe(
       defaultOptions.generatedAnswer.answerContentFormat
     );
+    expect(content.engineId).toBe(defaultOptions.engineId);
+    expect(content.answerId).toBe(defaultOptions.generatedAnswer.answerId);
+  });
+
+  it('should pass agentSteps and isStreaming to the QuanticGeneratedAnswerStreamOfThought component', async () => {
+    const generationSteps = [{id: 'step-1'}, {id: 'step-2'}];
+    const element = createTestComponent({
+      ...defaultOptions,
+      generatedAnswer: {
+        ...defaultOptions.generatedAnswer,
+        // @ts-ignore
+        generationSteps,
+        isStreaming: true,
+      },
+    });
+    await flushPromises();
+
+    const streamOfThought = element.shadowRoot.querySelector(
+      selectors.streamOfThought
+    );
+
+    expect(streamOfThought).not.toBeNull();
+    expect(streamOfThought.agentSteps).toEqual(generationSteps);
+    expect(streamOfThought.isStreaming).toBe(true);
+  });
+
+  it('should pass an empty agentSteps array to QuanticGeneratedAnswerStreamOfThought when generationSteps is undefined', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+
+    const streamOfThought = element.shadowRoot.querySelector(
+      selectors.streamOfThought
+    );
+
+    expect(streamOfThought).not.toBeNull();
+    expect(streamOfThought.agentSteps).toEqual([]);
   });
 
   it('should send the answerId within event details when dispatching the #quantic__generatedanswerlike event', async () => {
@@ -290,6 +327,7 @@ describe('c-quantic-generated-answer-body', () => {
       const citations = element.shadowRoot.querySelector(selectors.citations);
 
       expect(citations).not.toBeNull();
+      expect(citations.answerId).toBe(defaultOptions.generatedAnswer.answerId);
     });
 
     it('should not display citations when citations are empty', async () => {

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

@@ -1,8 +1,8 @@
 import couldNotGenerateAnAnswer from '@salesforce/label/c.quantic_CouldNotGenerateAnAnswer';
 import generatedAnswerErrorTurnLimitReached from '@salesforce/label/c.quantic_GeneratedAnswerErrorTurnLimitReached';
 import genericErrorTitle from '@salesforce/label/c.quantic_GenericErrorTitle';
-import thisAnswerWasHelpful from '@salesforce/label/c.quantic_ThisAnswerWasHelpful';
-import thisAnswerWasNotHelpful from '@salesforce/label/c.quantic_ThisAnswerWasNotHelpful';
+import like from '@salesforce/label/c.quantic_Like';
+import dislike from '@salesforce/label/c.quantic_Dislike';
 import {LightningElement, api} from 'lwc';
 // @ts-ignore
 import answerTemplate from './templates/answer.html';
@@ -49,8 +49,8 @@ export default class QuanticGeneratedAnswerBody extends LightningElement {
     couldNotGenerateAnAnswer,
     generatedAnswerErrorTurnLimitReached,
     genericErrorTitle,
-    thisAnswerWasHelpful,
-    thisAnswerWasNotHelpful,
+    like,
+    dislike,
   };
 
   get answer() {
@@ -73,6 +73,10 @@ export default class QuanticGeneratedAnswerBody extends LightningElement {
     return !!this.generatedAnswer?.isStreaming;
   }
 
+  get agentSteps() {
+    return this.generatedAnswer?.generationSteps || [];
+  }
+
   get hasError() {
     return !!this.generatedAnswer?.error?.code;
   }

package/force-app/main/default/lwc/quanticGeneratedAnswerBody/templates/answer.html

@@ -1,9 +1,14 @@
 <template>
-  <section
-    data-testid="generated-answer-body"
-    class="generated-answer__body"
-  >
+  <section data-testid="generated-answer-body" class="generated-answer__body">
+    <div class="slds-var-m-bottom_small">
+      <c-quantic-generated-answer-stream-of-thought
+        agent-steps={agentSteps}
+        is-streaming={isStreaming}
+      ></c-quantic-generated-answer-stream-of-thought>
+    </div>
     <c-quantic-generated-answer-content
+      engine-id={engineId}
+      answer-id={answerId}
       answer-content-format={answerContentFormat}
       answer={answer}
       is-streaming={isStreaming}
@@ -18,6 +23,7 @@
             citations={citations}
             citation-hover-handler={handleCitationHover}
             disable-citation-anchoring={disableCitationAnchoring}
+            answer-id={answerId}
           ></c-quantic-source-citations>
         </div>
       </template>
@@ -26,26 +32,26 @@
           data-testid="generated-answer-body__actions"
           class="slds-size_1-of-1 slds-grid slds-grid_vertical-align-center slds-var-m-top_x-small slds-grid_align-start"
         >
-            <c-quantic-feedback
-              state={computedFeedbackState}
-              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-body__copy-to-clipboard"
-              answer={answer}
-              answer-id={answerId}
-              size="x-small"
-              class="slds-var-m-horizontal_xx-small"
-            ></c-quantic-generated-answer-copy-to-clipboard>
+          <c-quantic-feedback
+            state={computedFeedbackState}
+            onquantic__like={handleLike}
+            onquantic__dislike={handleDislike}
+            like-icon-name="utility:like"
+            like-label={labels.like}
+            dislike-icon-name="utility:dislike"
+            dislike-label={labels.dislike}
+            size="x-small"
+            question=""
+            hide-explain-why-button
+            hide-labels
+          ></c-quantic-feedback>
+          <c-quantic-generated-answer-copy-to-clipboard
+            data-testid="generated-answer-body__copy-to-clipboard"
+            answer={answer}
+            answer-id={answerId}
+            size="x-small"
+            class="slds-var-m-horizontal_xx-small"
+          ></c-quantic-generated-answer-copy-to-clipboard>
         </div>
       </template>
     </div>

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

@@ -34,6 +34,7 @@ const selectors = {
 
 const defaultOptions = {
   answer: 'Example generated answer',
+  answerId: 'example-answer-id',
   size: defaultSize,
 };
 
@@ -109,7 +110,7 @@ describe('c-quantic-generated-answer-copy-to-clipboard', () => {
     expect(copyButton.iconSize).toBe(defaultSize);
   });
 
-  it('should copy the answer and dispatch the #quantic__generatedanswercopy event', async () => {
+  it('should copy the answer and dispatch the #quantic__generatedanswercopy event with the answerId', async () => {
     const element = createTestComponent();
     const handler = jest.fn();
     element.addEventListener('quantic__generatedanswercopy', handler);
@@ -121,5 +122,8 @@ describe('c-quantic-generated-answer-copy-to-clipboard', () => {
 
     expect(copyToClipboard).toHaveBeenCalledWith(defaultOptions.answer);
     expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler.mock.calls[0][0].detail).toEqual({
+      answerId: defaultOptions.answerId,
+    });
   });
 });

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

@@ -15,6 +15,12 @@ export default class QuanticGeneratedAnswerCopyToClipboard extends LightningElem
    * @type {string}
    */
   @api answer = '';
+  /**
+   * The unique identifier of the generated answer.
+   * @api
+   * @type {string}
+   */
+  @api answerId;
 
   /**
    * The size of the copy icon.
@@ -41,11 +47,12 @@ export default class QuanticGeneratedAnswerCopyToClipboard extends LightningElem
   isSelected = false;
   tooltip = this.labels.copy;
 
-  dispatchCopyToClipboardEvent(option) {
+  dispatchCopyToClipboardEvent() {
     this.dispatchEvent(
       new CustomEvent('quantic__generatedanswercopy', {
-        detail: option,
+        detail: {answerId: this.answerId},
         bubbles: true,
+        composed: true,
       })
     );
   }

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

@@ -12,15 +12,18 @@ jest.mock(
   {virtual: true}
 );
 jest.mock('c/quanticUtils', () => ({
-  keys: {ENTER: 'Enter'},
+  keys: {ENTER: 'Enter', ESC: 'Escape'},
 }));
 
 const selectors = {
-  input: 'lightning-input',
+  textarea: 'textarea',
   submitButton: 'lightning-button-icon',
-  inputContainer: '.follow-up-input__input-container',
+  container: '.follow-up-input__container',
+  expander: '.follow-up-input__expander',
 };
 
+const expandedClass = 'follow-up-input__expander--expanded';
+
 const createTestComponent = buildCreateTestComponent(
   QuanticGeneratedAnswerFollowUpInput,
   'c-quantic-generated-answer-follow-up-input'
@@ -31,17 +34,14 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
     cleanup();
   });
 
-  it('should render the input and submit button', async () => {
+  it('should render the textarea and submit button', async () => {
     const element = createTestComponent();
     await flushPromises();
 
-    const input = element.shadowRoot.querySelector(selectors.input);
-    const submitButton = element.shadowRoot.querySelector(
-      selectors.submitButton
-    );
-
-    expect(input).not.toBeNull();
-    expect(submitButton).not.toBeNull();
+    expect(element.shadowRoot.querySelector(selectors.textarea)).not.toBeNull();
+    expect(
+      element.shadowRoot.querySelector(selectors.submitButton)
+    ).not.toBeNull();
   });
 
   describe('submitting a follow up', () => {
@@ -52,9 +52,9 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       const handler = jest.fn();
       element.addEventListener('quantic__submitfollowup', handler);
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.value = 'follow up question';
-      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'follow up question';
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
 
       expect(handler).toHaveBeenCalledTimes(1);
       expect(handler.mock.calls[0][0].detail.value).toBe('follow up question');
@@ -67,29 +67,40 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       const handler = jest.fn();
       element.addEventListener('quantic__submitfollowup', handler);
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.value = 'another question';
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'another question';
 
-      const submitButton = element.shadowRoot.querySelector(
-        selectors.submitButton
-      );
-      submitButton.click();
+      element.shadowRoot.querySelector(selectors.submitButton).click();
 
       expect(handler).toHaveBeenCalledTimes(1);
       expect(handler.mock.calls[0][0].detail.value).toBe('another question');
     });
 
-    it('should clear the input and blur it after a successful submit', async () => {
+    it('should clear the textarea after a successful submit', async () => {
       const element = createTestComponent();
       await flushPromises();
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.value = 'a question';
-      input.blur = jest.fn();
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a question';
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
 
-      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      expect(textarea.value).toBe('');
+    });
+
+    it('should collapse after a successful submit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.dispatchEvent(new CustomEvent('focus'));
+      await flushPromises();
+
+      textarea.value = 'a question';
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      await flushPromises();
 
-      expect(input.value).toBe('');
+      const expander = element.shadowRoot.querySelector(selectors.expander);
+      expect(expander.classList).not.toContain(expandedClass);
     });
   });
 
@@ -101,9 +112,9 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       const handler = jest.fn();
       element.addEventListener('quantic__submitfollowup', handler);
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.value = 'a question';
-      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a question';
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
 
       expect(handler).not.toHaveBeenCalled();
     });
@@ -115,9 +126,9 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       const handler = jest.fn();
       element.addEventListener('quantic__submitfollowup', handler);
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.value = '   ';
-      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = '   ';
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
 
       expect(handler).not.toHaveBeenCalled();
     });
@@ -129,52 +140,95 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       const handler = jest.fn();
       element.addEventListener('quantic__submitfollowup', handler);
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.value = '';
-
-      const submitButton = element.shadowRoot.querySelector(
-        selectors.submitButton
-      );
-      submitButton.click();
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = '';
+      element.shadowRoot.querySelector(selectors.submitButton).click();
 
       expect(handler).not.toHaveBeenCalled();
     });
   });
 
-  describe('focus and blur CSS class toggling', () => {
-    it('should add the focused class when the input is focused', async () => {
+  describe('expandable input behaviour', () => {
+    it('should expand and add focused class on focus', async () => {
       const element = createTestComponent();
       await flushPromises();
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.dispatchEvent(new CustomEvent('focus'));
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.dispatchEvent(new CustomEvent('focus'));
       await flushPromises();
 
-      const container = element.shadowRoot.querySelector(
-        selectors.inputContainer
-      );
+      const expander = element.shadowRoot.querySelector(selectors.expander);
+      const container = element.shadowRoot.querySelector(selectors.container);
+      expect(expander.classList).toContain(expandedClass);
       expect(container.classList).toContain(
-        'follow-up-input__input-container--focused'
+        'follow-up-input__container--focused'
       );
     });
 
-    it('should remove the focused class when the input is blurred', async () => {
+    it('should collapse and remove focused class on blur', async () => {
       const element = createTestComponent();
       await flushPromises();
 
-      const input = element.shadowRoot.querySelector(selectors.input);
-      input.dispatchEvent(new CustomEvent('focus'));
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.dispatchEvent(new CustomEvent('focus'));
       await flushPromises();
 
-      input.dispatchEvent(new CustomEvent('blur'));
+      textarea.dispatchEvent(new CustomEvent('blur'));
       await flushPromises();
 
-      const container = element.shadowRoot.querySelector(
-        selectors.inputContainer
-      );
+      const expander = element.shadowRoot.querySelector(selectors.expander);
+      const container = element.shadowRoot.querySelector(selectors.container);
+      expect(expander.classList).not.toContain(expandedClass);
       expect(container.classList).not.toContain(
-        'follow-up-input__input-container--focused'
+        'follow-up-input__container--focused'
       );
     });
+
+    it('should sync replica text on input', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      const expander = element.shadowRoot.querySelector(selectors.expander);
+
+      textarea.value = 'multi\nline\ntext';
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      expect(expander.dataset.replicatedValue).toBe('multi\nline\ntext');
+    });
+
+    it('should clear replica text after submit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      const expander = element.shadowRoot.querySelector(selectors.expander);
+
+      textarea.value = 'some text';
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+      expect(expander.dataset.replicatedValue).toBe('some text');
+
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      await flushPromises();
+
+      expect(expander.dataset.replicatedValue).toBeUndefined();
+    });
+
+    it('should collapse the textarea when the Escape key is pressed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.blur = jest.fn();
+      textarea.dispatchEvent(new CustomEvent('focus'));
+      await flushPromises();
+
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+      await flushPromises();
+
+      expect(textarea.blur).toHaveBeenCalled();
+    });
   });
 });

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

@@ -1,17 +1,65 @@
-:host {
-  --slds-c-input-shadow: none;
+.follow-up-input__container {
+  min-height: calc(2.5rem + 2px);
 }
 
-.follow-up-input__input {
+.follow-up-input__container--focused {
+  border-color: var(--lwc-brandAccessible, #0176d3);
+}
+
+.follow-up-input__expander {
+  display: grid;
+  overflow: hidden;
+  margin-right: 2.5rem;
+}
+
+.follow-up-input__expander::after {
+  content: attr(data-replicated-value) ' ';
+  visibility: hidden;
+}
+
+.follow-up-input__expander::after,
+.follow-up-input__textarea {
+  grid-area: 1 / 1 / 2 / 2;
+  resize: none;
+  overflow: hidden;
+  white-space: nowrap;
   border: none;
-  box-shadow: none;
   outline: none;
-  width: 100%;
-  --slds-c-input-color-border: transparent;
-  --slds-c-input-shadow-focus: transparent;
-  --slds-c-input-spacing-border: 0px;
+  background: transparent;
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  min-height: 2.5rem;
 }
 
-.follow-up-input__input-container.follow-up-input__input-container--focused {
-  border-color: var(--lwc-brandAccessible, #0176d3);
-}
+.follow-up-input__expander--expanded {
+  position: absolute;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+  z-index: 10;
+  overflow: visible;
+  margin-right: 0;
+  background-color: var(--lwc-colorBackground, #fff);
+  border: 1px solid var(--lwc-brandAccessible, #0176d3);
+  border-radius: 0.25rem;
+}
+
+.follow-up-input__expander--expanded::after,
+.follow-up-input__expander--expanded .follow-up-input__textarea {
+  white-space: pre-wrap;
+  overflow-y: auto;
+  max-height: 8rem;
+  padding-right: 2.5rem;
+  scrollbar-width: none;
+}
+
+.follow-up-input__expander--expanded .follow-up-input__textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.follow-up-input__submit-button {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  z-index: 15;
+}