@stromcom/react-snippet 0.1.0 → 0.4.0

package/README.md

@@ -137,12 +137,13 @@ Never pass raw internal IDs from the client.
 
 ### `<StromcomProvider>`
 
-| Prop           | Type                                      | Required | Description                                                                                                          |
-| -------------- | ----------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
-| `clientKey`    | `string`                                  | ✅       | Project client key.                                                                                                  |
-| `clientSecret` | `string`                                  | ✅       | Project bearer token.                                                                                                |
-| `environment`  | `"production"` \| `"staging"` \| `string` |          | Default `"production"`. Pass any custom URL to point at a self-hosted loader.                                        |
-| `dataLayer`    | `string`                                  |          | Default `"stromCom"`. The global JS variable name. Change it if `stromCom` collides with something else on the page. |
+| Prop           | Type                                      | Required | Description                                                                                                                                                                                                                                        |
+| -------------- | ----------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `clientKey`    | `string`                                  | ✅       | Project client key.                                                                                                                                                                                                                                |
+| `clientSecret` | `string`                                  | ✅       | Project bearer token.                                                                                                                                                                                                                              |
+| `environment`  | `"production"` \| `"staging"` \| `string` |          | Default `"production"`. Pass any custom URL to point at a self-hosted loader.                                                                                                                                                                      |
+| `dataLayer`    | `string`                                  |          | Default `"stromCom"`. The global JS variable name. Change it if `stromCom` collides with something else on the page.                                                                                                                               |
+| `language`     | `string`                                  |          | Initial UI language (e.g. `"cs"`, `"en"`, `"sk"`). Any code is accepted; one without a translation falls back to the browser language, then English. Omit to auto-detect from the browser. To change it at runtime, use `<StromcomConf language>`. |
 
 ### `<StromcomUser>`
 
