feat[mermaid]:integration of mermaid

[asminkarki012]

• What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
  feature
• Why was this change needed? (You can also link to an open issue here)
  🚀 Feature: mermaid.js.org in conversation rendering #1634
• Other information:

[vercel]

@asminkarki012 is attempting to deploy a commit to the Arc53 Team on Vercel.

A member of the Team first needs to authorize it.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 28.88%. Comparing base (3e1ec23) to head (55502b3).
Report is 29 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1732      +/-   ##
==========================================
+ Coverage   28.35%   28.88%   +0.53%     
==========================================
  Files          85       89       +4     
  Lines        5273     5449     +176     
==========================================
+ Hits         1495     1574      +79     
- Misses       3778     3875      +97     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.

Files not reviewed (1)

• frontend/package.json: Language not supported

Comments suppressed due to low confidence (2)

frontend/src/components/MermaidRenderer.tsx:35

• [nitpick] Consider using a more robust unique ID generation method (e.g., a UUID library) to minimize potential collisions if multiple diagrams are rendered in quick succession.

const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;

frontend/src/components/MermaidRenderer.tsx:225

• [nitpick] Although using the array index as a key is common for static lists, consider using a unique identifier for each download option in case the list order changes in the future.

<li key={index}>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-gpt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2025 8:18am

[asminkarki012]

Use lazy rendering or virtualization for the sources list, especially if the number of sources grows significantly.Use React.memo or useMemo for components like ToolCalls and Sources to avoid unnecessary re-renders. While you are code renders correctly, it would be slighty efficient consider optimization technique

@Charlesnorris509
Thanks for the suggestions!
Right now, I’m mainly working on the Mermaid rendering part—not the sources list or Tools calls. Could you help me understand what I might be missing there? A bit more context would be great. And yep, I’m definitely looking to optimize, so any tips are super welcome!

[Charlesnorris509]

@asminkarki012 On the mermaidRendering.tsx file, you could use Lazy rendering to minimize the number of ressources needed to process the components of the files it basically divide the code, stores the files on intermediate storage, and only reprocess the files when it's changed. Here's a file that goes in depth on that process
https://vitiya99.medium.com/supercharging-react-typescript-performance-optimization-techniques-8b19de6e664e

[asminkarki012]

@asminkarki012 On the mermaidRendering.tsx file, you could use Lazy rendering to minimize the number of ressources needed to process the components of the files it basically divide the code, stores the files on intermediate storage, and only reprocess the files when it's changed. Here's a file that goes in depth on that process https://vitiya99.medium.com/supercharging-react-typescript-performance-optimization-techniques-8b19de6e664e

thank you for clarifying,
sure I am currently working on implementing the optimization technique that you have mentioned here.