feat: #4636 Mermaid chart rendering Retry functionality

[sairamreddy2211]

Description

This PR improves Mermaid diagram rendering and error recovery in the webview. It fixes syntax issues that caused rendering failures, adds robust error handling, and allows users to quickly resend and regenerate only the faulty Mermaid code block without affecting the rest of the answer.

Changes Made

Fixed syntax issues in Mermaid diagrams that caused rendering failures
Improved error handling for Mermaid chart rendering
Added a "Retry" button to regenerate only the problematic diagram
Ensured only the faulty diagram is regenerated, preserving the rest of the answer
Made error and code parameters optional and provided default values for better type safety
Technical Details

New Files

src/core/prompts/instructions/fix-mermaid.ts – Generates instructions for fixing Mermaid diagrams
Modified Files

src/core/prompts/instructions/instructions.ts – Integrated Mermaid fix instructions, made parameters optional, and added defaults
src/core/webview/webviewMessageHandler.ts – Handles new "fixMermaidChart" message type
src/shared/WebviewMessage.ts – Added "fixMermaidChart" to message types
webview-ui/src/components/common/MermaidBlock.tsx – Added "Retry" button and improved error UI/UX
Localization files: Added "retry" string in multiple languages
webview-ui/src/i18n/locales/en/common.json (and other language files)
Testing

All changes are type-safe and TypeScript compiles successfully
Linting passes with no errors
Build process completes without errors
Manual testing confirms improved error handling and retry functionality for Mermaid diagrams
How to Use

Trigger a Mermaid diagram rendering error in the webview
Use the new "Retry" button to regenerate only the faulty diagram
The rest of the answer remains unchanged, and the error message is improved
Notes

This update improves the user experience for working with Mermaid diagrams in the webview
All error handling and UI changes are fully localized

---

Important

Adds retry functionality for Mermaid chart rendering with improved error handling and localization support.

• Behavior:
  • Adds a "Retry" button in MermaidBlock.tsx to regenerate only faulty Mermaid diagrams without affecting others.
  • Improves error handling for Mermaid chart rendering in MermaidBlock.tsx.
• Messages:
  • Adds fixMermaidChart message type in WebviewMessage.ts and handles it in webviewMessageHandler.ts.
• Instructions:
  • Adds createMermaidFixInstructions() in fix-mermaid.ts to generate instructions for fixing diagrams.
  • Integrates Mermaid fix instructions in instructions.ts.
• Localization:
  • Adds "retry" string to multiple language files for localization support.

^{This description was created by for b758065. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Thanks for implementing this retry functionality for Mermaid diagrams! The UI implementation looks clean and the i18n support is comprehensive.

I noticed the current approach sends the entire chat context when retrying a failed diagram. I'm wondering if it might be more efficient to handle this similar to how we do context condensing or enhance prompt features - as a separate API request with just the error and diagram code. This would:

• Significantly reduce token usage
• Make retries faster and more focused
• Avoid potential context pollution
• Follow patterns we use elsewhere in the codebase

Also, having the Mermaid fix prompt configurable in the Settings (like our other prompts) could give users more control over how their diagrams get fixed.

I'm curious to hear your thoughts on this approach!

[hannesrudolph]

stale