@stromcom/react-snippet 0.4.1 → 0.5.0

package/README.md

@@ -185,16 +185,17 @@ Sends SDK configuration. Place once inside the provider, before threads.
 
 Notable options:
 
-| Prop                          | Type                                        | Description                                                                                                                                                                         |
-| ----------------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `notificationRenderer`        | `Function`                                  | Custom notification rendering function.                                                                                                                                             |
-| `onNotification`              | `Function`                                  | Called when unread count changes.                                                                                                                                                   |
-| `appFrameCSSPath`             | `string\|string[]`                          | CSS for the widget frame — the shadow root holding the container, the backdrop and the iframe.                                                                                      |
-| `appCSSPath`                  | `string\|string[]`                          | CSS for the app itself (inside the iframe), on top of the CSS from the project settings.                                                                                            |
-| `notificationElementPosition` | `1\|2\|3\|4\|null`                          | Icon position: 1=TL, 2=TR, 3=BR, 4=BL. `null` = no notification bubble.                                                                                                             |
-| `language`                    | `string\|null`                              | UI language. Any code is accepted; one without a translation falls back to the browser language, then English. `null` follows the browser. Overrides `<StromcomProvider language>`. |
-| `theme`                       | `"stromcom-default"\|"stromcom-dark"\|null` | Theme. `null` follows browser preference.                                                                                                                                           |
-| `entityResolve`               | `Function`                                  | `async ({type, id, groups, url}) => detail` — resolves business-entity detail (order, ticket…) for the message editor's chip hover-card.                                            |
+| Prop                          | Type                                        | Description                                                                                                                                                                                      |
+| ----------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `notificationRenderer`        | `Function`                                  | Custom notification rendering function.                                                                                                                                                          |
+| `onNotification`              | `Function`                                  | Called with the unread counts `{thread, message, notification, reaction}`.                                                                                                                       |
+| `onLoad`                      | `Function`                                  | Called once the widget is running. From then on `openHome()`, `closeHome()` and `toggleHome()` work — see [Notification center from your own button](#notification-center-from-your-own-button). |
+| `appFrameCSSPath`             | `string\|string[]`                          | CSS for the widget frame — the shadow root holding the container, the backdrop and the iframe.                                                                                                   |
+| `appCSSPath`                  | `string\|string[]`                          | CSS for the app itself (inside the iframe), on top of the CSS from the project settings.                                                                                                         |
+| `notificationElementPosition` | `1\|2\|3\|4\|null`                          | Icon position: 1=TL, 2=TR, 3=BR, 4=BL. `null` = no notification bubble.                                                                                                                          |
+| `language`                    | `string\|null`                              | UI language. Any code is accepted; one without a translation falls back to the browser language, then English. `null` follows the browser. Overrides `<StromcomProvider language>`.              |
+| `theme`                       | `"stromcom-default"\|"stromcom-dark"\|null` | Theme. `null` follows browser preference.                                                                                                                                                        |
+| `entityResolve`               | `Function`                                  | `async ({type, id, groups, url}) => detail` — resolves business-entity detail (order, ticket…) for the message editor's chip hover-card.                                                         |
 
 See [`src/StromcomConf.jsx`](./src/StromcomConf.jsx) for the full list.
 
@@ -234,12 +235,53 @@ function SwitchUserButton() {
 }
 ```
 
+### Notification center from your own button
+
+The default bubble opens the notification center over the whole page. To open it from an
+element your app already has (a toolbar button, a menu item), leave
+`notificationElementPosition` unset (the bubble renders only when it is set), keep the
+count in your own badge and call the widget's commands through `useStromcom()`:
+
+```jsx
+import { useCallback, useState } from 'react';
+import { StromcomConf, useStromcom } from '@stromcom/react-snippet';
+
+export function MessagesButton() {
+  const sc = useStromcom();
+  const [ready, setReady] = useState(false);
+  const [count, setCount] = useState(0);
+
+  const onLoad = useCallback(() => setReady(true), []);
+  const onNotification = useCallback((counts) => setCount(counts.thread + counts.notification), []);
+
+  return (
+    <>
+      <StromcomConf onLoad={onLoad} onNotification={onNotification} />
+      <button disabled={!ready} onClick={() => sc?.toggleHome?.()}>
+        Messages {count > 0 && <span className="badge">{count}</span>}
+      </button>
+    </>
+  );
+}
+```
+
+| Command        | Effect                                                        |
+| -------------- | ------------------------------------------------------------- |
+| `openHome()`   | Opens the notification center (creates it on the first call). |
+| `closeHome()`  | Hides it. A click on the backdrop does the same.              |
+| `toggleHome()` | Opens or hides it, like a click on the default bubble.        |
+
+The commands are installed by the widget itself once it starts — after the loader script
+has run and the user is set. Until then they are `undefined`, so guard with `?.` and
+enable the button in `onLoad`. `onLoad` fires once,
+when the widget starts, so `<StromcomConf>` with it has to be rendered together with
+`<StromcomUser>`, not later.
+
 ## Limitations
 
 The components cover the common cases; a few SDK features are only reachable imperatively via `useStromcom()`:
 
 - **`<StromcomThread>` doesn't forward `attributes` or `hash`**, and it is initialised once on mount. When the entity changes, pass a new React `key` to remount it.
-- **`<StromcomConf>` doesn't expose `onLoad`.**
 - **`conf()` replaces the whole configuration.** Every `<StromcomConf>` render sends its full option set, so don't mix `<StromcomConf>` with imperative `sc.conf(...)` calls — whichever runs last wins and drops the other's options. Pick one.
 - **Memoize callback and array props** (`onNotification`, `entityResolve`, `appCSSPath`, …) with `useCallback` / `useMemo` or module constants. A new identity on every render re-sends the configuration.
 

package/dist/index.cjs

@@ -130,6 +130,7 @@ var import_react3 = require("react");
 function StromcomConf({
   notificationRenderer,
   onNotification,
+  onLoad,
   appFrameCSSPath,
   appCSSPath,
   notificationElementTargetElement,
@@ -151,6 +152,7 @@ function StromcomConf({
     const opts = {};
     if (notificationRenderer !== void 0) opts.notificationRenderer = notificationRenderer;
     if (onNotification !== void 0) opts.onNotification = onNotification;
+    if (onLoad !== void 0) opts.onLoad = onLoad;
     if (appFrameCSSPath !== void 0) opts.appFrameCSSPath = appFrameCSSPath;
     if (appCSSPath !== void 0) opts.appCSSPath = appCSSPath;
     if (notificationElementTargetElement !== void 0)
@@ -178,6 +180,7 @@ function StromcomConf({
     sc,
     notificationRenderer,
     onNotification,
+    onLoad,
     appFrameCSSPath,
     appCSSPath,
     notificationElementTargetElement,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js","../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["export { StromcomProvider, useStromcom } from './StromcomProvider.jsx';\nexport { StromcomUser } from './StromcomUser.jsx';\nexport { StromcomConf } from './StromcomConf.jsx';\nexport { StromcomThread } from './StromcomThread.jsx';\nexport { StromcomHome } from './StromcomHome.jsx';\n","import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n  production: 'https://cdn.stromcom.cz/loader.js',\n  staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (window[dataLayer]?.__sc_ready) {\n    return window[dataLayer];\n  }\n\n  const dl = dataLayer + 'DL';\n  window[dl] = window[dl] || {};\n  window[dataLayer] = window[dataLayer] || {};\n  const layer = window[dataLayer];\n\n  const stub = (method, dlKey, isArray) => {\n    dlKey = dlKey || method;\n    if (isArray) {\n      window[dl][dlKey] = window[dl][dlKey] || [];\n    }\n\n    layer[method] = (...args) => {\n      if (isArray) {\n        window[dl][dlKey].push(args);\n      } else {\n        window[dl][dlKey] = args;\n      }\n    };\n  };\n\n  stub('initUser', 'user');\n  stub('thread', 'threads', true);\n  stub('conf');\n  stub('home', 'home', true);\n\n  layer.__sc_ready = true;\n  return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object}  props\n * @param {string}  props.clientKey     - Client key from the Stromcom dashboard\n * @param {string}  props.clientSecret  - Bearer token from the Stromcom dashboard\n * @param {string}  [props.dataLayer]   - Global JS variable name (default: \"stromCom\")\n * @param {string}  [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {string}  [props.language]    - Initial UI language (e.g. \"cs\", \"en\", \"sk\"). Omit to auto-detect from the\n *                                        browser. Use StromcomConf's `language` prop to change it at runtime.\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n *   <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n  clientKey,\n  clientSecret,\n  dataLayer = 'stromCom',\n  environment = 'production',\n  language,\n  children,\n}) {\n  // Set up stubs synchronously so children can queue calls immediately on render.\n  const layer = setupLayer(dataLayer);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n    if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n    const base = LOADER_URLS[environment] ?? environment;\n    const dl = dataLayer + 'DL';\n\n    const script = document.createElement('script');\n    script.async = true;\n    script.dataset.type = 'stromcom';\n    script.dataset.l = dataLayer;\n    script.dataset.dl = dl;\n    script.dataset.ck = clientKey;\n    script.dataset.cs = clientSecret;\n    if (language) script.dataset.lang = language;\n    script.src = `${base}?${clientKey}`;\n    document.head.appendChild(script);\n\n    return () => script.remove();\n  }, [clientKey, clientSecret, dataLayer, environment, language]);\n\n  return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n  return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * The widget renders nothing until both `code` and `name` are set, so render\n * this component only for logged-in users and always pass `name`.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object}  props\n * @param {string}  props.code          - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  props.name          - Display name (required)\n * @param {string}  [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly]    - When true, user can read but not send messages\n * @param {string}  [props.avatarURL]   - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n *   code={user.stromcomHash}\n *   name={user.name}\n *   emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!name && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(\n        '[@stromcom/react-snippet] <StromcomUser> is missing `name` — the widget renders nothing until both `code` and `name` are set.',\n      );\n    }\n  }, [name]);\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n    if (readOnly !== undefined) opts.readOnly = readOnly;\n    if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n    sc.initUser(opts);\n  }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n  return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object}   [props.notificationRenderer]           - Function(notification) for custom notification rendering\n * @param {object}   [props.onNotification]                 - Function(count) called when unread count changes\n * @param {(string|string[])} [props.appFrameCSSPath] - CSS URL(s) for the widget frame — the shadow root holding the container, the backdrop and the iframe\n * @param {(string|string[])} [props.appCSSPath]      - CSS URL(s) for the app itself (inside the iframe), on top of the CSS from the project settings\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean}  [props.notificationElementShowAlways]  - Show icon even with zero notifications\n * @param {number}   [props.notificationElementPosition]    - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left; null = no bubble\n * @param {object}   [props.notificationElementStyles]      - Inline styles object for the default notification button\n * @param {string}   [props.notificationElementCSSPath]     - CSS URL for the default notification renderer\n * @param {boolean}  [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender]               - Callback before notification center opens\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls\n *                                           back to the browser language, then English. null follows the browser. Overrides the `language`\n *                                           prop on StromcomProvider, which is only the initial value; this one\n *                                           can be changed at runtime.\n * @param {('stromcom-default'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id, groups, url}) => detail; resolves business-entity detail for the message editor's chip hover-card\n *\n * @example\n * <StromcomConf\n *   notificationElementPosition={4}\n *   onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n  notificationRenderer,\n  onNotification,\n  appFrameCSSPath,\n  appCSSPath,\n  notificationElementTargetElement,\n  notificationElementShowAlways,\n  notificationElementPosition,\n  notificationElementStyles,\n  notificationElementCSSPath,\n  notificationElementNoShadowRoot,\n  homeBeforeRender,\n  notificationElementBeforeRender,\n  notificationElementAfterRender,\n  language,\n  theme,\n  entityResolve,\n}) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = {};\n\n    if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n    if (onNotification !== undefined) opts.onNotification = onNotification;\n    if (appFrameCSSPath !== undefined) opts.appFrameCSSPath = appFrameCSSPath;\n    if (appCSSPath !== undefined) opts.appCSSPath = appCSSPath;\n    if (notificationElementTargetElement !== undefined)\n      opts.notificationElementTargetElement = notificationElementTargetElement;\n    if (notificationElementShowAlways !== undefined)\n      opts.notificationElementShowAlways = notificationElementShowAlways;\n    if (notificationElementPosition !== undefined)\n      opts.notificationElementPosition = notificationElementPosition;\n    if (notificationElementStyles !== undefined)\n      opts.notificationElementStyles = notificationElementStyles;\n    if (notificationElementCSSPath !== undefined)\n      opts.notificationElementCSSPath = notificationElementCSSPath;\n    if (notificationElementNoShadowRoot !== undefined)\n      opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n    if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n    if (notificationElementBeforeRender !== undefined)\n      opts.notificationElementBeforeRender = notificationElementBeforeRender;\n    if (notificationElementAfterRender !== undefined)\n      opts.notificationElementAfterRender = notificationElementAfterRender;\n    if (language !== undefined) opts.language = language;\n    if (theme !== undefined) opts.theme = theme;\n    if (entityResolve !== undefined) opts.entityResolve = entityResolve;\n\n    sc.conf(opts);\n  }, [\n    sc,\n    notificationRenderer,\n    onNotification,\n    appFrameCSSPath,\n    appCSSPath,\n    notificationElementTargetElement,\n    notificationElementShowAlways,\n    notificationElementPosition,\n    notificationElementStyles,\n    notificationElementCSSPath,\n    notificationElementNoShadowRoot,\n    homeBeforeRender,\n    notificationElementBeforeRender,\n    notificationElementAfterRender,\n    language,\n    theme,\n    entityResolve,\n  ]);\n\n  return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object}  props\n * @param {string}  props.code        - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  [props.name]      - Display name shown in the thread header\n * @param {string}  [props.url]       - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint]  - Enable @mention suggestions (default: true)\n * @param {string}  [props.className] - CSS class for the container div\n * @param {object}  [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n *   code={order.stromcomHash}\n *   name={`Order #${order.id}`}\n *   url={window.location.href}\n *   style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (url !== undefined) opts.url = url;\n    if (userHint !== undefined) opts.userHint = userHint;\n\n    sc.thread(containerRef.current, opts);\n    initializedRef.current = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n    sc.home(containerRef.current);\n    initializedRef.current = true;\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.js","../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["export { StromcomProvider, useStromcom } from './StromcomProvider.jsx';\nexport { StromcomUser } from './StromcomUser.jsx';\nexport { StromcomConf } from './StromcomConf.jsx';\nexport { StromcomThread } from './StromcomThread.jsx';\nexport { StromcomHome } from './StromcomHome.jsx';\n","import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n  production: 'https://cdn.stromcom.cz/loader.js',\n  staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (window[dataLayer]?.__sc_ready) {\n    return window[dataLayer];\n  }\n\n  const dl = dataLayer + 'DL';\n  window[dl] = window[dl] || {};\n  window[dataLayer] = window[dataLayer] || {};\n  const layer = window[dataLayer];\n\n  const stub = (method, dlKey, isArray) => {\n    dlKey = dlKey || method;\n    if (isArray) {\n      window[dl][dlKey] = window[dl][dlKey] || [];\n    }\n\n    layer[method] = (...args) => {\n      if (isArray) {\n        window[dl][dlKey].push(args);\n      } else {\n        window[dl][dlKey] = args;\n      }\n    };\n  };\n\n  stub('initUser', 'user');\n  stub('thread', 'threads', true);\n  stub('conf');\n  stub('home', 'home', true);\n\n  layer.__sc_ready = true;\n  return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object}  props\n * @param {string}  props.clientKey     - Client key from the Stromcom dashboard\n * @param {string}  props.clientSecret  - Bearer token from the Stromcom dashboard\n * @param {string}  [props.dataLayer]   - Global JS variable name (default: \"stromCom\")\n * @param {string}  [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {string}  [props.language]    - Initial UI language (e.g. \"cs\", \"en\", \"sk\"). Omit to auto-detect from the\n *                                        browser. Use StromcomConf's `language` prop to change it at runtime.\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n *   <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n  clientKey,\n  clientSecret,\n  dataLayer = 'stromCom',\n  environment = 'production',\n  language,\n  children,\n}) {\n  // Set up stubs synchronously so children can queue calls immediately on render.\n  const layer = setupLayer(dataLayer);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n    if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n    const base = LOADER_URLS[environment] ?? environment;\n    const dl = dataLayer + 'DL';\n\n    const script = document.createElement('script');\n    script.async = true;\n    script.dataset.type = 'stromcom';\n    script.dataset.l = dataLayer;\n    script.dataset.dl = dl;\n    script.dataset.ck = clientKey;\n    script.dataset.cs = clientSecret;\n    if (language) script.dataset.lang = language;\n    script.src = `${base}?${clientKey}`;\n    document.head.appendChild(script);\n\n    return () => script.remove();\n  }, [clientKey, clientSecret, dataLayer, environment, language]);\n\n  return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n  return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * The widget renders nothing until both `code` and `name` are set, so render\n * this component only for logged-in users and always pass `name`.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object}  props\n * @param {string}  props.code          - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  props.name          - Display name (required)\n * @param {string}  [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly]    - When true, user can read but not send messages\n * @param {string}  [props.avatarURL]   - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n *   code={user.stromcomHash}\n *   name={user.name}\n *   emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!name && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(\n        '[@stromcom/react-snippet] <StromcomUser> is missing `name` — the widget renders nothing until both `code` and `name` are set.',\n      );\n    }\n  }, [name]);\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n    if (readOnly !== undefined) opts.readOnly = readOnly;\n    if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n    sc.initUser(opts);\n  }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n  return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object}   [props.notificationRenderer]           - Function(notification) for custom notification rendering\n * @param {object}   [props.onNotification]                 - Function({thread, message, notification, reaction}) called with the unread counts\n * @param {Function} [props.onLoad]                         - Called once the widget is running; from then on stromCom.openHome() / closeHome() / toggleHome() work\n * @param {(string|string[])} [props.appFrameCSSPath] - CSS URL(s) for the widget frame — the shadow root holding the container, the backdrop and the iframe\n * @param {(string|string[])} [props.appCSSPath]      - CSS URL(s) for the app itself (inside the iframe), on top of the CSS from the project settings\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean}  [props.notificationElementShowAlways]  - Show icon even with zero notifications\n * @param {number}   [props.notificationElementPosition]    - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left; null = no bubble\n * @param {object}   [props.notificationElementStyles]      - Inline styles object for the default notification button\n * @param {string}   [props.notificationElementCSSPath]     - CSS URL for the default notification renderer\n * @param {boolean}  [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender]               - Callback before the notification center opens for the first time\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls\n *                                           back to the browser language, then English. null follows the browser. Overrides the `language`\n *                                           prop on StromcomProvider, which is only the initial value; this one\n *                                           can be changed at runtime.\n * @param {('stromcom-default'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id, groups, url}) => detail; resolves business-entity detail for the message editor's chip hover-card\n *\n * @example\n * <StromcomConf\n *   notificationElementPosition={4}\n *   onNotification={(counts) => setBadge(counts.thread + counts.notification)}\n * />\n */\nexport function StromcomConf({\n  notificationRenderer,\n  onNotification,\n  onLoad,\n  appFrameCSSPath,\n  appCSSPath,\n  notificationElementTargetElement,\n  notificationElementShowAlways,\n  notificationElementPosition,\n  notificationElementStyles,\n  notificationElementCSSPath,\n  notificationElementNoShadowRoot,\n  homeBeforeRender,\n  notificationElementBeforeRender,\n  notificationElementAfterRender,\n  language,\n  theme,\n  entityResolve,\n}) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = {};\n\n    if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n    if (onNotification !== undefined) opts.onNotification = onNotification;\n    if (onLoad !== undefined) opts.onLoad = onLoad;\n    if (appFrameCSSPath !== undefined) opts.appFrameCSSPath = appFrameCSSPath;\n    if (appCSSPath !== undefined) opts.appCSSPath = appCSSPath;\n    if (notificationElementTargetElement !== undefined)\n      opts.notificationElementTargetElement = notificationElementTargetElement;\n    if (notificationElementShowAlways !== undefined)\n      opts.notificationElementShowAlways = notificationElementShowAlways;\n    if (notificationElementPosition !== undefined)\n      opts.notificationElementPosition = notificationElementPosition;\n    if (notificationElementStyles !== undefined)\n      opts.notificationElementStyles = notificationElementStyles;\n    if (notificationElementCSSPath !== undefined)\n      opts.notificationElementCSSPath = notificationElementCSSPath;\n    if (notificationElementNoShadowRoot !== undefined)\n      opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n    if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n    if (notificationElementBeforeRender !== undefined)\n      opts.notificationElementBeforeRender = notificationElementBeforeRender;\n    if (notificationElementAfterRender !== undefined)\n      opts.notificationElementAfterRender = notificationElementAfterRender;\n    if (language !== undefined) opts.language = language;\n    if (theme !== undefined) opts.theme = theme;\n    if (entityResolve !== undefined) opts.entityResolve = entityResolve;\n\n    sc.conf(opts);\n  }, [\n    sc,\n    notificationRenderer,\n    onNotification,\n    onLoad,\n    appFrameCSSPath,\n    appCSSPath,\n    notificationElementTargetElement,\n    notificationElementShowAlways,\n    notificationElementPosition,\n    notificationElementStyles,\n    notificationElementCSSPath,\n    notificationElementNoShadowRoot,\n    homeBeforeRender,\n    notificationElementBeforeRender,\n    notificationElementAfterRender,\n    language,\n    theme,\n    entityResolve,\n  ]);\n\n  return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object}  props\n * @param {string}  props.code        - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  [props.name]      - Display name shown in the thread header\n * @param {string}  [props.url]       - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint]  - Enable @mention suggestions (default: true)\n * @param {string}  [props.className] - CSS class for the container div\n * @param {object}  [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n *   code={order.stromcomHash}\n *   name={`Order #${order.id}`}\n *   url={window.location.href}\n *   style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (url !== undefined) opts.url = url;\n    if (userHint !== undefined) opts.userHint = userHint;\n\n    sc.thread(containerRef.current, opts);\n    initializedRef.current = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n    sc.home(containerRef.current);\n    initializedRef.current = true;\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}

package/dist/index.d.ts

@@ -7,6 +7,16 @@ export interface StromcomLayer {
   thread: (target: HTMLElement, options: StromcomThreadOptions) => void;
   conf: (options: StromcomConfOptions) => void;
   home: (target: HTMLElement) => void;
+  /**
+   * Opens the notification center over the whole page (creates it on the first call).
+   * Installed by the widget itself once it starts (loader script run, user set) —
+   * `undefined` until then. Wait for `StromcomConf`'s `onLoad`.
+   */
+  openHome?: () => Promise<void>;
+  /** Hides the notification center. See `openHome`. */
+  closeHome?: () => void;
+  /** Opens or hides the notification center, like a click on the default bubble. See `openHome`. */
+  toggleHome?: () => Promise<void>;
   [key: string]: any;
 }
 
@@ -78,9 +88,22 @@ export interface StromcomEntity {
   url: string;
 }
 
+/** Unread counts passed to `onNotification`. */
+export interface StromcomNotificationCounts {
+  thread: number;
+  message: number;
+  notification: number;
+  reaction: number;
+}
+
 export interface StromcomConfOptions {
   notificationRenderer?: (notification: unknown) => unknown;
-  onNotification?: (count: number) => void;
+  onNotification?: (counts: StromcomNotificationCounts) => void;
+  /**
+   * Called once the widget is running (user set, apps rendered). From then on
+   * `openHome()`, `closeHome()` and `toggleHome()` on `useStromcom()` work.
+   */
+  onLoad?: (api: unknown) => void;
   /** CSS for the widget frame — the shadow root holding the container, the backdrop and the iframe. */
   appFrameCSSPath?: string | string[];
   /**
@@ -96,6 +119,7 @@ export interface StromcomConfOptions {
   notificationElementStyles?: Record<string, string | number | null>;
   notificationElementCSSPath?: string;
   notificationElementNoShadowRoot?: boolean;
+  /** Called before the notification center opens for the first time (bubble click or `openHome()` / `toggleHome()`). */
   homeBeforeRender?: () => void | Promise<void>;
   notificationElementBeforeRender?: () => void | Promise<void>;
   notificationElementAfterRender?: () => void;

package/dist/index.js

@@ -100,6 +100,7 @@ import { useEffect as useEffect3 } from "react";
 function StromcomConf({
   notificationRenderer,
   onNotification,
+  onLoad,
   appFrameCSSPath,
   appCSSPath,
   notificationElementTargetElement,
@@ -121,6 +122,7 @@ function StromcomConf({
     const opts = {};
     if (notificationRenderer !== void 0) opts.notificationRenderer = notificationRenderer;
     if (onNotification !== void 0) opts.onNotification = onNotification;
+    if (onLoad !== void 0) opts.onLoad = onLoad;
     if (appFrameCSSPath !== void 0) opts.appFrameCSSPath = appFrameCSSPath;
     if (appCSSPath !== void 0) opts.appCSSPath = appCSSPath;
     if (notificationElementTargetElement !== void 0)
@@ -148,6 +150,7 @@ function StromcomConf({
     sc,
     notificationRenderer,
     onNotification,
+    onLoad,
     appFrameCSSPath,
     appCSSPath,
     notificationElementTargetElement,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n  production: 'https://cdn.stromcom.cz/loader.js',\n  staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (window[dataLayer]?.__sc_ready) {\n    return window[dataLayer];\n  }\n\n  const dl = dataLayer + 'DL';\n  window[dl] = window[dl] || {};\n  window[dataLayer] = window[dataLayer] || {};\n  const layer = window[dataLayer];\n\n  const stub = (method, dlKey, isArray) => {\n    dlKey = dlKey || method;\n    if (isArray) {\n      window[dl][dlKey] = window[dl][dlKey] || [];\n    }\n\n    layer[method] = (...args) => {\n      if (isArray) {\n        window[dl][dlKey].push(args);\n      } else {\n        window[dl][dlKey] = args;\n      }\n    };\n  };\n\n  stub('initUser', 'user');\n  stub('thread', 'threads', true);\n  stub('conf');\n  stub('home', 'home', true);\n\n  layer.__sc_ready = true;\n  return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object}  props\n * @param {string}  props.clientKey     - Client key from the Stromcom dashboard\n * @param {string}  props.clientSecret  - Bearer token from the Stromcom dashboard\n * @param {string}  [props.dataLayer]   - Global JS variable name (default: \"stromCom\")\n * @param {string}  [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {string}  [props.language]    - Initial UI language (e.g. \"cs\", \"en\", \"sk\"). Omit to auto-detect from the\n *                                        browser. Use StromcomConf's `language` prop to change it at runtime.\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n *   <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n  clientKey,\n  clientSecret,\n  dataLayer = 'stromCom',\n  environment = 'production',\n  language,\n  children,\n}) {\n  // Set up stubs synchronously so children can queue calls immediately on render.\n  const layer = setupLayer(dataLayer);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n    if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n    const base = LOADER_URLS[environment] ?? environment;\n    const dl = dataLayer + 'DL';\n\n    const script = document.createElement('script');\n    script.async = true;\n    script.dataset.type = 'stromcom';\n    script.dataset.l = dataLayer;\n    script.dataset.dl = dl;\n    script.dataset.ck = clientKey;\n    script.dataset.cs = clientSecret;\n    if (language) script.dataset.lang = language;\n    script.src = `${base}?${clientKey}`;\n    document.head.appendChild(script);\n\n    return () => script.remove();\n  }, [clientKey, clientSecret, dataLayer, environment, language]);\n\n  return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n  return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * The widget renders nothing until both `code` and `name` are set, so render\n * this component only for logged-in users and always pass `name`.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object}  props\n * @param {string}  props.code          - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  props.name          - Display name (required)\n * @param {string}  [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly]    - When true, user can read but not send messages\n * @param {string}  [props.avatarURL]   - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n *   code={user.stromcomHash}\n *   name={user.name}\n *   emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!name && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(\n        '[@stromcom/react-snippet] <StromcomUser> is missing `name` — the widget renders nothing until both `code` and `name` are set.',\n      );\n    }\n  }, [name]);\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n    if (readOnly !== undefined) opts.readOnly = readOnly;\n    if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n    sc.initUser(opts);\n  }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n  return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object}   [props.notificationRenderer]           - Function(notification) for custom notification rendering\n * @param {object}   [props.onNotification]                 - Function(count) called when unread count changes\n * @param {(string|string[])} [props.appFrameCSSPath] - CSS URL(s) for the widget frame — the shadow root holding the container, the backdrop and the iframe\n * @param {(string|string[])} [props.appCSSPath]      - CSS URL(s) for the app itself (inside the iframe), on top of the CSS from the project settings\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean}  [props.notificationElementShowAlways]  - Show icon even with zero notifications\n * @param {number}   [props.notificationElementPosition]    - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left; null = no bubble\n * @param {object}   [props.notificationElementStyles]      - Inline styles object for the default notification button\n * @param {string}   [props.notificationElementCSSPath]     - CSS URL for the default notification renderer\n * @param {boolean}  [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender]               - Callback before notification center opens\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls\n *                                           back to the browser language, then English. null follows the browser. Overrides the `language`\n *                                           prop on StromcomProvider, which is only the initial value; this one\n *                                           can be changed at runtime.\n * @param {('stromcom-default'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id, groups, url}) => detail; resolves business-entity detail for the message editor's chip hover-card\n *\n * @example\n * <StromcomConf\n *   notificationElementPosition={4}\n *   onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n  notificationRenderer,\n  onNotification,\n  appFrameCSSPath,\n  appCSSPath,\n  notificationElementTargetElement,\n  notificationElementShowAlways,\n  notificationElementPosition,\n  notificationElementStyles,\n  notificationElementCSSPath,\n  notificationElementNoShadowRoot,\n  homeBeforeRender,\n  notificationElementBeforeRender,\n  notificationElementAfterRender,\n  language,\n  theme,\n  entityResolve,\n}) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = {};\n\n    if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n    if (onNotification !== undefined) opts.onNotification = onNotification;\n    if (appFrameCSSPath !== undefined) opts.appFrameCSSPath = appFrameCSSPath;\n    if (appCSSPath !== undefined) opts.appCSSPath = appCSSPath;\n    if (notificationElementTargetElement !== undefined)\n      opts.notificationElementTargetElement = notificationElementTargetElement;\n    if (notificationElementShowAlways !== undefined)\n      opts.notificationElementShowAlways = notificationElementShowAlways;\n    if (notificationElementPosition !== undefined)\n      opts.notificationElementPosition = notificationElementPosition;\n    if (notificationElementStyles !== undefined)\n      opts.notificationElementStyles = notificationElementStyles;\n    if (notificationElementCSSPath !== undefined)\n      opts.notificationElementCSSPath = notificationElementCSSPath;\n    if (notificationElementNoShadowRoot !== undefined)\n      opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n    if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n    if (notificationElementBeforeRender !== undefined)\n      opts.notificationElementBeforeRender = notificationElementBeforeRender;\n    if (notificationElementAfterRender !== undefined)\n      opts.notificationElementAfterRender = notificationElementAfterRender;\n    if (language !== undefined) opts.language = language;\n    if (theme !== undefined) opts.theme = theme;\n    if (entityResolve !== undefined) opts.entityResolve = entityResolve;\n\n    sc.conf(opts);\n  }, [\n    sc,\n    notificationRenderer,\n    onNotification,\n    appFrameCSSPath,\n    appCSSPath,\n    notificationElementTargetElement,\n    notificationElementShowAlways,\n    notificationElementPosition,\n    notificationElementStyles,\n    notificationElementCSSPath,\n    notificationElementNoShadowRoot,\n    homeBeforeRender,\n    notificationElementBeforeRender,\n    notificationElementAfterRender,\n    language,\n    theme,\n    entityResolve,\n  ]);\n\n  return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object}  props\n * @param {string}  props.code        - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  [props.name]      - Display name shown in the thread header\n * @param {string}  [props.url]       - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint]  - Enable @mention suggestions (default: true)\n * @param {string}  [props.className] - CSS class for the container div\n * @param {object}  [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n *   code={order.stromcomHash}\n *   name={`Order #${order.id}`}\n *   url={window.location.href}\n *   style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (url !== undefined) opts.url = url;\n    if (userHint !== undefined) opts.userHint = userHint;\n\n    sc.thread(containerRef.current, opts);\n    initializedRef.current = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n    sc.home(containerRef.current);\n    initializedRef.current = true;\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["useEffect","useEffect","useEffect","useEffect","useEffect","jsx","useEffect","useEffect","useRef","jsx","useRef","useEffect"]}
+{"version":3,"sources":["../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n  production: 'https://cdn.stromcom.cz/loader.js',\n  staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (window[dataLayer]?.__sc_ready) {\n    return window[dataLayer];\n  }\n\n  const dl = dataLayer + 'DL';\n  window[dl] = window[dl] || {};\n  window[dataLayer] = window[dataLayer] || {};\n  const layer = window[dataLayer];\n\n  const stub = (method, dlKey, isArray) => {\n    dlKey = dlKey || method;\n    if (isArray) {\n      window[dl][dlKey] = window[dl][dlKey] || [];\n    }\n\n    layer[method] = (...args) => {\n      if (isArray) {\n        window[dl][dlKey].push(args);\n      } else {\n        window[dl][dlKey] = args;\n      }\n    };\n  };\n\n  stub('initUser', 'user');\n  stub('thread', 'threads', true);\n  stub('conf');\n  stub('home', 'home', true);\n\n  layer.__sc_ready = true;\n  return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object}  props\n * @param {string}  props.clientKey     - Client key from the Stromcom dashboard\n * @param {string}  props.clientSecret  - Bearer token from the Stromcom dashboard\n * @param {string}  [props.dataLayer]   - Global JS variable name (default: \"stromCom\")\n * @param {string}  [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {string}  [props.language]    - Initial UI language (e.g. \"cs\", \"en\", \"sk\"). Omit to auto-detect from the\n *                                        browser. Use StromcomConf's `language` prop to change it at runtime.\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n *   <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n  clientKey,\n  clientSecret,\n  dataLayer = 'stromCom',\n  environment = 'production',\n  language,\n  children,\n}) {\n  // Set up stubs synchronously so children can queue calls immediately on render.\n  const layer = setupLayer(dataLayer);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n    if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n    const base = LOADER_URLS[environment] ?? environment;\n    const dl = dataLayer + 'DL';\n\n    const script = document.createElement('script');\n    script.async = true;\n    script.dataset.type = 'stromcom';\n    script.dataset.l = dataLayer;\n    script.dataset.dl = dl;\n    script.dataset.ck = clientKey;\n    script.dataset.cs = clientSecret;\n    if (language) script.dataset.lang = language;\n    script.src = `${base}?${clientKey}`;\n    document.head.appendChild(script);\n\n    return () => script.remove();\n  }, [clientKey, clientSecret, dataLayer, environment, language]);\n\n  return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n  return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * The widget renders nothing until both `code` and `name` are set, so render\n * this component only for logged-in users and always pass `name`.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object}  props\n * @param {string}  props.code          - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  props.name          - Display name (required)\n * @param {string}  [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly]    - When true, user can read but not send messages\n * @param {string}  [props.avatarURL]   - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n *   code={user.stromcomHash}\n *   name={user.name}\n *   emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!name && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(\n        '[@stromcom/react-snippet] <StromcomUser> is missing `name` — the widget renders nothing until both `code` and `name` are set.',\n      );\n    }\n  }, [name]);\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n    if (readOnly !== undefined) opts.readOnly = readOnly;\n    if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n    sc.initUser(opts);\n  }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n  return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object}   [props.notificationRenderer]           - Function(notification) for custom notification rendering\n * @param {object}   [props.onNotification]                 - Function({thread, message, notification, reaction}) called with the unread counts\n * @param {Function} [props.onLoad]                         - Called once the widget is running; from then on stromCom.openHome() / closeHome() / toggleHome() work\n * @param {(string|string[])} [props.appFrameCSSPath] - CSS URL(s) for the widget frame — the shadow root holding the container, the backdrop and the iframe\n * @param {(string|string[])} [props.appCSSPath]      - CSS URL(s) for the app itself (inside the iframe), on top of the CSS from the project settings\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean}  [props.notificationElementShowAlways]  - Show icon even with zero notifications\n * @param {number}   [props.notificationElementPosition]    - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left; null = no bubble\n * @param {object}   [props.notificationElementStyles]      - Inline styles object for the default notification button\n * @param {string}   [props.notificationElementCSSPath]     - CSS URL for the default notification renderer\n * @param {boolean}  [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender]               - Callback before the notification center opens for the first time\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls\n *                                           back to the browser language, then English. null follows the browser. Overrides the `language`\n *                                           prop on StromcomProvider, which is only the initial value; this one\n *                                           can be changed at runtime.\n * @param {('stromcom-default'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id, groups, url}) => detail; resolves business-entity detail for the message editor's chip hover-card\n *\n * @example\n * <StromcomConf\n *   notificationElementPosition={4}\n *   onNotification={(counts) => setBadge(counts.thread + counts.notification)}\n * />\n */\nexport function StromcomConf({\n  notificationRenderer,\n  onNotification,\n  onLoad,\n  appFrameCSSPath,\n  appCSSPath,\n  notificationElementTargetElement,\n  notificationElementShowAlways,\n  notificationElementPosition,\n  notificationElementStyles,\n  notificationElementCSSPath,\n  notificationElementNoShadowRoot,\n  homeBeforeRender,\n  notificationElementBeforeRender,\n  notificationElementAfterRender,\n  language,\n  theme,\n  entityResolve,\n}) {\n  const sc = useStromcom();\n\n  useEffect(() => {\n    if (!sc) return;\n\n    const opts = {};\n\n    if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n    if (onNotification !== undefined) opts.onNotification = onNotification;\n    if (onLoad !== undefined) opts.onLoad = onLoad;\n    if (appFrameCSSPath !== undefined) opts.appFrameCSSPath = appFrameCSSPath;\n    if (appCSSPath !== undefined) opts.appCSSPath = appCSSPath;\n    if (notificationElementTargetElement !== undefined)\n      opts.notificationElementTargetElement = notificationElementTargetElement;\n    if (notificationElementShowAlways !== undefined)\n      opts.notificationElementShowAlways = notificationElementShowAlways;\n    if (notificationElementPosition !== undefined)\n      opts.notificationElementPosition = notificationElementPosition;\n    if (notificationElementStyles !== undefined)\n      opts.notificationElementStyles = notificationElementStyles;\n    if (notificationElementCSSPath !== undefined)\n      opts.notificationElementCSSPath = notificationElementCSSPath;\n    if (notificationElementNoShadowRoot !== undefined)\n      opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n    if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n    if (notificationElementBeforeRender !== undefined)\n      opts.notificationElementBeforeRender = notificationElementBeforeRender;\n    if (notificationElementAfterRender !== undefined)\n      opts.notificationElementAfterRender = notificationElementAfterRender;\n    if (language !== undefined) opts.language = language;\n    if (theme !== undefined) opts.theme = theme;\n    if (entityResolve !== undefined) opts.entityResolve = entityResolve;\n\n    sc.conf(opts);\n  }, [\n    sc,\n    notificationRenderer,\n    onNotification,\n    onLoad,\n    appFrameCSSPath,\n    appCSSPath,\n    notificationElementTargetElement,\n    notificationElementShowAlways,\n    notificationElementPosition,\n    notificationElementStyles,\n    notificationElementCSSPath,\n    notificationElementNoShadowRoot,\n    homeBeforeRender,\n    notificationElementBeforeRender,\n    notificationElementAfterRender,\n    language,\n    theme,\n    entityResolve,\n  ]);\n\n  return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object}  props\n * @param {string}  props.code        - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string}  [props.name]      - Display name shown in the thread header\n * @param {string}  [props.url]       - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint]  - Enable @mention suggestions (default: true)\n * @param {string}  [props.className] - CSS class for the container div\n * @param {object}  [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n *   code={order.stromcomHash}\n *   name={`Order #${order.id}`}\n *   url={window.location.href}\n *   style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n\n    const opts = { code };\n    if (name !== undefined) opts.name = name;\n    if (url !== undefined) opts.url = url;\n    if (userHint !== undefined) opts.userHint = userHint;\n\n    sc.thread(containerRef.current, opts);\n    initializedRef.current = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style]     - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n  const sc = useStromcom();\n  const containerRef = useRef(null);\n  const initializedRef = useRef(false);\n\n  useEffect(() => {\n    if (!sc || !containerRef.current || initializedRef.current) return;\n    sc.home(containerRef.current);\n    initializedRef.current = true;\n  }, [sc]);\n\n  return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":";AAAA,SAAS,eAAe,YAAY,iBAAiB;AAuG5C;AArGF,IAAM,kBAAkB,cAAc,IAAI;AAEjD,IAAM,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,SAAS;AACX;AAOA,SAAS,WAAW,WAAW;AAd/B;AAeE,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AAEA,OAAI,YAAO,SAAS,MAAhB,mBAAmB,YAAY;AACjC,WAAO,OAAO,SAAS;AAAA,EACzB;AAEA,QAAM,KAAK,YAAY;AACvB,SAAO,EAAE,IAAI,OAAO,EAAE,KAAK,CAAC;AAC5B,SAAO,SAAS,IAAI,OAAO,SAAS,KAAK,CAAC;AAC1C,QAAM,QAAQ,OAAO,SAAS;AAE9B,QAAM,OAAO,CAAC,QAAQ,OAAO,YAAY;AACvC,YAAQ,SAAS;AACjB,QAAI,SAAS;AACX,aAAO,EAAE,EAAE,KAAK,IAAI,OAAO,EAAE,EAAE,KAAK,KAAK,CAAC;AAAA,IAC5C;AAEA,UAAM,MAAM,IAAI,IAAI,SAAS;AAC3B,UAAI,SAAS;AACX,eAAO,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI;AAAA,MAC7B,OAAO;AACL,eAAO,EAAE,EAAE,KAAK,IAAI;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAEA,OAAK,YAAY,MAAM;AACvB,OAAK,UAAU,WAAW,IAAI;AAC9B,OAAK,MAAM;AACX,OAAK,QAAQ,QAAQ,IAAI;AAEzB,QAAM,aAAa;AACnB,SAAO;AACT;AAmBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAG;AAED,QAAM,QAAQ,WAAW,SAAS;AAElC,YAAU,MAAM;AAhFlB;AAiFI,QAAI,OAAO,WAAW,YAAa;AAGnC,QAAI,SAAS,cAAc,mBAAmB,SAAS,0BAA0B,EAAG;AAEpF,UAAM,QAAO,iBAAY,WAAW,MAAvB,YAA4B;AACzC,UAAM,KAAK,YAAY;AAEvB,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ;AACf,WAAO,QAAQ,OAAO;AACtB,WAAO,QAAQ,IAAI;AACnB,WAAO,QAAQ,KAAK;AACpB,WAAO,QAAQ,KAAK;AACpB,WAAO,QAAQ,KAAK;AACpB,QAAI,SAAU,QAAO,QAAQ,OAAO;AACpC,WAAO,MAAM,GAAG,IAAI,IAAI,SAAS;AACjC,aAAS,KAAK,YAAY,MAAM;AAEhC,WAAO,MAAM,OAAO,OAAO;AAAA,EAC7B,GAAG,CAAC,WAAW,cAAc,WAAW,aAAa,QAAQ,CAAC;AAE9D,SAAO,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,OAAQ,UAAS;AAC3D;AAEO,SAAS,cAAc;AAC5B,SAAO,WAAW,eAAe;AACnC;;;AC5GA,SAAS,aAAAA,kBAAiB;AA2BnB,SAAS,aAAa,EAAE,MAAM,MAAM,cAAc,UAAU,UAAU,GAAG;AAC9E,QAAM,KAAK,YAAY;AAEvB,EAAAC,WAAU,MAAM;AA9BlB;AA+BI,QAAI,CAAC,QAAQ,OAAO,YAAY,iBAAe,aAAQ,QAAR,mBAAa,cAAa,cAAc;AACrF,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,EAAAA,WAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,OAAO,EAAE,KAAK;AACpB,QAAI,SAAS,OAAW,MAAK,OAAO;AACpC,QAAI,iBAAiB,OAAW,MAAK,eAAe;AACpD,QAAI,aAAa,OAAW,MAAK,WAAW;AAC5C,QAAI,cAAc,OAAW,MAAK,YAAY;AAE9C,OAAG,SAAS,IAAI;AAAA,EAClB,GAAG,CAAC,IAAI,MAAM,MAAM,cAAc,UAAU,SAAS,CAAC;AAEtD,SAAO;AACT;;;ACnDA,SAAS,aAAAC,kBAAiB;AAsCnB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,KAAK,YAAY;AAEvB,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,OAAO,CAAC;AAEd,QAAI,yBAAyB,OAAW,MAAK,uBAAuB;AACpE,QAAI,mBAAmB,OAAW,MAAK,iBAAiB;AACxD,QAAI,WAAW,OAAW,MAAK,SAAS;AACxC,QAAI,oBAAoB,OAAW,MAAK,kBAAkB;AAC1D,QAAI,eAAe,OAAW,MAAK,aAAa;AAChD,QAAI,qCAAqC;AACvC,WAAK,mCAAmC;AAC1C,QAAI,kCAAkC;AACpC,WAAK,gCAAgC;AACvC,QAAI,gCAAgC;AAClC,WAAK,8BAA8B;AACrC,QAAI,8BAA8B;AAChC,WAAK,4BAA4B;AACnC,QAAI,+BAA+B;AACjC,WAAK,6BAA6B;AACpC,QAAI,oCAAoC;AACtC,WAAK,kCAAkC;AACzC,QAAI,qBAAqB,OAAW,MAAK,mBAAmB;AAC5D,QAAI,oCAAoC;AACtC,WAAK,kCAAkC;AACzC,QAAI,mCAAmC;AACrC,WAAK,iCAAiC;AACxC,QAAI,aAAa,OAAW,MAAK,WAAW;AAC5C,QAAI,UAAU,OAAW,MAAK,QAAQ;AACtC,QAAI,kBAAkB,OAAW,MAAK,gBAAgB;AAEtD,OAAG,KAAK,IAAI;AAAA,EACd,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;;;ACjHA,SAAS,aAAAC,YAAW,cAAc;AA2CzB,gBAAAC,YAAA;AAlBF,SAAS,eAAe,EAAE,MAAM,MAAM,KAAK,UAAU,WAAW,OAAO,GAAG,KAAK,GAAG;AACvF,QAAM,KAAK,YAAY;AACvB,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,iBAAiB,OAAO,KAAK;AAEnC,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,MAAM,CAAC,aAAa,WAAW,eAAe,QAAS;AAE5D,UAAM,OAAO,EAAE,KAAK;AACpB,QAAI,SAAS,OAAW,MAAK,OAAO;AACpC,QAAI,QAAQ,OAAW,MAAK,MAAM;AAClC,QAAI,aAAa,OAAW,MAAK,WAAW;AAE5C,OAAG,OAAO,aAAa,SAAS,IAAI;AACpC,mBAAe,UAAU;AAAA,EAE3B,GAAG,CAAC,EAAE,CAAC;AAEP,SAAO,gBAAAD,KAAC,SAAI,KAAK,cAAc,WAAsB,OAAe,GAAG,MAAM;AAC/E;;;AC5CA,SAAS,aAAAE,YAAW,UAAAC,eAAc;AAwBzB,gBAAAC,YAAA;AAXF,SAAS,aAAa,EAAE,WAAW,OAAO,GAAG,KAAK,GAAG;AAC1D,QAAM,KAAK,YAAY;AACvB,QAAM,eAAeC,QAAO,IAAI;AAChC,QAAM,iBAAiBA,QAAO,KAAK;AAEnC,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,MAAM,CAAC,aAAa,WAAW,eAAe,QAAS;AAC5D,OAAG,KAAK,aAAa,OAAO;AAC5B,mBAAe,UAAU;AAAA,EAC3B,GAAG,CAAC,EAAE,CAAC;AAEP,SAAO,gBAAAF,KAAC,SAAI,KAAK,cAAc,WAAsB,OAAe,GAAG,MAAM;AAC/E;","names":["useEffect","useEffect","useEffect","useEffect","useEffect","jsx","useEffect","useEffect","useRef","jsx","useRef","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stromcom/react-snippet",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "React integration for the STROMCOM chat widget. Loads the SDK, identifies users, and embeds threads as plain React components.",
   "keywords": [
     "stromcom",

package/src/StromcomConf.jsx

@@ -10,7 +10,8 @@ import { useStromcom } from './StromcomProvider.jsx';
  * actual JS functions here — no need for the string-wrapping used in the PHP library.
  *
  * @param {object}   [props.notificationRenderer]           - Function(notification) for custom notification rendering
- * @param {object}   [props.onNotification]                 - Function(count) called when unread count changes
+ * @param {object}   [props.onNotification]                 - Function({thread, message, notification, reaction}) called with the unread counts
+ * @param {Function} [props.onLoad]                         - Called once the widget is running; from then on stromCom.openHome() / closeHome() / toggleHome() work
  * @param {(string|string[])} [props.appFrameCSSPath] - CSS URL(s) for the widget frame — the shadow root holding the container, the backdrop and the iframe
  * @param {(string|string[])} [props.appCSSPath]      - CSS URL(s) for the app itself (inside the iframe), on top of the CSS from the project settings
  * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target
@@ -19,7 +20,7 @@ import { useStromcom } from './StromcomProvider.jsx';
  * @param {object}   [props.notificationElementStyles]      - Inline styles object for the default notification button
  * @param {string}   [props.notificationElementCSSPath]     - CSS URL for the default notification renderer
  * @param {boolean}  [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications
- * @param {Function} [props.homeBeforeRender]               - Callback before notification center opens
+ * @param {Function} [props.homeBeforeRender]               - Callback before the notification center opens for the first time
  * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders
  * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders
  * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls
@@ -32,12 +33,13 @@ import { useStromcom } from './StromcomProvider.jsx';
  * @example
  * <StromcomConf
  *   notificationElementPosition={4}
- *   onNotification={(count) => setBadge(count)}
+ *   onNotification={(counts) => setBadge(counts.thread + counts.notification)}
  * />
  */
 export function StromcomConf({
   notificationRenderer,
   onNotification,
+  onLoad,
   appFrameCSSPath,
   appCSSPath,
   notificationElementTargetElement,
@@ -62,6 +64,7 @@ export function StromcomConf({
 
     if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;
     if (onNotification !== undefined) opts.onNotification = onNotification;
+    if (onLoad !== undefined) opts.onLoad = onLoad;
     if (appFrameCSSPath !== undefined) opts.appFrameCSSPath = appFrameCSSPath;
     if (appCSSPath !== undefined) opts.appCSSPath = appCSSPath;
     if (notificationElementTargetElement !== undefined)
@@ -90,6 +93,7 @@ export function StromcomConf({
     sc,
     notificationRenderer,
     onNotification,
+    onLoad,
     appFrameCSSPath,
     appCSSPath,
     notificationElementTargetElement,

package/src/__tests__/StromcomConf.test.jsx

@@ -30,6 +30,14 @@ describe('StromcomConf', () => {
     expect(layer.conf).toHaveBeenCalledWith({ onNotification });
   });
 
+  it('forwards onLoad as-is (no string-wrapping)', () => {
+    const layer = { conf: vi.fn() };
+    const onLoad = vi.fn();
+    renderWithLayer(layer, { onLoad });
+
+    expect(layer.conf).toHaveBeenCalledWith({ onLoad });
+  });
+
   it('forwards entityResolve as-is (no string-wrapping)', () => {
     const layer = { conf: vi.fn() };
     const entityResolve = vi.fn();

package/src/index.d.ts

@@ -7,6 +7,16 @@ export interface StromcomLayer {
   thread: (target: HTMLElement, options: StromcomThreadOptions) => void;
   conf: (options: StromcomConfOptions) => void;
   home: (target: HTMLElement) => void;
+  /**
+   * Opens the notification center over the whole page (creates it on the first call).
+   * Installed by the widget itself once it starts (loader script run, user set) —
+   * `undefined` until then. Wait for `StromcomConf`'s `onLoad`.
+   */
+  openHome?: () => Promise<void>;
+  /** Hides the notification center. See `openHome`. */
+  closeHome?: () => void;
+  /** Opens or hides the notification center, like a click on the default bubble. See `openHome`. */
+  toggleHome?: () => Promise<void>;
   [key: string]: any;
 }
 
@@ -78,9 +88,22 @@ export interface StromcomEntity {
   url: string;
 }
 
+/** Unread counts passed to `onNotification`. */
+export interface StromcomNotificationCounts {
+  thread: number;
+  message: number;
+  notification: number;
+  reaction: number;
+}
+
 export interface StromcomConfOptions {
   notificationRenderer?: (notification: unknown) => unknown;
-  onNotification?: (count: number) => void;
+  onNotification?: (counts: StromcomNotificationCounts) => void;
+  /**
+   * Called once the widget is running (user set, apps rendered). From then on
+   * `openHome()`, `closeHome()` and `toggleHome()` on `useStromcom()` work.
+   */
+  onLoad?: (api: unknown) => void;
   /** CSS for the widget frame — the shadow root holding the container, the backdrop and the iframe. */
   appFrameCSSPath?: string | string[];
   /**
@@ -96,6 +119,7 @@ export interface StromcomConfOptions {
   notificationElementStyles?: Record<string, string | number | null>;
   notificationElementCSSPath?: string;
   notificationElementNoShadowRoot?: boolean;
+  /** Called before the notification center opens for the first time (bubble click or `openHome()` / `toggleHome()`). */
   homeBeforeRender?: () => void | Promise<void>;
   notificationElementBeforeRender?: () => void | Promise<void>;
   notificationElementAfterRender?: () => void;