@coveo/quantic 3.40.0 → 3.42.0

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;
+}

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

@@ -1,23 +1,24 @@
 <template>
   <div class={inputContainerClasses}>
-    <lightning-input
-      class="slds-col slds-grow follow-up-input__input"
-      type="text" 
-      variant="label-hidden" 
-      label={labels.askFollowUp}
-      placeholder={labels.askFollowUp}
-      name="ask-followup"
-      lwc:ref="askFollowUpInput"
-      onfocus={handleFocus}
-      onblur={handleBlur}
-      onkeydown={handleKeyDown}
-    ></lightning-input>
+    <div class="follow-up-input__expander slds-grow" lwc:ref="expander">
+      <textarea
+        class="follow-up-input__textarea"
+        lwc:ref="askFollowUpInput"
+        rows="1"
+        placeholder={labels.askFollowUp}
+        aria-label={labels.askFollowUp}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+        oninput={handleInput}
+        onkeydown={handleKeyDown}
+      ></textarea>
+    </div>
     <lightning-button-icon
       disabled={submitButtonDisabled}
       onclick={handleSubmitFollowUp}
       icon-name="utility:arrowup"
       variant="brand"
-      class="slds-col slds-grow-none slds-align_absolute-center"
+      class="follow-up-input__submit-button"
       name="submit-follow-up"
       title={labels.submitFollowUp}
       aria-label={labels.submitFollowUp}

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

@@ -33,10 +33,16 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
       return;
     }
 
-    if (event.key === keys.ENTER) {
+    if (event.key === keys.ENTER && !event.shiftKey) {
       event.preventDefault();
       this.handleSubmitFollowUp();
     }
+
+    if (event.key === keys.ESC) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.refs.askFollowUpInput.blur();
+    }
   }
 
   handleSubmitFollowUp() {
@@ -48,14 +54,46 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
     }
     this.sendSubmitFollowUpEvent();
     this.refs.askFollowUpInput.value = '';
+    this.syncTextWithReplica();
+    this.collapse();
   }
 
   handleFocus() {
     this._focused = true;
+    this.syncTextWithReplica();
+    this.expand();
   }
 
   handleBlur() {
     this._focused = false;
+    this.collapse();
+  }
+
+  handleInput() {
+    this.expand();
+    this.syncTextWithReplica();
+  }
+
+  /**
+   * Syncs the textarea value with the expander's replicated value for seamless CSS transitions.
+   */
+  syncTextWithReplica() {
+    const expander = this.refs.expander;
+    if (expander) {
+      expander.dataset.replicatedValue = this.refs.askFollowUpInput.value;
+    }
+  }
+
+  expand() {
+    this.refs.expander?.classList.add('follow-up-input__expander--expanded');
+  }
+
+  collapse() {
+    const expander = this.refs.expander;
+    if (expander) {
+      expander.classList.remove('follow-up-input__expander--expanded');
+      delete expander.dataset.replicatedValue;
+    }
   }
 
   /**
@@ -74,6 +112,6 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
   }
 
   get inputContainerClasses() {
-    return `follow-up-input__input-container slds-box slds-grid slds-box_xx-small ${this._focused ? 'follow-up-input__input-container--focused' : ''}`;
+    return `follow-up-input__container slds-is-relative slds-grid slds-box slds-p-around_none ${this._focused ? 'follow-up-input__container--focused' : ''}`;
   }
 }