feat: GenAI Shortcuts for PromptInput by ernst-dev · Pull Request #4107 · cloudscape-design/components

ernst-dev · 2025-12-12T21:17:27Z

Description

Adds shortcuts features to PromptInput:

Underlying input becomes a div with contenteditable enabled to allow rendering custom elements
Adds menu system to attach to triggers with filters @ or /
Complex rendering logic to ensure cross-browser consistency
Reference representation through inline Token elements

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-03-06T10:37:57Z

Codecov Report

❌ Patch coverage is 88.67925% with 288 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.66%. Comparing base (7d3ac02) to head (50756f1).

Files with missing lines	Patch %	Lines
src/prompt-input/tokens/use-token-mode.ts	76.19%	149 Missing ⚠️
src/prompt-input/core/caret-controller.ts	88.55%	42 Missing ⚠️
src/prompt-input/core/event-handlers.ts	89.92%	41 Missing ⚠️
src/test-utils/dom/prompt-input/index.ts	55.76%	23 Missing ⚠️
src/prompt-input/internal.tsx	93.84%	8 Missing ⚠️
src/prompt-input/core/caret-spot-utils.ts	88.67%	6 Missing ⚠️
src/prompt-input/components/token-mode.tsx	84.37%	5 Missing ⚠️
src/prompt-input/components/menu-dropdown.tsx	77.77%	4 Missing ⚠️
src/prompt-input/core/token-operations.ts	98.00%	4 Missing ⚠️
src/prompt-input/core/token-utils.ts	97.82%	3 Missing ⚠️
... and 3 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4107      +/-   ##
==========================================
- Coverage   97.44%   96.66%   -0.78%     
==========================================
  Files         903      919      +16     
  Lines       26510    29007    +2497     
  Branches     9569    10491     +922     
==========================================
+ Hits        25832    28041    +2209     
- Misses        672      960     +288     
  Partials        6        6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pages/prompt-input/shortcuts.page.tsx

src/prompt-input/components/token-mode.tsx

src/prompt-input/core/dom-utils.ts

src/internal/components/dropdown/interfaces.ts

src/internal/components/dropdown/index.tsx

src/prompt-input/internal.tsx

src/prompt-input/core/token-utils.ts

src/prompt-input/core/token-renderer.tsx

pages/prompt-input/permutations.page.tsx

src/token/internal.tsx

src/prompt-input/internal.tsx

src/prompt-input/components/token-mode.tsx

… firing on each keystroke after a trigger was cancelled

…its to trigger and plain text, enter key does nothing on empty state instead of submitting

src/prompt-input/internal.tsx

pan-kot · 2026-03-26T10:19:23Z

src/prompt-input/internal.tsx

+        const finalCursorPosition = caretEnd ?? insertPosition + text.length;
+        textarea.setSelectionRange(finalCursorPosition, finalCursorPosition);
+
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));


What is the purpose of this dispatch event?

Should we even necessarily support handleInsertText for textarea mode?

The event is to trigger the change of events that typically happen when a user types text into the input. I'm inclined to support it for textarea as well even if it doesn't really get used as the function is on the ref for both textarea and token-mode. It doesn't hurt to have it work for both in my opinion

But how does it help consumers? Is it captured by our code to make some change or do we expect it to be caught by the consumer code? If so - we should rather expose our non-cancelable on-input event via a dedicated handler.

src/prompt-input/core/token-utils.ts

…t < 18 shortcuts

src/prompt-input/core/event-handlers.ts

jperals · 2026-03-26T14:58:14Z

src/i18n/messages/all.it.json

    "i18nStrings.datePlaceholder": "GG/MM/AAAA",
-    "i18nStrings.isoDatePlaceholder": "AAAA-MM-GG",
-    "i18nStrings.slashedDatePlaceholder": "AAAA/MM/GG",
+    "i18nStrings.isoDatePlaceholder": "GG-MM-AAAA",


