docs(chat): wire a Markdown renderer into the chat page samples - #3564
Conversation
|
Warning Review limit reached
Next review available in: 6 seconds Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
Comment |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2172b4e42e
ℹ️ About Codex in GitHub
Your team has set up Codex to 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 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
The chat page samples in create-frontend and chat-ui told the reader to write an `app/page.tsx` that renders `<Chat>` with no Markdown renderer installed. `veryfront/markdown` presents plain escaped source until a renderer is supplied, so following either page verbatim produces a chat that shows the assistant's raw Markdown and logs the framework's own missing-renderer warning. Every starter scaffolds `app/markdown-renderer.tsx` and the provider around `<Chat>`, so "Replace app/page.tsx" actively removed working setup the reader already had. Neither "Verify it worked" checklist had an item that would notice. Wrap both samples in `MarkdownRendererProvider`, explain why it is required, show how to create the renderer in a project that was added to rather than scaffolded, and add a verification item that fails when the answer renders as raw source.
Review follow-up on two points, both correct: - "Every starter scaffolds app/markdown-renderer.tsx" is false. The `minimal` and `agentic-workflow` templates ship without a renderer (only the chat starters under cli/templates/files/ carry the file), so a reader on either one copies a sample that imports a module they do not have. Name those two templates on both pages. - `npm install react-markdown@9.0.3` records `^9.0.3`, contradicting the adjacent "pin to an exact version" requirement and letting the module pipeline resolve a later release. Add `--save-exact` to both copies of the command.
2172b4e to
1e2e11f
Compare
Found during a DX dogfood walk of the published docs (veryfront 0.1.1228). Two backlog findings, one root cause, so they are fixed together.
Symptom
Following either chat page verbatim produces a chat that renders the assistant's raw Markdown source instead of formatted text.
- **Static Type Checking**: .... Even a plain answer rendered inside acodenode.**markers visible.Both emitted the framework's own warning in the browser console:
Root cause
veryfront/markdownpresents plain escaped source until a renderer is installed — the right default for a standalone<Markdown>, but wrong for chat, where the assistant writes Markdown.src/react/components/chat/missing-renderer-warning.tssays so directly: "In chat it is almost always a mistake."Every starter scaffolds
app/markdown-renderer.tsxand wraps<Chat>inMarkdownRendererProvider(cli/templates/files/ai-agent/app/page.tsx). Both doc samples dropped that wrapper:create-frontend.mdsaid "Replaceapp/page.tsx" with a sample that has no provider — so the doc actively deleted working setup the reader already had, and never mentioned a renderer anywhere (0 hits for "markdown" in the whole page).chat-ui.md's primary "Add the preset UI" sample also dropped it. The guide does have a "Render Markdown in chat" section, but it is ~280 lines below the sample with no pointer from it, so a reader copy-pasting the first block never reaches it.Neither page's "Verify it worked" checklist had an item that would catch the degradation:
create-frontendonly checked that the response streams, andchat-ui's only Markdown item covered standalone<Markdown>, not chat answers. Both checklists passed on a visibly broken chat.Fix
Minimal and doc-only:
app/page.tsxsamples inMarkdownRendererProvider, matching the scaffold.create-frontenda short "Supply the Markdown renderer" section for readers who added Veryfront to an existing project rather than scaffolding, with the exact-pinned parser install.No source or template changes — the framework and the scaffold were already correct; only the prose disagreed with them.
Regression test
tests/docs/guide-content.test.ts—"wires a Markdown renderer into every chat page the docs tell you to write".It lives there because this is a doc-content contract, which is exactly what that suite holds (runtime floors, guide wording, CLI-flag accuracy), and because it is in the
deno task docs:validategate that CI already runs on every docs change. A code-level test could not catch it: the framework behaves correctly here — only the prose was wrong.The test extracts the first
// app/page.tsxfenced block from each page and requires the provider, theveryfront/markdownimport, and the./markdown-renderer.tsximport; it also requires each page to show how to create that file, and requires the "Verify it worked" section to check for rendered rather than raw Markdown.Confirmed red before the fix, for the right reason, and independently for each page:
Reverting only
chat-ui.mdreproduces the same failure on its own, so the test pins both halves rather than one.Verification
deno task docs:validatepasses end to end: 42 reference pages, 68 guides, 48 guide-example suites (94 steps), and all 1228 doc links — so the new#render-markdown-in-chatanchor and the cross-page link resolve.deno fmt --checkanddeno lintclean on all three files.tests/docs/guide-examples.test.tshas 3TS2532errors under type-check; thedocs:validatetask runs that file with--no-check, and I did not modify it.Related, deliberately not touched
MISSING_MARKDOWN_RENDERER_WARNING(src/react/components/chat/missing-renderer-warning.ts:29) points athttps://veryfront.com/docs/guides/chat-ui#render-markdown-in-chat— missing the/codesegment, so it 404s. That is a separate backlog finding owned by another agent; left alone here. The anchor half of it is now correct, since this PR keeps that heading and links to it.