@@ -184,16 +185,38 @@ 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.             |
-| `pageCSSPath`                 | `string`                                  | CSS file URL injected into the widget iframe. |
-| `notificationElementPosition` | `1\|2\|3\|4`                              | Icon position: 1=TL, 2=TR, 3=BR, 4=BL.        |
-| `theme`                       | `"stromcom-light"\|"stromcom-dark"\|null` | Theme. `null` follows browser preference.     |
+| 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`                              | Icon position: 1=TL, 2=TR, 3=BR, 4=BL.                                                                                                                                              |
+| `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-light"\|"stromcom-dark"\|null` | Theme. `null` follows browser preference.                                                                                                                                           |
+| `entityResolve`               | `Function`                                | `async ({type, id}) => 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.
 
+#### Custom CSS
+
+The widget renders into a shadow root and the app runs in an iframe, so neither is
+reachable from your page stylesheet. `appFrameCSSPath` covers the frame — container,
+backdrop, the iframe element itself — and `appCSSPath` the UI inside it. Both accept one
+URL or a list, and both load after the widget's own stylesheet, so your rules win.
+
+```jsx
+const APP_CSS = ['https://cdn.example.com/widget.css', 'https://cdn.example.com/brand.css'];
+
+<StromcomConf appFrameCSSPath="https://cdn.example.com/frame.css" appCSSPath={APP_CSS} />;
+```
+
+Keep the array identity stable (a module constant or `useMemo`) — like every option prop,
+a new value re-sends the configuration, and an inline array is a new value on every render.
+
+`appCSSPath` is applied on top of the `customCSSPath` from the project settings and, like
+it, only on a plan that allows appearance customization; without it the app ignores both.
+
 ### `useStromcom()` — escape hatch
 
 Returns the global `stromCom` object directly. Use when you need to call something the components don't expose (e.g. switching the active user from a button click).
@@ -230,6 +253,99 @@ The provider is SSR-safe — it only touches `window` inside `useEffect`. The lo
 
 For the App Router, mount `<StromcomProvider>` in a Client Component placed inside your root layout. Server Components above it stay server-rendered. See [`examples/02-nextjs-app-router/`](./examples/02-nextjs-app-router).
 
+## Content Security Policy
+
+If your site sends a `Content-Security-Policy` header, the STROMCOM origins have to be allowed. The directives below are **additive** — merge them into your existing policy. With a restrictive `default-src` (e.g. `'none'` or `'self'`) all five must be listed explicitly.
+
+### Production
+
+| Directive     | Add                       | Why                                                         |
+| ------------- | ------------------------- | ----------------------------------------------------------- |
+| `script-src`  | `https://cdn.stromcom.cz` | Loader script, and the widget snippet it pulls in           |
+| `connect-src` | `https://www.stromcom.cz` | Notification polling against `/api/app/v1/`                 |
+| `style-src`   | `https://cdn.stromcom.cz` | Widget stylesheets (shadow root + `client.css` in `<head>`) |
+| `img-src`     | `data:`                   | SVG icons embedded in the widget CSS (loading spinner)      |
+| `frame-src`   | `https://app.stromcom.cz` | The iframe hosting threads and the notification center      |
+
+As a single header:
+
+```
+Content-Security-Policy:
+  script-src 'self' https://cdn.stromcom.cz;
+  connect-src 'self' https://www.stromcom.cz;
+  style-src 'self' https://cdn.stromcom.cz;
+  img-src 'self' data:;
+  frame-src https://app.stromcom.cz;
+```
+
+### Staging
+
+Same directives with the staging hosts — use these when the provider runs with `environment="staging"`.
+
+| Directive     | Add                               |
+| ------------- | --------------------------------- |
+| `script-src`  | `https://cdn.staging.stromcom.cz` |
+| `connect-src` | `https://staging.stromcom.cz`     |
+| `style-src`   | `https://cdn.staging.stromcom.cz` |
+| `frame-src`   | `https://app.staging.stromcom.cz` |
+
+`img-src data:` is the same in both environments.
+
+If you pass a full URL to `environment` (self-hosted or branch-preview loader, see [`examples/09-staging-environment.jsx`](./examples/09-staging-environment.jsx)), put that host in `script-src` instead.
+
+### `'unsafe-inline'` is not required
+
+`<StromcomProvider>` injects the loader with `document.createElement('script')` from `useEffect` — it never emits an inline `<script>` block, so **`script-src 'unsafe-inline'` is not needed**. This is a deliberate difference from [`stromcom/php-snippet`](https://github.com/stromcom/php-snippet), which renders the same bootstrap as an inline `<script>` and therefore needs `'unsafe-inline'` or a nonce.
+
+`style-src 'unsafe-inline'` is not needed either: widget styles are applied as constructable stylesheets inside the shadow root. The `style` props on `<StromcomThread>` and `<StromcomHome>` are applied by React through the CSSOM, which CSP does not restrict.
+
+### What you do **not** have to allow
+
+Avatars, attachments, fonts, and uploaded media are loaded **inside the widget iframe**, on the STROMCOM app origin. Your page's CSP does not apply to them — keep `font-src`, `media-src` and attachment hosts out of your policy.
+
+Two `<StromcomConf>` options are worth knowing about:
+
+| Option                       | Loaded where      | Effect on your CSP                                                          |
+| ---------------------------- | ----------------- | --------------------------------------------------------------------------- |
+| `notificationElementCSSPath` | Your page         | Its host must be in your `style-src` (`'self'` if you host the file)        |
+| `appFrameCSSPath`            | Your page         | Its host must be in your `style-src` — a shadow root is still your document |
+| `appCSSPath`                 | Inside the iframe | None — your page's CSP does not reach inside the iframe                     |
+
+### Next.js
+
+Static headers in `next.config.js` are the simplest fit — STROMCOM needs no per-request nonce.
+
+```js
+// next.config.js
+const isDev = process.env.NODE_ENV === 'development';
+
+// 'unsafe-inline' / 'unsafe-eval' below are Next.js' own requirements
+// (hydration bootstrap, styled-jsx, dev HMR) — STROMCOM needs neither.
+const contentSecurityPolicy = [
+  "default-src 'self'",
+  `script-src 'self' 'unsafe-inline'${isDev ? " 'unsafe-eval'" : ''} https://cdn.stromcom.cz`,
+  "style-src 'self' 'unsafe-inline' https://cdn.stromcom.cz",
+  `connect-src 'self' https://www.stromcom.cz${isDev ? ' ws:' : ''}`,
+  "img-src 'self' data:",
+  'frame-src https://app.stromcom.cz',
+  "base-uri 'self'",
+  "form-action 'self'",
+].join('; ');
+
+export default {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [{ key: 'Content-Security-Policy', value: contentSecurityPolicy }],
+      },
+    ];
+  },
+};
+```
+
+Swap in the staging hosts when you build for staging. If you already generate a per-request nonce in `middleware.js` (the approach in the Next.js CSP guide), just add the same STROMCOM entries to the directives you build there — the nonce itself is irrelevant to the widget.
+
 ## Troubleshooting
 
 **The loader script never appears.** Check that `clientKey` and `clientSecret` are non-empty. The provider does nothing on the server.
@@ -240,6 +356,8 @@ For the App Router, mount `<StromcomProvider>` in a Client Component placed insi
 
 **Two providers warn / double script.** Don't mount the provider twice. The provider deduplicates the `<script>` tag, but mounting two providers with different `clientKey`s is unsupported.
 
+**Console shows `Refused to load…` / CSP violations.** Your page sends a `Content-Security-Policy` header that doesn't list the STROMCOM origins. See [Content Security Policy](#content-security-policy) — the reported directive tells you which line is missing.
+
 **Notification count never fires.** Make sure `<StromcomConf onNotification={...}>` is mounted as a child of the provider, and that `<StromcomUser>` runs (notifications are user-scoped).
 
 ## License

package/dist/index.cjs

@@ -73,6 +73,7 @@ function StromcomProvider({
   clientSecret,
   dataLayer = "stromCom",
   environment = "production",
+  language,
   children
 }) {
   const layer = setupLayer(dataLayer);
@@ -89,10 +90,11 @@ function StromcomProvider({
     script.dataset.dl = dl;
     script.dataset.ck = clientKey;
     script.dataset.cs = clientSecret;
+    if (language) script.dataset.lang = language;
     script.src = `${base}?${clientKey}`;
     document.head.appendChild(script);
     return () => script.remove();
-  }, [clientKey, clientSecret, dataLayer, environment]);
+  }, [clientKey, clientSecret, dataLayer, environment, language]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StromcomContext.Provider, { value: layer, children });
 }
 function useStromcom() {
@@ -120,7 +122,8 @@ var import_react3 = require("react");
 function StromcomConf({
   notificationRenderer,
   onNotification,
-  pageCSSPath,
+  appFrameCSSPath,
+  appCSSPath,
   notificationElementTargetElement,
   notificationElementShowAlways,
   notificationElementPosition,
@@ -130,7 +133,9 @@ function StromcomConf({
   homeBeforeRender,
   notificationElementBeforeRender,
   notificationElementAfterRender,
-  theme
+  language,
+  theme,
+  entityResolve
 }) {
   const sc = useStromcom();
   (0, import_react3.useEffect)(() => {
@@ -138,7 +143,8 @@ function StromcomConf({
     const opts = {};
     if (notificationRenderer !== void 0) opts.notificationRenderer = notificationRenderer;
     if (onNotification !== void 0) opts.onNotification = onNotification;
-    if (pageCSSPath !== void 0) opts.pageCSSPath = pageCSSPath;
+    if (appFrameCSSPath !== void 0) opts.appFrameCSSPath = appFrameCSSPath;
+    if (appCSSPath !== void 0) opts.appCSSPath = appCSSPath;
     if (notificationElementTargetElement !== void 0)
       opts.notificationElementTargetElement = notificationElementTargetElement;
     if (notificationElementShowAlways !== void 0)
@@ -156,13 +162,16 @@ function StromcomConf({
       opts.notificationElementBeforeRender = notificationElementBeforeRender;
     if (notificationElementAfterRender !== void 0)
       opts.notificationElementAfterRender = notificationElementAfterRender;
+    if (language !== void 0) opts.language = language;
     if (theme !== void 0) opts.theme = theme;
+    if (entityResolve !== void 0) opts.entityResolve = entityResolve;
     sc.conf(opts);
   }, [
     sc,
     notificationRenderer,
     onNotification,
-    pageCSSPath,
+    appFrameCSSPath,
+    appCSSPath,
     notificationElementTargetElement,
     notificationElementShowAlways,
     notificationElementPosition,
@@ -172,7 +181,9 @@ function StromcomConf({
     homeBeforeRender,
     notificationElementBeforeRender,
     notificationElementAfterRender,
-    theme
+    language,
+    theme,
+    entityResolve
   ]);
   return null;
 }

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 {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":["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 * 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|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\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-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id}) => 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"]}

package/dist/index.d.ts

@@ -19,6 +19,12 @@ export interface StromcomProviderProps {
   dataLayer?: string;
   /** `"production"`, `"staging"`, or a full custom loader URL. Default `"production"`. */
   environment?: StromcomEnvironment;
+  /**
+   * Initial UI language (e.g. `"cs"`, `"en"`, `"sk"`). Any code is accepted; one without a
+   * translation falls back to the browser language, then English. Omit to auto-detect from the browser.
+   * Use `StromcomConf`'s `language` prop to change it at runtime.
+   */
+  language?: string;
   children?: ReactNode;
 }
 
@@ -66,7 +72,13 @@ export function StromcomHome(props: StromcomHomeProps): JSX.Element;
 export interface StromcomConfOptions {
   notificationRenderer?: (notification: unknown) => unknown;
   onNotification?: (count: number) => void;
-  pageCSSPath?: string;
+  /** CSS for the widget frame — the shadow root holding the container, the backdrop and the iframe. */
+  appFrameCSSPath?: string | string[];
+  /**
+   * CSS for the app itself (inside the iframe), on top of the CSS from the project
+   * settings. Applied only on a plan that allows appearance customization.
+   */
+  appCSSPath?: string | string[];
   notificationElementTargetElement?:
     (() => HTMLElement | Promise<HTMLElement>) | HTMLElement | Promise<HTMLElement>;
   notificationElementShowAlways?: boolean;
@@ -78,8 +90,16 @@ export interface StromcomConfOptions {
   homeBeforeRender?: () => void | Promise<void>;
   notificationElementBeforeRender?: () => void | Promise<void>;
   notificationElementAfterRender?: () => void;
+  /**
+   * UI language, or `null` to follow the browser. Any language code is accepted;
+   * one the widget has no translation for falls back to the browser language, then English.
+   * Overrides `StromcomProviderProps.language`, which is only the initial value.
+   */
+  language?: string | null;
   /** Theme: `"stromcom-light"`, `"stromcom-dark"`, or `null` to follow browser preference. */
   theme?: 'stromcom-light' | 'stromcom-dark' | null;
+  /** Resolves business-entity detail (order, ticket…) for the message editor's chip hover-card. */
+  entityResolve?: (entity: { type: string; id: string }) => unknown | Promise<unknown>;
 }
 
 export function StromcomConf(props: StromcomConfOptions): null;

package/dist/index.js

@@ -43,6 +43,7 @@ function StromcomProvider({
   clientSecret,
   dataLayer = "stromCom",
   environment = "production",
+  language,
   children
 }) {
   const layer = setupLayer(dataLayer);
@@ -59,10 +60,11 @@ function StromcomProvider({
     script.dataset.dl = dl;
     script.dataset.ck = clientKey;
     script.dataset.cs = clientSecret;
+    if (language) script.dataset.lang = language;
     script.src = `${base}?${clientKey}`;
     document.head.appendChild(script);
     return () => script.remove();
-  }, [clientKey, clientSecret, dataLayer, environment]);
+  }, [clientKey, clientSecret, dataLayer, environment, language]);
   return /* @__PURE__ */ jsx(StromcomContext.Provider, { value: layer, children });
 }
 function useStromcom() {
@@ -90,7 +92,8 @@ import { useEffect as useEffect3 } from "react";
 function StromcomConf({
   notificationRenderer,
   onNotification,
-  pageCSSPath,
+  appFrameCSSPath,
+  appCSSPath,
   notificationElementTargetElement,
   notificationElementShowAlways,
   notificationElementPosition,
@@ -100,7 +103,9 @@ function StromcomConf({
   homeBeforeRender,
   notificationElementBeforeRender,
   notificationElementAfterRender,
-  theme
+  language,
+  theme,
+  entityResolve
 }) {
   const sc = useStromcom();
   useEffect3(() => {
@@ -108,7 +113,8 @@ function StromcomConf({
     const opts = {};
     if (notificationRenderer !== void 0) opts.notificationRenderer = notificationRenderer;
     if (onNotification !== void 0) opts.onNotification = onNotification;
-    if (pageCSSPath !== void 0) opts.pageCSSPath = pageCSSPath;
+    if (appFrameCSSPath !== void 0) opts.appFrameCSSPath = appFrameCSSPath;
+    if (appCSSPath !== void 0) opts.appCSSPath = appCSSPath;
     if (notificationElementTargetElement !== void 0)
       opts.notificationElementTargetElement = notificationElementTargetElement;
     if (notificationElementShowAlways !== void 0)
@@ -126,13 +132,16 @@ function StromcomConf({
       opts.notificationElementBeforeRender = notificationElementBeforeRender;
     if (notificationElementAfterRender !== void 0)
       opts.notificationElementAfterRender = notificationElementAfterRender;
+    if (language !== void 0) opts.language = language;
     if (theme !== void 0) opts.theme = theme;
+    if (entityResolve !== void 0) opts.entityResolve = entityResolve;
     sc.conf(opts);
   }, [
     sc,
     notificationRenderer,
     onNotification,
-    pageCSSPath,
+    appFrameCSSPath,
+    appCSSPath,
     notificationElementTargetElement,
     notificationElementShowAlways,
     notificationElementPosition,
@@ -142,7 +151,9 @@ function StromcomConf({
     homeBeforeRender,
     notificationElementBeforeRender,
     notificationElementAfterRender,
-    theme
+    language,
+    theme,
+    entityResolve
   ]);
   return null;
 }

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 {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"]}
+{"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 * 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|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\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-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id}) => 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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stromcom/react-snippet",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "React integration for the STROMCOM chat widget. Loads the SDK, identifies users, and embeds threads as plain React components.",
   "keywords": [
     "stromcom",
@@ -36,6 +36,9 @@
     "LICENSE"
   ],
   "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",

package/src/StromcomConf.jsx

@@ -11,7 +11,8 @@ import { useStromcom } from './StromcomProvider.jsx';
  *
  * @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 {(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
  * @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
@@ -21,7 +22,12 @@ import { useStromcom } from './StromcomProvider.jsx';
  * @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 {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls
+ *                                           back to the browser language, then English. null follows the browser. Overrides the `language`
+ *                                           prop on StromcomProvider, which is only the initial value; this one
+ *                                           can be changed at runtime.
  * @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.
+ * @param {Function} [props.entityResolve] - async ({type, id}) => detail; resolves business-entity detail for the message editor's chip hover-card
  *
  * @example
  * <StromcomConf
@@ -32,7 +38,8 @@ import { useStromcom } from './StromcomProvider.jsx';
 export function StromcomConf({
   notificationRenderer,
   onNotification,
-  pageCSSPath,
+  appFrameCSSPath,
+  appCSSPath,
   notificationElementTargetElement,
   notificationElementShowAlways,
   notificationElementPosition,
@@ -42,7 +49,9 @@ export function StromcomConf({
   homeBeforeRender,
   notificationElementBeforeRender,
   notificationElementAfterRender,
+  language,
   theme,
+  entityResolve,
 }) {
   const sc = useStromcom();
 
@@ -53,7 +62,8 @@ export function StromcomConf({
 
     if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;
     if (onNotification !== undefined) opts.onNotification = onNotification;
-    if (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;
+    if (appFrameCSSPath !== undefined) opts.appFrameCSSPath = appFrameCSSPath;
+    if (appCSSPath !== undefined) opts.appCSSPath = appCSSPath;
     if (notificationElementTargetElement !== undefined)
       opts.notificationElementTargetElement = notificationElementTargetElement;
     if (notificationElementShowAlways !== undefined)
@@ -71,14 +81,17 @@ export function StromcomConf({
       opts.notificationElementBeforeRender = notificationElementBeforeRender;
     if (notificationElementAfterRender !== undefined)
       opts.notificationElementAfterRender = notificationElementAfterRender;
+    if (language !== undefined) opts.language = language;
     if (theme !== undefined) opts.theme = theme;
+    if (entityResolve !== undefined) opts.entityResolve = entityResolve;
 
     sc.conf(opts);
   }, [
     sc,
     notificationRenderer,
     onNotification,
-    pageCSSPath,
+    appFrameCSSPath,
+    appCSSPath,
     notificationElementTargetElement,
     notificationElementShowAlways,
     notificationElementPosition,
@@ -88,7 +101,9 @@ export function StromcomConf({
     homeBeforeRender,
     notificationElementBeforeRender,
     notificationElementAfterRender,
+    language,
     theme,
+    entityResolve,
   ]);
 
   return null;

package/src/StromcomProvider.jsx

@@ -58,6 +58,8 @@ function setupLayer(dataLayer) {
  * @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 {string}  [props.language]    - Initial UI language (e.g. "cs", "en", "sk"). Omit to auto-detect from the
+ *                                        browser. Use StromcomConf's `language` prop to change it at runtime.
  * @param {React.ReactNode} props.children
  *
  * @example
@@ -70,6 +72,7 @@ export function StromcomProvider({
   clientSecret,
   dataLayer = 'stromCom',
   environment = 'production',
+  language,
   children,
 }) {
   // Set up stubs synchronously so children can queue calls immediately on render.
@@ -91,11 +94,12 @@ export function StromcomProvider({
     script.dataset.dl = dl;
     script.dataset.ck = clientKey;
     script.dataset.cs = clientSecret;
+    if (language) script.dataset.lang = language;
     script.src = `${base}?${clientKey}`;
     document.head.appendChild(script);
 
     return () => script.remove();
-  }, [clientKey, clientSecret, dataLayer, environment]);
+  }, [clientKey, clientSecret, dataLayer, environment, language]);
 
   return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;
 }

package/src/__tests__/StromcomConf.test.jsx

@@ -30,6 +30,57 @@ describe('StromcomConf', () => {
     expect(layer.conf).toHaveBeenCalledWith({ onNotification });
   });
 
+  it('forwards entityResolve as-is (no string-wrapping)', () => {
+    const layer = { conf: vi.fn() };
+    const entityResolve = vi.fn();
+    renderWithLayer(layer, { entityResolve });
+
+    expect(layer.conf).toHaveBeenCalledWith({ entityResolve });
+  });
+
+  it('sends a single CSS path', () => {
+    const layer = { conf: vi.fn() };
+    renderWithLayer(layer, { appFrameCSSPath: 'https://example.com/frame.css' });
+
+    expect(layer.conf).toHaveBeenCalledWith({ appFrameCSSPath: 'https://example.com/frame.css' });
+  });
+
+  it('sends a list of CSS paths as an array', () => {
+    const layer = { conf: vi.fn() };
+    const appCSSPath = ['https://example.com/a.css', 'https://example.com/b.css'];
+    renderWithLayer(layer, { appCSSPath });
+
+    expect(layer.conf).toHaveBeenCalledWith({ appCSSPath });
+  });
+
+  it('sends the language option', () => {
+    const layer = { conf: vi.fn() };
+    renderWithLayer(layer, { language: 'cs' });
+
+    expect(layer.conf).toHaveBeenCalledWith({ language: 'cs' });
+  });
+
+  it('sends language null to follow the browser', () => {
+    const layer = { conf: vi.fn() };
+    renderWithLayer(layer, { language: null });
+
+    expect(layer.conf).toHaveBeenCalledWith({ language: null });
+  });
+
+  it('re-sends conf when the language changes', () => {
+    const layer = { conf: vi.fn() };
+    const { rerender } = renderWithLayer(layer, { language: 'cs' });
+
+    rerender(
+      <StromcomContext.Provider value={layer}>
+        <StromcomConf language="sk" />
+      </StromcomContext.Provider>,
+    );
+
+    expect(layer.conf).toHaveBeenCalledTimes(2);
+    expect(layer.conf).toHaveBeenLastCalledWith({ language: 'sk' });
+  });
+
   it('re-sends conf when an option changes', () => {
     const layer = { conf: vi.fn() };
     const { rerender } = renderWithLayer(layer, { theme: 'stromcom-light' });

package/src/__tests__/StromcomProvider.test.jsx

@@ -92,6 +92,26 @@ describe('StromcomProvider', () => {
     expect(scriptFor('ck_5')).toBeNull();
   });
 
+  it('sets data-lang when language is provided', () => {
+    render(
+      <StromcomProvider clientKey="ck_lang" clientSecret="cs_lang" language="cs">
+        <div />
+      </StromcomProvider>,
+    );
+
+    expect(scriptFor('ck_lang').dataset.lang).toBe('cs');
+  });
+
+  it('omits data-lang when language is not provided', () => {
+    render(
+      <StromcomProvider clientKey="ck_nolang" clientSecret="cs_nolang">
+        <div />
+      </StromcomProvider>,
+    );
+
+    expect(scriptFor('ck_nolang').dataset.lang).toBeUndefined();
+  });
+
   it('respects a custom dataLayer name', () => {
     render(
       <StromcomProvider clientKey="ck_6" clientSecret="cs_6" dataLayer="customLayer">

package/src/index.d.ts

@@ -19,6 +19,12 @@ export interface StromcomProviderProps {
   dataLayer?: string;
   /** `"production"`, `"staging"`, or a full custom loader URL. Default `"production"`. */
   environment?: StromcomEnvironment;
+  /**
+   * Initial UI language (e.g. `"cs"`, `"en"`, `"sk"`). Any code is accepted; one without a
+   * translation falls back to the browser language, then English. Omit to auto-detect from the browser.
+   * Use `StromcomConf`'s `language` prop to change it at runtime.
+   */
+  language?: string;
   children?: ReactNode;
 }
 
@@ -66,7 +72,13 @@ export function StromcomHome(props: StromcomHomeProps): JSX.Element;
 export interface StromcomConfOptions {
   notificationRenderer?: (notification: unknown) => unknown;
   onNotification?: (count: number) => void;
-  pageCSSPath?: string;
+  /** CSS for the widget frame — the shadow root holding the container, the backdrop and the iframe. */
+  appFrameCSSPath?: string | string[];
+  /**
+   * CSS for the app itself (inside the iframe), on top of the CSS from the project
+   * settings. Applied only on a plan that allows appearance customization.
+   */
+  appCSSPath?: string | string[];
   notificationElementTargetElement?:
     (() => HTMLElement | Promise<HTMLElement>) | HTMLElement | Promise<HTMLElement>;
   notificationElementShowAlways?: boolean;
@@ -78,8 +90,16 @@ export interface StromcomConfOptions {
   homeBeforeRender?: () => void | Promise<void>;
   notificationElementBeforeRender?: () => void | Promise<void>;
   notificationElementAfterRender?: () => void;
+  /**
+   * UI language, or `null` to follow the browser. Any language code is accepted;
+   * one the widget has no translation for falls back to the browser language, then English.
+   * Overrides `StromcomProviderProps.language`, which is only the initial value.
+   */
+  language?: string | null;
   /** Theme: `"stromcom-light"`, `"stromcom-dark"`, or `null` to follow browser preference. */
   theme?: 'stromcom-light' | 'stromcom-dark' | null;
+  /** Resolves business-entity detail (order, ticket…) for the message editor's chip hover-card. */
+  entityResolve?: (entity: { type: string; id: string }) => unknown | Promise<unknown>;
 }
 
 export function StromcomConf(props: StromcomConfOptions): null;