Skip to content
This repository was archived by the owner on May 15, 2026. It is now read-only.

Handle Mermaid validation errors#3112

Merged
mrubens merged 3 commits into
mainfrom
mermaid_validator
May 2, 2025
Merged

Handle Mermaid validation errors#3112
mrubens merged 3 commits into
mainfrom
mermaid_validator

Conversation

@mrubens
Copy link
Copy Markdown
Collaborator

@mrubens mrubens commented May 2, 2025

Before:
Screenshot 2025-05-02 at 12 28 03 AM

After:
Screenshot 2025-05-02 at 12 27 42 AM


Important

Enhances Mermaid diagram error handling and UI with internationalized messages and copy-to-clipboard functionality.

  • Error Handling:
    • Adds error state error and toggle isErrorExpanded in MermaidBlock.tsx.
    • Displays error message and code block when Mermaid parsing fails.
  • UI Enhancements:
    • Adds CopyButton for copying code with feedback in MermaidBlock.tsx.
    • Updates loading and error messages with translations in common.json files for multiple languages.
  • Internationalization:
    • Adds mermaid.loading and mermaid.render_error translations in common.json for languages including en, de, fr, es, ru, zh-CN, and others.

This description was created by Ellipsis for 54ae7b1. You can customize this summary. It will automatically update as commits are pushed.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 2, 2025

⚠️ No Changeset found

Latest commit: 54ae7b1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@dosubot dosubot Bot added the size:L This PR changes 100-499 lines, ignoring generated files. label May 2, 2025
@mrubens mrubens force-pushed the mermaid_validator branch from 22a4218 to 62f62bf Compare May 2, 2025 04:29
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we run this past the "Design Engineer" mode? Seems like a lot of could be done with Tailwind.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did use the Design Engineer mode fwiw... maybe because there's so much surrounding styled components it decided to match?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't explicitly ask for Tailwind - I just asked it to build an error display like we have for unsuccessful diffs.

Copy link
Copy Markdown
Contributor

@KJ7LNW KJ7LNW May 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use <CodeAccordian> which is what all the other tool chevron-expander things use (it embeds <CodeBlock> and Shiki supports mermaid).

Correction, that may not be 100% right... I know code accordion is used for terminal output expansion, but I am sure about the larger chevrons for the API drop downs... however I can say for certain that the other larger chevrons for tool API output use something like <CodeBlock language="mermaid" source={code}>.

it is a common enough structure that maybe we should have one.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just updated to use <CodeBlock language="mermaid" source={code}> for consistency, though I'm not sure how well the syntax highlighting will work on the invalid mermaid.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there not an existing component for this?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not in a shared place, I don't think. Probably should be though.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like something that we probably already have in a common / shared section.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have this exact translation anywhere else, but in theory it would be nice to use a shared "Copied" or something. Doesn't seem to exist yet though.

@KJ7LNW
Copy link
Copy Markdown
Contributor

KJ7LNW commented May 2, 2025

Is there not an existing component for this [copy button]?

You could use <CodeBlock language="mermaid" source={failedrender}> for UI consistency w/ copy and other features. Highlight specific to mermaid should work, because Shiki supports it, so Roo does too: https://shiki.style/languages

@mrubens mrubens force-pushed the mermaid_validator branch from 62f62bf to b48ad35 Compare May 2, 2025 04:56
@dosubot dosubot Bot added the lgtm This PR has been approved by a maintainer label May 2, 2025
@mrubens mrubens merged commit da9b857 into main May 2, 2025
12 checks passed
@mrubens mrubens deleted the mermaid_validator branch May 2, 2025 05:23
@github-project-automation github-project-automation Bot moved this from New to Done in Roo Code Roadmap May 2, 2025
SmartManoj pushed a commit to SmartManoj/Raa-Code that referenced this pull request May 6, 2025
* Update Reset Button color to Red

* Add Changeset
mehmetsunkur pushed a commit to mehmetsunkur/Roo-Code that referenced this pull request May 16, 2025
* Handle Mermaid validation errors

* PR feedback

* More PR feedback
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

lgtm This PR has been approved by a maintainer size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants