HelpPanel full markdown — GFM + code blocks + tables + syntax highlight#243
Conversation
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
📝 WalkthroughWalkthroughReplaced a custom HelpPanel markdown renderer with Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Files Reviewed (3 files)
Fix these issues in Kilo Cloud Reviewed by seed-2-0-pro-260328 · 157,489 tokens |
![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)
static/desktop/assets/tokens-D0eHLZhU.css (1)
1-1: Exclude generated bundle from stylelint checksThis is build output, so the Line 1 stylelint failures are non-actionable noise. Please lint source CSS/Tailwind inputs instead and ignore
static/desktop/assets/tokens-*.cssin stylelint config.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@static/desktop/assets/tokens-D0eHLZhU.css` at line 1, The generated bundle tokens-*.css is triggering noisy stylelint errors; update the Stylelint configuration (e.g., stylelint.config.js / .stylelintrc.js or package.json stylelint key) to ignore the build output by adding the pattern "tokens-*.css" to ignoreFiles/ignorePatterns or create a .stylelintignore entry for that glob, and ensure your CI/lint scripts point at the source Tailwind/CSS inputs instead of the generated bundle.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@desktop/src/apps/chat/HelpPanel.tsx`:
- Around line 69-74: Update the react-markdown code renderer in HelpPanel by
removing the unused inline prop and adding proper typing: stop destructuring
`inline` in the `code` renderer and return a single branch that uses `className`
and `children`; also type the `components` object as `Components` from
'react-markdown' so the `code` renderer signature is correctly typed instead of
`any`. Locate the `code: ({ node, inline, className, children, ...props }: any)
=> ...` renderer and change it to a single `code: ({ node, className, children,
...props }) => ...` implementation and update the surrounding `components`
declaration to use `Components` from 'react-markdown'.
- Around line 61-68: The ReactMarkdown block is missing rehype-slug (so headings
lack id attributes for fragment links) and always forces target="_blank" on
every anchor which breaks in-modal fragment navigation; update the rehypePlugins
array used in ReactMarkdown to include rehypeSlug (imported from "rehype-slug")
and change the custom anchor component (the a renderer in components) to only
add target="_blank" and rel="noreferrer" when the href is an external URL (e.g.,
test if href starts with "http://" or "https://" and its origin differs from
window.location.origin), leaving internal/fragment links untouched.
---
Nitpick comments:
In `@static/desktop/assets/tokens-D0eHLZhU.css`:
- Line 1: The generated bundle tokens-*.css is triggering noisy stylelint
errors; update the Stylelint configuration (e.g., stylelint.config.js /
.stylelintrc.js or package.json stylelint key) to ignore the build output by
adding the pattern "tokens-*.css" to ignoreFiles/ignorePatterns or create a
.stylelintignore entry for that glob, and ensure your CI/lint scripts point at
the source Tailwind/CSS inputs instead of the generated bundle.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7cfc2075-55bb-4130-8b9c-51c966ea0780
⛔ Files ignored due to path filters (1)
desktop/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (12)
desktop/package.jsondesktop/src/apps/chat/HelpPanel.tsxstatic/desktop/assets/MCPApp-5HQXUU1O.jsstatic/desktop/assets/ProvidersApp-BV6ruBwV.jsstatic/desktop/assets/SettingsApp-Dslwl1Cq.jsstatic/desktop/assets/chat-CtrpLy48.jsstatic/desktop/assets/main-D_Gu3kUS.jsstatic/desktop/assets/tokens-BCNCV_Mq.cssstatic/desktop/assets/tokens-BmimH8YG.jsstatic/desktop/assets/tokens-D0eHLZhU.cssstatic/desktop/chat.htmlstatic/desktop/index.html
💤 Files with no reviewable changes (1)
- static/desktop/assets/tokens-BCNCV_Mq.css
| code: ({ node, inline, className, children, ...props }: any) => | ||
| inline ? ( | ||
| <code className="bg-white/5 px-1 rounded text-xs" {...props}>{children}</code> | ||
| ) : ( | ||
| <code className={className} {...props}>{children}</code> | ||
| ), |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In react-markdown v10, what is the recommended TypeScript type for custom renderers in the componentsprop, specifically forcode?
💡 Result:
In react-markdown v10, the recommended TypeScript type for custom renderers in the components prop, specifically for code, is Components['code'], where Components is imported from 'react-markdown'. This type is defined as ElementType<ComponentProps<'code'> & ExtraProps>, with ExtraProps containing the optional node field from hast (import type {ExtraProps} from 'react-markdown'; import type {ComponentProps, ElementType} from 'react';). A practical equivalent explicitly constructing the type is React.ComponentProps<'code'> & ExtraProps or JSX.IntrinsicElements['code'] & ExtraProps. Example usage: import ReactMarkdown, { Components, ExtraProps } from 'react-markdown'; import type { ComponentProps, ElementType } from 'react'; import type { Element } from 'hast'; type CodeRendererProps = ComponentProps<'code'> & ExtraProps; const MyCodeRenderer: Components['code'] = ({ node, children, className, ...props }) => { // Implementation return <code className={className} {...props}>{children}; }; // In components prop: components={{ code: MyCodeRenderer }} Note that in v10, the inline prop is no longer passed to code components (removed in earlier major versions like v9).
Citations:
- 1: https://github.com/remarkjs/react-markdown
- 2: https://www.npmjs.com/package/react-markdown
- 3: https://github.com/remarkjs/react-markdown/blob/main/readme.md
- 4: https://stackoverflow.com/questions/77335936/whats-the-type-of-props-of-the-methods-in-components-object-in-react-markdown
🏁 Script executed:
# Check package.json for react-markdown version
find . -name "package.json" -type f | head -5 | xargs grep -l "react-markdown" 2>/dev/null
# Get the exact version
cat ./package.json | grep -A 2 -B 2 "react-markdown" || echo "Not found in root package.json"Repository: jaylfc/tinyagentos
Length of output: 179
🏁 Script executed:
# Look for package-lock or yarn.lock to confirm exact resolved version
if [ -f "package-lock.json" ]; then
grep -A 5 '"react-markdown"' package-lock.json | head -20
elif [ -f "yarn.lock" ]; then
grep -A 5 "react-markdown" yarn.lock | head -20
fiRepository: jaylfc/tinyagentos
Length of output: 44
🏁 Script executed:
# Check the HelpPanel.tsx file to see the full context and any comments
cat -n ./desktop/src/apps/chat/HelpPanel.tsx | head -100Repository: jaylfc/tinyagentos
Length of output: 5595
🏁 Script executed:
cat ./desktop/package.json | grep -A 5 -B 5 "react-markdown"Repository: jaylfc/tinyagentos
Length of output: 380
Remove the inline prop usage and fix the type annotation for the code renderer.
The inline prop was removed in react-markdown v10. Your code destructures it on line 69 and uses it in a conditional on line 70, but it will always be undefined, making the inline branch dead code. Additionally, using any hides this issue from TypeScript.
Type the components object as Components from 'react-markdown' and remove the inline check:
Suggested fix
import { Components } from 'react-markdown';
// Then in your components prop:
code: ({ node, className, children, ...props }) => (
<code className={className} {...props}>{children}</code>
),If you need different styling for inline vs block code, use the className prop instead—rehype-highlight applies different classes to distinguish them.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@desktop/src/apps/chat/HelpPanel.tsx` around lines 69 - 74, Update the
react-markdown code renderer in HelpPanel by removing the unused inline prop and
adding proper typing: stop destructuring `inline` in the `code` renderer and
return a single branch that uses `className` and `children`; also type the
`components` object as `Components` from 'react-markdown' so the `code` renderer
signature is correctly typed instead of `any`. Locate the `code: ({ node,
inline, className, children, ...props }: any) => ...` renderer and change it to
a single `code: ({ node, className, children, ...props }) => ...` implementation
and update the surrounding `components` declaration to use `Components` from
'react-markdown'.
…dling + drop inline prop (v10)
1 participant
Summary
Upgrades the in-app chat-guide HelpPanel from a minimal hand-rolled markdown parser to a full-featured renderer. Users now see `docs/chat-guide.md` with proper tables, code blocks with syntax highlighting, blockquotes, nested lists, ordered lists, task lists, autolinks, strikethrough, and horizontal rules.
Dependencies
Styling
All HTML elements get Tailwind component overrides matching the shell dark theme:
Test plan
Summary by CodeRabbit