feat: Add codeblock highlight support in ChatInterface #250
Conversation
WalkthroughReplaces manual |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/ChatInterface.jsx (1)
337-353: Consider validating language support and documenting performance characteristics.The SyntaxHighlighter implementation looks good, but consider these optional improvements:
Language validation: Currently, if an unsupported language is passed, Prism falls back to plain text rendering without indication. Consider validating against Prism's supported languages or documenting this behavior.
Performance consideration: SyntaxHighlighter can be expensive for large code blocks (>1000 lines). Consider adding a size threshold beyond which syntax highlighting is disabled or using react-syntax-highlighter's light build with only essential languages.
Example language validation:
// Add after line 264 const SUPPORTED_LANGUAGES = ['javascript', 'typescript', 'python', 'java', 'cpp', 'c', 'csharp', 'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'scala', 'bash', 'shell', 'sql', 'html', 'css', 'json', 'yaml', 'xml', 'markdown', 'text']; const language = match && SUPPORTED_LANGUAGES.includes(match[1]) ? match[1] : 'text';Or for performance optimization:
// Add before SyntaxHighlighter const lineCount = raw.split('\n').length; const shouldHighlight = lineCount < 500; // Threshold for syntax highlighting // Then conditionally render {shouldHighlight ? ( <SyntaxHighlighter {...props}> {raw} </SyntaxHighlighter> ) : ( <pre className="..."> <code>{raw}</code> </pre> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.json(1 hunks)src/components/ChatInterface.jsx(5 hunks)
🔇 Additional comments (3)
src/components/ChatInterface.jsx (3)
24-25: LGTM!The imports are correct for Prism-based syntax highlighting with the oneDark theme. Using the ESM path ensures better tree-shaking.
267-298: LGTM!The copy functionality is well-implemented with proper fallback for browsers that don't support the Clipboard API. The error handling is appropriate for this use case.
303-334: LGTM!The language badge and copy button UI are well-designed with proper accessibility attributes and visual feedback for user interactions.
| "react-dropzone": "^14.2.3", | ||
| "react-markdown": "^10.1.0", | ||
| "react-router-dom": "^6.8.1", | ||
| "react-syntax-highlighter": "^15.6.1", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check npm registry for react-syntax-highlighter details
curl -s https://registry.npmjs.org/react-syntax-highlighter | jq '.dist-tags.latest, .time | keys[-5:]' 2>/dev/null || echo "npm registry check may be limited in sandbox"Repository: siteboon/claudecodeui
Length of output: 109
🌐 Web query:
react-syntax-highlighter npm security vulnerabilities latest version
💡 Result:
Short answer
- Latest react-syntax-highlighter on npm: 16.1.0 (current latest). No direct vulnerabilities reported for that package version, but it can inherit vulnerabilities from bundled dependencies (notably prismjs / highlight.js in older versions). [1][2]
Details & evidence
- Snyk shows latest version 16.1.0 and lists "No known security issues" for the package itself. [1]
- Projects depending on older react-syntax-highlighter releases have been flagged for transitive vulnerabilities (e.g., prismjs CVE-2024-53382 and other older CVEs introduced via refractor/ prsimjs or highlight.js). Example GitHub issue calling out prismjs / CVE-2024-53382 because of older refractor/prismjs versions pulled via react-syntax-highlighter. [2][3]
- Vulnerability trackers list related CVEs affecting prismjs/highlight.js that affected older react-syntax-highlighter dependency chains (see CVE entries). [4]
Recommended action
- Upgrade to the latest react-syntax-highlighter (16.1.0) and rebuild/lock deps. [1]
- Run an npm audit / Snyk/OSS-scan in your project to detect any transitive issues (and update prismjs/refractor/highlight.js if your lockfile pins older versions). [1][3]
Sources
- Snyk package page — react-syntax-highlighter (latest info). [link].
- GitHub issue calling out prismjs CVE (example: swagger-ui issue referencing react-syntax-highlighter → refractor → prismjs). [link].
- Snyk/scan examples showing transitive CVEs introduced via refractor/prismjs/highlight.js and remediation notes. [link].
- ReversingLabs / vulnerability listing referencing CVE-2024-53382 and CVE-2025-27789 in dependency chains. [link].
If you want, I can: (A) check your project's package-lock/yarn.lock for vulnerable transitive versions and give exact remediation steps, or (B) fetch the raw npm/registry pages for react-syntax-highlighter@16.1.0 and its dependency tree. Which would you prefer?
Upgrade react-syntax-highlighter to the latest version (16.1.0).
The pinned version ^15.6.1 is outdated; the latest version is 16.1.0. While react-syntax-highlighter itself has no direct known vulnerabilities, older versions can pull in vulnerable transitive dependencies (prismjs, refractor, highlight.js), including CVE-2024-53382 and CVE-2025-27789. Upgrading to 16.1.0 and running npm audit will ensure you have the latest security patches in the dependency tree.
🤖 Prompt for AI Agents
In package.json around line 83, the dependency "react-syntax-highlighter":
"^15.6.1" is outdated and may pull in vulnerable transitive deps; update the
dependency to "react-syntax-highlighter": "16.1.0" in package.json, then run npm
install (or yarn install) and npm audit (and fix/audit --fix as needed) to
update the lockfile and verify no remaining vulnerabilities; ensure any code
imports remain compatible with v16 and run tests to confirm no breaking changes.
| // Extract language from className (format: language-xxx) | ||
| const match = /language-(\w+)/.exec(className || ''); | ||
| const language = match ? match[1] : 'text'; |
There was a problem hiding this comment.
Consider supporting hyphenated language identifiers.
The regex /language-(\w+)/ only matches word characters, which will miss languages with hyphens like objective-c, visual-basic, c-sharp, etc. If these languages are used in the codebase, they won't be highlighted correctly.
Apply this diff to support hyphenated languages:
- const match = /language-(\w+)/.exec(className || '');
+ const match = /language-([\w-]+)/.exec(className || '');
const language = match ? match[1] : 'text';This will match language identifiers containing hyphens while still being safe ([\w-]+ matches word characters and hyphens).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Extract language from className (format: language-xxx) | |
| const match = /language-(\w+)/.exec(className || ''); | |
| const language = match ? match[1] : 'text'; | |
| // Extract language from className (format: language-xxx) | |
| const match = /language-([\w-]+)/.exec(className || ''); | |
| const language = match ? match[1] : 'text'; |
🤖 Prompt for AI Agents
In src/components/ChatInterface.jsx around lines 262 to 264, the regex
/language-(\w+)/ only captures word characters and misses hyphenated language
identifiers (e.g. objective-c, c-sharp); update the pattern to allow hyphens
(use /language-([\w-]+)/) so the match captures identifiers with hyphens, keep
the existing fallback to 'text' when no match is found.
2 participants
This pull request leverages the react-syntax-highlighter library and the Prism.js syntax parser to implement multi-language code syntax highlighting in the chat interface.
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.