feat: Add Mermaid renderer support in chat window (#5402)

[aibysid]

• Add mermaid.js dependency to render Mermaid diagrams
• Modify CodeBlock component to detect and render Mermaid code blocks
• Support theme-aware rendering (light/dark mode)
• Add error handling with fallback to syntax highlighting
• Preserve existing copy/download functionality

Sample output:

[gemini-code-assist]

Summary of Changes

Hello @aibysid, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the chat window's capabilities by introducing support for rendering Mermaid diagrams. By integrating the mermaid.js library, the system can now interpret and visually display complex diagrams directly from text, improving communication and clarity. The implementation includes theme awareness, robust error handling with a fallback to syntax highlighting, and ensures that all existing functionalities like copying and downloading are preserved.

Highlights

• Mermaid.js Integration: The mermaid.js library has been added as a dependency to enable rendering of Mermaid diagrams directly within the chat window.
• Dynamic Diagram Rendering: The CodeBlock component now detects and renders Mermaid code blocks, transforming text-based diagrams into visual representations.
• Theme-Aware Display: Mermaid diagrams will automatically adapt to the user's current theme (light or dark mode) for a consistent visual experience.
• Robust Error Handling: If a Mermaid diagram fails to render, an error message is displayed, and the original code block is shown with syntax highlighting as a fallback.
• Preserved Functionality: Existing copy and download functionalities for code blocks remain intact, even for Mermaid diagrams.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces support for rendering Mermaid diagrams within code blocks, which is an excellent addition. The implementation correctly identifies Mermaid code, renders it, and gracefully handles various states such as loading and errors. It also supports theme-aware rendering for light and dark modes. My primary feedback concerns the performance of the rendering logic. Currently, it re-renders on every change to the code block's value. This can be inefficient for streaming responses, which are common in chat applications. I have provided a suggestion to debounce the render function to mitigate this potential performance issue.

[gemini-code-assist]

The current implementation of the useEffect hook for rendering Mermaid diagrams will execute on every change to the value prop. In a chat application with streaming responses, this can lead to excessive re-renders and performance issues, as mermaid.initialize and mermaid.render would be called for each new token. This can also result in a poor user experience with flickering error messages for incomplete diagrams.

To optimize this, I recommend debouncing the rendering logic. This will ensure that the rendering only happens after the code has stopped changing for a brief period.

    useEffect(() => {
        if (!isMermaid || !value) return

        const timer = setTimeout(() => {
            mermaid.initialize({
                startOnLoad: false,
                theme: theme.palette.mode === 'dark' ? 'dark' : 'default',
                securityLevel: 'strict'
            })

            const renderMermaid = async () => {
                try {
                    setMermaidError(null)
                    const { svg } = await mermaid.render(diagramIdRef.current, value)
                    setMermaidSvg(svg)
                } catch (error) {
                    setMermaidError(error.message)
                    setMermaidSvg(null)
                }
            }

            renderMermaid()
        }, 300)

        return () => clearTimeout(timer)
    }, [isMermaid, value, theme.palette.mode])

[snowfluke]

+1

[HenryHengZJ]

this would be an issue, because when streaming, value changes, this will cause multiple initialization

[aibysid]

Wrapped the rendering logic in a setTimeout with a 300ms delay