These two strings should not change. Instead, i18nStrings.datePlaceholder should be changed to AAAA/MM/GG

jperals · 2026-03-26T15:00:04Z

src/i18n/messages/all.fr.json

    "i18nStrings.datePlaceholder": "JJ/MM/AAAA",
-    "i18nStrings.isoDatePlaceholder": "AAAA-MM-JJ",
-    "i18nStrings.slashedDatePlaceholder": "AAAA/MM/JJ",
+    "i18nStrings.isoDatePlaceholder": "JJ-MM-AAAA",


Same as in Italian, these two strings should not have been change, it is the previous one that was wrong.

We can address existing issues separately but let's not introduce regressions.

jperals · 2026-03-26T15:02:36Z

src/i18n/messages/all.en-GB.json

    "i18nStrings.datePlaceholder": "DD/MM/YYYY",
-    "i18nStrings.isoDatePlaceholder": "YYYY-MM-DD",
-    "i18nStrings.slashedDatePlaceholder": "YYYY/MM/DD",
+    "i18nStrings.isoDatePlaceholder": "DD-MM-YYYY",


Similar feedback here as with French and Italian below

…ng out of use-token-mode, remove ignoreCursorDetection flag

mxschll · 2026-03-27T11:18:15Z

src/prompt-input/core/event-handlers.ts

