Repository navigation
feat(widget): show a New reply button while reading earlier messages - #447
srujankaleru2007 wants to merge 2 commits into
Conversation
Add an accessible, localized jump-to-latest button with reduced-motion support and preserve the existing stream follow threshold. Include regression coverage, API snapshot, documentation, and a minor changeset.
anurag629
left a comment
There was a problem hiding this comment.
Thanks @srujankaleru2007. The behavior is right: the pill only shows when you're scrolled up, it hides on a manual scroll or a click, and sending still jumps to the bottom. Build, typecheck, test:coverage, lint (same as dev), api:check and the full e2e suite pass locally. A few things before it can go in:
-
The focus ring from the issue is missing.
.cc-new-replyisn't in the:focus-visiblelist atpackages/widget/src/styles/widget.css:591-598, so the focused pill gets the browser's default outline instead of--cc-focus-ring. The e2e check ate2e/tests/stream-render.spec.ts:128can't catch it: the pill always hasbox-shadow: var(--cc-shadow), so it's nevernone. Please add.cc-new-reply:focus-visibleto that list, and have the test compare the focused box-shadow with the unfocused one. -
Clicking or pressing Enter on the pill hides the button while it still has focus (
packages/widget/src/dom/messages.ts:81-87), so focus falls todocument.body. In the popup that breaks Escape-to-close and the Tab trap, since both listen on the panel (packages/widget/src/dom/panel.ts:55-80). If the pill had focus, move it to the message input before hiding it, and add a line to the keyboard e2e test that checks where focus ends up after Enter. -
The arrow is part of the accessible name, so screen readers say "New reply down arrow". Keep the label as just the
newReplystring and draw the arrow in CSS, for example.cc-new-reply::after { content: " ↓" / ""; }. That also makesrefreshReplyLabelsimpler, and the locators atstream-render.spec.ts:87and:119becomename: 'New reply'. -
Please drop the changes to the mangle regex in
packages/widget/vite.config.ts:24andpackages/widget/vite.panel.config.ts:30. They rename internals across the whole bundle, which needs its own review: a name that later becomes a config field would get renamed in the CDN build only, and the unit tests run againstsrc, so they wouldn't notice. The panel being this close to its budget isn't on you. I'll make room in a separate PR, and you can rebase on it. Without the mangle change this PR is 17.11 kB on the panel and 19.19 kB on the single file, so anything you can trim from the feature itself helps too.
Small one: the test at packages/widget/tests/dom/stream.test.ts:260 registers an old locale that stays in the global registry for the rest of the file. A cleanup in afterEach would keep the tests independent.
|
@srujankaleru2007 the room is there now: #453 freed about 240 B on the panel (16.6 kB) and 300 B on the single file (18.62 kB), so this PR fits without its mangle changes. Rebase on dev and drop the edits to both |
|
@srujankaleru2007 a heads up: #469 raised the panel budget to 18 kB and the single file to 20 kB, so the New reply button has room. The other points from my review still stand. |
feat(widget): show a New reply pill while reading earlier messages
What does this change?
Show a New reply ↓ button at the bottom of the log when a reply arrives while the visitor reads earlier messages. Clicking it scrolls to the latest reply smoothly, or instantly with reduced motion; returning to the bottom by hand also hides it.
The button is outside the live log, reuses theme and focus styles, and uses logical positioning for RTL. Adds the
newReplylocale string with English fallback, support for updating that label, documentation, the API snapshot, regression tests, and a minor widget changeset. Extends private-property minification to keep the existing bundle budgets unchanged.Closes #420
How I tested this
pnpm -r buildandpnpm -r typecheckpass. On Windows, the existing build script needs Git's Unix utilities on PATH forrm.pnpm sizepasses: panel 16.92 kB / 17 kB, single-file widget 18.99 kB / 19 kB gzipped.pnpm lintexits 0. Its package globs are unsupported on Windows, so Biome was additionally run with explicit package directories: no errors, existing warnings only.pnpm test:coverage --maxWorkers=4 --testTimeout=60000 --coverage.reportsDirectory=coverage/full(1,794 passed, 65 skipped; all thresholds met). The timeout accommodates slow Cloudflare concurrent-append conformance cases on this Windows host.Screenshot: attach the adjacent
new-reply.png, captured by the final Chromium regression with the keyboard focus ring visible.AI assistance
OpenAI Codex implemented the button, locale wiring, styles, tests, docs, API snapshot, and changeset, and ran validation.
Checklist
devpnpm -r build, unit tests with coverage, andpnpm -r typecheckpass locally (coverage uses the Windows timeout override above)Local branch:
codex/widget-new-reply-pillLocal commit:
aa74ce7Worktree:
C:\Users\sruja\.codex\worktrees\widget-new-reply\chatcops