[BpkChatbotInput]Bpk component chatbox input by gc-skyscanner · Pull Request #4279 · Skyscanner/backpack

GC Zhu (gc-skyscanner) · 2026-03-13T08:52:51Z

Remember to include the following changes:

…operty (#4265) * add Claude SDD spec for BpkButton * add notes for the definition of themeable * Make corner radius configurable via bpk-themeable * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update specs/001-bpkbutton-baseline/spec.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * solve comment * [CLOV-1327] Address Copilot review comments - Fix Object.keys → Object.values in BpkButton-test.tsx forEach loop so tests iterate over kebab-case type values (e.g. primary-on-dark) that match actual BEM class names, not camelCase keys - Remove unused ButtonType import (no longer needed after removing cast) - Update plan.md: replace "snapshot regeneration" with accurate description of explicit assertion approach; expand Files changed list to include test, snapshot deletion, and spec documentation artefacts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * remove the BpkButton spec * add storybook example for the themed boder radius for BpkButton * imporve BpkButton unit test --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Bumps the artifacts-actions group with 1 update: [actions/download-artifact](https://github.com/actions/download-artifact). Updates `actions/download-artifact` from 7.0.0 to 8.0.0 - [Release notes](https://github.com/actions/download-artifact/releases) - [Commits](actions/download-artifact@37930b1...70fc10c) --- updated-dependencies: - dependency-name: actions/download-artifact dependency-version: 8.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: artifacts-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Copilot

Pull request overview

Adds a new bpk-component-chatbot-input package to Backpack, providing a chat-style input with a default single-line mode and a composer (textarea) mode, plus supporting hooks, styling, tests, and Storybook examples.

Changes:

Introduces BpkChatbotInput with default + composer modes and a send button/loading state.
Adds supporting hooks (useChatbotInput, useChatbotInputManager, useTextAreaAutoResize, useInputHandlers) and component subparts (InputField, TextAreaField, SendButton).
Adds unit tests, accessibility tests, snapshots, and Storybook examples for the new component.

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/bpk-component-chatbot-input/src/types.ts	Defines shared prop types for input field variants.
packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.ts	Implements textarea measurement + auto-resize logic.
packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize-test.tsx	Tests textarea auto-resize behavior and scrolling behavior.
packages/bpk-component-chatbot-input/src/hooks/useInputHandlers.ts	Centralizes click/touch/change handlers for input controls.
packages/bpk-component-chatbot-input/src/hooks/useInputHandlers-test.tsx	Tests handler behavior for click/touch/change.
packages/bpk-component-chatbot-input/src/hooks/useChatbotInputManager.ts	Adds state management for chatbot input value and submit/autoclear behavior.
packages/bpk-component-chatbot-input/src/hooks/useChatbotInputManager-test.tsx	Tests input manager state transitions and submission logic.
packages/bpk-component-chatbot-input/src/hooks/useChatbotInput.ts	Provides UI state (focused/disabled/overlimit/etc) and input props for the component.
packages/bpk-component-chatbot-input/src/hooks/useChatbotInput-test.tsx	Tests derived state and key-handling behavior for the hook.
packages/bpk-component-chatbot-input/src/hooks/index.ts	Barrel exports for hooks used by the component.
packages/bpk-component-chatbot-input/src/constants.ts	Declares input type constants and default max character limit.
packages/bpk-component-chatbot-input/src/accessibility-test.tsx	Adds jest-axe coverage for default/composer/loading renders.
packages/bpk-component-chatbot-input/src/snapshots/BpkChatbotInput-test.tsx.snap	Stores render snapshots for default and composer variants.
packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.tsx	Implements the composer textarea UI.
packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.module.scss	Styles for composer textarea container/field.
packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField-test.tsx	Tests textarea field rendering, events, and axe checks.
packages/bpk-component-chatbot-input/src/SendButton/SendButton.tsx	Adds send button with icon + loading state behavior.
packages/bpk-component-chatbot-input/src/SendButton/SendButton-test.tsx	Tests send button render/click/disabled + axe.
packages/bpk-component-chatbot-input/src/LoadingButton/LoadingButton.tsx	Adds a loading button implementation (currently not referenced).
packages/bpk-component-chatbot-input/src/LoadingButton/LoadingButton.module.scss	Styles for the loading button.
packages/bpk-component-chatbot-input/src/InputField/InputField.tsx	Implements default single-line input UI.
packages/bpk-component-chatbot-input/src/InputField/InputField.module.scss	Styles for the single-line input field.
packages/bpk-component-chatbot-input/src/InputField/InputField-test.tsx	Tests input field rendering, events, and axe checks.
packages/bpk-component-chatbot-input/src/BpkChatbotInput.tsx	Main component wiring modes, hooks, and send button.
packages/bpk-component-chatbot-input/src/BpkChatbotInput.module.scss	Styles for default/composer container variants.
packages/bpk-component-chatbot-input/src/BpkChatbotInput-test.tsx	Component tests for variants, loading, and keyboard interactions.
packages/bpk-component-chatbot-input/index.ts	Public entrypoint exports for the new package.
packages/bpk-component-chatbot-input/README.md	Package documentation and usage instructions.
examples/bpk-component-chatbot-input/stories.tsx	Storybook story registration for the new component.
examples/bpk-component-chatbot-input/examples.tsx	Interactive examples for default/composer/loading states.
examples/bpk-component-chatbot-input/examples.module.scss	Example layout styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

GC Zhu (gc-skyscanner) · 2026-03-17T07:02:15Z

packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.ts

+export const LINE_HEIGHT = 24;
+export const MIN_INPUT_HEIGHT = LINE_HEIGHT;
+export const MAX_INPUT_HEIGHT_PHASE_1 = LINE_HEIGHT * 4;
+export const MAX_INPUT_HEIGHT_PHASE_2 = LINE_HEIGHT * 5;
+export const MIN_CONTAINER_HEIGHT = 24;
+export const MAX_CONTAINER_HEIGHT = 96;
+export const PARENT_PADDING_TOP = 16;


resolved in 0c926b3#diff-61e1d5c6c02e4830a85b1107375e11d5d1b85ef125689e2e533acc094c2736f0

packages/bpk-component-chatbot-input/src/InputField/InputField.tsx

packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.module.scss

packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize-test.tsx

packages/bpk-component-chatbot-input/src/LoadingButton/LoadingButton.tsx

packages/bpk-component-chatbot-input/src/BpkChatbotInput.tsx

packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.tsx

packages/bpk-component-chatbot-input/src/hooks/useInputHandlers.ts

packages/bpk-component-chatbot-input/src/hooks/useChatbotInput.ts

packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.tsx

skyscanner-backpack-bot · 2026-03-13T09:00:57Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-13T09:02:35Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 8af6c18

skyscanner-backpack-bot · 2026-03-16T07:27:28Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-16T08:06:11Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-16T08:13:07Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-16T08:23:59Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

GC Zhu (gc-skyscanner) · 2026-03-16T10:52:52Z

packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.ts

+  const measureElementRef = useRef<HTMLTextAreaElement | null>(null);
+  const previousValueRef = useRef<string>('');
+  const shouldScrollRef = useRef<boolean>(false);
+  const isInitialRenderRef = useRef<boolean>(true);


Why useRef for all four?(same implementation with carhire's)
All four values share one thing in common: changes to them don't need to trigger a UI re-render.

ref reason

measureElementRef Stores a DOM node — the classic use case for useRef

previousValueRef A pure computation helper, only read/written inside effects, never affects render output

shouldScrollRef A cross-effect signal flag — using useState would cause unnecessary re-renders or even an infinite loop

isInitialRenderRef A one-time flag that flips once over the component's lifetime, has no impact on any UI

Of the values in this hook, only dimensions uses useState — because those values are applied directly as inline styles and must trigger a re-render to take effect visually.

GC Zhu (gc-skyscanner) · 2026-03-16T10:59:07Z

packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.ts

+
+    const textarea = ref.current;
+    const computedStyle = getComputedStyle(textarea);
+    const tempTextarea = document.createElement('textarea');


The reason why use tempTextArea here(Same implemetation with Car hire's)
The real textarea is for display — its height is locked. The hidden textarea is for measurement — its height is free to expand. By mirroring the same content and styles in the hidden element, we can measure the true height the content needs, then apply that height back to the real textarea.

skyscanner-backpack-bot · 2026-03-17T03:43:02Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

GC Zhu (gc-skyscanner) · 2026-03-17T03:49:38Z

packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.ts

+    document.body.appendChild(tempTextarea);
+    measureElementRef.current = tempTextarea;
+
+    const resizeObserver = new ResizeObserver((entries) => {


Add ResizeObserver here(different from carhire, the original implementation)
Reason is:
The height calculation fails when the container width changes
previously recalculates the height only when the value changes ⬇️

backpack/packages/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.ts

Line 159 in fcd3bf0

}, [value, ref]);

However, measureEl.style.width depends on textarea.offsetWidth. If the user does not input any new content but only the width of the container changes due to window scaling or layout alterations, the width will remain the old value and the calculation of the number of lines will be incorrect.

for example:
The user entered three lines of text, and the window narrowed → it actually became five lines
But value remains unchanged → Effect 2 is not triggered → height is still displayed in 3 lines ❌

skyscanner-backpack-bot · 2026-03-17T07:07:18Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-17T08:56:25Z

Visit https://backpack.github.io/storybook-prs/4279 to see this build running in a browser.

GC Zhu (gc-skyscanner) · 2026-03-17T08:57:57Z

packages/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.module.scss

+    width: 100%;
+    align-items: center;
+    transition:
+      height 0.3s cubic-bezier(0.4, 0, 0.2, 1),


No match backpack token at the moment, Keep it same as Car Hire's

GC Zhu (gc-skyscanner) · 2026-03-17T08:59:11Z

packages/bpk-component-chatbot-input/src/BpkChatbotInput.module.scss

+    transition:
+      border-color tokens.$bpk-duration-sm ease,
+      box-shadow tokens.$bpk-duration-sm ease;
+    border: 1.5 * tokens.$bpk-one-pixel-rem solid tokens.$bpk-line-day;


No match backpack token at the moment, keep it same as Car Hire's

GC Zhu (gc-skyscanner) and others added 14 commits March 9, 2026 18:29

migrate chatbotinput into backpack

f26ddef

add loading state for BpkButton

67e1be8

fix test and comments

6106e10

revert comments

d3c06e9

remove dead code

6844f88

fix bpkbutton link style

66c9fda

update example text

f2c04bb

update chatbotinput

ccb445a

updated

bdfd4ce

updated

c7b45a9

migrate chatbotinput into backpack

371d223

fix conflicts

e2e37de

GC Zhu (gc-skyscanner) added minor Non breaking change ai: claude labels Mar 13, 2026

Copilot AI review requested due to automatic review settings March 13, 2026 08:52

Copilot started reviewing on behalf of GC Zhu (gc-skyscanner) March 13, 2026 08:53 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

revert changes

9042b9f

replace inputPlaceholder with placeholder and mark it as required

83da13f

Merge branch 'main' into bpk-component-chatbox-input

800e5fe

fix conflicts

fcd3bf0

GC Zhu (gc-skyscanner) commented Mar 16, 2026

View reviewed changes

improve the test and calls useTextAreaAutoResize only in composer mode

5a4987d

Richard-Shen (RichardSyq) mentioned this pull request Mar 17, 2026

[backpack-code-review-checklist] Rewrite skill as multi-agent orchestrator (v2.0) #4285

Draft

4 tasks

GC Zhu (gc-skyscanner) commented Mar 17, 2026

View reviewed changes

This comment was marked as off-topic.

Sign in to view

resolved by the comments

0c926b3

remove magic number

8af6c18

GC Zhu (gc-skyscanner) commented Mar 17, 2026

View reviewed changes

ref	reason
measureElementRef	Stores a DOM node — the classic use case for useRef
previousValueRef	A pure computation helper, only read/written inside effects, never affects render output
shouldScrollRef	A cross-effect signal flag — using useState would cause unnecessary re-renders or even an infinite loop
isInitialRenderRef	A one-time flag that flips once over the component's lifetime, has no impact on any UI

Conversation

GC Zhu (gc-skyscanner) commented Mar 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

GC Zhu (gc-skyscanner) Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Mar 13, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Mar 16, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 16, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 16, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 16, 2026

Uh oh!

GC Zhu (gc-skyscanner) Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

GC Zhu (gc-skyscanner) Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 17, 2026

Uh oh!

GC Zhu (gc-skyscanner) Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as off-topic.

Uh oh!

skyscanner-backpack-bot bot commented Mar 17, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 17, 2026

Uh oh!

GC Zhu (gc-skyscanner) Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GC Zhu (gc-skyscanner) Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

skyscanner-backpack-bot bot commented Mar 13, 2026 •

edited

Loading

GC Zhu (gc-skyscanner) Mar 17, 2026 •

edited

Loading