fix(web): upgrade markstream-vue to 1.0.9-beta.1 and enable Monaco code highlighting - #2415
Conversation
🦋 Changeset detectedLatest commit: bc630c0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
❌ Nix build failed Hash mismatch in
Please update |
commit: |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 67f2ae3838
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| showCollapseButton: false, | ||
| showFontSizeButtons: false, | ||
| loading: false, | ||
| monacoOptions: { lineNumbers: false }, |
There was a problem hiding this comment.
This only adds Monaco options/dependencies, but this component still passes :code-renderer="renderPlan.codeRenderer", and renderPlan can only produce shiki (or pre for heavy messages, with streaming forced to shiki). In normal chat messages the Monaco/stream-diffs renderer is therefore never selected, so the intended Monaco highlighting and the line-number override here do not take effect; switch the non-heavy path to the Monaco renderer if this change is meant to enable it.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
This is not accurate for markstream-vue 1.0.7+. The shiki renderer kind is a legacy name kept for compatibility — its dispatch resolves to the same Monaco-based component as the monaco kind: 'shiki' → ViewportDeferredMarkdownCodeBlockNode → index5.js (MarkdownCodeBlockNode) → imports CodeBlockNode.js (the stream-diffs/Monaco one). Verified empirically in a minimal repro: with code-renderer="shiki" the page loads both index5.js and CodeBlockNode.js and renders through the Monaco component, so the newly installed peers take effect on this exact path. codeBlockMonacoOptions is the one that only reaches the monaco kind — which is precisely why the lineNumbers override rides inside codeBlockProps (same pattern as kimi-code-app#155, which has been running code-renderer="shiki" against the Monaco component since it merged).
1 participant
What changed
apps/kimi-web:markstream-vue1.0.7 → 1.0.9-beta.1, and add the optional peers it needs for enhanced rendering (stream-diffs,stream-monaco,monaco-editor) — the same set kimi-code-app added in https://github.com/MoonshotAI/kimi-code-app/pull/155.codeBlockProps.monacoOptions.lineNumbers = false: chat code blocks show no gutter (line numbers eat reading width and every chat block starts at line 1), mirroring kimi-code-app.Why
1. Fallback-rendered code blocks show line numbers overlapping the code (reported in #2347 — thanks @yicun for the accurate analysis). Root cause: in markstream-vue 1.0.7, when the Monaco enhancement is unavailable,
CodeBlockNoderenders its standalone fallback<pre>as the component root, but its scoped layout rules are descendant selectors that cannot match a root — the gutter renders while the code gets no gutter reservation. Fixed upstream in Simon-He95/markstream-vue#602 (plain scoped selectors that also match a component root), released in1.0.9-beta.1. This supersedes the local-workaround approach of #2347.2. kimi-web currently gets no enhanced highlighting at all. The 1.0.7 upgrade (425cfdf) did not add the new optional peers, so the Monaco loader always fails and every code block renders through the plain fallback. With the peers installed, blocks get real Monaco highlighting; when enhancement is unavailable, the fallback now renders correctly too.
Verification
pnpm --filter @moonshot-ai/kimi-web check:style(baseline, no new findings)pnpm --filter @moonshot-ai/kimi-web typecheckpnpm --filter @moonshot-ai/kimi-web test(653 tests)pnpm --filter @moonshot-ai/kimi-web buildpadding-left: 45.35px(= thecalc(6ch + 2px)gutter) with no overlap (before:padding-left: 0, 38px overlap).