feat: add JSON syntax highlighting to Raw Message JSON modal#183
feat: add JSON syntax highlighting to Raw Message JSON modal#183
Conversation
- Replace plain text <pre> with CodeMirrorViewer component in HomeDashboard.tsx - Replace plain text <pre> with CodeMirrorViewer component in MessageActions.tsx - Reuses existing CodeMirrorViewer with JSON language support - Provides color coding, line numbers, and code folding - Automatically adapts to light/dark theme
📝 WalkthroughWalkthroughTwo UI components (MessageActions and HomeDashboard) replace inline preformatted JSON blocks with the CodeMirrorViewer component to display read-only JSON; imports and surrounding container styling were updated while preserving the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/src/pages/HomeDashboard.tsx (1)
43-44: Remove debugging console.log before merging.This console.log statement appears to be debugging code and should be removed before merging to production.
🧹 Proposed fix
- // Debug logging for currentConversation - console.log("🏠 HomeDashboard - currentConversation:", currentConversation); -frontend/src/components/conversation/MessageActions.tsx (1)
38-38: Add i18n support for hardcoded button text.The button text "Raw JSON" is hardcoded, while HomeDashboard.tsx uses
t("dashboard.rawJsonButton")for the same label. This violates the coding guideline to implement i18n support with react-i18next in React frontend components.As per coding guidelines, implement i18n support in React frontend with react-i18next.
🌐 Proposed fix to add i18n support
Add the useTranslation hook at the component level:
export const MessageActions: React.FC<MessageActionsProps> = ({ message }) => { + const { t } = useTranslation(); + return (Then update the hardcoded text:
- Raw JSON + {t("dashboard.rawJsonButton")}
🤖 Fix all issues with AI agents
In @frontend/src/components/conversation/MessageActions.tsx:
- Line 43: The DialogTitle string is hardcoded in MessageActions.tsx; import and
use the react-i18next hook (useTranslation) and replace the literal "Message Raw
JSON" with the localized key used elsewhere (e.g. t("dashboard.rawJsonTitle"))
so the dialog title uses i18n; ensure you add the import for useTranslation,
call const { t } = useTranslation() in the component scope, and update the
DialogTitle to use t(...) consistent with HomeDashboard.tsx.
🧹 Nitpick comments (2)
frontend/src/pages/HomeDashboard.tsx (1)
196-201: CodeMirrorViewer integration looks good!The replacement of the plain
<pre>block withCodeMirrorViewersuccessfully adds syntax highlighting, line numbers, and code folding for JSON display. The component is correctly configured with:
language="json"for JSON syntax highlightingreadOnly={true}to prevent editing- Proper styling wrapper with border
Note: The
readOnlyprop defaults totruein CodeMirrorViewer (see CodeMirrorViewer.tsx line 55), so explicitly setting it totrueis redundant but acceptable for clarity.♻️ Optional: Remove redundant readOnly prop
<CodeMirrorViewer code={JSON.stringify(message, null, 2)} language="json" - readOnly={true} />frontend/src/components/conversation/MessageActions.tsx (1)
45-50: CodeMirrorViewer integration looks good!The replacement of the plain
<pre>block withCodeMirrorViewersuccessfully adds syntax highlighting, line numbers, and code folding for JSON display. The implementation is consistent with the pattern used in HomeDashboard.tsx.Note: The
readOnlyprop defaults totruein CodeMirrorViewer (see CodeMirrorViewer.tsx line 55), so explicitly setting it totrueis redundant but acceptable for clarity.♻️ Optional: Remove redundant readOnly prop
<CodeMirrorViewer code={JSON.stringify(message, null, 2)} language="json" - readOnly={true} />
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/conversation/MessageActions.tsxfrontend/src/pages/HomeDashboard.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Enable strict mode in TypeScript code for maximum type safety
Apply ESLint rules with React and accessibility plugins to TypeScript code
Format TypeScript code with Prettier for consistent style
Organize imports and use path aliases in TypeScript code
Files:
frontend/src/pages/HomeDashboard.tsxfrontend/src/components/conversation/MessageActions.tsx
frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
frontend/src/**/*.{ts,tsx}: Apply component composition over inheritance pattern in TypeScript/React code
Implement i18n support in React frontend with react-i18next using component-level translations with hooks, translation interpolation, and pluralization support
Files:
frontend/src/pages/HomeDashboard.tsxfrontend/src/components/conversation/MessageActions.tsx
frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React version 19.1.1 and TypeScript version 5.9.2 in frontend development
Files:
frontend/src/pages/HomeDashboard.tsxfrontend/src/components/conversation/MessageActions.tsx
frontend/**/*.{css,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Tailwind CSS version 4.1.12 with @tailwindcss/vite plugin for styling in frontend code
Files:
frontend/src/pages/HomeDashboard.tsxfrontend/src/components/conversation/MessageActions.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/common/**/*.tsx : Use CodeMirror and Monaco Editor for advanced code editing and syntax highlighting in frontend components
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/common/**/*.tsx : Use CodeMirror and Monaco Editor for advanced code editing and syntax highlighting in frontend components
Applied to files:
frontend/src/pages/HomeDashboard.tsxfrontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/ui/**/*.tsx : Use shadcn/ui component library with New York variant in frontend UI development
Applied to files:
frontend/src/pages/HomeDashboard.tsx
🧬 Code graph analysis (1)
frontend/src/components/conversation/MessageActions.tsx (1)
frontend/src/components/common/CodeMirrorViewer.tsx (1)
CodeMirrorViewer(56-126)
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @frontend/src/components/conversation/MessageActions.tsx:
- Line 43: The component uses t() but never initializes the i18n hook, causing a
runtime error; import useTranslation from react-i18next and call it inside the
MessageActions component (e.g., const { t } = useTranslation()) so t() is
defined before it’s used in DialogTitle; update the top-level imports to include
useTranslation and add the hook call at the start of the MessageActions function
body.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/conversation/MessageActions.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Enable strict mode in TypeScript code for maximum type safety
Apply ESLint rules with React and accessibility plugins to TypeScript code
Format TypeScript code with Prettier for consistent style
Organize imports and use path aliases in TypeScript code
Files:
frontend/src/components/conversation/MessageActions.tsx
frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
frontend/src/**/*.{ts,tsx}: Apply component composition over inheritance pattern in TypeScript/React code
Implement i18n support in React frontend with react-i18next using component-level translations with hooks, translation interpolation, and pluralization support
Files:
frontend/src/components/conversation/MessageActions.tsx
frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React version 19.1.1 and TypeScript version 5.9.2 in frontend development
Files:
frontend/src/components/conversation/MessageActions.tsx
frontend/**/*.{css,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Tailwind CSS version 4.1.12 with @tailwindcss/vite plugin for styling in frontend code
Files:
frontend/src/components/conversation/MessageActions.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/common/**/*.tsx : Use CodeMirror and Monaco Editor for advanced code editing and syntax highlighting in frontend components
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/common/**/*.tsx : Use CodeMirror and Monaco Editor for advanced code editing and syntax highlighting in frontend components
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/**/*.{ts,tsx} : Implement i18n support in React frontend with react-i18next using component-level translations with hooks, translation interpolation, and pluralization support
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/i18n/**/*.ts : Implement browser language detection with automatic fallback and persistent language preferences stored in localStorage in frontend i18n
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/ui/**/*.tsx : Implement proper ARIA support and accessibility in shadcn/ui components used in frontend code
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/i18n/locales/**/*.json : Support English, Simplified Chinese (zh-CN), and Traditional Chinese (zh-TW) translations in frontend internationalization
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
🧬 Code graph analysis (1)
frontend/src/components/conversation/MessageActions.tsx (2)
frontend/src/components/ui/dialog.tsx (2)
DialogTitle(118-118)DialogHeader(116-116)frontend/src/components/common/CodeMirrorViewer.tsx (1)
CodeMirrorViewer(56-126)
🪛 GitHub Actions: CI
frontend/src/components/conversation/MessageActions.tsx
[error] 43-43: ESLint: 't' is not defined. (no-undef)
🪛 GitHub Check: lint
frontend/src/components/conversation/MessageActions.tsx
[failure] 43-43:
't' is not defined
🔇 Additional comments (1)
frontend/src/components/conversation/MessageActions.tsx (1)
12-12: Excellent CodeMirrorViewer integration!The replacement of the plain text
<pre>block withCodeMirrorViewerprovides syntax highlighting, line numbers, and code folding for the JSON display. The implementation correctly:
- Uses the
jsonlanguage for proper highlighting- Sets
readOnly={true}for view-only behavior- Formats JSON with proper indentation via
JSON.stringify(message, null, 2)- Wraps the viewer in a styled container with appropriate borders
This aligns with the learnings about using CodeMirror for advanced code display in frontend components.
Also applies to: 45-51
- Add useTranslation import from react-i18next
- Initialize t function with useTranslation hook
- Replace hardcoded 'Raw JSON' button text with t('dashboard.rawJsonButton')
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/components/conversation/MessageActions.tsx (1)
48-54: Excellent implementation of JSON syntax highlighting.The CodeMirrorViewer is correctly configured with JSON language support and read-only mode. The wrapper div provides appropriate visual styling with Tailwind classes. The component automatically handles theme detection, line numbers, and code folding based on the implementation in CodeMirrorViewer.tsx.
Minor simplification opportunity: since
readOnlydefaults totruein CodeMirrorViewer, line 52 could be simplified or omitted:♻️ Optional simplification
<CodeMirrorViewer code={JSON.stringify(message, null, 2)} language="json" - readOnly={true} />However, keeping it explicit is also perfectly acceptable for clarity.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/conversation/MessageActions.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Enable strict mode in TypeScript code for maximum type safety
Apply ESLint rules with React and accessibility plugins to TypeScript code
Format TypeScript code with Prettier for consistent style
Organize imports and use path aliases in TypeScript code
Files:
frontend/src/components/conversation/MessageActions.tsx
frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
frontend/src/**/*.{ts,tsx}: Apply component composition over inheritance pattern in TypeScript/React code
Implement i18n support in React frontend with react-i18next using component-level translations with hooks, translation interpolation, and pluralization support
Files:
frontend/src/components/conversation/MessageActions.tsx
frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React version 19.1.1 and TypeScript version 5.9.2 in frontend development
Files:
frontend/src/components/conversation/MessageActions.tsx
frontend/**/*.{css,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Tailwind CSS version 4.1.12 with @tailwindcss/vite plugin for styling in frontend code
Files:
frontend/src/components/conversation/MessageActions.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/common/**/*.tsx : Use CodeMirror and Monaco Editor for advanced code editing and syntax highlighting in frontend components
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/**/*.{ts,tsx} : Implement i18n support in React frontend with react-i18next using component-level translations with hooks, translation interpolation, and pluralization support
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/common/**/*.tsx : Use CodeMirror and Monaco Editor for advanced code editing and syntax highlighting in frontend components
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/i18n/**/*.ts : Implement browser language detection with automatic fallback and persistent language preferences stored in localStorage in frontend i18n
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/ui/**/*.tsx : Implement proper ARIA support and accessibility in shadcn/ui components used in frontend code
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
📚 Learning: 2026-01-01T02:32:21.277Z
Learnt from: CR
Repo: Piebald-AI/gemini-cli-desktop PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-01T02:32:21.277Z
Learning: Applies to frontend/src/i18n/locales/**/*.json : Support English, Simplified Chinese (zh-CN), and Traditional Chinese (zh-TW) translations in frontend internationalization
Applied to files:
frontend/src/components/conversation/MessageActions.tsx
🧬 Code graph analysis (1)
frontend/src/components/conversation/MessageActions.tsx (3)
frontend/src/i18n/index.ts (1)
useTranslation(10-10)frontend/src/components/ui/dialog.tsx (4)
DialogTrigger(113-113)DialogContent(115-115)DialogHeader(116-116)DialogTitle(118-118)frontend/src/components/common/CodeMirrorViewer.tsx (1)
CodeMirrorViewer(56-126)
🔇 Additional comments (3)
frontend/src/components/conversation/MessageActions.tsx (3)
2-2: LGTM! Correct imports for i18n and syntax highlighting.The additions of
useTranslationfor internationalization andCodeMirrorViewerfor JSON syntax highlighting align with project guidelines and learnings.Based on learnings, CodeMirror is the recommended tool for advanced code editing and syntax highlighting in frontend components.
Also applies to: 13-13
29-30: LGTM! Proper i18n hook initialization.The
useTranslationhook is correctly initialized at the component level, following React 19 best practices and the coding guideline for implementing i18n support with react-i18next.As per coding guidelines, i18n support should use component-level translations with hooks.
41-41: No issues found. The translation keysdashboard.rawJsonButtonanddashboard.rawJsonTitleare properly defined in all locale files (en, zh-CN, zh-TW), and the implementation correctly uses theuseTranslationhook from react-i18next for component-level translations as required by the coding guidelines.
1 participant
<pre>with CodeMirrorViewer component in HomeDashboard.tsx<pre>with CodeMirrorViewer component in MessageActions.tsxSummary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.