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

Ouverte
  • Quelque chose ne va pas ?
#420 3 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@srujankaleru2007 y travaille déjà.

Depuis le 28/10/2026.

  • #447 par @srujankaleru2007 — ouverte

Évaluation

Cette issue n'a pas encore été évaluée.

Description

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
Langage dominant
TypeScript
Étoiles
13
Forks
7
Merge moyen
3 h 15 min
PR mergées (30 j)
329

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de codercops/chatcops

Toutes les issues de codercops/chatcops

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.