@novu/react 3.0.3 → 3.2.0

package/README.md

@@ -22,7 +22,7 @@ function Novu() {
   return (
     <Inbox
       options={{
-        subscriberId: 'SUBSCRIBER_ID',
+        subscriber: 'SUBSCRIBER_ID',
         applicationIdentifier: 'APPLICATION_IDENTIFIER',
       }}
     />
@@ -43,7 +43,7 @@ function Novu() {
       options={{
         backendUrl: 'YOUR_BACKEND_URL',
         socketUrl: 'YOUR_SOCKET_URL',
-        subscriberId: 'SUBSCRIBER_ID',
+        subscriber: 'SUBSCRIBER_ID',
         applicationIdentifier: 'APPLICATION_IDENTIFIER',
       }}
     />
@@ -65,7 +65,7 @@ function Novu() {
     <div>
       <Inbox
         options={{
-          subscriberId: 'SUBSCRIBER_ID',
+          subscriber: 'SUBSCRIBER_ID',
           applicationIdentifier: 'APPLICATION_IDENTIFIER',
         }}
         open={isOpen}
@@ -88,7 +88,7 @@ function Novu() {
   return (
     <Inbox
       options={{
-        subscriberId: 'SUBSCRIBER_ID',
+        subscriber: 'SUBSCRIBER_ID',
         applicationIdentifier: 'APPLICATION_IDENTIFIER',
       }}
       localization={{
@@ -109,7 +109,7 @@ function Novu() {
 
 ## HMAC Encryption
 
-When Novu's user adds the Inbox to their application they are required to pass a `subscriberId` which identifies the user's end-customer, and the application Identifier which is acted as a public key to communicate with the notification feed API.
+When Novu's user adds the Inbox component to their application, developers need to provide a subscriber prop with the value of their customer's subscriberId, along with an application identifier that serves as a public key for API communication.
 
 A malicious actor can access the user feed by accessing the API and passing another `subscriberId` using the public application identifier.
 
@@ -135,7 +135,7 @@ const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY).update(subscribe
 
 ```jsx
 <Inbox
-  subscriberId={'SUBSCRIBER_ID_PLAIN_VALUE'}
+  subscriber={'SUBSCRIBER_ID_PLAIN_VALUE'}
   subscriberHash={'SUBSCRIBER_ID_HASH_VALUE'}
   applicationIdentifier={'APPLICATION_IDENTIFIER'}
 />

package/dist/cjs/components/Bell.d.cts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { BellRenderer } from '../utils/types.cjs';
 import '@novu/js/ui';
+import '@novu/js';
 
 type BellProps = {
     renderBell?: BellRenderer;

package/dist/cjs/components/Inbox.cjs

@@ -105,7 +105,7 @@ var _DefaultInbox = (props) => {
 };
 var DefaultInbox = (0, import_Renderer.withRenderer)(_DefaultInbox);
 var Inbox = import_react.default.memo((props) => {
-  const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
+  const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;
   const novu = (0, import_NovuProvider.useUnsafeNovu)();
   if (novu) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InboxChild, { ...props });
@@ -114,10 +114,10 @@ var Inbox = import_react.default.memo((props) => {
     import_NovuProvider.InternalNovuProvider,
     {
       applicationIdentifier,
-      subscriberId,
       subscriberHash,
       backendUrl,
       socketUrl,
+      subscriber: buildSubscriber(props),
       userAgentType: "components",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InboxChild, { ...props })
     }
@@ -144,7 +144,13 @@ var InboxChild = import_react.default.memo((props) => {
       tabs,
       preferencesFilter,
       routerPush,
-      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
+      options: {
+        applicationIdentifier,
+        subscriberHash,
+        backendUrl,
+        socketUrl,
+        subscriber: buildSubscriber(props)
+      }
     };
   }, [
     localization,
@@ -155,7 +161,8 @@ var InboxChild = import_react.default.memo((props) => {
     subscriberId,
     subscriberHash,
     backendUrl,
-    socketUrl
+    socketUrl,
+    props.subscriber
   ]);
   if (isWithChildrenProps(props)) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: props.children });
@@ -191,6 +198,15 @@ var InboxChild = import_react.default.memo((props) => {
 function isWithChildrenProps(props) {
   return "children" in props;
 }
+function buildSubscriber(options) {
+  let subscriberObj;
+  if (options.subscriber) {
+    subscriberObj = typeof options.subscriber === "string" ? { subscriberId: options.subscriber } : options.subscriber;
+  } else {
+    subscriberObj = { subscriberId: options.subscriberId };
+  }
+  return subscriberObj;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Inbox

package/dist/cjs/components/Inbox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\nimport { NovuUI } from './NovuUI';\nimport { withRenderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst _DefaultInbox = (props: DefaultInboxProps) => {\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placement,\n    placementOffset,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'Inbox',\n          props: {\n            open,\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n            placementOffset,\n            placement,\n          },\n          element,\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          placementOffset,\n          placement,\n        },\n        element,\n      });\n    },\n    [\n      open,\n      renderNotification,\n      renderSubject,\n      renderBody,\n      renderBell,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nconst DefaultInbox = withRenderer(_DefaultInbox);\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return <InboxChild {...props} />;\n  }\n\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberId={subscriberId}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      userAgentType=\"components\"\n    >\n      <InboxChild {...props} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = React.memo((props: InboxProps) => {\n  const {\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    routerPush,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  } = props;\n  const novu = useNovu();\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      routerPush,\n      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n    };\n  }, [\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  ]);\n\n  if (isWithChildrenProps(props)) {\n    return (\n      <NovuUI options={options} novu={novu}>\n        {props.children}\n      </NovuUI>\n    );\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placementOffset,\n    placement,\n  } = props;\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderSubject={renderSubject}\n        renderBody={renderBody}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n        placement={placement}\n        placementOffset={placementOffset}\n      />\n    </NovuUI>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n"],"mappings":"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","names":["React"]}
+{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Subscriber } from '@novu/js';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\nimport { NovuUI } from './NovuUI';\nimport { withRenderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst _DefaultInbox = (props: DefaultInboxProps) => {\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placement,\n    placementOffset,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'Inbox',\n          props: {\n            open,\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n            placementOffset,\n            placement,\n          },\n          element,\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          placementOffset,\n          placement,\n        },\n        element,\n      });\n    },\n    [\n      open,\n      renderNotification,\n      renderSubject,\n      renderBody,\n      renderBell,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nconst DefaultInbox = withRenderer(_DefaultInbox);\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return <InboxChild {...props} />;\n  }\n\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      subscriber={buildSubscriber(props)}\n      userAgentType=\"components\"\n    >\n      <InboxChild {...props} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = React.memo((props: InboxProps) => {\n  const {\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    routerPush,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  } = props;\n  const novu = useNovu();\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      routerPush,\n      options: {\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        socketUrl,\n        subscriber: buildSubscriber(props),\n      },\n    };\n  }, [\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n    props.subscriber,\n  ]);\n\n  if (isWithChildrenProps(props)) {\n    return (\n      <NovuUI options={options} novu={novu}>\n        {props.children}\n      </NovuUI>\n    );\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placementOffset,\n    placement,\n  } = props;\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderSubject={renderSubject}\n        renderBody={renderBody}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n        placement={placement}\n        placementOffset={placementOffset}\n      />\n    </NovuUI>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n\nfunction buildSubscriber(options: InboxProps): Subscriber {\n  let subscriberObj: Subscriber;\n\n  if (options.subscriber) {\n    subscriberObj = typeof options.subscriber === 'string' ? { subscriberId: options.subscriber } : options.subscriber;\n  } else {\n    subscriberObj = { subscriberId: options.subscriberId as string };\n  }\n\n  return subscriberObj;\n}\n"],"mappings":"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","names":["React"]}

package/dist/cjs/components/Inbox.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { DefaultProps, WithChildrenProps } from '../utils/types.cjs';
 import '@novu/js/ui';
+import '@novu/js';
 
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React__default.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;

package/dist/cjs/components/InboxContent.d.cts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { NotificationClickHandler, NotificationActionClickHandler, InboxPage } from '@novu/js/ui';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.cjs';
+import '@novu/js';
 
 type InboxContentProps = {
     onNotificationClick?: NotificationClickHandler;

package/dist/cjs/components/Notifications.d.cts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.cjs';
+import '@novu/js';
 
 type NotificationProps = {
     onNotificationClick?: NotificationClickHandler;

package/dist/cjs/components/index.d.cts

@@ -7,5 +7,5 @@ export { InternalNovuProvider, NovuProvider, NovuProviderProps, useNovu, useUnsa
 import 'react';
 import '../utils/types.cjs';
 import '@novu/js/ui';
-import 'react/jsx-runtime';
 import '@novu/js';
+import 'react/jsx-runtime';

package/dist/cjs/hooks/NovuProvider.cjs

@@ -29,7 +29,7 @@ module.exports = __toCommonJS(NovuProvider_exports);
 var import_js = require("@novu/js");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var version = "3.0.3";
+var version = "3.2.0";
 var name = "@novu/react";
 var baseUserAgent = `${name}@${version}`;
 var NovuContext = (0, import_react.createContext)(void 0);
@@ -39,19 +39,22 @@ var NovuProvider = ({
   subscriberId,
   subscriberHash,
   backendUrl,
+  apiUrl,
   socketUrl,
-  useCache
+  useCache,
+  subscriber
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     InternalNovuProvider,
     {
       applicationIdentifier,
-      subscriberId,
       subscriberHash,
       backendUrl,
+      apiUrl,
       socketUrl,
       useCache,
       userAgentType: "hooks",
+      subscriber: buildSubscriber(subscriberId, subscriber),
       children
     }
   );
@@ -62,21 +65,34 @@ var InternalNovuProvider = ({
   subscriberId,
   subscriberHash,
   backendUrl,
+  apiUrl,
   socketUrl,
   useCache,
+  subscriber,
   userAgentType
 }) => {
   const novu = (0, import_react.useMemo)(
     () => new import_js.Novu({
       applicationIdentifier,
-      subscriberId,
       subscriberHash,
       backendUrl,
+      apiUrl,
       socketUrl,
       useCache,
-      __userAgent: `${baseUserAgent} ${userAgentType}`
+      __userAgent: `${baseUserAgent} ${userAgentType}`,
+      ...subscriber ? { subscriber } : { subscriberId }
     }),
-    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, userAgentType]
+    [
+      applicationIdentifier,
+      subscriberId,
+      subscriberHash,
+      backendUrl,
+      apiUrl,
+      socketUrl,
+      useCache,
+      subscriber,
+      userAgentType
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NovuContext.Provider, { value: novu, children });
 };
@@ -91,6 +107,15 @@ var useUnsafeNovu = () => {
   const context = (0, import_react.useContext)(NovuContext);
   return context;
 };
+function buildSubscriber(subscriberId, subscriber) {
+  let subscriberObj;
+  if (subscriber) {
+    subscriberObj = typeof subscriber === "string" ? { subscriberId: subscriber } : subscriber;
+  } else {
+    subscriberObj = { subscriberId };
+  }
+  return subscriberObj;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InternalNovuProvider,

package/dist/cjs/hooks/NovuProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/NovuProvider.tsx"],"sourcesContent":["import { Novu, NovuOptions } from '@novu/js';\nimport { ReactNode, createContext, useContext, useMemo } from 'react';\n\n// @ts-ignore\nconst version = PACKAGE_VERSION;\n// @ts-ignore\nconst name = PACKAGE_NAME;\nconst baseUserAgent = `${name}@${version}`;\n\nexport type NovuProviderProps = NovuOptions & {\n  children: ReactNode;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  socketUrl,\n  useCache,\n}: NovuProviderProps) => {\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberId={subscriberId}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      useCache={useCache}\n      userAgentType=\"hooks\"\n    >\n      {children}\n    </InternalNovuProvider>\n  );\n};\n\n/**\n * @internal Should be used internally not to be exposed outside of the library\n * This is needed to differentiate between the hooks and components user agents\n * Better to use this internally to avoid confusion.\n */\nexport const InternalNovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  socketUrl,\n  useCache,\n  userAgentType,\n}: NovuProviderProps & { userAgentType: 'components' | 'hooks' }) => {\n  const novu = useMemo(\n    () =>\n      new Novu({\n        applicationIdentifier,\n        subscriberId,\n        subscriberHash,\n        backendUrl,\n        socketUrl,\n        useCache,\n        __userAgent: `${baseUserAgent} ${userAgentType}`,\n      }),\n    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, userAgentType]\n  );\n\n  return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n  const context = useContext(NovuContext);\n  if (!context) {\n    throw new Error('useNovu must be used within a <NovuProvider />');\n  }\n\n  return context;\n};\n\nexport const useUnsafeNovu = () => {\n  const context = useContext(NovuContext);\n\n  return context;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAkC;AAClC,mBAA8D;AAwB1D;AArBJ,IAAM,UAAU;AAEhB,IAAM,OAAO;AACb,IAAM,gBAAgB,GAAG,IAAI,IAAI,OAAO;AAMxC,IAAM,kBAAc,4BAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;AAOO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqE;AACnE,QAAM,WAAO;AAAA,IACX,MACE,IAAI,eAAK;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,GAAG,aAAa,IAAI,aAAa;AAAA,IAChD,CAAC;AAAA,IACH,CAAC,uBAAuB,cAAc,gBAAgB,YAAY,WAAW,UAAU,aAAa;AAAA,EACtG;AAEA,SAAO,4CAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,cAAU,yBAAW,WAAW;AAEtC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/hooks/NovuProvider.tsx"],"sourcesContent":["import { Novu, NovuOptions, Subscriber } from '@novu/js';\nimport { ReactNode, createContext, useContext, useMemo } from 'react';\n\n// @ts-ignore\nconst version = PACKAGE_VERSION;\n// @ts-ignore\nconst name = PACKAGE_NAME;\nconst baseUserAgent = `${name}@${version}`;\n\nexport type NovuProviderProps = NovuOptions & {\n  children: ReactNode;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  apiUrl,\n  socketUrl,\n  useCache,\n  subscriber,\n}: NovuProviderProps) => {\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      apiUrl={apiUrl}\n      socketUrl={socketUrl}\n      useCache={useCache}\n      userAgentType=\"hooks\"\n      subscriber={buildSubscriber(subscriberId, subscriber)}\n    >\n      {children}\n    </InternalNovuProvider>\n  );\n};\n\n/**\n * @internal Should be used internally not to be exposed outside of the library\n * This is needed to differentiate between the hooks and components user agents\n * Better to use this internally to avoid confusion.\n */\nexport const InternalNovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  apiUrl,\n  socketUrl,\n  useCache,\n  subscriber,\n  userAgentType,\n}: NovuProviderProps & { userAgentType: 'components' | 'hooks' }) => {\n  const novu = useMemo(\n    () =>\n      new Novu({\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        apiUrl,\n        socketUrl,\n        useCache,\n        __userAgent: `${baseUserAgent} ${userAgentType}`,\n        ...(subscriber ? { subscriber } : { subscriberId: subscriberId as string }),\n      }),\n    [\n      applicationIdentifier,\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      apiUrl,\n      socketUrl,\n      useCache,\n      subscriber,\n      userAgentType,\n    ]\n  );\n\n  return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n  const context = useContext(NovuContext);\n  if (!context) {\n    throw new Error('useNovu must be used within a <NovuProvider />');\n  }\n\n  return context;\n};\n\nexport const useUnsafeNovu = () => {\n  const context = useContext(NovuContext);\n\n  return context;\n};\n\nfunction buildSubscriber(subscriberId: string | undefined, subscriber: Subscriber | string | undefined): Subscriber {\n  let subscriberObj: Subscriber;\n\n  if (subscriber) {\n    subscriberObj = typeof subscriber === 'string' ? { subscriberId: subscriber } : subscriber;\n  } else {\n    subscriberObj = { subscriberId: subscriberId as string };\n  }\n\n  return subscriberObj;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA8C;AAC9C,mBAA8D;AA0B1D;AAvBJ,IAAM,UAAU;AAEhB,IAAM,OAAO;AACb,IAAM,gBAAgB,GAAG,IAAI,IAAI,OAAO;AAMxC,IAAM,kBAAc,4BAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAc;AAAA,MACd,YAAY,gBAAgB,cAAc,UAAU;AAAA,MAEnD;AAAA;AAAA,EACH;AAEJ;AAOO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqE;AACnE,QAAM,WAAO;AAAA,IACX,MACE,IAAI,eAAK;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,GAAG,aAAa,IAAI,aAAa;AAAA,MAC9C,GAAI,aAAa,EAAE,WAAW,IAAI,EAAE,aAAqC;AAAA,IAC3E,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,cAAU,yBAAW,WAAW;AAEtC,SAAO;AACT;AAEA,SAAS,gBAAgB,cAAkC,YAAyD;AAClH,MAAI;AAEJ,MAAI,YAAY;AACd,oBAAgB,OAAO,eAAe,WAAW,EAAE,cAAc,WAAW,IAAI;AAAA,EAClF,OAAO;AACL,oBAAgB,EAAE,aAAqC;AAAA,EACzD;AAEA,SAAO;AACT;","names":[]}

package/dist/cjs/hooks/NovuProvider.d.cts

@@ -5,13 +5,13 @@ import { ReactNode } from 'react';
 type NovuProviderProps = NovuOptions & {
     children: ReactNode;
 };
-declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
+declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, subscriber, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
 /**
  * @internal Should be used internally not to be exposed outside of the library
  * This is needed to differentiate between the hooks and components user agents
  * Better to use this internally to avoid confusion.
  */
-declare const InternalNovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, userAgentType, }: NovuProviderProps & {
+declare const InternalNovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, subscriber, userAgentType, }: NovuProviderProps & {
     userAgentType: "components" | "hooks";
 }) => react_jsx_runtime.JSX.Element;
 declare const useNovu: () => Novu;

package/dist/cjs/hooks/internal/useWebsocketEvent.cjs

@@ -32,14 +32,18 @@ var useWebSocketEvent = ({
   eventHandler: onMessage
 }) => {
   const novu = (0, import_NovuProvider.useNovu)();
-  const { postMessage } = (0, import_useBrowserTabsChannel.useBrowserTabsChannel)({ channelName: `nv.${webSocketEvent}`, onMessage });
+  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;
+  const { postMessage } = (0, import_useBrowserTabsChannel.useBrowserTabsChannel)({
+    channelName,
+    onMessage
+  });
   const updateReadCount = (data) => {
     onMessage(data);
     postMessage(data);
   };
   (0, import_react.useEffect)(() => {
     let cleanup;
-    const resolveLock = (0, import_requestLock.requestLock)(`nv.${webSocketEvent}`, () => {
+    const resolveLock = (0, import_requestLock.requestLock)(channelName, () => {
       cleanup = novu.on(webSocketEvent, updateReadCount);
     });
     return () => {

package/dist/cjs/hooks/internal/useWebsocketEvent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/internal/useWebsocketEvent.ts"],"sourcesContent":["import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n  event: webSocketEvent,\n  eventHandler: onMessage,\n}: {\n  event: E;\n  eventHandler: (args: Events[E]) => void;\n}) => {\n  const novu = useNovu();\n  const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });\n\n  const updateReadCount: EventHandler<Events[E]> = (data) => {\n    onMessage(data);\n    postMessage(data);\n  };\n\n  useEffect(() => {\n    let cleanup: () => void;\n    const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {\n      cleanup = novu.on(webSocketEvent, updateReadCount);\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n\n      resolveLock();\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0B;AAC1B,0BAAwB;AACxB,yBAA4B;AAC5B,mCAAsC;AAE/B,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,WAAO,6BAAQ;AACrB,QAAM,EAAE,YAAY,QAAI,oDAAsB,EAAE,aAAa,MAAM,cAAc,IAAI,UAAU,CAAC;AAEhG,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,8BAAU,MAAM;AACd,QAAI;AACJ,UAAM,kBAAc,gCAAY,MAAM,cAAc,IAAI,MAAM;AAC5D,gBAAU,KAAK,GAAG,gBAAgB,eAAe;AAAA,IACnD,CAAC;AAED,WAAO,MAAM;AACX,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAEA,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}
+{"version":3,"sources":["../../../../src/hooks/internal/useWebsocketEvent.ts"],"sourcesContent":["import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n  event: webSocketEvent,\n  eventHandler: onMessage,\n}: {\n  event: E;\n  eventHandler: (args: Events[E]) => void;\n}) => {\n  const novu = useNovu();\n  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;\n\n  const { postMessage } = useBrowserTabsChannel({\n    channelName,\n    onMessage,\n  });\n\n  const updateReadCount: EventHandler<Events[E]> = (data) => {\n    onMessage(data);\n    postMessage(data);\n  };\n\n  useEffect(() => {\n    let cleanup: () => void;\n    const resolveLock = requestLock(channelName, () => {\n      cleanup = novu.on(webSocketEvent, updateReadCount);\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n\n      resolveLock();\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0B;AAC1B,0BAAwB;AACxB,yBAA4B;AAC5B,mCAAsC;AAE/B,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,WAAO,6BAAQ;AACrB,QAAM,cAAc,sBAAsB,KAAK,qBAAqB,MAAM,KAAK,YAAY,MAAM,cAAc;AAE/G,QAAM,EAAE,YAAY,QAAI,oDAAsB;AAAA,IAC5C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,8BAAU,MAAM;AACd,QAAI;AACJ,UAAM,kBAAc,gCAAY,aAAa,MAAM;AACjD,gBAAU,KAAK,GAAG,gBAAgB,eAAe;AAAA,IACnD,CAAC;AAED,WAAO,MAAM;AACX,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAEA,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}

package/dist/cjs/index.cjs

@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -11,17 +15,36 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
+__export(src_exports, {
+  Bell: () => import_components.Bell,
+  Inbox: () => import_components.Inbox,
+  InboxContent: () => import_components.InboxContent,
+  Notifications: () => import_components.Notifications,
+  NovuProvider: () => import_components.NovuProvider,
+  Preferences: () => import_components.Preferences,
+  useCounts: () => import_hooks.useCounts,
+  useNotifications: () => import_hooks.useNotifications,
+  useNovu: () => import_hooks.useNovu,
+  usePreferences: () => import_hooks.usePreferences
+});
 module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./components/index.cjs"), module.exports);
-__reExport(src_exports, require("./hooks/index.cjs"), module.exports);
+var import_components = require("./components/index.cjs");
+var import_hooks = require("./hooks/index.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./components/index.cjs"),
-  ...require("./hooks/index.cjs")
+  Bell,
+  Inbox,
+  InboxContent,
+  Notifications,
+  NovuProvider,
+  Preferences,
+  useCounts,
+  useNotifications,
+  useNovu,
+  usePreferences
 });
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components';\nexport * from './hooks';\nexport type * from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,mCAAd;AACA,wBAAc,8BADd;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  PreferencesResponse,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n  WebSocketEvent,\n  EventHandler,\n  Events,\n  SocketEventNames,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport { Inbox, Bell, InboxContent, Notifications, NovuProvider, Preferences } from './components';\nexport { useNovu, useCounts, useNotifications, usePreferences } from './hooks';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from './components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from './hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCA,wBAAoF;AACpF,mBAAqE;","names":[]}

package/dist/cjs/index.d.cts

@@ -1,14 +1,14 @@
+export { ChannelPreference, ChannelType, EventHandler, Events, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel, PreferencesResponse, SocketEventNames, WebSocketEvent } from '@novu/js';
+export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
 export { Bell, BellProps } from './components/Bell.cjs';
 export { Inbox, InboxProps } from './components/Inbox.cjs';
 export { Preferences } from './components/Preferences.cjs';
 export { NotificationProps, Notifications } from './components/Notifications.cjs';
 export { InboxContent, InboxContentProps } from './components/InboxContent.cjs';
-export { InternalNovuProvider, NovuProvider, NovuProviderProps, useNovu, useUnsafeNovu } from './hooks/NovuProvider.cjs';
+export { NovuProvider, NovuProviderProps, useNovu } from './hooks/NovuProvider.cjs';
 export { UseNotificationsProps, UseNotificationsResult, useNotifications } from './hooks/useNotifications.cjs';
 export { UsePreferencesProps, UsePreferencesResult, usePreferences } from './hooks/usePreferences.cjs';
 export { UseCountsProps, UseCountsResult, useCounts } from './hooks/useCounts.cjs';
 export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from './utils/types.cjs';
-export { Notification } from '@novu/js/ui';
 import 'react';
 import 'react/jsx-runtime';
-import '@novu/js';

package/dist/cjs/server/index.cjs

@@ -15,7 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/server/index.tsx
@@ -33,7 +32,6 @@ __export(server_exports, {
   usePreferences: () => usePreferences
 });
 module.exports = __toCommonJS(server_exports);
-__reExport(server_exports, require("../utils/types.cjs"), module.exports);
 function Inbox(props) {
 }
 function InboxContent() {
@@ -86,7 +84,6 @@ function usePreferences(_) {
   useCounts,
   useNotifications,
   useNovu,
-  usePreferences,
-  ...require("../utils/types.cjs")
+  usePreferences
 });
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/server/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/server/index.tsx"],"sourcesContent":["import type {\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\nimport type { UseCountsProps, UseCountsResult } from '../hooks/useCounts';\nimport type { InboxProps } from '../components/Inbox';\nimport type { NovuProviderProps } from '../hooks/NovuProvider';\n\nexport * from '../utils/types';\n\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox(props: InboxProps) {}\n\nexport function InboxContent() {}\n\nexport function Notifications() {}\n\nexport function Preferences() {}\n\nexport function Bell() {}\n\nexport function NovuProvider(props: NovuProviderProps) {}\n\nexport function useNovu() {\n  return null;\n}\n\nexport function useCounts(_: UseCountsProps): UseCountsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport function useNotifications(_: UseNotificationsProps): UseNotificationsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    hasMore: false,\n    readAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAllRead: () => Promise.resolve({ data: undefined, error: undefined }),\n    refetch: () => Promise.resolve(),\n    fetchMore: () => Promise.resolve(),\n  };\n}\n\nexport function usePreferences(_: UsePreferencesProps): UsePreferencesResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,2BAAc,+BAVd;AAkBO,SAAS,MAAM,OAAmB;AAAC;AAEnC,SAAS,eAAe;AAAC;AAEzB,SAAS,gBAAgB;AAAC;AAE1B,SAAS,cAAc;AAAC;AAExB,SAAS,OAAO;AAAC;AAEjB,SAAS,aAAa,OAA0B;AAAC;AAEjD,SAAS,UAAU;AACxB,SAAO;AACT;AAEO,SAAS,UAAU,GAAoC;AAC5D,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;AAEO,SAAS,iBAAiB,GAAkD;AACjF,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACpE,YAAY,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACvE,gBAAgB,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IAC3E,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAEO,SAAS,eAAe,GAA8C;AAC3E,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;","names":[]}
+{"version":3,"sources":["../../../src/server/index.tsx"],"sourcesContent":["import type {\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\nimport type { UseCountsProps, UseCountsResult } from '../hooks/useCounts';\nimport type { InboxProps } from '../components/Inbox';\nimport type { NovuProviderProps } from '../hooks/NovuProvider';\n\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox(props: InboxProps) {}\n\nexport function InboxContent() {}\n\nexport function Notifications() {}\n\nexport function Preferences() {}\n\nexport function Bell() {}\n\nexport function NovuProvider(props: NovuProviderProps) {}\n\nexport function useNovu() {\n  return null;\n}\n\nexport function useCounts(_: UseCountsProps): UseCountsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport function useNotifications(_: UseNotificationsProps): UseNotificationsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    hasMore: false,\n    readAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAllRead: () => Promise.resolve({ data: undefined, error: undefined }),\n    refetch: () => Promise.resolve(),\n    fetchMore: () => Promise.resolve(),\n  };\n}\n\nexport function usePreferences(_: UsePreferencesProps): UsePreferencesResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from '../components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from '../utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBO,SAAS,MAAM,OAAmB;AAAC;AAEnC,SAAS,eAAe;AAAC;AAEzB,SAAS,gBAAgB;AAAC;AAE1B,SAAS,cAAc;AAAC;AAExB,SAAS,OAAO;AAAC;AAEjB,SAAS,aAAa,OAA0B;AAAC;AAEjD,SAAS,UAAU;AACxB,SAAO;AACT;AAEO,SAAS,UAAU,GAAoC;AAC5D,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;AAEO,SAAS,iBAAiB,GAAkD;AACjF,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACpE,YAAY,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACvE,gBAAgB,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IAC3E,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAEO,SAAS,eAAe,GAA8C;AAC3E,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;","names":[]}

package/dist/cjs/server/index.d.cts

@@ -3,9 +3,12 @@ import { UsePreferencesProps, UsePreferencesResult } from '../hooks/usePreferenc
 import { UseCountsProps, UseCountsResult } from '../hooks/useCounts.cjs';
 import { NovuProviderProps } from '../hooks/NovuProvider.cjs';
 import { InboxProps } from '../components/Inbox.cjs';
+export { ChannelPreference, ChannelType, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel } from '@novu/js';
+export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
+export { BellProps } from '../components/Bell.cjs';
+export { NotificationProps } from '../components/Notifications.cjs';
+export { InboxContentProps } from '../components/InboxContent.cjs';
 export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from '../utils/types.cjs';
-export { Notification } from '@novu/js/ui';
-import '@novu/js';
 import 'react/jsx-runtime';
 import 'react';
 
@@ -26,4 +29,4 @@ declare function useCounts(_: UseCountsProps): UseCountsResult;
 declare function useNotifications(_: UseNotificationsProps): UseNotificationsResult;
 declare function usePreferences(_: UsePreferencesProps): UsePreferencesResult;
 
-export { Bell, Inbox, InboxContent, Notifications, NovuProvider, Preferences, useCounts, useNotifications, useNovu, usePreferences };
+export { Bell, Inbox, InboxContent, InboxProps, Notifications, NovuProvider, NovuProviderProps, Preferences, UseCountsProps, UseCountsResult, UseNotificationsProps, UseNotificationsResult, UsePreferencesProps, UsePreferencesResult, useCounts, useNotifications, useNovu, usePreferences };

package/dist/cjs/utils/types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/types.ts"],"sourcesContent":["import type {\n  Notification,\n  NotificationClickHandler,\n  NotificationActionClickHandler,\n  Tab,\n  Appearance,\n  Localization,\n  RouterPush,\n  PreferencesFilter,\n  InboxProps,\n} from '@novu/js/ui';\n\nexport type NotificationsRenderer = (notification: Notification) => React.ReactNode;\nexport type SubjectRenderer = (notification: Notification) => React.ReactNode;\nexport type BodyRenderer = (notification: Notification) => React.ReactNode;\nexport type BellRenderer = (unreadCount: number) => React.ReactNode;\n\nexport type DefaultInboxProps = {\n  open?: boolean;\n  renderNotification?: NotificationsRenderer;\n  renderSubject?: SubjectRenderer;\n  renderBody?: BodyRenderer;\n  renderBell?: BellRenderer;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  placement?: InboxProps['placement'];\n  placementOffset?: InboxProps['placementOffset'];\n};\n\nexport type BaseProps = {\n  applicationIdentifier: string;\n  subscriberId: string;\n  subscriberHash?: string;\n  backendUrl?: string;\n  socketUrl?: string;\n  appearance?: Appearance;\n  localization?: Localization;\n  tabs?: Array<Tab>;\n  preferencesFilter?: PreferencesFilter;\n  routerPush?: RouterPush;\n};\n\nexport type NotificationRendererProps = {\n  renderNotification: NotificationsRenderer;\n  renderSubject?: never;\n  renderBody?: never;\n};\n\nexport type SubjectBodyRendererProps = {\n  renderNotification?: never;\n  renderSubject?: SubjectRenderer;\n  renderBody?: BodyRenderer;\n};\n\nexport type NoRendererProps = {\n  renderNotification?: undefined;\n  renderSubject?: undefined;\n  renderBody?: undefined;\n};\n\nexport type DefaultProps = BaseProps &\n  DefaultInboxProps & {\n    children?: never;\n  } & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nexport type WithChildrenProps = BaseProps & {\n  children: React.ReactNode;\n};\n\nexport type { Notification };\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/utils/types.ts"],"sourcesContent":["import type {\n  Notification,\n  NotificationClickHandler,\n  NotificationActionClickHandler,\n  Tab,\n  Appearance,\n  Localization,\n  RouterPush,\n  PreferencesFilter,\n  InboxProps,\n} from '@novu/js/ui';\nimport type { Subscriber } from '@novu/js';\n\nexport type NotificationsRenderer = (notification: Notification) => React.ReactNode;\nexport type SubjectRenderer = (notification: Notification) => React.ReactNode;\nexport type BodyRenderer = (notification: Notification) => React.ReactNode;\nexport type BellRenderer = (unreadCount: number) => React.ReactNode;\n\nexport type DefaultInboxProps = {\n  open?: boolean;\n  renderNotification?: NotificationsRenderer;\n  renderSubject?: SubjectRenderer;\n  renderBody?: BodyRenderer;\n  renderBell?: BellRenderer;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  placement?: InboxProps['placement'];\n  placementOffset?: InboxProps['placementOffset'];\n};\n\nexport type BaseProps = {\n  applicationIdentifier: string;\n  subscriberHash?: string;\n  backendUrl?: string;\n  socketUrl?: string;\n  appearance?: Appearance;\n  localization?: Localization;\n  tabs?: Array<Tab>;\n  preferencesFilter?: PreferencesFilter;\n  routerPush?: RouterPush;\n} & (\n  | {\n      // TODO: Backward compatibility support - remove in future versions (see NV-5801)\n      /** @deprecated Use subscriber prop instead */\n      subscriberId: string;\n      subscriber?: never;\n    }\n  | {\n      subscriber: Subscriber | string;\n      subscriberId?: never;\n    }\n);\n\nexport type NotificationRendererProps = {\n  renderNotification: NotificationsRenderer;\n  renderSubject?: never;\n  renderBody?: never;\n};\n\nexport type SubjectBodyRendererProps = {\n  renderNotification?: never;\n  renderSubject?: SubjectRenderer;\n  renderBody?: BodyRenderer;\n};\n\nexport type NoRendererProps = {\n  renderNotification?: undefined;\n  renderSubject?: undefined;\n  renderBody?: undefined;\n};\n\nexport type DefaultProps = BaseProps &\n  DefaultInboxProps & {\n    children?: never;\n  } & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nexport type WithChildrenProps = BaseProps & {\n  children: React.ReactNode;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/utils/types.d.cts

@@ -1,5 +1,5 @@
 import { Notification, NotificationClickHandler, NotificationActionClickHandler, InboxProps, Appearance, Localization, Tab, PreferencesFilter, RouterPush } from '@novu/js/ui';
-export { Notification } from '@novu/js/ui';
+import { Subscriber } from '@novu/js';
 
 type NotificationsRenderer = (notification: Notification) => React.ReactNode;
 type SubjectRenderer = (notification: Notification) => React.ReactNode;
@@ -19,7 +19,6 @@ type DefaultInboxProps = {
 };
 type BaseProps = {
     applicationIdentifier: string;
-    subscriberId: string;
     subscriberHash?: string;
     backendUrl?: string;
     socketUrl?: string;
@@ -28,7 +27,14 @@ type BaseProps = {
     tabs?: Array<Tab>;
     preferencesFilter?: PreferencesFilter;
     routerPush?: RouterPush;
-};
+} & ({
+    /** @deprecated Use subscriber prop instead */
+    subscriberId: string;
+    subscriber?: never;
+} | {
+    subscriber: Subscriber | string;
+    subscriberId?: never;
+});
 type NotificationRendererProps = {
     renderNotification: NotificationsRenderer;
     renderSubject?: never;

package/dist/esm/components/Bell.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { BellRenderer } from '../utils/types.js';
 import '@novu/js/ui';
+import '@novu/js';
 
 type BellProps = {
     renderBell?: BellRenderer;

package/dist/esm/components/Inbox.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { DefaultProps, WithChildrenProps } from '../utils/types.js';
 import '@novu/js/ui';
+import '@novu/js';
 
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React__default.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;

package/dist/esm/components/Inbox.js

@@ -71,7 +71,7 @@ var _DefaultInbox = (props) => {
 };
 var DefaultInbox = withRenderer(_DefaultInbox);
 var Inbox = React.memo((props) => {
-  const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
+  const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;
   const novu = useUnsafeNovu();
   if (novu) {
     return /* @__PURE__ */ jsx(InboxChild, { ...props });
@@ -80,10 +80,10 @@ var Inbox = React.memo((props) => {
     InternalNovuProvider,
     {
       applicationIdentifier,
-      subscriberId,
       subscriberHash,
       backendUrl,
       socketUrl,
+      subscriber: buildSubscriber(props),
       userAgentType: "components",
       children: /* @__PURE__ */ jsx(InboxChild, { ...props })
     }
@@ -110,7 +110,13 @@ var InboxChild = React.memo((props) => {
       tabs,
       preferencesFilter,
       routerPush,
-      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
+      options: {
+        applicationIdentifier,
+        subscriberHash,
+        backendUrl,
+        socketUrl,
+        subscriber: buildSubscriber(props)
+      }
     };
   }, [
     localization,
@@ -121,7 +127,8 @@ var InboxChild = React.memo((props) => {
     subscriberId,
     subscriberHash,
     backendUrl,
-    socketUrl
+    socketUrl,
+    props.subscriber
   ]);
   if (isWithChildrenProps(props)) {
     return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: props.children });
@@ -157,6 +164,15 @@ var InboxChild = React.memo((props) => {
 function isWithChildrenProps(props) {
   return "children" in props;
 }
+function buildSubscriber(options) {
+  let subscriberObj;
+  if (options.subscriber) {
+    subscriberObj = typeof options.subscriber === "string" ? { subscriberId: options.subscriber } : options.subscriber;
+  } else {
+    subscriberObj = { subscriberId: options.subscriberId };
+  }
+  return subscriberObj;
+}
 export {
   Inbox
 };

package/dist/esm/components/Inbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\nimport { NovuUI } from './NovuUI';\nimport { withRenderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst _DefaultInbox = (props: DefaultInboxProps) => {\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placement,\n    placementOffset,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'Inbox',\n          props: {\n            open,\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n            placementOffset,\n            placement,\n          },\n          element,\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          placementOffset,\n          placement,\n        },\n        element,\n      });\n    },\n    [\n      open,\n      renderNotification,\n      renderSubject,\n      renderBody,\n      renderBell,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nconst DefaultInbox = withRenderer(_DefaultInbox);\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return <InboxChild {...props} />;\n  }\n\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberId={subscriberId}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      userAgentType=\"components\"\n    >\n      <InboxChild {...props} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = React.memo((props: InboxProps) => {\n  const {\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    routerPush,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  } = props;\n  const novu = useNovu();\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      routerPush,\n      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n    };\n  }, [\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  ]);\n\n  if (isWithChildrenProps(props)) {\n    return (\n      <NovuUI options={options} novu={novu}>\n        {props.children}\n      </NovuUI>\n    );\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placementOffset,\n    placement,\n  } = props;\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderSubject={renderSubject}\n        renderBody={renderBody}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n        placement={placement}\n        placementOffset={placementOffset}\n      />\n    </NovuUI>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Subscriber } from '@novu/js';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\nimport { NovuUI } from './NovuUI';\nimport { withRenderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst _DefaultInbox = (props: DefaultInboxProps) => {\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placement,\n    placementOffset,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'Inbox',\n          props: {\n            open,\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n            placementOffset,\n            placement,\n          },\n          element,\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          placementOffset,\n          placement,\n        },\n        element,\n      });\n    },\n    [\n      open,\n      renderNotification,\n      renderSubject,\n      renderBody,\n      renderBell,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nconst DefaultInbox = withRenderer(_DefaultInbox);\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return <InboxChild {...props} />;\n  }\n\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      subscriber={buildSubscriber(props)}\n      userAgentType=\"components\"\n    >\n      <InboxChild {...props} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = React.memo((props: InboxProps) => {\n  const {\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    routerPush,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  } = props;\n  const novu = useNovu();\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      routerPush,\n      options: {\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        socketUrl,\n        subscriber: buildSubscriber(props),\n      },\n    };\n  }, [\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n    props.subscriber,\n  ]);\n\n  if (isWithChildrenProps(props)) {\n    return (\n      <NovuUI options={options} novu={novu}>\n        {props.children}\n      </NovuUI>\n    );\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderSubject,\n    renderBody,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placementOffset,\n    placement,\n  } = props;\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderSubject={renderSubject}\n        renderBody={renderBody}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n        placement={placement}\n        placementOffset={placementOffset}\n      />\n    </NovuUI>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n\nfunction buildSubscriber(options: InboxProps): Subscriber {\n  let subscriberObj: Subscriber;\n\n  if (options.subscriber) {\n    subscriberObj = typeof options.subscriber === 'string' ? { subscriberId: options.subscriber } : options.subscriber;\n  } else {\n    subscriberObj = { subscriberId: options.subscriberId as string };\n  }\n\n  return subscriberObj;\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/InboxContent.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { NotificationClickHandler, NotificationActionClickHandler, InboxPage } from '@novu/js/ui';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.js';
+import '@novu/js';
 
 type InboxContentProps = {
     onNotificationClick?: NotificationClickHandler;

package/dist/esm/components/Notifications.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.js';
+import '@novu/js';
 
 type NotificationProps = {
     onNotificationClick?: NotificationClickHandler;

package/dist/esm/components/index.d.ts

@@ -7,5 +7,5 @@ export { InternalNovuProvider, NovuProvider, NovuProviderProps, useNovu, useUnsa
 import 'react';
 import '../utils/types.js';
 import '@novu/js/ui';
-import 'react/jsx-runtime';
 import '@novu/js';
+import 'react/jsx-runtime';

package/dist/esm/hooks/NovuProvider.d.ts

@@ -5,13 +5,13 @@ import { ReactNode } from 'react';
 type NovuProviderProps = NovuOptions & {
     children: ReactNode;
 };
-declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
+declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, subscriber, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
 /**
  * @internal Should be used internally not to be exposed outside of the library
  * This is needed to differentiate between the hooks and components user agents
  * Better to use this internally to avoid confusion.
  */
-declare const InternalNovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, userAgentType, }: NovuProviderProps & {
+declare const InternalNovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, subscriber, userAgentType, }: NovuProviderProps & {
     userAgentType: "components" | "hooks";
 }) => react_jsx_runtime.JSX.Element;
 declare const useNovu: () => Novu;

package/dist/esm/hooks/NovuProvider.js

@@ -2,7 +2,7 @@
 import { Novu } from "@novu/js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-var version = "3.0.3";
+var version = "3.2.0";
 var name = "@novu/react";
 var baseUserAgent = `${name}@${version}`;
 var NovuContext = createContext(void 0);
@@ -12,19 +12,22 @@ var NovuProvider = ({
   subscriberId,
   subscriberHash,
   backendUrl,
+  apiUrl,
   socketUrl,
-  useCache
+  useCache,
+  subscriber
 }) => {
   return /* @__PURE__ */ jsx(
     InternalNovuProvider,
     {
       applicationIdentifier,
-      subscriberId,
       subscriberHash,
       backendUrl,
+      apiUrl,
       socketUrl,
       useCache,
       userAgentType: "hooks",
+      subscriber: buildSubscriber(subscriberId, subscriber),
       children
     }
   );
@@ -35,21 +38,34 @@ var InternalNovuProvider = ({
   subscriberId,
   subscriberHash,
   backendUrl,
+  apiUrl,
   socketUrl,
   useCache,
+  subscriber,
   userAgentType
 }) => {
   const novu = useMemo(
     () => new Novu({
       applicationIdentifier,
-      subscriberId,
       subscriberHash,
       backendUrl,
+      apiUrl,
       socketUrl,
       useCache,
-      __userAgent: `${baseUserAgent} ${userAgentType}`
+      __userAgent: `${baseUserAgent} ${userAgentType}`,
+      ...subscriber ? { subscriber } : { subscriberId }
     }),
-    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, userAgentType]
+    [
+      applicationIdentifier,
+      subscriberId,
+      subscriberHash,
+      backendUrl,
+      apiUrl,
+      socketUrl,
+      useCache,
+      subscriber,
+      userAgentType
+    ]
   );
   return /* @__PURE__ */ jsx(NovuContext.Provider, { value: novu, children });
 };
@@ -64,6 +80,15 @@ var useUnsafeNovu = () => {
   const context = useContext(NovuContext);
   return context;
 };
+function buildSubscriber(subscriberId, subscriber) {
+  let subscriberObj;
+  if (subscriber) {
+    subscriberObj = typeof subscriber === "string" ? { subscriberId: subscriber } : subscriber;
+  } else {
+    subscriberObj = { subscriberId };
+  }
+  return subscriberObj;
+}
 export {
   InternalNovuProvider,
   NovuProvider,

package/dist/esm/hooks/NovuProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/NovuProvider.tsx"],"sourcesContent":["import { Novu, NovuOptions } from '@novu/js';\nimport { ReactNode, createContext, useContext, useMemo } from 'react';\n\n// @ts-ignore\nconst version = PACKAGE_VERSION;\n// @ts-ignore\nconst name = PACKAGE_NAME;\nconst baseUserAgent = `${name}@${version}`;\n\nexport type NovuProviderProps = NovuOptions & {\n  children: ReactNode;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  socketUrl,\n  useCache,\n}: NovuProviderProps) => {\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberId={subscriberId}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      useCache={useCache}\n      userAgentType=\"hooks\"\n    >\n      {children}\n    </InternalNovuProvider>\n  );\n};\n\n/**\n * @internal Should be used internally not to be exposed outside of the library\n * This is needed to differentiate between the hooks and components user agents\n * Better to use this internally to avoid confusion.\n */\nexport const InternalNovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  socketUrl,\n  useCache,\n  userAgentType,\n}: NovuProviderProps & { userAgentType: 'components' | 'hooks' }) => {\n  const novu = useMemo(\n    () =>\n      new Novu({\n        applicationIdentifier,\n        subscriberId,\n        subscriberHash,\n        backendUrl,\n        socketUrl,\n        useCache,\n        __userAgent: `${baseUserAgent} ${userAgentType}`,\n      }),\n    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, userAgentType]\n  );\n\n  return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n  const context = useContext(NovuContext);\n  if (!context) {\n    throw new Error('useNovu must be used within a <NovuProvider />');\n  }\n\n  return context;\n};\n\nexport const useUnsafeNovu = () => {\n  const context = useContext(NovuContext);\n\n  return context;\n};\n"],"mappings":";AAAA,SAAS,YAAyB;AAClC,SAAoB,eAAe,YAAY,eAAe;AAwB1D;AArBJ,IAAM,UAAU;AAEhB,IAAM,OAAO;AACb,IAAM,gBAAgB,GAAG,IAAI,IAAI,OAAO;AAMxC,IAAM,cAAc,cAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;AAOO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqE;AACnE,QAAM,OAAO;AAAA,IACX,MACE,IAAI,KAAK;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,GAAG,aAAa,IAAI,aAAa;AAAA,IAChD,CAAC;AAAA,IACH,CAAC,uBAAuB,cAAc,gBAAgB,YAAY,WAAW,UAAU,aAAa;AAAA,EACtG;AAEA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,UAAU,WAAW,WAAW;AAEtC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/hooks/NovuProvider.tsx"],"sourcesContent":["import { Novu, NovuOptions, Subscriber } from '@novu/js';\nimport { ReactNode, createContext, useContext, useMemo } from 'react';\n\n// @ts-ignore\nconst version = PACKAGE_VERSION;\n// @ts-ignore\nconst name = PACKAGE_NAME;\nconst baseUserAgent = `${name}@${version}`;\n\nexport type NovuProviderProps = NovuOptions & {\n  children: ReactNode;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  apiUrl,\n  socketUrl,\n  useCache,\n  subscriber,\n}: NovuProviderProps) => {\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      apiUrl={apiUrl}\n      socketUrl={socketUrl}\n      useCache={useCache}\n      userAgentType=\"hooks\"\n      subscriber={buildSubscriber(subscriberId, subscriber)}\n    >\n      {children}\n    </InternalNovuProvider>\n  );\n};\n\n/**\n * @internal Should be used internally not to be exposed outside of the library\n * This is needed to differentiate between the hooks and components user agents\n * Better to use this internally to avoid confusion.\n */\nexport const InternalNovuProvider = ({\n  children,\n  applicationIdentifier,\n  subscriberId,\n  subscriberHash,\n  backendUrl,\n  apiUrl,\n  socketUrl,\n  useCache,\n  subscriber,\n  userAgentType,\n}: NovuProviderProps & { userAgentType: 'components' | 'hooks' }) => {\n  const novu = useMemo(\n    () =>\n      new Novu({\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        apiUrl,\n        socketUrl,\n        useCache,\n        __userAgent: `${baseUserAgent} ${userAgentType}`,\n        ...(subscriber ? { subscriber } : { subscriberId: subscriberId as string }),\n      }),\n    [\n      applicationIdentifier,\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      apiUrl,\n      socketUrl,\n      useCache,\n      subscriber,\n      userAgentType,\n    ]\n  );\n\n  return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n  const context = useContext(NovuContext);\n  if (!context) {\n    throw new Error('useNovu must be used within a <NovuProvider />');\n  }\n\n  return context;\n};\n\nexport const useUnsafeNovu = () => {\n  const context = useContext(NovuContext);\n\n  return context;\n};\n\nfunction buildSubscriber(subscriberId: string | undefined, subscriber: Subscriber | string | undefined): Subscriber {\n  let subscriberObj: Subscriber;\n\n  if (subscriber) {\n    subscriberObj = typeof subscriber === 'string' ? { subscriberId: subscriber } : subscriber;\n  } else {\n    subscriberObj = { subscriberId: subscriberId as string };\n  }\n\n  return subscriberObj;\n}\n"],"mappings":";AAAA,SAAS,YAAqC;AAC9C,SAAoB,eAAe,YAAY,eAAe;AA0B1D;AAvBJ,IAAM,UAAU;AAEhB,IAAM,OAAO;AACb,IAAM,gBAAgB,GAAG,IAAI,IAAI,OAAO;AAMxC,IAAM,cAAc,cAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAc;AAAA,MACd,YAAY,gBAAgB,cAAc,UAAU;AAAA,MAEnD;AAAA;AAAA,EACH;AAEJ;AAOO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqE;AACnE,QAAM,OAAO;AAAA,IACX,MACE,IAAI,KAAK;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,GAAG,aAAa,IAAI,aAAa;AAAA,MAC9C,GAAI,aAAa,EAAE,WAAW,IAAI,EAAE,aAAqC;AAAA,IAC3E,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,UAAU,WAAW,WAAW;AAEtC,SAAO;AACT;AAEA,SAAS,gBAAgB,cAAkC,YAAyD;AAClH,MAAI;AAEJ,MAAI,YAAY;AACd,oBAAgB,OAAO,eAAe,WAAW,EAAE,cAAc,WAAW,IAAI;AAAA,EAClF,OAAO;AACL,oBAAgB,EAAE,aAAqC;AAAA,EACzD;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/hooks/internal/useWebsocketEvent.js

@@ -8,14 +8,18 @@ var useWebSocketEvent = ({
   eventHandler: onMessage
 }) => {
   const novu = useNovu();
-  const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });
+  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;
+  const { postMessage } = useBrowserTabsChannel({
+    channelName,
+    onMessage
+  });
   const updateReadCount = (data) => {
     onMessage(data);
     postMessage(data);
   };
   useEffect(() => {
     let cleanup;
-    const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
+    const resolveLock = requestLock(channelName, () => {
       cleanup = novu.on(webSocketEvent, updateReadCount);
     });
     return () => {

package/dist/esm/hooks/internal/useWebsocketEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/internal/useWebsocketEvent.ts"],"sourcesContent":["import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n  event: webSocketEvent,\n  eventHandler: onMessage,\n}: {\n  event: E;\n  eventHandler: (args: Events[E]) => void;\n}) => {\n  const novu = useNovu();\n  const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });\n\n  const updateReadCount: EventHandler<Events[E]> = (data) => {\n    onMessage(data);\n    postMessage(data);\n  };\n\n  useEffect(() => {\n    let cleanup: () => void;\n    const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {\n      cleanup = novu.on(webSocketEvent, updateReadCount);\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n\n      resolveLock();\n    };\n  }, []);\n};\n"],"mappings":";AACA,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AAE/B,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,YAAY,IAAI,sBAAsB,EAAE,aAAa,MAAM,cAAc,IAAI,UAAU,CAAC;AAEhG,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,YAAU,MAAM;AACd,QAAI;AACJ,UAAM,cAAc,YAAY,MAAM,cAAc,IAAI,MAAM;AAC5D,gBAAU,KAAK,GAAG,gBAAgB,eAAe;AAAA,IACnD,CAAC;AAED,WAAO,MAAM;AACX,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAEA,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}
+{"version":3,"sources":["../../../../src/hooks/internal/useWebsocketEvent.ts"],"sourcesContent":["import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n  event: webSocketEvent,\n  eventHandler: onMessage,\n}: {\n  event: E;\n  eventHandler: (args: Events[E]) => void;\n}) => {\n  const novu = useNovu();\n  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;\n\n  const { postMessage } = useBrowserTabsChannel({\n    channelName,\n    onMessage,\n  });\n\n  const updateReadCount: EventHandler<Events[E]> = (data) => {\n    onMessage(data);\n    postMessage(data);\n  };\n\n  useEffect(() => {\n    let cleanup: () => void;\n    const resolveLock = requestLock(channelName, () => {\n      cleanup = novu.on(webSocketEvent, updateReadCount);\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n\n      resolveLock();\n    };\n  }, []);\n};\n"],"mappings":";AACA,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AAE/B,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,sBAAsB,KAAK,qBAAqB,MAAM,KAAK,YAAY,MAAM,cAAc;AAE/G,QAAM,EAAE,YAAY,IAAI,sBAAsB;AAAA,IAC5C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,YAAU,MAAM;AACd,QAAI;AACJ,UAAM,cAAc,YAAY,aAAa,MAAM;AACjD,gBAAU,KAAK,GAAG,gBAAgB,eAAe;AAAA,IACnD,CAAC;AAED,WAAO,MAAM;AACX,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAEA,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}

package/dist/esm/index.d.ts

@@ -1,14 +1,14 @@
+export { ChannelPreference, ChannelType, EventHandler, Events, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel, PreferencesResponse, SocketEventNames, WebSocketEvent } from '@novu/js';
+export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
 export { Bell, BellProps } from './components/Bell.js';
 export { Inbox, InboxProps } from './components/Inbox.js';
 export { Preferences } from './components/Preferences.js';
 export { NotificationProps, Notifications } from './components/Notifications.js';
 export { InboxContent, InboxContentProps } from './components/InboxContent.js';
-export { InternalNovuProvider, NovuProvider, NovuProviderProps, useNovu, useUnsafeNovu } from './hooks/NovuProvider.js';
+export { NovuProvider, NovuProviderProps, useNovu } from './hooks/NovuProvider.js';
 export { UseNotificationsProps, UseNotificationsResult, useNotifications } from './hooks/useNotifications.js';
 export { UsePreferencesProps, UsePreferencesResult, usePreferences } from './hooks/usePreferences.js';
 export { UseCountsProps, UseCountsResult, useCounts } from './hooks/useCounts.js';
 export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from './utils/types.js';
-export { Notification } from '@novu/js/ui';
 import 'react';
 import 'react/jsx-runtime';
-import '@novu/js';

package/dist/esm/index.js

@@ -1,4 +1,16 @@
 // src/index.ts
-export * from "./components/index.js";
-export * from "./hooks/index.js";
+import { Inbox, Bell, InboxContent, Notifications, NovuProvider, Preferences } from "./components/index.js";
+import { useNovu, useCounts, useNotifications, usePreferences } from "./hooks/index.js";
+export {
+  Bell,
+  Inbox,
+  InboxContent,
+  Notifications,
+  NovuProvider,
+  Preferences,
+  useCounts,
+  useNotifications,
+  useNovu,
+  usePreferences
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components';\nexport * from './hooks';\nexport type * from './utils/types';\n"],"mappings":";AAAA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  PreferencesResponse,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n  WebSocketEvent,\n  EventHandler,\n  Events,\n  SocketEventNames,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport { Inbox, Bell, InboxContent, Notifications, NovuProvider, Preferences } from './components';\nexport { useNovu, useCounts, useNotifications, usePreferences } from './hooks';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from './components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from './hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from './utils/types';\n"],"mappings":";AAoCA,SAAS,OAAO,MAAM,cAAc,eAAe,cAAc,mBAAmB;AACpF,SAAS,SAAS,WAAW,kBAAkB,sBAAsB;","names":[]}

package/dist/esm/server/index.d.ts

@@ -3,9 +3,12 @@ import { UsePreferencesProps, UsePreferencesResult } from '../hooks/usePreferenc
 import { UseCountsProps, UseCountsResult } from '../hooks/useCounts.js';
 import { NovuProviderProps } from '../hooks/NovuProvider.js';
 import { InboxProps } from '../components/Inbox.js';
+export { ChannelPreference, ChannelType, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel } from '@novu/js';
+export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
+export { BellProps } from '../components/Bell.js';
+export { NotificationProps } from '../components/Notifications.js';
+export { InboxContentProps } from '../components/InboxContent.js';
 export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from '../utils/types.js';
-export { Notification } from '@novu/js/ui';
-import '@novu/js';
 import 'react/jsx-runtime';
 import 'react';
 
@@ -26,4 +29,4 @@ declare function useCounts(_: UseCountsProps): UseCountsResult;
 declare function useNotifications(_: UseNotificationsProps): UseNotificationsResult;
 declare function usePreferences(_: UsePreferencesProps): UsePreferencesResult;
 
-export { Bell, Inbox, InboxContent, Notifications, NovuProvider, Preferences, useCounts, useNotifications, useNovu, usePreferences };
+export { Bell, Inbox, InboxContent, InboxProps, Notifications, NovuProvider, NovuProviderProps, Preferences, UseCountsProps, UseCountsResult, UseNotificationsProps, UseNotificationsResult, UsePreferencesProps, UsePreferencesResult, useCounts, useNotifications, useNovu, usePreferences };

package/dist/esm/server/index.js

@@ -1,5 +1,4 @@
 // src/server/index.tsx
-export * from "../utils/types.js";
 function Inbox(props) {
 }
 function InboxContent() {

package/dist/esm/server/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/server/index.tsx"],"sourcesContent":["import type {\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\nimport type { UseCountsProps, UseCountsResult } from '../hooks/useCounts';\nimport type { InboxProps } from '../components/Inbox';\nimport type { NovuProviderProps } from '../hooks/NovuProvider';\n\nexport * from '../utils/types';\n\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox(props: InboxProps) {}\n\nexport function InboxContent() {}\n\nexport function Notifications() {}\n\nexport function Preferences() {}\n\nexport function Bell() {}\n\nexport function NovuProvider(props: NovuProviderProps) {}\n\nexport function useNovu() {\n  return null;\n}\n\nexport function useCounts(_: UseCountsProps): UseCountsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport function useNotifications(_: UseNotificationsProps): UseNotificationsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    hasMore: false,\n    readAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAllRead: () => Promise.resolve({ data: undefined, error: undefined }),\n    refetch: () => Promise.resolve(),\n    fetchMore: () => Promise.resolve(),\n  };\n}\n\nexport function usePreferences(_: UsePreferencesProps): UsePreferencesResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n"],"mappings":";AAUA,cAAc;AAQP,SAAS,MAAM,OAAmB;AAAC;AAEnC,SAAS,eAAe;AAAC;AAEzB,SAAS,gBAAgB;AAAC;AAE1B,SAAS,cAAc;AAAC;AAExB,SAAS,OAAO;AAAC;AAEjB,SAAS,aAAa,OAA0B;AAAC;AAEjD,SAAS,UAAU;AACxB,SAAO;AACT;AAEO,SAAS,UAAU,GAAoC;AAC5D,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;AAEO,SAAS,iBAAiB,GAAkD;AACjF,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACpE,YAAY,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACvE,gBAAgB,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IAC3E,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAEO,SAAS,eAAe,GAA8C;AAC3E,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;","names":[]}
+{"version":3,"sources":["../../../src/server/index.tsx"],"sourcesContent":["import type {\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\nimport type { UseCountsProps, UseCountsResult } from '../hooks/useCounts';\nimport type { InboxProps } from '../components/Inbox';\nimport type { NovuProviderProps } from '../hooks/NovuProvider';\n\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox(props: InboxProps) {}\n\nexport function InboxContent() {}\n\nexport function Notifications() {}\n\nexport function Preferences() {}\n\nexport function Bell() {}\n\nexport function NovuProvider(props: NovuProviderProps) {}\n\nexport function useNovu() {\n  return null;\n}\n\nexport function useCounts(_: UseCountsProps): UseCountsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport function useNotifications(_: UseNotificationsProps): UseNotificationsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    hasMore: false,\n    readAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAllRead: () => Promise.resolve({ data: undefined, error: undefined }),\n    refetch: () => Promise.resolve(),\n    fetchMore: () => Promise.resolve(),\n  };\n}\n\nexport function usePreferences(_: UsePreferencesProps): UsePreferencesResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from '../components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from '../utils/types';\n"],"mappings":";AAgBO,SAAS,MAAM,OAAmB;AAAC;AAEnC,SAAS,eAAe;AAAC;AAEzB,SAAS,gBAAgB;AAAC;AAE1B,SAAS,cAAc;AAAC;AAExB,SAAS,OAAO;AAAC;AAEjB,SAAS,aAAa,OAA0B;AAAC;AAEjD,SAAS,UAAU;AACxB,SAAO;AACT;AAEO,SAAS,UAAU,GAAoC;AAC5D,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;AAEO,SAAS,iBAAiB,GAAkD;AACjF,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACpE,YAAY,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACvE,gBAAgB,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IAC3E,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAEO,SAAS,eAAe,GAA8C;AAC3E,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;","names":[]}

package/dist/esm/utils/types.d.ts

@@ -1,5 +1,5 @@
 import { Notification, NotificationClickHandler, NotificationActionClickHandler, InboxProps, Appearance, Localization, Tab, PreferencesFilter, RouterPush } from '@novu/js/ui';
-export { Notification } from '@novu/js/ui';
+import { Subscriber } from '@novu/js';
 
 type NotificationsRenderer = (notification: Notification) => React.ReactNode;
 type SubjectRenderer = (notification: Notification) => React.ReactNode;
@@ -19,7 +19,6 @@ type DefaultInboxProps = {
 };
 type BaseProps = {
     applicationIdentifier: string;
-    subscriberId: string;
     subscriberHash?: string;
     backendUrl?: string;
     socketUrl?: string;
@@ -28,7 +27,14 @@ type BaseProps = {
     tabs?: Array<Tab>;
     preferencesFilter?: PreferencesFilter;
     routerPush?: RouterPush;
-};
+} & ({
+    /** @deprecated Use subscriber prop instead */
+    subscriberId: string;
+    subscriber?: never;
+} | {
+    subscriber: Subscriber | string;
+    subscriberId?: never;
+});
 type NotificationRendererProps = {
     renderNotification: NotificationsRenderer;
     renderSubject?: never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novu/react",
-  "version": "3.0.3",
+  "version": "3.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/novuhq/novu",
@@ -110,7 +110,7 @@
     }
   },
   "dependencies": {
-    "@novu/js": "3.0.3"
+    "@novu/js": "3.2.0"
   },
   "nx": {
     "tags": [