+  const menuOpen = props.getMenuOpen();
+
+  handleKey(
+    event as unknown as {


Why is this double cast necessary?

Good catch, it's not needed at all, will remove in the next commit

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from cb759ce to 5e2c3a3 Compare February 18, 2026 17:30

mxschll self-requested a review February 20, 2026 17:43

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from b3fa438 to 3f4d535 Compare February 26, 2026 15:14

ernst-dev marked this pull request as ready for review February 26, 2026 15:32

ernst-dev requested a review from a team as a code owner February 26, 2026 15:32

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from 3f4d535 to 9f0faad Compare February 26, 2026 15:35

gethinwebster removed the request for review from a team February 27, 2026 09:13

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from 69b458f to d2ebfd6 Compare March 6, 2026 09:01

ernst-dev deployed to dev-pages-react18 March 6, 2026 10:37 — with GitHub Actions View deployment

ernst-dev deployed to dev-pages-react16 March 6, 2026 10:37 — with GitHub Actions View deployment

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from b1c71c6 to 6ec9bce Compare March 9, 2026 15:55

ernst-dev deployed to dev-pages-react18 March 12, 2026 11:25 — with GitHub Actions View deployment

ernst-dev deployed to dev-pages-react16 March 12, 2026 11:25 — with GitHub Actions View deployment

ernst-dev deployed to dev-pages-react18 March 12, 2026 12:19 — with GitHub Actions View deployment

ernst-dev deployed to dev-pages-react16 March 12, 2026 12:19 — with GitHub Actions View deployment

pan-kot self-requested a review March 12, 2026 12:49

pan-kot reviewed Mar 12, 2026

View reviewed changes

pages/prompt-input/shortcuts.page.tsx Outdated Show resolved Hide resolved

pan-kot reviewed Mar 12, 2026

View reviewed changes

src/prompt-input/components/token-mode.tsx Outdated Show resolved Hide resolved

src/prompt-input/components/token-mode.tsx Show resolved Hide resolved

src/prompt-input/core/dom-utils.ts Outdated Show resolved Hide resolved

mxschll reviewed Mar 12, 2026

View reviewed changes

src/internal/components/dropdown/interfaces.ts Show resolved Hide resolved

mxschll reviewed Mar 12, 2026

View reviewed changes

src/internal/components/dropdown/index.tsx Outdated Show resolved Hide resolved

mxschll reviewed Mar 12, 2026

View reviewed changes

src/internal/components/dropdown/index.tsx Outdated Show resolved Hide resolved

pan-kot reviewed Mar 12, 2026

View reviewed changes

src/prompt-input/internal.tsx Outdated Show resolved Hide resolved

pan-kot reviewed Mar 12, 2026

View reviewed changes

src/prompt-input/core/token-utils.ts Outdated Show resolved Hide resolved

pan-kot reviewed Mar 12, 2026

View reviewed changes

src/prompt-input/core/token-renderer.tsx Outdated Show resolved Hide resolved

mxschll reviewed Mar 12, 2026

View reviewed changes

pages/prompt-input/permutations.page.tsx Outdated Show resolved Hide resolved

mxschll reviewed Mar 12, 2026

View reviewed changes

src/token/internal.tsx Show resolved Hide resolved

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from d7e193a to 7c9cae2 Compare March 12, 2026 17:11

jperals reviewed Mar 13, 2026

View reviewed changes

src/prompt-input/internal.tsx Outdated Show resolved Hide resolved

src/prompt-input/internal.tsx Outdated Show resolved Hide resolved

pan-kot reviewed Mar 13, 2026

View reviewed changes

src/prompt-input/components/token-mode.tsx Show resolved Hide resolved

ernst-dev added 10 commits March 25, 2026 19:26

Address firefox re-focus issues as well as onTriggerDetected function…

7744710

… firing on each keystroke after a trigger was cancelled

Address RTL bug-bash findings

3b123c8

Address remaining BB items, VoiceOver enhancements, improve tests

111c69a

Force update documenter snapshot

106a7d0

Add renderTrigger to dropdown and remove triggerRef

f951698

Menu usability improvements, space between symbol and filter text spl…

dd40004

…its to trigger and plain text, enter key does nothing on empty state instead of submitting

Address VO issue, usability improvements and selection issues

0ab1c47

Add translations

681e8d7

Fixed translation and documenter issues

aa572c2

Address PR feedback and fix minor issues with selection

992d693

ernst-dev force-pushed the dev-v3-ernstka-shortcuts branch from 3d5686c to 992d693 Compare March 25, 2026 18:27

Clean up after rebasing dropdown changes

7521b5a

ernst-dev deployed to dev-pages-react16 March 25, 2026 18:40 — with GitHub Actions View deployment

ernst-dev deployed to dev-pages-react18 March 25, 2026 18:40 — with GitHub Actions View deployment

pan-kot reviewed Mar 26, 2026

View reviewed changes

src/prompt-input/internal.tsx Show resolved Hide resolved

pan-kot reviewed Mar 26, 2026

View reviewed changes

src/prompt-input/core/token-utils.ts Outdated Show resolved Hide resolved

ernst-dev added 3 commits March 26, 2026 13:26

Remove startIndex from extractFilterText and add dev warning for Reac…

ab2d33c

…t < 18 shortcuts

Merge branch 'main' into dev-v3-ernstka-shortcuts

eaab44d

General clean-up and removal of dead code

50756f1

jperals reviewed Mar 26, 2026

View reviewed changes

src/prompt-input/core/event-handlers.ts Outdated Show resolved Hide resolved

ernst-dev deployed to dev-pages-react18 March 26, 2026 12:46 — with GitHub Actions View deployment

ernst-dev deployed to dev-pages-react16 March 26, 2026 12:46 — with GitHub Actions View deployment

jperals reviewed Mar 26, 2026

View reviewed changes

src/prompt-input/core/event-handlers.ts Outdated Show resolved Hide resolved

jperals reviewed Mar 26, 2026

View reviewed changes

ernst-dev added 2 commits March 26, 2026 17:24

Update event-handlers to use handleKey and move keyboard event handli…

ba0433c

…ng out of use-token-mode, remove ignoreCursorDetection flag

Merge branch 'main' into dev-v3-ernstka-shortcuts

7ce28a5

mxschll reviewed Mar 27, 2026

View reviewed changes

Conversation

ernst-dev commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ernst-dev commented Dec 12, 2025 •

edited

Loading

codecov bot commented Mar 6, 2026 •

edited

Loading