@stromcom/react-snippet 0.1.0

package/dist/index.js

@@ -0,0 +1,191 @@
+// src/StromcomProvider.jsx
+import { createContext, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var StromcomContext = createContext(null);
+var LOADER_URLS = {
+  production: "https://cdn.stromcom.cz/loader.js",
+  staging: "https://cdn.staging.stromcom.cz/loader.js"
+};
+function setupLayer(dataLayer) {
+  var _a;
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if ((_a = window[dataLayer]) == null ? void 0 : _a.__sc_ready) {
+    return window[dataLayer];
+  }
+  const dl = dataLayer + "DL";
+  window[dl] = window[dl] || {};
+  window[dataLayer] = window[dataLayer] || {};
+  const layer = window[dataLayer];
+  const stub = (method, dlKey, isArray) => {
+    dlKey = dlKey || method;
+    if (isArray) {
+      window[dl][dlKey] = window[dl][dlKey] || [];
+    }
+    layer[method] = (...args) => {
+      if (isArray) {
+        window[dl][dlKey].push(args);
+      } else {
+        window[dl][dlKey] = args;
+      }
+    };
+  };
+  stub("initUser", "user");
+  stub("thread", "threads", true);
+  stub("conf");
+  stub("home", "home", true);
+  layer.__sc_ready = true;
+  return layer;
+}
+function StromcomProvider({
+  clientKey,
+  clientSecret,
+  dataLayer = "stromCom",
+  environment = "production",
+  children
+}) {
+  const layer = setupLayer(dataLayer);
+  useEffect(() => {
+    var _a;
+    if (typeof window === "undefined") return;
+    if (document.querySelector(`script[data-ck="${clientKey}"][data-type="stromcom"]`)) return;
+    const base = (_a = LOADER_URLS[environment]) != null ? _a : environment;
+    const dl = dataLayer + "DL";
+    const script = document.createElement("script");
+    script.async = true;
+    script.dataset.type = "stromcom";
+    script.dataset.l = dataLayer;
+    script.dataset.dl = dl;
+    script.dataset.ck = clientKey;
+    script.dataset.cs = clientSecret;
+    script.src = `${base}?${clientKey}`;
+    document.head.appendChild(script);
+    return () => script.remove();
+  }, [clientKey, clientSecret, dataLayer, environment]);
+  return /* @__PURE__ */ jsx(StromcomContext.Provider, { value: layer, children });
+}
+function useStromcom() {
+  return useContext(StromcomContext);
+}
+
+// src/StromcomUser.jsx
+import { useEffect as useEffect2 } from "react";
+function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {
+  const sc = useStromcom();
+  useEffect2(() => {
+    if (!sc) return;
+    const opts = { code };
+    if (name !== void 0) opts.name = name;
+    if (emailAddress !== void 0) opts.emailAddress = emailAddress;
+    if (readOnly !== void 0) opts.readOnly = readOnly;
+    if (avatarURL !== void 0) opts.avatarURL = avatarURL;
+    sc.initUser(opts);
+  }, [sc, code, name, emailAddress, readOnly, avatarURL]);
+  return null;
+}
+
+// src/StromcomConf.jsx
+import { useEffect as useEffect3 } from "react";
+function StromcomConf({
+  notificationRenderer,
+  onNotification,
+  pageCSSPath,
+  notificationElementTargetElement,
+  notificationElementShowAlways,
+  notificationElementPosition,
+  notificationElementStyles,
+  notificationElementCSSPath,
+  notificationElementNoShadowRoot,
+  homeBeforeRender,
+  notificationElementBeforeRender,
+  notificationElementAfterRender,
+  theme
+}) {
+  const sc = useStromcom();
+  useEffect3(() => {
+    if (!sc) return;
+    const opts = {};
+    if (notificationRenderer !== void 0) opts.notificationRenderer = notificationRenderer;
+    if (onNotification !== void 0) opts.onNotification = onNotification;
+    if (pageCSSPath !== void 0) opts.pageCSSPath = pageCSSPath;
+    if (notificationElementTargetElement !== void 0)
+      opts.notificationElementTargetElement = notificationElementTargetElement;
+    if (notificationElementShowAlways !== void 0)
+      opts.notificationElementShowAlways = notificationElementShowAlways;
+    if (notificationElementPosition !== void 0)
+      opts.notificationElementPosition = notificationElementPosition;
+    if (notificationElementStyles !== void 0)
+      opts.notificationElementStyles = notificationElementStyles;
+    if (notificationElementCSSPath !== void 0)
+      opts.notificationElementCSSPath = notificationElementCSSPath;
+    if (notificationElementNoShadowRoot !== void 0)
+      opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;
+    if (homeBeforeRender !== void 0) opts.homeBeforeRender = homeBeforeRender;
+    if (notificationElementBeforeRender !== void 0)
+      opts.notificationElementBeforeRender = notificationElementBeforeRender;
+    if (notificationElementAfterRender !== void 0)
+      opts.notificationElementAfterRender = notificationElementAfterRender;
+    if (theme !== void 0) opts.theme = theme;
+    sc.conf(opts);
+  }, [
+    sc,
+    notificationRenderer,
+    onNotification,
+    pageCSSPath,
+    notificationElementTargetElement,
+    notificationElementShowAlways,
+    notificationElementPosition,
+    notificationElementStyles,
+    notificationElementCSSPath,
+    notificationElementNoShadowRoot,
+    homeBeforeRender,
+    notificationElementBeforeRender,
+    notificationElementAfterRender,
+    theme
+  ]);
+  return null;
+}
+
+// src/StromcomThread.jsx
+import { useEffect as useEffect4, useRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {
+  const sc = useStromcom();
+  const containerRef = useRef(null);
+  const initializedRef = useRef(false);
+  useEffect4(() => {
+    if (!sc || !containerRef.current || initializedRef.current) return;
+    const opts = { code };
+    if (name !== void 0) opts.name = name;
+    if (url !== void 0) opts.url = url;
+    if (userHint !== void 0) opts.userHint = userHint;
+    sc.thread(containerRef.current, opts);
+    initializedRef.current = true;
+  }, [sc]);
+  return /* @__PURE__ */ jsx2("div", { ref: containerRef, className, style, ...rest });
+}
+
+// src/StromcomHome.jsx
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StromcomHome({ className, style, ...rest }) {
+  const sc = useStromcom();
+  const containerRef = useRef2(null);
+  const initializedRef = useRef2(false);
+  useEffect5(() => {
+    if (!sc || !containerRef.current || initializedRef.current) return;
+    sc.home(containerRef.current);
+    initializedRef.current = true;
+  }, [sc]);
+  return /* @__PURE__ */ jsx3("div", { ref: containerRef, className, style, ...rest });
+}
+export {
+  StromcomConf,
+  StromcomHome,
+  StromcomProvider,
+  StromcomThread,
+  StromcomUser,
+  useStromcom
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 {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  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    script.src = `${base}?${clientKey}`;\n    document.head.appendChild(script);\n\n    return () => script.remove();\n  }, [clientKey, clientSecret, dataLayer, environment]);\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 * 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\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 (!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}   [props.pageCSSPath]                    - URL of CSS file injected into the widget iframe\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\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 {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n *\n * @example\n * <StromcomConf\n *   notificationElementPosition={4}\n *   onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n  notificationRenderer,\n  onNotification,\n  pageCSSPath,\n  notificationElementTargetElement,\n  notificationElementShowAlways,\n  notificationElementPosition,\n  notificationElementStyles,\n  notificationElementCSSPath,\n  notificationElementNoShadowRoot,\n  homeBeforeRender,\n  notificationElementBeforeRender,\n  notificationElementAfterRender,\n  theme,\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 (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;\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 (theme !== undefined) opts.theme = theme;\n\n    sc.conf(opts);\n  }, [\n    sc,\n    notificationRenderer,\n    onNotification,\n    pageCSSPath,\n    notificationElementTargetElement,\n    notificationElementShowAlways,\n    notificationElementPosition,\n    notificationElementStyles,\n    notificationElementCSSPath,\n    notificationElementNoShadowRoot,\n    homeBeforeRender,\n    notificationElementBeforeRender,\n    notificationElementAfterRender,\n    theme,\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"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@stromcom/react-snippet",
+  "version": "0.1.0",
+  "description": "React integration for the STROMCOM chat widget. Loads the SDK, identifies users, and embeds threads as plain React components.",
+  "keywords": [
+    "stromcom",
+    "react",
+    "chat",
+    "widget",
+    "snippet",
+    "messaging",
+    "support"
+  ],
+  "homepage": "https://www.stromcom.cz",
+  "license": "MIT",
+  "author": "STROMCOM",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stromcom/react-snippet.git"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.9.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vitest": "^4.1.9"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/src/StromcomConf.jsx

@@ -0,0 +1,95 @@
+import { useEffect } from 'react';
+import { useStromcom } from './StromcomProvider.jsx';
+
+/**
+ * Sends SDK configuration to the Stromcom widget.
+ * Should be placed once inside <StromcomProvider>, before threads or the home component.
+ * Re-sends conf whenever any option prop changes.
+ *
+ * Options that accept functions (notificationRenderer, onNotification, etc.) take
+ * 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 {string}   [props.pageCSSPath]                    - URL of CSS file injected into the widget iframe
+ * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target
+ * @param {boolean}  [props.notificationElementShowAlways]  - Show icon even with zero notifications
+ * @param {number}   [props.notificationElementPosition]    - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left
+ * @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.notificationElementBeforeRender]- Callback before notification icon renders
+ * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders
+ * @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.
+ *
+ * @example
+ * <StromcomConf
+ *   notificationElementPosition={4}
+ *   onNotification={(count) => setBadge(count)}
+ * />
+ */
+export function StromcomConf({
+  notificationRenderer,
+  onNotification,
+  pageCSSPath,
+  notificationElementTargetElement,
+  notificationElementShowAlways,
+  notificationElementPosition,
+  notificationElementStyles,
+  notificationElementCSSPath,
+  notificationElementNoShadowRoot,
+  homeBeforeRender,
+  notificationElementBeforeRender,
+  notificationElementAfterRender,
+  theme,
+}) {
+  const sc = useStromcom();
+
+  useEffect(() => {
+    if (!sc) return;
+
+    const opts = {};
+
+    if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;
+    if (onNotification !== undefined) opts.onNotification = onNotification;
+    if (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;
+    if (notificationElementTargetElement !== undefined)
+      opts.notificationElementTargetElement = notificationElementTargetElement;
+    if (notificationElementShowAlways !== undefined)
+      opts.notificationElementShowAlways = notificationElementShowAlways;
+    if (notificationElementPosition !== undefined)
+      opts.notificationElementPosition = notificationElementPosition;
+    if (notificationElementStyles !== undefined)
+      opts.notificationElementStyles = notificationElementStyles;
+    if (notificationElementCSSPath !== undefined)
+      opts.notificationElementCSSPath = notificationElementCSSPath;
+    if (notificationElementNoShadowRoot !== undefined)
+      opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;
+    if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;
+    if (notificationElementBeforeRender !== undefined)
+      opts.notificationElementBeforeRender = notificationElementBeforeRender;
+    if (notificationElementAfterRender !== undefined)
+      opts.notificationElementAfterRender = notificationElementAfterRender;
+    if (theme !== undefined) opts.theme = theme;
+
+    sc.conf(opts);
+  }, [
+    sc,
+    notificationRenderer,
+    onNotification,
+    pageCSSPath,
+    notificationElementTargetElement,
+    notificationElementShowAlways,
+    notificationElementPosition,
+    notificationElementStyles,
+    notificationElementCSSPath,
+    notificationElementNoShadowRoot,
+    homeBeforeRender,
+    notificationElementBeforeRender,
+    notificationElementAfterRender,
+    theme,
+  ]);
+
+  return null;
+}

package/src/StromcomHome.jsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { useStromcom } from './StromcomProvider.jsx';
+
+/**
+ * Embeds the Stromcom notification center into the rendered div.
+ * Initialized once on mount.
+ *
+ * @param {object} [props.className] - CSS class for the container div
+ * @param {object} [props.style]     - Inline styles for the container div
+ *
+ * @example
+ * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />
+ */
+export function StromcomHome({ className, style, ...rest }) {
+  const sc = useStromcom();
+  const containerRef = useRef(null);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (!sc || !containerRef.current || initializedRef.current) return;
+    sc.home(containerRef.current);
+    initializedRef.current = true;
+  }, [sc]);
+
+  return <div ref={containerRef} className={className} style={style} {...rest} />;
+}

package/src/StromcomProvider.jsx

@@ -0,0 +1,105 @@
+import { createContext, useContext, useEffect } from 'react';
+
+export const StromcomContext = createContext(null);
+
+const LOADER_URLS = {
+  production: 'https://cdn.stromcom.cz/loader.js',
+  staging: 'https://cdn.staging.stromcom.cz/loader.js',
+};
+
+/**
+ * Sets up the stromCom stub layer synchronously so that child components can
+ * queue calls (initUser, thread, conf, home) before the async loader.js arrives.
+ * Mirrors what the PHP snippet() method generates.
+ */
+function setupLayer(dataLayer) {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  if (window[dataLayer]?.__sc_ready) {
+    return window[dataLayer];
+  }
+
+  const dl = dataLayer + 'DL';
+  window[dl] = window[dl] || {};
+  window[dataLayer] = window[dataLayer] || {};
+  const layer = window[dataLayer];
+
+  const stub = (method, dlKey, isArray) => {
+    dlKey = dlKey || method;
+    if (isArray) {
+      window[dl][dlKey] = window[dl][dlKey] || [];
+    }
+
+    layer[method] = (...args) => {
+      if (isArray) {
+        window[dl][dlKey].push(args);
+      } else {
+        window[dl][dlKey] = args;
+      }
+    };
+  };
+
+  stub('initUser', 'user');
+  stub('thread', 'threads', true);
+  stub('conf');
+  stub('home', 'home', true);
+
+  layer.__sc_ready = true;
+  return layer;
+}
+
+/**
+ * Wraps the app and loads the Stromcom widget SDK.
+ *
+ * @param {object}  props
+ * @param {string}  props.clientKey     - Client key from the Stromcom dashboard
+ * @param {string}  props.clientSecret  - Bearer token from the Stromcom dashboard
+ * @param {string}  [props.dataLayer]   - Global JS variable name (default: "stromCom")
+ * @param {string}  [props.environment] - "production" | "staging" | full custom loader URL
+ * @param {React.ReactNode} props.children
+ *
+ * @example
+ * <StromcomProvider clientKey="ck_xxx" clientSecret="cs_xxx">
+ *   <App />
+ * </StromcomProvider>
+ */
+export function StromcomProvider({
+  clientKey,
+  clientSecret,
+  dataLayer = 'stromCom',
+  environment = 'production',
+  children,
+}) {
+  // Set up stubs synchronously so children can queue calls immediately on render.
+  const layer = setupLayer(dataLayer);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Avoid injecting the script twice (React StrictMode, HMR, etc.)
+    if (document.querySelector(`script[data-ck="${clientKey}"][data-type="stromcom"]`)) return;
+
+    const base = LOADER_URLS[environment] ?? environment;
+    const dl = dataLayer + 'DL';
+
+    const script = document.createElement('script');
+    script.async = true;
+    script.dataset.type = 'stromcom';
+    script.dataset.l = dataLayer;
+    script.dataset.dl = dl;
+    script.dataset.ck = clientKey;
+    script.dataset.cs = clientSecret;
+    script.src = `${base}?${clientKey}`;
+    document.head.appendChild(script);
+
+    return () => script.remove();
+  }, [clientKey, clientSecret, dataLayer, environment]);
+
+  return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;
+}
+
+export function useStromcom() {
+  return useContext(StromcomContext);
+}

package/src/StromcomThread.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import { useStromcom } from './StromcomProvider.jsx';
+
+/**
+ * Embeds a Stromcom conversation thread into the rendered div.
+ * The thread is initialized once on mount.
+ *
+ * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).
+ *
+ * @param {object}  props
+ * @param {string}  props.code        - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])
+ * @param {string}  [props.name]      - Display name shown in the thread header
+ * @param {string}  [props.url]       - Canonical URL of the page (shown as link in header)
+ * @param {boolean} [props.userHint]  - Enable @mention suggestions (default: true)
+ * @param {string}  [props.className] - CSS class for the container div
+ * @param {object}  [props.style]     - Inline styles for the container div
+ *
+ * @example
+ * <StromcomThread
+ *   code={order.stromcomHash}
+ *   name={`Order #${order.id}`}
+ *   url={window.location.href}
+ *   style={{ height: '400px' }}
+ * />
+ */
+export function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {
+  const sc = useStromcom();
+  const containerRef = useRef(null);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (!sc || !containerRef.current || initializedRef.current) return;
+
+    const opts = { code };
+    if (name !== undefined) opts.name = name;
+    if (url !== undefined) opts.url = url;
+    if (userHint !== undefined) opts.userHint = userHint;
+
+    sc.thread(containerRef.current, opts);
+    initializedRef.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized
+  }, [sc]);
+
+  return <div ref={containerRef} className={className} style={style} {...rest} />;
+}

