fix: implement markdown rendering in AI chat panel#150
Conversation
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
👋 Thanks for opening a PR, @Rakshi2609!Your PR has entered the 🚦 PR Review Pipeline.
What happens next
A pipeline status comment will appear below and update automatically as your PR progresses. While you wait
This comment is posted only once. |
WalkthroughChat messages in the playground now render as Markdown with syntax-highlighted code blocks. The feature adds dependencies for Markdown parsing and Prism syntax highlighting, enables Tailwind typography styling, and updates the chat component to render user and assistant messages through ChangesMarkdown Chat Rendering
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/globals.css`:
- Line 2: The Stylelint config is flagging Tailwind v4 at-rules like
`@plugin/`@custom-variant/@theme used in app/globals.css; update the
.stylelintrc.json to allow these by adding them to the at-rule-no-unknown rule's
ignoreAtRules array (include "plugin", "theme", "custom-variant" along with
existing Tailwind at-rules such as
"tailwind","layer","apply","responsive","screen","import") so stylelint no
longer reports valid Tailwind v4 at-rules as unknown.
In `@modules/playground/components/ai-chat-panel.tsx`:
- Around line 388-389: The regex used to extract the fenced-code language from
className (currently /language-(\w+)/) is too narrow and misses tokens like
"objective-c" or "c++"; update the pattern where match is assigned (the line
with const match = /language-(\w+)/.exec(className || "")) to use a broader
capture such as /language-([^\s]+)/ (or equivalent) so the match variable
captures hyphens, pluses, and other non-whitespace language IDs; keep the
subsequent logic that checks !inline && match unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: c2064808-b9f5-4b90-82b7-5df3ea1bdc1e
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
app/globals.cssmodules/playground/components/ai-chat-panel.tsxpackage.json
| @@ -1,4 +1,5 @@ | |||
| @import "tailwindcss"; | |||
| @plugin "@tailwindcss/typography"; | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether stylelint config is present and whether Tailwind at-rules are ignored.
fd -i 'stylelint*' .
fd -i '.stylelintrc*' .
rg -n -C3 'at-rule-no-unknown|ignoreAtRules|scss/at-rule-no-unknown|plugin|custom-variant|theme' $(fd -i 'stylelint*|.stylelintrc*' .)
# Inspect CSS files that use Tailwind v4 at-rules.
rg -n -C2 '`@plugin`|`@theme`|`@custom-variant`' app/globals.cssRepository: piyushdotcomm/Editron
Length of output: 50379
🏁 Script executed:
cat -n app/globals.cssRepository: piyushdotcomm/Editron
Length of output: 10386
🏁 Script executed:
find . -name ".stylelintrc*" -o -name "stylelint.config.*" 2>/dev/null | head -20Repository: piyushdotcomm/Editron
Length of output: 85
🏁 Script executed:
rg "ignoreAtRules" . --type-list | head -5Repository: piyushdotcomm/Editron
Length of output: 455
🏁 Script executed:
cat -n .stylelintrc.jsonRepository: piyushdotcomm/Editron
Length of output: 1691
Configure stylelint to accept Tailwind v4 at-rules (@plugin, @custom-variant, @theme).
The file uses valid Tailwind v4 at-rules that stylelint's at-rule-no-unknown rule flags as errors. Add these to the .stylelintrc.json configuration by setting at-rule-no-unknown rule's ignoreAtRules option to include Tailwind at-rules.
Example configuration
{
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"tailwind",
"layer",
"apply",
"responsive",
"screen",
"plugin",
"theme",
"custom-variant",
"import"
]
}
]
}
}🧰 Tools
🪛 Stylelint (17.11.0)
[error] 2-2: Unexpected unknown at-rule "@plugin" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/globals.css` at line 2, The Stylelint config is flagging Tailwind v4
at-rules like `@plugin/`@custom-variant/@theme used in app/globals.css; update the
.stylelintrc.json to allow these by adding them to the at-rule-no-unknown rule's
ignoreAtRules array (include "plugin", "theme", "custom-variant" along with
existing Tailwind at-rules such as
"tailwind","layer","apply","responsive","screen","import") so stylelint no
longer reports valid Tailwind v4 at-rules as unknown.
| const match = /language-(\w+)/.exec(className || ""); | ||
| return !inline && match ? ( |
There was a problem hiding this comment.
Broaden code-block language parsing for fenced blocks.
/language-(\w+)/ is too restrictive and misses valid language IDs like objective-c or c++, so some fenced blocks won’t get highlighted. Prefer a broader capture like /language-([^\s]+)/.
Suggested patch
-const match = /language-(\w+)/.exec(className || "");
+const match = /language-([^\s]+)/.exec(className || "");📝 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.
| const match = /language-(\w+)/.exec(className || ""); | |
| return !inline && match ? ( | |
| const match = /language-([^\s]+)/.exec(className || ""); | |
| return !inline && match ? ( |
🧰 Tools
🪛 OpenGrep (1.20.0)
[ERROR] 388-388: Dynamic command passed to child_process.exec/execSync. Use child_process.execFile or spawn with an argument array instead.
(coderabbit.command-injection.exec-js)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@modules/playground/components/ai-chat-panel.tsx` around lines 388 - 389, The
regex used to extract the fenced-code language from className (currently
/language-(\w+)/) is too narrow and misses tokens like "objective-c" or "c++";
update the pattern where match is assigned (the line with const match =
/language-(\w+)/.exec(className || "")) to use a broader capture such as
/language-([^\s]+)/ (or equivalent) so the match variable captures hyphens,
pluses, and other non-whitespace language IDs; keep the subsequent logic that
checks !inline && match unchanged.
piyushdotcomm
added
gssoc:approved
mentor:piyushdotcomm
level:critical
quality:exceptional
type:feature
piyushdotcomm
left a comment
piyushdotcomm
left a comment
There was a problem hiding this comment.
add screenshot or recording of the improvement and tag the issue number in the description
and address the review of coderabbit also before tagging me
There was a problem hiding this comment.
again you changed this file?
Maxd646
left a comment
Maxd646
left a comment
There was a problem hiding this comment.
Hey @Rakshi2609, nice work on this — markdown rendering in the chat panel is a solid improvement. A few things to fix before we can merge:
Needs fixing:
-
The regex for extracting code block language is too narrow. /language-(\w+)/ misses language IDs like c++, objective-c, shell-session, etc. Change it to /language-([^\s]+)/.
-
The inline prop on the code component was removed in react-markdown v9+. The any cast is hiding this. Check the node position to detect block vs inline code instead — otherwise this will break silently on upgrade.
-
Add "plugin", "theme", and "custom-variant" to the ignoreAtRules array in .stylelintrc.json. The @plugin line in globals.css will fail stylelint as-is.
. The prose-invert class on the user message bubble will force light-on-dark colors even in light mode. The AI bubble correctly uses dark:prose-invert — apply the same pattern to the user bubble.
3 participants
Summary
react-markdownremark-gfmreact-syntax-highlighterType of change
Related issue
Closes #
Validation
npm run lintnpm testnpm run buildList any additional manual verification you performed:
Screenshots or recordings
Add screenshots demonstrating markdown and code block rendering improvements.
Checklist
Summary by CodeRabbit
New Features