feat(quantic): Add a character limit to the follow-up question input by mmitiche · Pull Request #7908 · coveo/ui-kit

mmitiche · 2026-06-30T14:52:54Z

SFINT-6844

Summary

Adds a 300-character limit to QuanticGeneratedAnswerFollowUpInput component, with a live character counter, an error state, and a localized validation message. Submission is blocked while the question exceeds the limit.

Changes

Enforces a [MAX_FOLLOW_UP_QUESTION_LENGTH (300) limit; submission is blocked and the submit button is disabled while over the limit.
Adds a live character counter and a validation message inside a new input-footer part.
Counts the trimmed value so leading/trailing whitespace doesn't falsely trigger the limit (keeps the counter consistent with the submitted query).
Accessibility: textarea gets aria-invalid when over the limit and aria-describedby linking it to the validation message
Error styling when input is invalid

Demo

Screen.Recording.2026-06-30.at.10.01.04.AM.mov

…t with a live character counter

changeset-bot · 2026-06-30T14:53:02Z

🦋 Changeset detected

Latest commit: 9dc8103

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@coveo/quantic	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

svcsnykcoveo · 2026-06-30T14:53:15Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Copilot

Pull request overview

Adds a 300-character limit UX to QuanticGeneratedAnswerFollowUpInput, including a live counter, an over-limit error state, localized validation messaging, and unit test coverage for the new behaviors.

Changes:

Introduces MAX_FOLLOW_UP_QUESTION_LENGTH = 300, tracks a trimmed characterCount, and blocks submission (button + Enter) when over the limit.
Adds an input footer that renders a live character counter plus an over-limit validation message wired via ARIA attributes.
Adds a new quantic_FollowUpInputTooLong label with FR/ES translations, and extends Jest tests for the validation/counter behavior.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.js	Implements trimmed character counting, over-limit state, submit prevention, ARIA wiring, and formatted validation message.
packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.html	Adds `aria-invalid`/`aria-describedby`, uses submit-prevented flag, and renders the new footer (message + counter).
packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.css	Adds an error border style for the invalid container state.
packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/tests/quanticGeneratedAnswerFollowUpInput.test.js	Adds mocks and a full validation/counter test suite for the new limit behavior.
packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml	Adds the new EN label `quantic_FollowUpInputTooLong`.
packages/quantic/force-app/main/translations/fr.translation-meta.xml	Adds FR translation for `quantic_FollowUpInputTooLong`.
packages/quantic/force-app/main/translations/es.translation-meta.xml	Adds ES translation for `quantic_FollowUpInputTooLong`.
.changeset/gold-views-talk.md	Declares a patch changeset for `@coveo/quantic`.

      this.refs.askFollowUpInput.value.trim() === ''
    ) {
      return;
    }
    this.sendSubmitFollowUpEvent();


+  get characterCounterText() {
+    return `${this.characterCount} / ${MAX_FOLLOW_UP_QUESTION_LENGTH}`;
+  }


SimonMilord · 2026-07-02T17:43:36Z

+/**
+ * Maximum number of characters allowed in a follow-up question.
+ */
+const MAX_FOLLOW_UP_QUESTION_LENGTH = 300;


yeah I would remove the comment its already pretty obvious

pkg-pr-new · 2026-06-30T15:00:22Z

@coveo/pkg-new-template

@coveo/atomic

npm i https://pkg.pr.new/@coveo/atomic@7908

@coveo/atomic-hosted-page

npm i https://pkg.pr.new/@coveo/atomic-hosted-page@7908

@coveo/atomic-legacy

npm i https://pkg.pr.new/@coveo/atomic-legacy@7908

@coveo/atomic-react

npm i https://pkg.pr.new/@coveo/atomic-react@7908

@coveo/auth

npm i https://pkg.pr.new/@coveo/auth@7908

@coveo/bueno

npm i https://pkg.pr.new/@coveo/bueno@7908

@coveo/create-atomic

npm i https://pkg.pr.new/@coveo/create-atomic@7908

@coveo/create-atomic-component

npm i https://pkg.pr.new/@coveo/create-atomic-component@7908

@coveo/create-atomic-component-project

npm i https://pkg.pr.new/@coveo/create-atomic-component-project@7908

@coveo/create-atomic-result-component

npm i https://pkg.pr.new/@coveo/create-atomic-result-component@7908

@coveo/create-atomic-rollup-plugin

npm i https://pkg.pr.new/@coveo/create-atomic-rollup-plugin@7908

@coveo/headless

npm i https://pkg.pr.new/@coveo/headless@7908

@coveo/headless-react

npm i https://pkg.pr.new/@coveo/headless-react@7908

@coveo/shopify

npm i https://pkg.pr.new/@coveo/shopify@7908

commit: 9dc8103

github-actions · 2026-06-30T15:02:42Z

🔗 Scratch Orgs ready to test this PR:

