@coveo/quantic 3.42.0 → 3.43.0

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

@@ -11,8 +11,19 @@ jest.mock(
   () => ({default: 'Ask follow-up'}),
   {virtual: true}
 );
+jest.mock(
+  '@salesforce/label/c.quantic_FollowUpInputTooLong',
+  () => ({
+    default: 'Your question is too long. Please use {{0}} characters or fewer.',
+  }),
+  {virtual: true}
+);
 jest.mock('c/quanticUtils', () => ({
   keys: {ENTER: 'Enter', ESC: 'Escape'},
+  I18nUtils: {
+    format: (label, ...args) =>
+      label.replace(/{{(\d+)}}/g, (_match, index) => args[index]),
+  },
 }));
 
 const selectors = {
@@ -20,9 +31,13 @@ const selectors = {
   submitButton: 'lightning-button-icon',
   container: '.follow-up-input__container',
   expander: '.follow-up-input__expander',
+  counter: '.follow-up-input__counter',
+  validationMessage: '[role="alert"]',
 };
 
 const expandedClass = 'follow-up-input__expander--expanded';
+const errorClass = 'follow-up-input__container--error';
+const MAX_LENGTH = 300;
 
 const createTestComponent = buildCreateTestComponent(
   QuanticGeneratedAnswerFollowUpInput,
@@ -76,6 +91,21 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       expect(handler.mock.calls[0][0].detail.value).toBe('another question');
     });
 
+    it('should dispatch the trimmed value when the input has leading and trailing spaces', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = '  another question  ';
+      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 textarea after a successful submit', async () => {
       const element = createTestComponent();
       await flushPromises();
@@ -149,7 +179,7 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
   });
 
   describe('expandable input behaviour', () => {
-    it('should expand and add focused class on focus', async () => {
+    it('should expand on focus', async () => {
       const element = createTestComponent();
       await flushPromises();
 
@@ -158,14 +188,10 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       await flushPromises();
 
       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__container--focused'
-      );
     });
 
-    it('should collapse and remove focused class on blur', async () => {
+    it('should collapse on blur', async () => {
       const element = createTestComponent();
       await flushPromises();
 
@@ -177,11 +203,7 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       await flushPromises();
 
       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__container--focused'
-      );
     });
 
     it('should sync replica text on input', async () => {
@@ -231,4 +253,214 @@ describe('c-quantic-generated-answer-follow-up-input', () => {
       expect(textarea.blur).toHaveBeenCalled();
     });
   });
+
+  describe('character limit validation', () => {
+    it('should display the character counter starting at 0 / 300', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const counter = element.shadowRoot.querySelector(selectors.counter);
+      expect(counter.textContent.trim()).toBe('0 / 300');
+    });
+
+    it('should update the character counter as the user types', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textTest = 'hello';
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = textTest;
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const counter = element.shadowRoot.querySelector(selectors.counter);
+      expect(counter.textContent.trim()).toBe(`${textTest.length} / 300`);
+    });
+
+    it('should not count leading and trailing spaces in the character counter', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = '   hello   ';
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const counter = element.shadowRoot.querySelector(selectors.counter);
+      expect(counter.textContent.trim()).toBe('5 / 300');
+    });
+
+    it('should not flag the input as over the limit when trailing spaces push the raw length past the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = `${'a'.repeat(MAX_LENGTH)}     `;
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const counter = element.shadowRoot.querySelector(selectors.counter);
+      expect(counter.textContent.trim()).toBe('300 / 300');
+
+      const container = element.shadowRoot.querySelector(selectors.container);
+      expect(container.classList).not.toContain(errorClass);
+
+      const message = element.shadowRoot.querySelector(
+        selectors.validationMessage
+      );
+      expect(message).toBeNull();
+    });
+
+    it('should show the exceeded count when over the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH + 26);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const counter = element.shadowRoot.querySelector(selectors.counter);
+      expect(counter.textContent.trim()).toBe('326 / 300');
+    });
+
+    it('should put the input container in an error state and display a validation message when over the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH + 1);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const container = element.shadowRoot.querySelector(selectors.container);
+      expect(container.classList).toContain(errorClass);
+      const message = element.shadowRoot.querySelector(
+        selectors.validationMessage
+      );
+      expect(message).not.toBeNull();
+      expect(message.textContent.trim()).toBe(
+        'Your question is too long. Please use 300 characters or fewer.'
+      );
+    });
+
+    it('should not display a validation message when within the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const message = element.shadowRoot.querySelector(
+        selectors.validationMessage
+      );
+      expect(message).toBeNull();
+    });
+
+    it('should associate the textarea with the validation message via aria-describedby when over the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      expect(textarea.getAttribute('aria-describedby')).toBeNull();
+
+      textarea.value = 'a'.repeat(MAX_LENGTH + 1);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const message = element.shadowRoot.querySelector(
+        selectors.validationMessage
+      );
+      expect(message.id).toBeTruthy();
+      expect(textarea.getAttribute('aria-describedby')).toBe(message.id);
+    });
+
+    it('should remove aria-describedby once the value is back within the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH + 1);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      expect(textarea.getAttribute('aria-describedby')).not.toBeNull();
+
+      textarea.value = 'a'.repeat(MAX_LENGTH);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      expect(textarea.getAttribute('aria-describedby')).toBeNull();
+    });
+
+    it('should disable the submit button when over the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH + 1);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      const submitButton = element.shadowRoot.querySelector(
+        selectors.submitButton
+      );
+      expect(submitButton.disabled).toBe(true);
+    });
+
+    it('should not dispatch the event when over the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH + 1);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should clear the error state once the value is back within the limit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a'.repeat(MAX_LENGTH + 1);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      let container = element.shadowRoot.querySelector(selectors.container);
+      expect(container.classList).toContain(errorClass);
+
+      textarea.value = 'a'.repeat(MAX_LENGTH);
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      container = element.shadowRoot.querySelector(selectors.container);
+      expect(container.classList).not.toContain(errorClass);
+    });
+
+    it('should reset the character counter after a successful submit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const textarea = element.shadowRoot.querySelector(selectors.textarea);
+      textarea.value = 'a question';
+      textarea.dispatchEvent(new CustomEvent('input'));
+      await flushPromises();
+
+      textarea.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      await flushPromises();
+
+      const counter = element.shadowRoot.querySelector(selectors.counter);
+      expect(counter.textContent.trim()).toBe('0 / 300');
+    });
+  });
 });

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

