perf(console): keep long chat sessions responsive

[rayrayraykk]

Description

Improves Console responsiveness for long chat sessions, especially while an assistant response is streaming or the user scrolls through Markdown-heavy history.

The main sources of repeated work were:

• every streaming update reparsed the latest Markdown synchronously;
• completed host messages could rerender even when their data was unchanged;
• wheel handling resolved computed styles for non-scrollable Markdown ancestors.

This PR:

• defers Markdown updates so obsolete intermediate stream states can be skipped;
• memoizes host message rendering;
• keeps user-message anchors enabled with the lighter navigator variant, avoiding minimap-style per-bubble position tracking;
• avoids computed-style resolution for ancestors that cannot scroll;
• adds focused regression coverage for the long-chat configuration, containment CSS, and scroll hot path.

Related Issue: None

Security Considerations: None. The change is limited to Console rendering and scroll behavior; it does not alter authentication, persistence, or network boundaries.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Refactoring

Component(s) Affected

• Core / Backend (app, agents, config, providers, utils, local_models)
• Console (frontend web UI)
• Channels (DingTalk, Lark, QQ, Discord, iMessage, etc.)
• Skills
• CLI
• Documentation (website)
• Tests
• CI/CD
• Scripts / Deploy

Checklist

• I ran pre-commit run --all-files locally and it passes
• If pre-commit auto-fixed files, I committed those changes and reran checks
• I ran tests locally (pytest or as relevant) and they pass
• Documentation updated (not needed; no user-facing API or configuration change)
• Ready for review

For Channel Changes (DingTalk, Lark, QQ, Console, etc.)

• I ran ./scripts/check-channels.sh (or ./scripts/check-channels.sh --changed) and it passes
• Contract test exists in tests/contract/channels/test_<channel>_contract.py (REQUIRED)
• Contract test implements create_instance() with proper channel initialization
• All 19 contract verification points pass (see tests/contract/channels/__init__.py)
• Optional: Unit tests in tests/unit/channels/test_<channel>.py for complex internal logic

Not applicable: this changes the Console chat renderer, not a messaging channel implementation.

Testing

cd console
npm run test:run -- src/pages/Chat
# 30 test files passed; 255 tests passed

npx tsc -b --noEmit
# passed

npm run build:prod
# production build and Monaco CSS verification passed

git diff --check
# passed

Focused checks also passed for the changed Console files. A card-registration contract test verifies that host card exports remain callable functions, as required by the SDK dispatcher. The existing large Chat/index.tsx lint findings were not introduced or modified by this PR.

Evidence

A local performance fixture was generated and loaded through the real chat history API:

• 1,000 complete user/assistant turns;
• 2,000 AgentScope context messages;
• 2,300 Console bubbles after reasoning/tool blocks were expanded;
• 100 reasoning and tool-call/result groups;
• 6.63 MB persisted session containing long Markdown, tables, code fences, and logs;
• GET /api/chats/<fixture-id> returned HTTP 200 with all 2,300 messages (approximately 0.15 seconds on the test machine).

Backend deserialization and the production frontend build both completed successfully with the fixture shape used by the Console.

Additional Notes

User-message anchors remain enabled. Navigator mode is retained because it avoids the minimap variant’s per-bubble position calculation and observation path.

[github-actions]

Welcome to QwenPaw! 🐾

Hi @rayrayraykk, this is your 256th Pull Request.

🙌 Join Developer Community

Thanks so much for your contribution! We'd love to invite you to join the official QwenPaw developer group! You can find the Discord and DingTalk group links under the "Developer Community" section on our docs page:
https://qwenpaw.agentscope.io/docs/community

We truly appreciate your enthusiasm—and look forward to your future contributions! 😊

We'll review your PR soon.

[Copilot]

Pull request overview

Improves Console rendering performance for long chat sessions by reducing work during streaming updates and scroll events, and by allowing the browser to skip layout/paint for offscreen message bubbles.

Changes:

• Optimizes the wheel scroll hot path by avoiding style resolution when elements cannot scroll, with a targeted regression test.
• Adds a long-chat configuration toggle to disable the vendor “navigator” user-message anchor scanning, plus coverage.
• Defers expensive Markdown parsing during streaming and applies content-visibility containment for offscreen bubbles, with CSS regression coverage.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
console/src/pages/Chat/messageScroll.ts	Reorders scrollability checks to avoid getComputedStyle work on non-scrollable ancestors.
console/src/pages/Chat/messageScroll.test.ts	Adds a regression test to ensure non-scrollable ancestors don’t trigger style resolution.
console/src/pages/Chat/longChatPerformance.ts	Introduces a long-chat performance config that disables user-message anchor measurement.
console/src/pages/Chat/longChatPerformance.test.ts	Verifies the long-chat performance configuration stays disabled.
console/src/pages/Chat/index.tsx	Wires the long-chat anchor configuration into the vendor bubble list theme options.
console/src/pages/Chat/index.module.test.ts	Adds regression assertions for containment/viewport-skipping CSS.
console/src/pages/Chat/index.module.less	Applies content-visibility: auto and contain-intrinsic-size to offscreen message bubbles.
console/src/pages/Chat/HostBubbles.tsx	Defers Markdown content updates during streaming and memoizes host message rendering.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[zhaozhuang521]

LGTM