Widget: a "New reply" button when the visitor has scrolled up
メンテナーはふだん 1 日以内に返信
評価
この issue はまだ評価されていません。
説明
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 andaddMessageare 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 fakesscrollHeightandclientHeight) - 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 lintandpnpm sizepass
- 主要言語
- TypeScript
- スター
- 13
- フォーク
- 7
- 平均マージ
- 3時間 39分
- マージ済み PR（30日）
- 275
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
codercops/chatcops のほかの issue
-
Widget: fetch signed-in visitor tokens when a session is requested対応中かも @piyusshhjangid が今日担当しました。 オープンenhancement
難易度 3/5 1〜2日 初心者へのやさしさ 63/100
codercops/chatcops#461 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
Widget: support CSP nonces for injected styles対応中かも @piyusshhjangid が今日担当しました。 オープンenhancement
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
codercops/chatcops#460 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
Server: validate `rateLimit.windowMs` before creating the limiter対応中かも @ashutoshpalhare が今日担当しました。 オープン
codercops/chatcops#452 · コメント 1 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
chatcops test: --url to test a deployed server対応中かも @srujankaleru2007 が 1 日前に担当しました。 オープンenhancement hacktoberfest testing
codercops/chatcops#419 · コメント 3 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
chatcops test: GitHub Actions reporter対応中かも @mohithreddydonala37 が 1 日前に担当しました。 オープンenhancement hacktoberfest testing
codercops/chatcops#417 · コメント 3 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
codercops/chatcops の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
better-auth/better-auth#12132 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信
-
o8 next debug build aborts on Glass to Dark appearance switch (nil identifier messaged before check)オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
hurttlocker/o8#5112 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
webrecorder/wabac.js#386 ·
-
needs-triage
難易度 1/5 1〜3時間 初心者へのやさしさ 92/100
agent-of-empires/agent-of-empires#5098 · コメント 1 件 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信