feat(js,react): context-aware inbox session fixes NV-6789 #9344

ChmaraX · 2025-10-13T08:57:25Z

What changed? Why was the change needed?

Screenshots

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

Summary by CodeRabbit

New Features
- Pass contextual data when initializing a session via the JS SDK.
- New Context type available for typing and passing rich context.
- React: Inbox and provider components now accept an optional context prop.
- Context is sent during session creation and exposed via getters on Novu and Session.
- Session responses now include contextKeys; these are surfaced through the Inbox context for consumers.
- Expanded type definitions to include context and contextKeys across session and options.

linear · 2025-10-13T08:57:28Z

NV-6789 [JS/React] context

netlify · 2025-10-13T08:57:33Z

✅ Deploy Preview for dashboard-v2-novu-staging canceled.

Name	Link
🔨 Latest commit	`9e9b81b`
🔍 Latest deploy log	https://app.netlify.com/projects/dashboard-v2-novu-staging/deploys/68ecf2aa28043b0008484453

ChmaraX · 2025-10-13T09:00:11Z

@coderabbitai summary

coderabbitai · 2025-10-13T09:00:36Z

✅ Actions performed

Summary regeneration triggered.

coderabbitai · 2025-10-13T09:02:04Z

Walkthrough

Adds context propagation to session initialization and exposes contextKeys in responses. Server DTO and use case now include contextKeys. JS SDK accepts optional context, forwards it to /inbox/session, and exposes context and contextKeys. React and UI layers accept and pass context, and UI context provides contextKeys from the initialized session.

Changes

Cohort / File(s)	Summary
API: Inbox session DTO/use case `apps/api/src/app/inbox/dtos/subscriber-session-response.dto.ts`, `apps/api/src/app/inbox/usecases/session/session.usecase.ts`	Add `contextKeys: string[]` to response DTO; include `contextKeys` in `Session.execute` return payload.
JS SDK: Session initialization + types `packages/js/src/api/inbox-service.ts`, `packages/js/src/session/session.ts`, `packages/js/src/session/types.ts`, `packages/js/src/types.ts`, `packages/js/src/novu.ts`, `packages/js/src/index.ts`	Thread optional `context` through initialization payload and public API; add getters for `context`; export `Context`, `ContextValue`; extend `Session` type with `contextKeys?: string[]`; extend options with `context?: Context`.
UI: Inbox context `packages/js/src/ui/context/InboxContext.tsx`	Add `contextKeys` accessor to context type; manage local `contextKeys` state; set from session initialization result.
React: Prop wiring `packages/react/src/components/Inbox.tsx`, `packages/react/src/hooks/NovuProvider.tsx`, `packages/react/src/utils/types.ts`	Accept and forward `context` via props to Novu instance and renderer; include `Context` in types; add `context?: Context` to base props; note placeholder for future context updates.

Sequence Diagram(s)

sequenceDiagram
  participant App as React App
  participant React as @novu/react
  participant JSSDK as @novu/js
  participant API as /inbox/session API
  participant Usecase as Session.usecase
  participant DTO as SubscriberSessionResponseDto

  App->>React: <Inbox context={...} />
  React->>JSSDK: new Novu({ ..., context })
  React->>JSSDK: session.initialize()
  JSSDK->>API: POST /inbox/session { subscriberId, ..., context }
  API->>Usecase: execute(request)
  Usecase->>DTO: build response with contextKeys
  DTO-->>API: { ..., contextKeys }
  API-->>JSSDK: 200 OK { ..., contextKeys }
  JSSDK-->>React: resolve initialize(data)
  React-->>App: InboxContext provides contextKeys
  note over App,React: UI can consume contextKeys from context

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

refactor(api-service): simplify context key types to string #9306 — Refactors backend types around contextKeys to plain string[], overlapping with this PR’s exposure of contextKeys across layers.
feat(api,worker): context trigger flow fixes NV-6658 #9150 — Introduces and propagates context/contextKeys across backend components, aligning with this PR’s end-to-end threading.
feat(api): context-based inbox isolation via JWT fixes NV-6659 #9339 — Modifies inbox session flow and DTOs to carry context/contextKeys, directly related to these session changes.

Suggested labels

@novu/shared

Suggested reviewers

LetItRock
scopsy

Poem

A rabbit taps the session drum, hop-hop, new keys appear!
Context flows from burrow to API, crisp and clear.
Paws pass props, SDK hums, UI softly sings—
contextKeys in clover rings.
With whiskered wit and nimble art,
this hop stitched end-to-end the heart. 🐇✨

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch nv-6789-jsreact-context

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7fec55 and ee42b15.

📒 Files selected for processing (12)