package/src/StromcomUser.jsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useStromcom } from './StromcomProvider.jsx';
+
+/**
+ * Identifies the currently logged-in user.
+ * Re-calls initUser whenever any prop changes.
+ *
+ * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).
+ * Never pass your raw internal user ID directly from the client.
+ *
+ * @param {object}  props
+ * @param {string}  props.code          - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])
+ * @param {string}  [props.name]        - Display name
+ * @param {string}  [props.emailAddress]- Used for email notifications
+ * @param {boolean} [props.readOnly]    - When true, user can read but not send messages
+ * @param {string}  [props.avatarURL]   - Full URL to avatar image
+ *
+ * @example
+ * <StromcomUser
+ *   code={user.stromcomHash}
+ *   name={user.name}
+ *   emailAddress={user.email}
+ * />
+ */
+export function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {
+  const sc = useStromcom();
+
+  useEffect(() => {
+    if (!sc) return;
+
+    const opts = { code };
+    if (name !== undefined) opts.name = name;
+    if (emailAddress !== undefined) opts.emailAddress = emailAddress;
+    if (readOnly !== undefined) opts.readOnly = readOnly;
+    if (avatarURL !== undefined) opts.avatarURL = avatarURL;
+
+    sc.initUser(opts);
+  }, [sc, code, name, emailAddress, readOnly, avatarURL]);
+
+  return null;
+}

