refactor(web): the Mermaid code block lives in its own component file #22691 · pingdotgg/t3code

	Before	After
`ChatMarkdown.tsx` lines	3069	2992
New files		chat/MarkdownMermaidCodeBlock.tsx (84)
Renders	unchanged: no component, subscription or context boundary moved	unchanged

MmacroscopeappBotapproved these changes3d ago

Approvability

Verdict: Approved at 8399708

Macroscope's review found this PR approvable — This PR moves the existing Mermaid code-block renderer into its own component file without changing its props, rendering logic, state, context, or user-facing behavior. The change is limited to module organization and import updates.

No code changes detected at 0a9ade9. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

CcoderabbitaiBot3d ago

Review in Change Stack →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: Path: .coderabbit.config.ts
Review profile: CHILL
Plan: Team
Run ID: 165bd3ea-805a-4a46-a541-83df8b4fa342

📥 Commits

Reviewing files that changed from the base of the PR and between 839970877ff9a3c68e52165a4443c776ff5993b7 and 0a9ade9156c9a9d199b97b3042b01213c23888cb.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.config.ts
Review profile: CHILL
Plan: Team
Run ID: 82a6a0ea-69c4-4bf7-8af9-ca81a261ddce

📥 Commits

Reviewing files that changed from the base of the PR and between 17911714648b1debf9d6d6fc4fea6c95bf86f83d and 839970877ff9a3c68e52165a4443c776ff5993b7.

📒 Files selected for processing: 2

apps/web/src/components/ChatMarkdown.tsx
apps/web/src/components/chat/MarkdownMermaidCodeBlock.tsx

Limit details: You’ve used all 10 included reviews currently available.

📝 Walkthrough

The Mermaid code block component moved from ChatMarkdown.tsx to a dedicated module. ChatMarkdown.tsx imports the component for Mermaid rendering.

Changes: Mermaid code block

Layer / File(s)	Summary
Extract and integrate Mermaid rendering `apps/web/src/components/chat/MarkdownMermaidCodeBlock.tsx`, `apps/web/src/components/ChatMarkdown.tsx`	The new component handles diagram and source views, streaming, search-source visibility, suspense fallback, and rendering errors. `ChatMarkdown.tsx` imports it and removes the local implementation and unused imports.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Refactor

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 83997

Mermaid rendering appears unchanged by this extraction; no merge-blocking issue remains after normal checks.

Pre-merge checks: ^Passed 3 · ^Failed 1

^Failed Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Description check	Warning	The description explains the refactor, unchanged behavior, affected files, and verification commands. It does not include the required Scope and approval section, and it does not explicitly explain wh…	Add the required Problem, Change, Scope and approval, and Verification sections. In Scope and approval, link the relevant issue or maintainer approval, or explain why this focused refactor qualifies without one. In Verification, report the …

^Passed Passed checks: 3 passed

Check name	Status	Explanation
Title check	Passed	The title clearly and concisely describes the main change: moving the Mermaid code block into its own component file.
Linked Issues check	Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	Passed	Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description explains the refactor, unchanged behavior, affected files, and verification commands. It does not include the required Scope and approval section, and it does not explicitly explain why prior issue or maintainer approval was unnecessary. The verification section also does not state observed results for every listed check or address UI evidence requirements.

Resolution

Add the required Problem, Change, Scope and approval, and Verification sections. In Scope and approval, link the relevant issue or maintainer approval, or explain why this focused refactor qualifies without one. In Verification, report the observed results for TypeScript and lint checks and provide UI screenshots if required for this UI-related change.

✨ Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

Ggithub-actionsBot3d ago

Thread transfer impact

⚠️ The latest CI run did not produce a thread transfer result for 0a9ade9.

This comment will update automatically after the next completed run.

refactor(web): the Mermaid code block lives in its own component file#22691

Checks

Approvability

Review skipped

Thread transfer impact