Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#420 3 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@srujankaleru2007 ya está trabajando en esto.

Desde el 28/10/2026.

  • #447 de @srujankaleru2007 — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

enhancement hacktoberfest 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
Lenguaje dominante
TypeScript
Estrellas
13
Forks
7
Merge medio
3 h 39 min
PR fusionados (30 d)
275

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/chatcops

Todos los issues de codercops/chatcops

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.