@@ -2,8 +2,8 @@
   min-height: calc(2.5rem + 2px);
 }
 
-.follow-up-input__container--focused {
-  border-color: var(--lwc-brandAccessible, #0176d3);
+.follow-up-input__container--error {
+  border-color: var(--lwc-colorBorderError, #ea001e);
 }
 
 .follow-up-input__expander {

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

@@ -7,6 +7,8 @@
         rows="1"
         placeholder={labels.askFollowUp}
         aria-label={labels.askFollowUp}
+        aria-invalid={textareaAriaInvalid}
+        aria-describedby={textareaAriaDescribedBy}
         onfocus={handleFocus}
         onblur={handleBlur}
         oninput={handleInput}
@@ -14,7 +16,7 @@
       ></textarea>
     </div>
     <lightning-button-icon
-      disabled={submitButtonDisabled}
+      disabled={isSubmitPrevented}
       onclick={handleSubmitFollowUp}
       icon-name="utility:arrowup"
       variant="brand"
@@ -27,4 +29,17 @@
       <label>{labels.submitFollowUp}</label>
     </lightning-button-icon>
   </div>
+  <div
+    class="follow-up-input__footer slds-grid slds-p-horizontal_x-small slds-p-top_xx-small"
+  >
+    <template lwc:if={isOverCharacterLimit}>
+      <span
+        id="follow-up-validation-message"
+        class="slds-text-body_small slds-text-color_error"
+        role="alert"
+        >{validationMessage}
+      </span>
+    </template>
+    <span class={characterCounterClasses}>{characterCounterText}</span>
+  </div>
 </template>

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

@@ -1,8 +1,14 @@
 import submitFollowUp from '@salesforce/label/c.quantic_SubmitFollowUp';
 import askFollowUp from '@salesforce/label/c.quantic_AskFollowUp';
-import {keys} from 'c/quanticUtils';
+import followUpInputTooLong from '@salesforce/label/c.quantic_FollowUpInputTooLong';
+import {I18nUtils, keys} from 'c/quanticUtils';
 import {api, LightningElement} from 'lwc';
 
+/**
+ * Maximum number of characters allowed in a follow-up question.
+ */
+const MAX_FOLLOW_UP_QUESTION_LENGTH = 300;
+
 /**
  * The `QuanticGeneratedAnswerFollowUpInput` component allows users to submit follow-up questions related to a generated answer.
  * @fires CustomEvent#quantic__submitfollowup
@@ -14,6 +20,7 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
   labels = {
     submitFollowUp,
     askFollowUp,
+    followUpInputTooLong,
   };
 
   /**
@@ -27,6 +34,9 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
   /** @type {boolean} */
   _focused = false;
 
+  /** @type {number} */
+  characterCount = 0;
+
   handleKeyDown(event) {
     // Let the browser commit IME text before handling shortcuts like Enter during composition.
     if (event.isComposing || event.keyCode === 229) {
@@ -47,13 +57,14 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
 
   handleSubmitFollowUp() {
     if (
-      this.submitButtonDisabled ||
+      this.isSubmitPrevented ||
       this.refs.askFollowUpInput.value.trim() === ''
     ) {
       return;
     }
     this.sendSubmitFollowUpEvent();
     this.refs.askFollowUpInput.value = '';
+    this.characterCount = 0;
     this.syncTextWithReplica();
     this.collapse();
   }
@@ -70,6 +81,7 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
   }
 
   handleInput() {
+    this.characterCount = this.refs.askFollowUpInput.value.trim().length;
     this.expand();
     this.syncTextWithReplica();
   }
@@ -105,13 +117,44 @@ export default class QuanticGeneratedAnswerFollowUpInput extends LightningElemen
         bubbles: true,
         composed: true,
         detail: {
-          value: this.refs.askFollowUpInput.value,
+          value: this.refs.askFollowUpInput.value.trim(),
         },
       })
     );
   }
 
   get inputContainerClasses() {
-    return `follow-up-input__container slds-is-relative slds-grid slds-box slds-p-around_none ${this._focused ? 'follow-up-input__container--focused' : ''}`;
+    return `follow-up-input__container slds-is-relative slds-grid slds-box slds-p-around_none ${this.isOverCharacterLimit ? 'follow-up-input__container--error' : ''}`;
+  }
+
+  get isOverCharacterLimit() {
+    return this.characterCount > MAX_FOLLOW_UP_QUESTION_LENGTH;
+  }
+
+  get isSubmitPrevented() {
+    return this.submitButtonDisabled || this.isOverCharacterLimit;
+  }
+
+  get textareaAriaInvalid() {
+    return this.isOverCharacterLimit ? 'true' : null;
+  }
+
+  get textareaAriaDescribedBy() {
+    return this.isOverCharacterLimit ? 'follow-up-validation-message' : null;
+  }
+
+  get characterCounterText() {
+    return `${this.characterCount} / ${MAX_FOLLOW_UP_QUESTION_LENGTH}`;
+  }
+
+  get characterCounterClasses() {
+    return `follow-up-input__counter slds-col_bump-left slds-text-body_small ${this.isOverCharacterLimit ? 'slds-text-color_error' : 'slds-text-color_weak'}`;
+  }
+
+  get validationMessage() {
+    return I18nUtils.format(
+      this.labels.followUpInputTooLong,
+      MAX_FOLLOW_UP_QUESTION_LENGTH
+    );
   }
 }

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