✅ LWS Enabled: Open Org
✅ LWS Disabled: Open Org

SimonMilord · 2026-07-02T17:49:43Z

+  }
+
+  get textareaAriaInvalid() {
+    return this.isOverCharacterLimit ? 'true' : 'false';


Here im pretty sure you can just do:

return !!this.isOverCharacterLimit;

aria-invalid resolves true and false to "true" / "false"

As a matter of fact you need to do this instead:

Suggested change

return this.isOverCharacterLimit ? 'true' : 'false';

return this.isOverCharacterLimit ? 'true' : null;

returning 'false' will indeed still display aria-invalid="false" which I think would resolved as true? Or maybe there's LWC magic there?

SimonMilord

👌

erocheleau

Looks good, 1 nitpick

erocheleau · 2026-07-06T19:28:53Z

+      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');


Nitpick

Suggested change

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');

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`);

erocheleau

Some questions

erocheleau · 2026-07-06T19:44:18Z

+  }
+
+  get textareaAriaInvalid() {
+    return this.isOverCharacterLimit ? 'true' : 'false';


As a matter of fact you need to do this instead:

Suggested change

return this.isOverCharacterLimit ? 'true' : 'false';

return this.isOverCharacterLimit ? 'true' : null;

returning 'false' will indeed still display aria-invalid="false" which I think would resolved as true? Or maybe there's LWC magic there?

erocheleau · 2026-07-06T19:46:11Z

  border-color: var(--lwc-brandAccessible, #0176d3);
 }

+.follow-up-input__container--error {


This isn't more specific than .follow-up-input__container--focused so both rules will apply, so you could also add this:

Suggested change

.follow-up-input__container--error {

.follow-up-input__container--error,

.follow-up-input__container--focused.follow-up-input__container--error {

That way you're sure that even when focused it will also display the error color

erocheleau · 2026-07-06T20:21:44Z

        bubbles: true,
        composed: true,
        detail: {
          value: this.refs.askFollowUpInput.value,


This value is emitted but not trimmed, is that what we want?

We trim it to count for the character limit, but we can submit with a value untrimmed?

erocheleau · 2026-07-06T20:24:38Z

  }

  handleInput() {
+    this.characterCount = this.refs.askFollowUpInput.value.trim().length;


Why exactly are we trimming the input? It feels a little bit weird, because for example it would allow

hel lo

but not

hello

and at the end of the day, we send the value of the input filled untrimmed, so we will submit with

hello untrimmed.

mmitiche added 4 commits June 30, 2026 10:37

Addition of a 300-character limit to the ask follow up input componen…

491e4e4

…t with a live character counter

changeset added

56e3550

translations added

996e80e

property renamed

5cce07f

mmitiche requested review from a team, SimonMilord, Copilot, erocheleau, jfcere-coveo, louis-bompart, mikegron and y-lakhdar June 30, 2026 14:52

mmitiche temporarily deployed to pr-workflows June 30, 2026 14:53 — with GitHub Actions Inactive

mmitiche temporarily deployed to PR Artifacts June 30, 2026 14:53 — with GitHub Actions Inactive

Merge branch 'main' into SFINT-6844

9dc8103

coveo-code-areas-pr-checks Bot added area:quantic team:dxui team:knowledge-ui-kit-reviewers team:salesforce-integration labels Jun 30, 2026

Copilot started reviewing on behalf of mmitiche June 30, 2026 14:53 View session

mmitiche temporarily deployed to pr-workflows June 30, 2026 14:53 — with GitHub Actions Inactive

mmitiche temporarily deployed to PR Artifacts June 30, 2026 14:53 — with GitHub Actions Inactive

Copilot AI reviewed Jun 30, 2026

View reviewed changes

mmitiche temporarily deployed to PR Artifacts June 30, 2026 15:09 — with GitHub Actions Inactive

SimonMilord reviewed Jul 2, 2026

View reviewed changes

SimonMilord approved these changes Jul 2, 2026

View reviewed changes

erocheleau approved these changes Jul 6, 2026

View reviewed changes

erocheleau reviewed Jul 6, 2026

View reviewed changes

	return this.isOverCharacterLimit ? 'true' : 'false';
	return this.isOverCharacterLimit ? 'true' : null;

	.follow-up-input__container--error {
	.follow-up-input__container--error,
	.follow-up-input__container--focused.follow-up-input__container--error {

Uh oh!

Conversation

mmitiche commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Demo

Uh oh!

changeset-bot Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

svcsnykcoveo commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SimonMilord left a comment

Choose a reason for hiding this comment

Uh oh!

erocheleau left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

erocheleau left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mmitiche commented Jun 30, 2026 •

edited

Loading

changeset-bot Bot commented Jun 30, 2026 •

edited

Loading

svcsnykcoveo commented Jun 30, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 30, 2026 •

edited

Loading

github-actions Bot commented Jun 30, 2026 •

edited

Loading