Widget: a "New reply" button when the visitor has scrolled up

Offen
  • Stimmt etwas nicht?
#420 3 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@srujankaleru2007 arbeitet bereits daran.

Seit 28.10.2026.

  • #447 von @srujankaleru2007 — offen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

enhancement widget

A streaming reply no longer pulls the chat log down while the visitor reads an earlier message (#402): the log only follows new text when it's within 48px of the bottom. A visitor who scrolled up doesn't see that a reply is arriving below, though. This adds a small "New reply" pill, from the widget design, that shows in that case and takes them down.

What it should do

  • When text arrives for a reply, or a new message is added, while the log is scrolled up (not nearBottom()), show a pill at the bottom of the log: "New reply ↓".
  • Clicking it scrolls to the bottom (smoothly, unless prefers-reduced-motion) and hides it. Scrolling to the bottom by hand hides it too.
  • It's a real <button> with a visible focus ring (--cc-focus-ring). It isn't announced by itself; the live region from #410 already reads the finished reply.
  • The text is a new locale string, newReply, with an English default. Other languages fall back to English until #55 adds it.

Where

  • packages/widget/src/dom/messages.ts: nearBottom() (line 170) is the check, and the stream render and addMessage are where it's used. scrollToBottom() is at line 285.
  • Styles in packages/widget/src/styles/widget.css. Use the theme tokens so it works in light and dark, and logical properties for RTL.
  • The panel has about 900 B left of its 17 kB budget (pnpm size), so keep it small.

Acceptance criteria

  • Unit tests: shown when text arrives while scrolled up, hidden when scrolled down by hand, and click scrolls and hides (see the scroll test in packages/widget/tests/dom/stream.test.ts, which fakes scrollHeight and clientHeight)
  • Not shown while the log is at the bottom
  • The existing e2e test new text doesn't pull the log down (e2e/tests/stream-render.spec.ts) still passes, and a line there checks that the pill is visible
  • A changeset for @chatcops/widget (minor)
  • pnpm test:coverage, pnpm lint and pnpm size pass
Vorherrschende Sprache
TypeScript
Sterne
13
Forks
7
Ø Merge
3 Std. 15 Min.
Gemergte PRs (30 T.)
329

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus codercops/chatcops

Alle Issues in codercops/chatcops

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.