@@ -1,7 +1,21 @@
-import {resolveSteps} from '../quanticGeneratedAnswerStreamOfThought.js';
 import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
 import QuanticGeneratedAnswerStreamOfThought from '../quanticGeneratedAnswerStreamOfThought';
 
+jest.mock(
+  '@salesforce/label/c.quantic_AgentGenerationStepSearchQuery',
+  () => ({default: 'Searching for {{0}}.'}),
+  {
+    virtual: true,
+  }
+);
+jest.mock(
+  '@salesforce/label/c.quantic_AgentGenerationStepSearchQueryCompleted',
+  () => ({default: 'Searched for {{0}}'}),
+  {
+    virtual: true,
+  }
+);
+
 const selectors = {
   stepItem: '[data-testid="step-item"]',
   spinner: '[data-testid="spinner"]',
@@ -20,46 +34,6 @@ const createTestComponent = buildCreateTestComponent(
   {agentSteps: [], isStreaming: false}
 );
 
-describe('#resolveSteps', () => {
-  it('should return empty array for empty input', () => {
-    expect(resolveSteps([])).toEqual([]);
-  });
-
-  it('should resolve a full sequence correctly', () => {
-    expect(
-      resolveSteps([
-        {name: 'thinking', status: 'completed', startedAt: 0},
-        {name: 'searching', status: 'completed', startedAt: 10},
-        {name: 'thinking', status: 'completed', startedAt: 20},
-        {name: 'answering', status: 'active', startedAt: 30},
-      ])
-    ).toEqual([
-      {name: 'thinking-before-search', status: 'completed'},
-      {name: 'searching', status: 'completed'},
-      {name: 'thinking-after-search', status: 'completed'},
-      {name: 'answering', status: 'active'},
-    ]);
-  });
-
-  it('should handle repeated searching steps', () => {
-    expect(
-      resolveSteps([
-        {name: 'thinking', status: 'completed', startedAt: 0},
-        {name: 'searching', status: 'completed', startedAt: 10},
-        {name: 'thinking', status: 'completed', startedAt: 20},
-        {name: 'searching', status: 'completed', startedAt: 30},
-        {name: 'thinking', status: 'active', startedAt: 40},
-      ])
-    ).toEqual([
-      {name: 'thinking-before-search', status: 'completed'},
-      {name: 'searching', status: 'completed'},
-      {name: 'thinking-after-search', status: 'completed'},
-      {name: 'searching', status: 'completed'},
-      {name: 'thinking-after-search', status: 'active'},
-    ]);
-  });
-});
-
 describe('quantic generated answer stream of thought component', () => {
   afterEach(() => {
     cleanup();
@@ -152,6 +126,86 @@ describe('quantic generated answer stream of thought component', () => {
       expect(collapseButton).toBeNull();
       expect(collapsedSummary).toBeNull();
     });
+
+    it('should render a searching-with-query step when toolCall has a query', async () => {
+      const element = createTestComponent({
+        agentSteps: [
+          {
+            name: 'searching',
+            status: 'active',
+            startedAt: 0,
+            toolCalls: [
+              {
+                toolCallName: 'search',
+                toolCallId: 'tc-1',
+                startedAt: 0,
+                status: 'active',
+                type: 'search',
+                toolCallArgs: {q: 'how to reset password'},
+              },
+            ],
+          },
+        ],
+        isStreaming: true,
+      });
+      await flushPromises();
+
+      const stepItem = element.shadowRoot.querySelector(selectors.stepItem);
+      expect(stepItem.getAttribute('data-step-name')).toBe(
+        'searching-with-query'
+      );
+
+      const stepLabel = element.shadowRoot.querySelector(selectors.stepLabel);
+      expect(stepLabel.textContent).toContain('how to reset password');
+    });
+
+    it('should expand multiple search toolCalls into separate step items', async () => {
+      const element = createTestComponent({
+        agentSteps: [
+          {
+            name: 'searching',
+            status: 'completed',
+            startedAt: 0,
+            toolCalls: [
+              {
+                toolCallName: 'search',
+                toolCallId: 'tc-1',
+                startedAt: 0,
+                finishedAt: 1,
+                status: 'completed',
+                type: 'search',
+                toolCallArgs: {q: 'What is Quantic'},
+              },
+              {
+                toolCallName: 'search',
+                toolCallId: 'tc-2',
+                startedAt: 1,
+                finishedAt: 2,
+                status: 'completed',
+                type: 'search',
+                toolCallArgs: {q: 'What is Atomic'},
+              },
+            ],
+          },
+        ],
+        isStreaming: true,
+      });
+      await flushPromises();
+
+      const stepItems = element.shadowRoot.querySelectorAll(selectors.stepItem);
+      expect(stepItems).toHaveLength(2);
+      stepItems.forEach((item) =>
+        expect(item.getAttribute('data-step-name')).toBe('searching-with-query')
+      );
+
+      const stepLabelsText = Array.from(
+        element.shadowRoot.querySelectorAll(selectors.stepLabel)
+      )
+        .map((el) => el.textContent ?? '')
+        .join(' ');
+      expect(stepLabelsText).toContain('What is Quantic');
+      expect(stepLabelsText).toContain('What is Atomic');
+    });
   });
 
   describe('after streaming completes', () => {