Widget: a "New reply" button when the visitor has scrolled up
维护者通常 1 天内回复
@srujankaleru2007 已经在做这个了。
开始于 2026年10月28日。
评估
这个 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 小时 30 分钟
- 30 天内合并 PR
- 258
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
codercops/chatcops 的其他 Issue
-
Widget: `data-welcome-bubble-delay="3s"` becomes a 3 ms delay可能已有人在做 @prakashNalla 今天认领。 未关闭
codercops/chatcops#445 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
chatcops test: --url to test a deployed server可能已有人在做 @srujankaleru2007 今天认领。 未关闭enhancement hacktoberfest testing
codercops/chatcops#419 · 3 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
chatcops test: GitHub Actions reporter可能已有人在做 @mohithreddydonala37 今天认领。 未关闭enhancement hacktoberfest testing
codercops/chatcops#417 · 3 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
chatcops test: JUnit reporter and --output可能已有人在做 @kachamsiddarth 今天认领。 未关闭enhancement good first issue hacktoberfest testing
codercops/chatcops#416 · 3 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
chatcops test: calls-tool and no-tool-call assertions可能已有人在做 @bhushan4work 今天认领。 未关闭enhancement good first issue hacktoberfest testing
codercops/chatcops#412 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
查看 codercops/chatcops 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 76/100
marmelab/react-admin#11431 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 88/100
db-ux-design-system/core-web#8655 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 74/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 76/100
stripe/react-stripe-js#728 ·
-
[Upload Grade C dataset] the pop-up changes it's size while uploading the document => Jumping effect未关闭bug
难度 2/5 1-3 小时 新手友好度 66/100
epam/statgpt-admin-frontend#305 ·
维护者通常 1 天内回复