Repository navigation
Draw the assistant's replies as formatted text, not Markdown source - #65
Merged
Merged
Conversation
The assistant writes its reply in Markdown, and the panel showed it as plain text with the asterisks, dashes and hashes still in it. Replies now go through a Markdown component (react-markdown with remark-gfm, as Notes uses): bold and italics, lists, code, quotes, links and tables are drawn as such. Raw HTML in a reply is never rendered and a script link is dropped, so no separate sanitiser is needed. Headings become bold lines rather than page headings, links inside the app stay in it and others open in a new tab. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V1geD2ELWgL2sDpxYbx3Aw
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The assistant writes its reply in Markdown, but the panel showed it as plain text with the asterisks, dashes and hashes still in it. Replies now go through a new
Markdowncomponent (react-markdownwithremark-gfm, the same libraries and versions Notes uses). It draws:bold and italics
lists
code (inline and fenced)
quotes
links
tables
Links: a path inside the app stays inside it. Anything else opens in a new tab with
noopener.Safety: raw HTML in a reply is never rendered and a
javascript:link is dropped, so no separate sanitiser is needed.Headings: they become bold lines rather than page headings, because the panel already has its own title.
Styling: every element is styled in the component rather than by Tailwind's typography plugin, so a reply matches the rest of the panel in light, dark and custom themes.
Only the assistant's reply changes. The user's own prompt and the proposal cards are untouched. The same change is going into GVC.
Test plan
npm run lint: cleannpm test: 493 passing, including the new tests:Markdown.test.tsxcovers bold, lists and code, headings, tables, links, and raw HTML and script links being refused.AssistantPanel.test.tsxcovers a Markdown reply being drawn instead of showing its marks.npm run build: OK, which also typechecksDeployment
Only the frontend changes (new dependencies
react-markdownandremark-gfm, installed during the build). No backend change, no migration, no setting.Hard-refresh afterwards, then ask the assistant something that makes it answer with a list or bold text. It should be drawn as formatted text with no asterisks showing.
Generated by Claude Code