apps/api/src/app/inbox/dtos/subscriber-session-response.dto.ts (1 hunks)
apps/api/src/app/inbox/usecases/session/session.usecase.ts (1 hunks)
packages/js/src/api/inbox-service.ts (2 hunks)
packages/js/src/index.ts (1 hunks)
packages/js/src/novu.ts (2 hunks)
packages/js/src/session/session.ts (3 hunks)
packages/js/src/session/types.ts (2 hunks)
packages/js/src/types.ts (3 hunks)
packages/js/src/ui/context/InboxContext.tsx (4 hunks)
packages/react/src/components/Inbox.tsx (4 hunks)
packages/react/src/hooks/NovuProvider.tsx (3 hunks)
packages/react/src/utils/types.ts (2 hunks)

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-10-13T09:02:14Z

Open in StackBlitz

@novu/js

npm i https://pkg.pr.new/novuhq/novu/@novu/js@9344

@novu/nextjs

npm i https://pkg.pr.new/novuhq/novu/@novu/nextjs@9344

novu

npm i https://pkg.pr.new/novuhq/novu@9344

@novu/react

npm i https://pkg.pr.new/novuhq/novu/@novu/react@9344

@novu/react-native

npm i https://pkg.pr.new/novuhq/novu/@novu/react-native@9344

commit: 9e9b81b

ChmaraX · 2025-10-13T12:46:57Z

packages/js/src/ui/helpers/useWebSocketEvent.ts

 }) => {
  const novu = useNovu();
-  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;
+  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:c=${novu.contextKey}:e=${webSocketEvent}`;


Context = session boundary - we open a new WS connection with separate JWT token for each context.

LetItRock · 2025-10-14T09:55:24Z

packages/js/src/novu.ts

+  public get context() {
+    return this.#session.context;
+  }
+
+  public get contextKey() {
+    return buildContextKey(this.#session.context);
+  }


The context is passed to the Novu constructor, so it is defined in the client code. I am not sure if it would be helpful to expose that.

Yes thats true I just did it for the consistency with the other attributes.

ChmaraX temporarily deployed to Linting October 13, 2025 08:57 — with GitHub Actions Inactive

github-actions bot changed the title ~~Nv 6789 jsreact context~~ Nv 6789 jsreact context fixes NV-6789 Oct 13, 2025

github-actions bot added @novu/ws @novu/worker @novu/dashboard @novu/api-service labels Oct 13, 2025

feat(js): context-aware inbox session

ee42b15

ChmaraX force-pushed the nv-6789-jsreact-context branch from f3f91ec to ee42b15 Compare October 13, 2025 08:59

github-actions bot removed @novu/ws @novu/worker @novu/dashboard labels Oct 13, 2025

ChmaraX temporarily deployed to Linting October 13, 2025 09:00 — with GitHub Actions Inactive

ChmaraX changed the title ~~Nv 6789 jsreact context fixes NV-6789~~ feat(js): context-aware inbox session Oct 13, 2025

github-actions bot changed the title ~~feat(js): context-aware inbox session~~ feat(js): context-aware inbox session fixes NV-6789 Oct 13, 2025

ChmaraX changed the title ~~feat(js): context-aware inbox session fixes NV-6789~~ feat(js,react): context-aware inbox session fixes NV-6789 Oct 13, 2025

multi-inbox separate ws connections

9e9b81b

ChmaraX temporarily deployed to Linting October 13, 2025 12:38 — with GitHub Actions Inactive

ChmaraX commented Oct 13, 2025

View reviewed changes

ChmaraX requested review from LetItRock and scopsy October 13, 2025 12:50

LetItRock approved these changes Oct 14, 2025

View reviewed changes

ChmaraX merged commit 1e61a23 into next Oct 14, 2025
61 of 64 checks passed

ChmaraX deleted the nv-6789-jsreact-context branch October 14, 2025 10:15

coderabbitai bot mentioned this pull request Oct 17, 2025

feat(js,react,api): context HMAC & Inbox dynamic session change fixes NV-6793 #9365

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(js,react): context-aware inbox session fixes NV-6789 #9344

feat(js,react): context-aware inbox session fixes NV-6789 #9344

Uh oh!

ChmaraX commented Oct 13, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

linear bot commented Oct 13, 2025

Uh oh!

netlify bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

ChmaraX commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025

Uh oh!

pkg-pr-new bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

ChmaraX Oct 13, 2025

Uh oh!

LetItRock Oct 14, 2025

Uh oh!

ChmaraX Oct 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(js,react): context-aware inbox session fixes NV-6789 #9344

feat(js,react): context-aware inbox session fixes NV-6789 #9344

Uh oh!

Conversation

ChmaraX commented Oct 13, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed? Why was the change needed?

Screenshots

Related enterprise PR

Special notes for your reviewer

Summary by CodeRabbit

Uh oh!

linear bot commented Oct 13, 2025

Uh oh!

netlify bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for dashboard-v2-novu-staging canceled.

Uh oh!

ChmaraX commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

pkg-pr-new bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChmaraX Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

LetItRock Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

ChmaraX Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ChmaraX commented Oct 13, 2025 •

edited by coderabbitai bot

Loading

netlify bot commented Oct 13, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 13, 2025 •

edited

Loading