package/src/__tests__/StromcomConf.test.jsx

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { StromcomContext } from '../StromcomProvider.jsx';
+import { StromcomConf } from '../StromcomConf.jsx';
+
+function renderWithLayer(layer, props) {
+  return render(
+    <StromcomContext.Provider value={layer}>
+      <StromcomConf {...props} />
+    </StromcomContext.Provider>,
+  );
+}
+
+afterEach(() => cleanup());
+
+describe('StromcomConf', () => {
+  it('sends only the options that are provided', () => {
+    const layer = { conf: vi.fn() };
+    renderWithLayer(layer, { notificationElementPosition: 4 });
+
+    expect(layer.conf).toHaveBeenCalledTimes(1);
+    expect(layer.conf).toHaveBeenCalledWith({ notificationElementPosition: 4 });
+  });
+
+  it('forwards function options as-is (no string-wrapping)', () => {
+    const layer = { conf: vi.fn() };
+    const onNotification = vi.fn();
+    renderWithLayer(layer, { onNotification });
+
+    expect(layer.conf).toHaveBeenCalledWith({ onNotification });
+  });
+
+  it('re-sends conf when an option changes', () => {
+    const layer = { conf: vi.fn() };
+    const { rerender } = renderWithLayer(layer, { theme: 'stromcom-light' });
+
+    rerender(
+      <StromcomContext.Provider value={layer}>
+        <StromcomConf theme="stromcom-dark" />
+      </StromcomContext.Provider>,
+    );
+
+    expect(layer.conf).toHaveBeenCalledTimes(2);
+    expect(layer.conf).toHaveBeenLastCalledWith({ theme: 'stromcom-dark' });
+  });
+
+  it('does not call conf and renders nothing when there is no layer', () => {
+    const { container } = render(<StromcomConf theme="stromcom-dark" />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});