Update inbox.mdx #937
Update inbox.mdx #937
Conversation
Edited content. There are stacked headings and missing intro paragraphs that need to be addressed. Also, this topic is extremely long. Consider breaking it up into more manageable sections.
WalkthroughEdits to content/docs/platform/inbox/react/components/inbox.mdx update wording, headings, and punctuation; add a new Render HTML section; clarify routerPush, data object usage, and snoozing behavior; adjust HMAC notes; and insert placeholder notes indicating missing narrative content. No code or API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
❌ Deploy Preview for docs-novu failed. Why did it fail? →
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (2)
content/docs/platform/inbox/react/components/inbox.mdx (2)
193-205: Resolve duplicated/stacked headings in Snooze section.You have “## Snooze” followed immediately by “### Snoozing notifications”. Merge/retitle to avoid stacked headings.
Apply this diff:
-## Snooze +## Snoozing notifications @@ -### Snoozing notifications +### Snooze options
211-214: Alt text is incorrect for the snooze image.Alt currently says “Render HTML in Inbox” but the image is about snoozing.
Apply this diff:
- alt="Render HTML in Inbox" + alt="Snooze a notification in the Inbox"
🧹 Nitpick comments (9)
content/docs/platform/inbox/react/components/inbox.mdx (9)
45-49: Fix spelling and standardize US English (navigable, behavior).
- “navigatable” → “navigable”
- “behaviour” → “behavior” (rest of the page uses US English)
Apply this diff:
-The Inbox component uses the `routerPush` prop to make your notifications navigatable. Novu automatically passes the `redirect.url` from your workflow definitions to the `routerPush` prop. +The Inbox component uses the `routerPush` prop to make your notifications navigable. Novu automatically passes the `redirect.url` from your workflow definitions to the `routerPush` prop.- To make the navigation work, you must specify the `routerPush` behaviour depending on your routing library. + To make the navigation work, you must specify the `routerPush` behavior depending on your routing library.
191-191: Grammar fix: “allows TypeScript to infer”.Add “to” for correctness.
Apply this diff:
-This allows TypeScript infer the structure of `notification.data`, preventing errors when accessing properties. However, as not all notifications include the same keys, make sure the properties exist before you use them. +This allows TypeScript to infer the structure of `notification.data`, preventing errors when accessing properties. However, as not all notifications include the same keys, make sure the properties exist before you use them.
510-513: Tighten wording and fix “props” → “prop” in Render HTML intro.Apply this diff:
-To render HTML tags in Inbox, use renderBody props and render the notification body as a `dangerouslySetInnerHTML` element. +To render HTML in the Inbox component, use the `renderBody` prop and output the body with `dangerouslySetInnerHTML`.
544-548: Fix code fence info string and stray text.“```html html tags with dynamic values” is invalid. Use a standard html fence; keep the “dynamic values” explanation in prose.
Apply this diff:
-```html html tags with dynamic values +```html {{subscriber.firstName}}, A <b>Good news!</b> We've just launched the <i>advanced analytics dashboard</i> you asked for. Check it out <a href="{{payload.analyticsPage}}" target="_blank">here</a> and gain deeper insights into your usage.--- `397-398`: **Grammar: pluralize “notification”.** Apply this diff: ```diff -You can conditionally render customized notification based on [workflow tags](/platform/concepts/workflows#workflow-tags). These tags are defined in your workflow and are accessible via `notification.tags` property. +You can conditionally render customized notifications based on [workflow tags](/platform/concepts/workflows#workflow-tags). These tags are defined in your workflow and are accessible via the `notification.tags` property.
437-437: Typo in component name: “CutomInbox” → “CustomInbox”.Apply this diff:
-export default function CutomInbox() { +export default function CustomInbox() {
481-481: Typo in component name: “CutomInbox” → “CustomInbox”.Apply this diff:
-export default function CutomInbox() { +export default function CustomInbox() {
406-408: Use consistent placeholders for props.Elsewhere you use “YOUR_APPLICATION_IDENTIFIER” and “YOUR_SUBSCRIBER_ID”. Use the same placeholders here for consistency.
Apply this diff:
- applicationIdentifier="" - subscriber="" + applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" + subscriber="YOUR_SUBSCRIBER_ID"- applicationIdentifier="" - subscriber="" + applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" + subscriber="YOUR_SUBSCRIBER_ID"Also applies to: 485-487
552-553: Unify link target for workflow tags and verify the correct path.Earlier you link to “/platform/concepts/workflows#workflow-tags”. Here it’s “/platform/workflow/overview#tags”. Use a single, correct canonical path.
Proposed change (assuming the “concepts” path is canonical, matching line 433):
-Customize visible preferences using the `preferencesFilter` prop to display only relevant preferences to your users. The filtering works by matching workflow [tags](/platform/workflow/overview#tags) with the specified filter `tags` value. +Customize visible preferences using the `preferencesFilter` prop to display only relevant preferences to your users. The filtering works by matching workflow [tags](/platform/concepts/workflows#workflow-tags) with the specified filter `tags` value.Please verify which URL is the authoritative one for “workflow tags.”
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/inbox/react/components/inbox.mdx(20 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-09T13:28:47.834Z
Learnt from: jackall3n
PR: novuhq/docs#929
File: content/docs/platform/sdks/react-native/hooks/novu-provider.mdx:48-53
Timestamp: 2025-08-09T13:28:47.834Z
Learning: In the novu/react-native and novu/react packages, the NovuProvider component uses the prop name `subscriber` (not `subscriberId`) to pass the subscriber identifier. This is consistent across all documentation examples and the actual implementation.
Applied to files:
content/docs/platform/inbox/react/components/inbox.mdx
🪛 LanguageTool
content/docs/platform/inbox/react/components/inbox.mdx
[grammar] ~45-~45: Ensure spelling is correct
Context: ...erPushprop to make your notifications navigatable. Novu automatically passes theredirect...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
🔇 Additional comments (2)
content/docs/platform/inbox/react/components/inbox.mdx (2)
575-586: Confirm whethersubscriber(string) is still required with HMAC upsert.In other examples you pass
subscriber="YOUR_SUBSCRIBER_ID". In the HMAC example you pass asubscriberobject (withsubscriberId) but not thesubscriberstring prop. Depending on the API, the Inbox may still require thesubscriberprop even when upserting. Let’s confirm.If required, apply this diff:
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" + subscriber="YOUR_SUBSCRIBER_ID" subscriberHash="GENERATED_HMAC_HASH" // Generated on your backend subscriber={{ subscriberId: "YOUR_SUBSCRIBER_ID", firstName: "John", lastName: "Doe", email: "[email protected]" }} />
213-213: Alt text mismatch also appears here; double-check other images’ alts.The incorrect alt likely came from copy/paste. Please scan other images in this page for similar mismatches.
To quickly check, search for “alt=” occurrences and ensure they describe the corresponding image.
| NEED PARAGRAPH HERE, AVOID STACKED HEADINGS! | ||
|
|
There was a problem hiding this comment.
Replace placeholder: add introductory paragraph for Event handling.
There’s a visible “NEED PARAGRAPH HERE” placeholder. Add a short intro to avoid stacked headings and improve flow.
Apply this diff:
-NEED PARAGRAPH HERE, AVOID STACKED HEADINGS!
+Use event handlers to react to user interactions without forcing navigation. These callbacks let you open modals or drawers, trigger side effects, and integrate with your app’s state management.📝 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.
| NEED PARAGRAPH HERE, AVOID STACKED HEADINGS! | |
| Use event handlers to react to user interactions without forcing navigation. These callbacks let you open modals or drawers, trigger side effects, and integrate with your app’s state management. |
🤖 Prompt for AI Agents
In content/docs/platform/inbox/react/components/inbox.mdx around lines 249 to
250, there is a placeholder "NEED PARAGRAPH HERE, AVOID STACKED HEADINGS!" where
an introductory paragraph for the Event handling section is missing; replace the
placeholder with a concise introductory paragraph (2–3 sentences) that briefly
explains what Event handling covers, why it matters for the Inbox component, and
how the following subsections are organized to guide the reader through common
usage and examples.
| NEED PARAGRAPH HERE, AVOID STACKED HEADINGS! | ||
|
|
||
| ### Controlled popover state | ||
|
|
||
| NEED PARAGRAPH HERE | ||
|
|
There was a problem hiding this comment.
Replace placeholders in Customization and Controlled popover subsections.
Two “NEED PARAGRAPH HERE” placeholders should be replaced with concise intros.
Apply this diff:
-NEED PARAGRAPH HERE, AVOID STACKED HEADINGS!
+Tailor the look, feel, and behavior of the Inbox to match your product. You can control the popover state, override renderers, and fine‑tune interactions.-NEED PARAGRAPH HERE
+Use a controlled open state when you need to toggle the popover from outside the component (for example, from a header button or a keyboard shortcut).📝 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.
| NEED PARAGRAPH HERE, AVOID STACKED HEADINGS! | |
| ### Controlled popover state | |
| NEED PARAGRAPH HERE | |
| Tailor the look, feel, and behavior of the Inbox to match your product. You can control the popover state, override renderers, and fine-tune interactions. | |
| ### Controlled popover state | |
| Use a controlled open state when you need to toggle the popover from outside the component (for example, from a header button or a keyboard shortcut). |
🤖 Prompt for AI Agents
content/docs/platform/inbox/react/components/inbox.mdx around lines 296 to 301:
replace the two "NEED PARAGRAPH HERE" placeholders with concise one-sentence
intros — for the Customization subsection add a short sentence that summarizes
that this section shows how to customize the Inbox’s appearance and behavior via
props and CSS variables, and for the Controlled popover state subsection add a
short sentence that explains this section covers controlling the popover’s
open/closed state from your component using state/props and links to the
relevant example/API usage.
| NEED PARAGRAPH HERE | ||
|
|
There was a problem hiding this comment.
Replace placeholder: add intro for custom notification item.
Add a brief paragraph so the section isn’t a stacked heading followed by code.
Apply this diff:
-NEED PARAGRAPH HERE
+Replace the default notification item UI with your own component. You receive the full notification object and decide exactly how it’s rendered.📝 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.
| NEED PARAGRAPH HERE | |
| Replace the default notification item UI with your own component. You receive the full notification object and decide exactly how it’s rendered. |
🤖 Prompt for AI Agents
In content/docs/platform/inbox/react/components/inbox.mdx around lines 324 to
325, the placeholder "NEED PARAGRAPH HERE" should be replaced with a short
introductory paragraph that explains the purpose of the upcoming custom
notification item example and briefly describes what the reader will learn
(e.g., when to use a custom notification item, what it customizes, and a
one-sentence summary of the code sample). Keep it concise (1–2 sentences),
written in present tense, and positioned directly above the code block so the
heading is not immediately followed by code.
|
|
||
| **Steps**: | ||
| ### Steps to render HTML | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add security callout about XSS when disabling sanitization.
Disabling sanitization requires a clear security warning.
Apply this diff:
}+
- Rendering unsanitized HTML can expose your app to XSS. Only disable sanitization for trusted, server‑side content and never interpolate user input.
+
Steps to render HTML
> Committable suggestion skipped: line range outside the PR's diff.
<details>
<summary>🤖 Prompt for AI Agents</summary>
content/docs/platform/inbox/react/components/inbox.mdx around lines 531-533: add
a security warning Callout immediately above the "### Steps to render HTML"
heading warning about XSS when disabling sanitization; insert a Callout
component with type="warn" and the text: "Rendering unsanitized HTML can expose
your app to XSS. Only disable sanitization for trusted, server‑side content and
never interpolate user input." so the guidance is explicit and positioned before
the steps.
</details>
<!-- fingerprinting:phantom:triton:chinchilla -->
<!-- This is an auto-generated comment by CodeRabbit -->
Edited content.
There are stacked headings and missing intro paragraphs that need to be addressed.
Also, this topic is extremely long. Consider breaking it up into more manageable sections.
Summary by CodeRabbit