feat(ui): render mermaid diagrams in chat (experimental, admin opt-in)#25
Merged
Conversation
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
xychart-beta ignores the generic mermaid themeVariables and reads its own nested xyChart block, so plots fell back to mermaid's default palette and the title/axis text was near-invisible on the chat background. Drive its plot colors from the theme primary/secondary and all text/axis colors from on-surface, keeping XY charts on-brand and legible in light and dark mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
xychart-beta is the newest, least-represented mermaid syntax in model training data — exactly the diagram type we prioritize — so models (and especially smaller/local ones) often emit invalid xychart code. Anchor it with one known-valid example in the system prompt; the well-known diagram types still rely on the capability hint alone. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mermaid rendering is still experimental, so restrict the opt-in to admins (mirroring the tool-exploration pattern): hide the toggle in the settings dialog for non-admins and gate the localStorage-backed flag on isAdmin. The dialog itself stays open to all users (the trace-consent toggle still needs to be reachable by everyone). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Permanent manual-testing fixture: visualizes the PM2.5 per-station averages already in the mock conversation as an xychart-beta, so the mermaid rendering path is easy to exercise on the _dev/chat page (toggle the experimental Mermaid option on). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Standing fixture for the inline render error and the "Corriger ce diagramme" fix button. Clearly labelled and commented as broken on purpose. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Add experimental Mermaid diagram rendering to the agent chat UI, behind an
admin-only, per-user opt-in toggle.
What changed
mermaiddependency (dynamically imported, kept out of the initial bundle).<pre class="mermaid">container for ```mermaid fenceswhen the flag is on; a post-render pass (
utils/mermaid.ts) turns each into an SVGindependently, so one bad diagram can't break the rest of a message.
xyChartblock so xychart-beta plots/axes stay on-brand and legible).MarkdownContent.vuewrapper replaces the inlinev-htmlrender inAgentChatMessages; re-renders on stream end and theme change.sends a correction turn (visible user message + hidden context built by
formatMermaidFix).mermaidfew-shot (xychart-beta) appended to the system prompt when enabled.inside is gated behind
isAdmin.formatMermaidFix;dev chat mocks gain a valid and an intentionally-invalid diagram.
Why: experiment with letting the assistant visualize quantitative data as charts
directly in the chat, without committing it to all users yet.
Regression risks:
AgentChatHeaderlostv-if="isAdmin"onthe cog). The dialog's Info tab is not gated — it now exposes the full system
prompt and every tool's description + JSON input schema to any user, including
anonymous/external users in embedded widgets. Previously this was reachable only by
admins. Confirm this disclosure is intended; if only trace-consent settings were
meant to be exposed, the Info tab (and tool-exploration toggle) should stay
admin-gated.
MarkdownContent.vuewrapper instead of inlinev-html. Behavior should beidentical when mermaid is off, but it's a shared rendering path for every message.
renderMarkdown/renderStreamingMarkdowngained an optionalopts.mermaidargbacked by a module-level
mermaidActiveflag set synchronously before each parse.Safe today (only consumed by
MarkdownContent, parsing is synchronous), but it isshared mutable state to keep in mind.
Cleanup (non-blocking):
AgentChatHeaderisAdminprop is now dead (and still passed fromAgentChat.vue).MarkdownContent.vueintroduces onevue/no-v-htmllint warning — theeslint-disable-next-linecomment targets the<div>line, not thev-htmlattribute line, so it doesn't suppress.