@coveo/quantic 3.38.2 → 3.39.0

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

@@ -1624,4 +1624,18 @@
     <protected>false</protected>
     <shortDescription>No generated answer available.</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_AskFollowUp</fullName>
+    <value>Ask follow-up</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Ask follow-up</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_SubmitFollowUp</fullName>
+    <value>Submit follow-up</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Submit follow-up</shortDescription>
+  </labels>
 </CustomLabels>

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

@@ -0,0 +1,180 @@
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+import QuanticGeneratedAnswerFollowUpInput from '../quanticGeneratedAnswerFollowUpInput';
+
+jest.mock(
+  '@salesforce/label/c.quantic_SubmitFollowUp',
+  () => ({default: 'Submit follow-up'}),
+  {virtual: true}
+);
+jest.mock(
+  '@salesforce/label/c.quantic_AskFollowUp',
+  () => ({default: 'Ask follow-up'}),
+  {virtual: true}
+);
+jest.mock('c/quanticUtils', () => ({
+  keys: {ENTER: 'Enter'},
+}));
+
+const selectors = {
+  input: 'lightning-input',
+  submitButton: 'lightning-button-icon',
+  inputContainer: '.follow-up-input__input-container',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticGeneratedAnswerFollowUpInput,
+  'c-quantic-generated-answer-follow-up-input'
+);
+
+describe('c-quantic-generated-answer-follow-up-input', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the input 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();
+  });
+
+  describe('submitting a follow up', () => {
+    it('should dispatch #quantic__submitfollowup when pressing Enter', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      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'}));
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler.mock.calls[0][0].detail.value).toBe('follow up question');
+    });
+
+    it('should dispatch #quantic__submitfollowup when clicking the submit button', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = 'another question';
+
+      const submitButton = element.shadowRoot.querySelector(
+        selectors.submitButton
+      );
+      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 () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = 'a question';
+      input.blur = jest.fn();
+
+      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+
+      expect(input.value).toBe('');
+    });
+  });
+
+  describe('when submission should be blocked', () => {
+    it('should not dispatch the event when submitButtonDisabled is true', async () => {
+      const element = createTestComponent({submitButtonDisabled: true});
+      await flushPromises();
+
+      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'}));
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should not dispatch the event when input is whitespace only', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      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'}));
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should not dispatch the event when input is empty', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      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();
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('focus and blur CSS class toggling', () => {
+    it('should add the focused class when the input is focused', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.dispatchEvent(new CustomEvent('focus'));
+      await flushPromises();
+
+      const container = element.shadowRoot.querySelector(
+        selectors.inputContainer
+      );
+      expect(container.classList).toContain(
+        'follow-up-input__input-container--focused'
+      );
+    });
+
+    it('should remove the focused class when the input is blurred', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.dispatchEvent(new CustomEvent('focus'));
+      await flushPromises();
+
+      input.dispatchEvent(new CustomEvent('blur'));
+      await flushPromises();
+
+      const container = element.shadowRoot.querySelector(
+        selectors.inputContainer
+      );
+      expect(container.classList).not.toContain(
+        'follow-up-input__input-container--focused'
+      );
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+:host {
+  --slds-c-input-shadow: none;
+}
+
+.follow-up-input__input {
+  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;
+}
+
+.follow-up-input__input-container.follow-up-input__input-container--focused {
+  border-color: var(--lwc-brandAccessible, #0176d3);
+}

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

@@ -0,0 +1,29 @@
+<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>
+    <lightning-button-icon
+      disabled={submitButtonDisabled}
+      onclick={handleSubmitFollowUp}
+      icon-name="utility:arrowup"
+      variant="brand"
+      class="slds-col slds-grow-none slds-align_absolute-center"
+      name="submit-follow-up"
+      title={labels.submitFollowUp}
+      aria-label={labels.submitFollowUp}
+      alternative-text={labels.submitFollowUp}
+    >
+      <label>{labels.submitFollowUp}</label>
+    </lightning-button-icon>
+  </div>
+</template>

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

@@ -0,0 +1,79 @@
+import submitFollowUp from '@salesforce/label/c.quantic_SubmitFollowUp';
+import askFollowUp from '@salesforce/label/c.quantic_AskFollowUp';
+import {keys} from 'c/quanticUtils';
+import {api, LightningElement} from 'lwc';
+
+/**
+ * The `QuanticGeneratedAnswerFollowUpInput` component allows users to submit follow-up questions related to a generated answer.
+ * @fires CustomEvent#quantic__submitfollowup
+ * @category Internal
+ * @example
+ * <c-quantic-generated-answer-follow-up-input></c-quantic-generated-answer-follow-up-input>
+ */
+export default class QuanticGeneratedAnswerFollowUpInput extends LightningElement {
+  labels = {
+    submitFollowUp,
+    askFollowUp,
+  };
+
+  /**
+   * Whether the submit button is disabled.
+   * @type {boolean}
+   * @defaultValue false
+   */
+  @api
+  submitButtonDisabled = false;
+
+  /** @type {boolean} */
+  _focused = false;
+
+  handleKeyDown(event) {
+    // Let the browser commit IME text before handling shortcuts like Enter during composition.
+    if (event.isComposing || event.keyCode === 229) {
+      return;
+    }
+
+    if (event.key === keys.ENTER) {
+      event.preventDefault();
+      this.handleSubmitFollowUp();
+    }
+  }
+
+  handleSubmitFollowUp() {
+    if (
+      this.submitButtonDisabled ||
+      this.refs.askFollowUpInput.value.trim() === ''
+    ) {
+      return;
+    }
+    this.sendSubmitFollowUpEvent();
+    this.refs.askFollowUpInput.value = '';
+  }
+
+  handleFocus() {
+    this._focused = true;
+  }
+
+  handleBlur() {
+    this._focused = false;
+  }
+
+  /**
+   * Sends the "quantic__submitfollowup" event.
+   */
+  sendSubmitFollowUpEvent() {
+    this.dispatchEvent(
+      new CustomEvent('quantic__submitfollowup', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: this.refs.askFollowUpInput.value,
+        },
+      })
+    );
+  }
+
+  get inputContainerClasses() {
+    return `follow-up-input__input-container slds-box slds-grid slds-box_xx-small ${this._focused ? 'follow-up-input__input-container--focused' : ''}`;
+  }
+}

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>65.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>