@bootdesk/chat-widget-bridge 0.1.0

package/README.md

@@ -0,0 +1,152 @@
+# @bootdesk/chat-widget-bridge
+
+Iframe bridge for BootDesk Chat SDK — enables embedding the chat widget in an iframe with cross-frame communication via `postMessage`.
+
+Includes:
+- **`useIframeBridge`** — React hook for iframe communication
+- **`embed-chat`** — Vanilla JS embed script that creates a floating chat button and iframe dynamically
+
+## Install
+
+```bash
+npm install @bootdesk/chat-widget-bridge
+```
+
+Peer dependency: `react` (only needed for `useIframeBridge`).
+
+## Usage
+
+### In the iframe (child)
+
+```tsx
+import { useIframeBridge } from "@bootdesk/chat-widget-bridge";
+
+function Chat() {
+  const { config, isInIframe, notifyMessage, notifyViewportConfig, onNotificationClicked } =
+    useIframeBridge();
+
+  // config.title, config.locale, config.placeholder, config.theme.mode
+  // are set by the parent page via postMessage.
+  // notifyViewportConfig tells the parent to add/remove
+  // interactive-widget=resizes-content on the viewport meta (Android only).
+  // iOS doesn't support this — it uses dvh units instead.
+}
+```
+
+### In the parent page
+
+```js
+const iframe = document.getElementById("chat-iframe");
+
+// Send config to iframe
+iframe.contentWindow.postMessage(
+  {
+    type: "chat-config",
+    title: "Support Chat",
+    locale: "pt-BR",
+    theme: { mode: "auto" },
+  },
+  "*",
+);
+
+// Listen for messages from iframe
+window.addEventListener("message", (event) => {
+  if (event.data?.type === "chat-message") {
+    console.log("User sent:", event.data.text);
+  }
+  if (event.data?.type === "chat-viewport-config") {
+    const meta = document.querySelector('meta[name="viewport"]');
+    if (!meta) return;
+    const current = meta.getAttribute("content") || "";
+    if (event.data.content) {
+      if (!current.includes(event.data.content)) {
+        meta.setAttribute("content", current + (current ? ", " : "") + event.data.content);
+      }
+    } else {
+      meta.setAttribute(
+        "content",
+        current.replace(/,?\s*interactive-widget=[^,]*/g, "").replace(/^,\s*/, ""),
+      );
+    }
+  }
+});
+
+// Trigger notification click in iframe
+iframe.contentWindow.postMessage(
+  { type: "chat-notification-clicked" },
+  "*",
+);
+```
+
+## API
+
+| Return value | Description |
+|---|---|
+| `config` | `BridgeConfig \| null` — config from parent (title, locale, placeholder, theme) |
+| `isInIframe` | `boolean` — `true` when window !== window.parent |
+| `notifyMessage(text)` | Sends `{ type: "chat-message", text }` to parent |
+| `notifyViewportConfig(content)` | Sends `{ type: "chat-viewport-config", content }` to parent (Android keyboard support via `interactive-widget=resizes-content`; iOS handles this via `dvh` units) |
+| `onNotificationClicked(cb)` | Registers callback for `chat-notification-clicked` from parent |
+
+## Message Protocol
+
+| Direction | type | Payload |
+|---|---|---|
+| Parent → Child | `chat-config` | `{ title?, locale?, placeholder?, theme?: { mode? } }` |
+| Parent → Child | `chat-notification-clicked` | `{}` |
+| Child → Parent | `chat-message` | `{ text: string }` |
+| Child → Parent | `chat-close` | `{}` — requests parent to close/hide the iframe |
+| Child → Parent | `chat-viewport-config` | `{ content: string }` — asks parent to add `interactive-widget=resizes-content` on viewport meta (Android only; iOS uses `dvh` units) |
+
+## Embed Script (`embed-chat`)
+
+Self-contained vanilla JS script that creates a floating chat button, overlay, and an iframe dynamically on any page.
+
+### Usage
+
+As a module import (Vite/webpack):
+```js
+import "@bootdesk/chat-widget-bridge/embed-chat";
+
+ChatSDK.initialize();
+```
+
+Via a `<script>` tag:
+```html
+<script src="https://cdn.example.com/embed-chat.js"></script>
+<script>
+  ChatSDK.initialize({
+    iframeSrc: "/my-chat-page",
+    title: "Support Chat",
+    placeholder: "How can we help?",
+    buttonInnerHtml: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+    buttonStyle: { background: "#ff4433" },
+    overlayStyle: { background: "rgba(0,0,0,0.5)" },
+  });
+</script>
+```
+
+### Behavior
+
+- Exposes `window.ChatSDK.initialize()` to create a floating chat button, overlay, and iframe
+- On click, opens a panel with the iframe (slide + fade animation)
+- On small screens (<800px) the iframe goes fullscreen and the overlay is hidden
+- Reads `localStorage` key `chat-theme` and passes it to the iframe via `chat-config`
+- Listens for `chat-close` message from the iframe and closes the panel
+- Logs `chat-message` events from the iframe to the console
+- Handles `chat-viewport-config` to update the parent page's viewport meta for Android keyboard (`interactive-widget=resizes-content`; iOS uses `dvh` units)
+
+### Configuration
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `iframeSrc` | `string` | `"/chat-iframe"` | URL for the iframe src |
+| `title` | `string` | `"Chat"` | Title sent to the iframe via `chat-config` |
+| `placeholder` | `string` | `"Type a message..."` | Placeholder sent to the iframe via `chat-config` |
+| `buttonInnerHtml` | `string` | Chat bubble SVG | Inner HTML of the floating button |
+| `buttonStyle` | `object` | Default button styles | CSS overrides for the button |
+| `overlayStyle` | `object` | Default overlay styles | CSS overrides for the overlay |
+
+## License
+
+MIT

package/dist/embed-chat.cjs

@@ -0,0 +1,195 @@
+"use strict";
+
+// src/embed-chat.js
+(function() {
+  "use strict";
+  var DEFAULTS = {
+    iframeSrc: "/chat-iframe",
+    title: "Chat",
+    placeholder: "Type a message...",
+    buttonInnerHtml: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+    buttonStyle: {
+      position: "fixed",
+      bottom: "24px",
+      right: "24px",
+      width: "56px",
+      height: "56px",
+      borderRadius: "50%",
+      border: "none",
+      background: "var(--chat-primary, #6366f1)",
+      color: "#fff",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.2)",
+      zIndex: "2147483646",
+      transition: "transform 0.2s, opacity 0.2s"
+    },
+    overlayStyle: {
+      position: "fixed",
+      inset: "0",
+      background: "rgba(0,0,0,0.3)",
+      zIndex: "2147483646",
+      opacity: "0",
+      transition: "opacity 0.2s",
+      pointerEvents: "none"
+    }
+  };
+  var state = {
+    opts: null,
+    button: null,
+    iframe: null,
+    overlay: null,
+    isOpen: false,
+    originalViewport: void 0
+  };
+  function mergeStyles(base, overrides) {
+    var result = {};
+    for (var key in base) result[key] = base[key];
+    if (overrides) {
+      for (var key in overrides) result[key] = overrides[key];
+    }
+    return result;
+  }
+  function createButton() {
+    var opts = state.opts;
+    state.button = document.createElement("button");
+    state.button.setAttribute("data-embed-chat-btn", "");
+    state.button.setAttribute("aria-label", "Open chat");
+    state.button.setAttribute("aria-expanded", "false");
+    state.button.innerHTML = opts.buttonInnerHtml;
+    Object.assign(state.button.style, mergeStyles(DEFAULTS.buttonStyle, opts.buttonStyle));
+    state.button.addEventListener("mouseenter", function() {
+      state.button.style.transform = "scale(1.05)";
+    });
+    state.button.addEventListener("mouseleave", function() {
+      state.button.style.transform = "";
+    });
+    state.button.addEventListener("click", toggle);
+    state.button.addEventListener("keydown", function(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    document.body.appendChild(state.button);
+  }
+  function createOverlay() {
+    var opts = state.opts;
+    state.overlay = document.createElement("div");
+    state.overlay.setAttribute("data-embed-chat-overlay", "");
+    Object.assign(state.overlay.style, mergeStyles(DEFAULTS.overlayStyle, opts.overlayStyle));
+    state.overlay.addEventListener("click", toggle);
+    document.body.appendChild(state.overlay);
+  }
+  function createIframe() {
+    var opts = state.opts;
+    state.iframe = document.createElement("iframe");
+    state.iframe.setAttribute("data-embed-chat-iframe", "");
+    state.iframe.setAttribute("title", "Chat Widget");
+    state.iframe.setAttribute("role", "dialog");
+    state.iframe.setAttribute("aria-modal", "true");
+    state.iframe.setAttribute("allow", "clipboard-write; microphone");
+    state.iframe.src = opts.iframeSrc;
+    Object.assign(state.iframe.style, {
+      position: "fixed",
+      bottom: "96px",
+      right: "24px",
+      width: "420px",
+      height: "600px",
+      maxWidth: "calc(100dvw - 48px)",
+      maxHeight: "calc(100dvh - 120px)",
+      border: "none",
+      borderRadius: "16px",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
+      zIndex: "2147483647",
+      opacity: "0",
+      transform: "translateY(16px) scale(0.96)",
+      transition: "opacity 0.2s, transform 0.25s",
+      pointerEvents: "none",
+      background: "#fff"
+    });
+    document.body.appendChild(state.iframe);
+    state.iframe.addEventListener("load", function() {
+      var savedTheme = "auto";
+      try {
+        var stored = localStorage.getItem("chat-theme");
+        if (stored === "light" || stored === "dark" || stored === "auto") savedTheme = stored;
+      } catch {
+      }
+      state.iframe.contentWindow.postMessage(
+        { type: "chat-config", title: opts.title, placeholder: opts.placeholder, theme: { mode: savedTheme } },
+        "*"
+      );
+    });
+  }
+  function close() {
+    if (!state.isOpen) return;
+    toggle();
+  }
+  function toggle() {
+    state.isOpen = !state.isOpen;
+    var open = state.isOpen;
+    state.button.setAttribute("aria-expanded", String(open));
+    state.iframe.style.opacity = open ? "1" : "0";
+    state.iframe.style.transform = open ? "translateY(0) scale(1)" : "translateY(16px) scale(0.96)";
+    state.iframe.style.pointerEvents = open ? "auto" : "none";
+    state.overlay.style.opacity = open ? "1" : "0";
+    state.overlay.style.pointerEvents = open ? "auto" : "none";
+    state.button.style.transform = open ? "scale(0)" : "";
+    state.button.style.opacity = open ? "0" : "1";
+    state.button.style.pointerEvents = open ? "none" : "auto";
+    document.body.style.overflow = open ? "hidden" : "";
+    if (open) state.iframe.focus();
+  }
+  function handleMessage(event) {
+    if (!state.iframe || event.source !== state.iframe.contentWindow) return;
+    var data = event.data || {};
+    if (data.type === "chat-message") {
+      console.log("[Embed Chat] Message:", data.text);
+    }
+    if (data.type === "chat-close") {
+      close();
+    }
+    if (data.type === "chat-viewport-config") {
+      var meta = document.querySelector('meta[name="viewport"]');
+      if (!meta) return;
+      var current = meta.getAttribute("content") || "";
+      if (data.content) {
+        if (state.originalViewport === void 0) state.originalViewport = current;
+        if (!current.includes(data.content)) {
+          meta.setAttribute("content", current + (current ? ", " : "") + data.content);
+        }
+      } else {
+        meta.setAttribute("content", state.originalViewport ?? current);
+        state.originalViewport = void 0;
+      }
+    }
+  }
+  function initialize(opts) {
+    if (document.querySelector("[data-embed-chat-btn]")) return;
+    state.opts = {};
+    for (var key in DEFAULTS) {
+      state.opts[key] = DEFAULTS[key];
+    }
+    if (opts) {
+      for (var key in opts) {
+        if (key === "buttonStyle" || key === "overlayStyle") {
+          state.opts[key] = mergeStyles(state.opts[key] || {}, opts[key]);
+        } else if (opts[key] !== void 0) {
+          state.opts[key] = opts[key];
+        }
+      }
+    }
+    var style = document.createElement("style");
+    style.textContent = "@media (max-width: 799px) { [data-embed-chat-iframe] { width: 100dvw !important; height: 100dvh !important; bottom: 0 !important; right: 0 !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; } [data-embed-chat-overlay] { display: none !important; } }";
+    document.head.appendChild(style);
+    createOverlay();
+    createIframe();
+    createButton();
+    window.addEventListener("message", handleMessage);
+  }
+  window.ChatSDK = { initialize };
+})();
+//# sourceMappingURL=embed-chat.cjs.map

package/dist/embed-chat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/embed-chat.js"],"sourcesContent":["(function () {\n  \"use strict\";\n\n  var DEFAULTS = {\n    iframeSrc: \"/chat-iframe\",\n    title: \"Chat\",\n    placeholder: \"Type a message...\",\n    buttonInnerHtml:\n      '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/></svg>',\n    buttonStyle: {\n      position: \"fixed\",\n      bottom: \"24px\",\n      right: \"24px\",\n      width: \"56px\",\n      height: \"56px\",\n      borderRadius: \"50%\",\n      border: \"none\",\n      background: \"var(--chat-primary, #6366f1)\",\n      color: \"#fff\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      boxShadow: \"0 4px 16px rgba(0,0,0,0.2)\",\n      zIndex: \"2147483646\",\n      transition: \"transform 0.2s, opacity 0.2s\",\n    },\n    overlayStyle: {\n      position: \"fixed\",\n      inset: \"0\",\n      background: \"rgba(0,0,0,0.3)\",\n      zIndex: \"2147483646\",\n      opacity: \"0\",\n      transition: \"opacity 0.2s\",\n      pointerEvents: \"none\",\n    },\n  };\n\n  var state = {\n    opts: null,\n    button: null,\n    iframe: null,\n    overlay: null,\n    isOpen: false,\n    originalViewport: undefined,\n  };\n\n  function mergeStyles(base, overrides) {\n    var result = {};\n    for (var key in base) result[key] = base[key];\n    if (overrides) {\n      for (var key in overrides) result[key] = overrides[key];\n    }\n    return result;\n  }\n\n  function createButton() {\n    var opts = state.opts;\n    state.button = document.createElement(\"button\");\n    state.button.setAttribute(\"data-embed-chat-btn\", \"\");\n    state.button.setAttribute(\"aria-label\", \"Open chat\");\n    state.button.setAttribute(\"aria-expanded\", \"false\");\n    state.button.innerHTML = opts.buttonInnerHtml;\n    Object.assign(state.button.style, mergeStyles(DEFAULTS.buttonStyle, opts.buttonStyle));\n    state.button.addEventListener(\"mouseenter\", function () {\n      state.button.style.transform = \"scale(1.05)\";\n    });\n    state.button.addEventListener(\"mouseleave\", function () {\n      state.button.style.transform = \"\";\n    });\n    state.button.addEventListener(\"click\", toggle);\n    state.button.addEventListener(\"keydown\", function (e) {\n      if (e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault();\n        toggle();\n      }\n    });\n    document.body.appendChild(state.button);\n  }\n\n  function createOverlay() {\n    var opts = state.opts;\n    state.overlay = document.createElement(\"div\");\n    state.overlay.setAttribute(\"data-embed-chat-overlay\", \"\");\n    Object.assign(state.overlay.style, mergeStyles(DEFAULTS.overlayStyle, opts.overlayStyle));\n    state.overlay.addEventListener(\"click\", toggle);\n    document.body.appendChild(state.overlay);\n  }\n\n  function createIframe() {\n    var opts = state.opts;\n    state.iframe = document.createElement(\"iframe\");\n    state.iframe.setAttribute(\"data-embed-chat-iframe\", \"\");\n    state.iframe.setAttribute(\"title\", \"Chat Widget\");\n    state.iframe.setAttribute(\"role\", \"dialog\");\n    state.iframe.setAttribute(\"aria-modal\", \"true\");\n    state.iframe.setAttribute(\"allow\", \"clipboard-write; microphone\");\n    state.iframe.src = opts.iframeSrc;\n    Object.assign(state.iframe.style, {\n      position: \"fixed\",\n      bottom: \"96px\",\n      right: \"24px\",\n      width: \"420px\",\n      height: \"600px\",\n      maxWidth: \"calc(100dvw - 48px)\",\n      maxHeight: \"calc(100dvh - 120px)\",\n      border: \"none\",\n      borderRadius: \"16px\",\n      boxShadow: \"0 8px 32px rgba(0,0,0,0.15)\",\n      zIndex: \"2147483647\",\n      opacity: \"0\",\n      transform: \"translateY(16px) scale(0.96)\",\n      transition: \"opacity 0.2s, transform 0.25s\",\n      pointerEvents: \"none\",\n      background: \"#fff\",\n    });\n    document.body.appendChild(state.iframe);\n\n    state.iframe.addEventListener(\"load\", function () {\n      var savedTheme = \"auto\";\n      try {\n        var stored = localStorage.getItem(\"chat-theme\");\n        if (stored === \"light\" || stored === \"dark\" || stored === \"auto\") savedTheme = stored;\n      } catch { /* unavailable */ }\n      state.iframe.contentWindow.postMessage(\n        { type: \"chat-config\", title: opts.title, placeholder: opts.placeholder, theme: { mode: savedTheme } },\n        \"*\",\n      );\n    });\n  }\n\n  function close() {\n    if (!state.isOpen) return;\n    toggle();\n  }\n\n  function toggle() {\n    state.isOpen = !state.isOpen;\n    var open = state.isOpen;\n\n    state.button.setAttribute(\"aria-expanded\", String(open));\n    state.iframe.style.opacity = open ? \"1\" : \"0\";\n    state.iframe.style.transform = open ? \"translateY(0) scale(1)\" : \"translateY(16px) scale(0.96)\";\n    state.iframe.style.pointerEvents = open ? \"auto\" : \"none\";\n\n    state.overlay.style.opacity = open ? \"1\" : \"0\";\n    state.overlay.style.pointerEvents = open ? \"auto\" : \"none\";\n\n    state.button.style.transform = open ? \"scale(0)\" : \"\";\n    state.button.style.opacity = open ? \"0\" : \"1\";\n    state.button.style.pointerEvents = open ? \"none\" : \"auto\";\n\n    document.body.style.overflow = open ? \"hidden\" : \"\";\n\n    if (open) state.iframe.focus();\n  }\n\n  function handleMessage(event) {\n    if (!state.iframe || event.source !== state.iframe.contentWindow) return;\n    var data = event.data || {};\n    if (data.type === \"chat-message\") {\n      console.log(\"[Embed Chat] Message:\", data.text);\n    }\n    if (data.type === \"chat-close\") {\n      close();\n    }\n    if (data.type === \"chat-viewport-config\") {\n      var meta = document.querySelector('meta[name=\"viewport\"]');\n      if (!meta) return;\n      var current = meta.getAttribute(\"content\") || \"\";\n      if (data.content) {\n        if (state.originalViewport === undefined) state.originalViewport = current;\n        if (!current.includes(data.content)) {\n          meta.setAttribute(\"content\", current + (current ? \", \" : \"\") + data.content);\n        }\n      } else {\n        meta.setAttribute(\"content\", state.originalViewport ?? current);\n        state.originalViewport = undefined;\n      }\n    }\n  }\n\n  function initialize(opts) {\n    if (document.querySelector(\"[data-embed-chat-btn]\")) return;\n\n    state.opts = {};\n    for (var key in DEFAULTS) {\n      state.opts[key] = DEFAULTS[key];\n    }\n    if (opts) {\n      for (var key in opts) {\n        if (key === \"buttonStyle\" || key === \"overlayStyle\") {\n          state.opts[key] = mergeStyles(state.opts[key] || {}, opts[key]);\n        } else if (opts[key] !== undefined) {\n          state.opts[key] = opts[key];\n        }\n      }\n    }\n\n    var style = document.createElement(\"style\");\n    style.textContent =\n      '@media (max-width: 799px) { [data-embed-chat-iframe] { width: 100dvw !important; height: 100dvh !important; bottom: 0 !important; right: 0 !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; } [data-embed-chat-overlay] { display: none !important; } }';\n    document.head.appendChild(style);\n\n    createOverlay();\n    createIframe();\n    createButton();\n    window.addEventListener(\"message\", handleMessage);\n  }\n\n  window.ChatSDK = { initialize: initialize };\n})();\n"],"mappings":"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","names":[]}

package/dist/embed-chat.js

@@ -0,0 +1,193 @@
+// src/embed-chat.js
+(function() {
+  "use strict";
+  var DEFAULTS = {
+    iframeSrc: "/chat-iframe",
+    title: "Chat",
+    placeholder: "Type a message...",
+    buttonInnerHtml: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+    buttonStyle: {
+      position: "fixed",
+      bottom: "24px",
+      right: "24px",
+      width: "56px",
+      height: "56px",
+      borderRadius: "50%",
+      border: "none",
+      background: "var(--chat-primary, #6366f1)",
+      color: "#fff",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.2)",
+      zIndex: "2147483646",
+      transition: "transform 0.2s, opacity 0.2s"
+    },
+    overlayStyle: {
+      position: "fixed",
+      inset: "0",
+      background: "rgba(0,0,0,0.3)",
+      zIndex: "2147483646",
+      opacity: "0",
+      transition: "opacity 0.2s",
+      pointerEvents: "none"
+    }
+  };
+  var state = {
+    opts: null,
+    button: null,
+    iframe: null,
+    overlay: null,
+    isOpen: false,
+    originalViewport: void 0
+  };
+  function mergeStyles(base, overrides) {
+    var result = {};
+    for (var key in base) result[key] = base[key];
+    if (overrides) {
+      for (var key in overrides) result[key] = overrides[key];
+    }
+    return result;
+  }
+  function createButton() {
+    var opts = state.opts;
+    state.button = document.createElement("button");
+    state.button.setAttribute("data-embed-chat-btn", "");
+    state.button.setAttribute("aria-label", "Open chat");
+    state.button.setAttribute("aria-expanded", "false");
+    state.button.innerHTML = opts.buttonInnerHtml;
+    Object.assign(state.button.style, mergeStyles(DEFAULTS.buttonStyle, opts.buttonStyle));
+    state.button.addEventListener("mouseenter", function() {
+      state.button.style.transform = "scale(1.05)";
+    });
+    state.button.addEventListener("mouseleave", function() {
+      state.button.style.transform = "";
+    });
+    state.button.addEventListener("click", toggle);
+    state.button.addEventListener("keydown", function(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    document.body.appendChild(state.button);
+  }
+  function createOverlay() {
+    var opts = state.opts;
+    state.overlay = document.createElement("div");
+    state.overlay.setAttribute("data-embed-chat-overlay", "");
+    Object.assign(state.overlay.style, mergeStyles(DEFAULTS.overlayStyle, opts.overlayStyle));
+    state.overlay.addEventListener("click", toggle);
+    document.body.appendChild(state.overlay);
+  }
+  function createIframe() {
+    var opts = state.opts;
+    state.iframe = document.createElement("iframe");
+    state.iframe.setAttribute("data-embed-chat-iframe", "");
+    state.iframe.setAttribute("title", "Chat Widget");
+    state.iframe.setAttribute("role", "dialog");
+    state.iframe.setAttribute("aria-modal", "true");
+    state.iframe.setAttribute("allow", "clipboard-write; microphone");
+    state.iframe.src = opts.iframeSrc;
+    Object.assign(state.iframe.style, {
+      position: "fixed",
+      bottom: "96px",
+      right: "24px",
+      width: "420px",
+      height: "600px",
+      maxWidth: "calc(100dvw - 48px)",
+      maxHeight: "calc(100dvh - 120px)",
+      border: "none",
+      borderRadius: "16px",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
+      zIndex: "2147483647",
+      opacity: "0",
+      transform: "translateY(16px) scale(0.96)",
+      transition: "opacity 0.2s, transform 0.25s",
+      pointerEvents: "none",
+      background: "#fff"
+    });
+    document.body.appendChild(state.iframe);
+    state.iframe.addEventListener("load", function() {
+      var savedTheme = "auto";
+      try {
+        var stored = localStorage.getItem("chat-theme");
+        if (stored === "light" || stored === "dark" || stored === "auto") savedTheme = stored;
+      } catch {
+      }
+      state.iframe.contentWindow.postMessage(
+        { type: "chat-config", title: opts.title, placeholder: opts.placeholder, theme: { mode: savedTheme } },
+        "*"
+      );
+    });
+  }
+  function close() {
+    if (!state.isOpen) return;
+    toggle();
+  }
+  function toggle() {
+    state.isOpen = !state.isOpen;
+    var open = state.isOpen;
+    state.button.setAttribute("aria-expanded", String(open));
+    state.iframe.style.opacity = open ? "1" : "0";
+    state.iframe.style.transform = open ? "translateY(0) scale(1)" : "translateY(16px) scale(0.96)";
+    state.iframe.style.pointerEvents = open ? "auto" : "none";
+    state.overlay.style.opacity = open ? "1" : "0";
+    state.overlay.style.pointerEvents = open ? "auto" : "none";
+    state.button.style.transform = open ? "scale(0)" : "";
+    state.button.style.opacity = open ? "0" : "1";
+    state.button.style.pointerEvents = open ? "none" : "auto";
+    document.body.style.overflow = open ? "hidden" : "";
+    if (open) state.iframe.focus();
+  }
+  function handleMessage(event) {
+    if (!state.iframe || event.source !== state.iframe.contentWindow) return;
+    var data = event.data || {};
+    if (data.type === "chat-message") {
+      console.log("[Embed Chat] Message:", data.text);
+    }
+    if (data.type === "chat-close") {
+      close();
+    }
+    if (data.type === "chat-viewport-config") {
+      var meta = document.querySelector('meta[name="viewport"]');
+      if (!meta) return;
+      var current = meta.getAttribute("content") || "";
+      if (data.content) {
+        if (state.originalViewport === void 0) state.originalViewport = current;
+        if (!current.includes(data.content)) {
+          meta.setAttribute("content", current + (current ? ", " : "") + data.content);
+        }
+      } else {
+        meta.setAttribute("content", state.originalViewport ?? current);
+        state.originalViewport = void 0;
+      }
+    }
+  }
+  function initialize(opts) {
+    if (document.querySelector("[data-embed-chat-btn]")) return;
+    state.opts = {};
+    for (var key in DEFAULTS) {
+      state.opts[key] = DEFAULTS[key];
+    }
+    if (opts) {
+      for (var key in opts) {
+        if (key === "buttonStyle" || key === "overlayStyle") {
+          state.opts[key] = mergeStyles(state.opts[key] || {}, opts[key]);
+        } else if (opts[key] !== void 0) {
+          state.opts[key] = opts[key];
+        }
+      }
+    }
+    var style = document.createElement("style");
+    style.textContent = "@media (max-width: 799px) { [data-embed-chat-iframe] { width: 100dvw !important; height: 100dvh !important; bottom: 0 !important; right: 0 !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; } [data-embed-chat-overlay] { display: none !important; } }";
+    document.head.appendChild(style);
+    createOverlay();
+    createIframe();
+    createButton();
+    window.addEventListener("message", handleMessage);
+  }
+  window.ChatSDK = { initialize };
+})();
+//# sourceMappingURL=embed-chat.js.map

package/dist/embed-chat.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/embed-chat.js"],"sourcesContent":["(function () {\n  \"use strict\";\n\n  var DEFAULTS = {\n    iframeSrc: \"/chat-iframe\",\n    title: \"Chat\",\n    placeholder: \"Type a message...\",\n    buttonInnerHtml:\n      '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/></svg>',\n    buttonStyle: {\n      position: \"fixed\",\n      bottom: \"24px\",\n      right: \"24px\",\n      width: \"56px\",\n      height: \"56px\",\n      borderRadius: \"50%\",\n      border: \"none\",\n      background: \"var(--chat-primary, #6366f1)\",\n      color: \"#fff\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      boxShadow: \"0 4px 16px rgba(0,0,0,0.2)\",\n      zIndex: \"2147483646\",\n      transition: \"transform 0.2s, opacity 0.2s\",\n    },\n    overlayStyle: {\n      position: \"fixed\",\n      inset: \"0\",\n      background: \"rgba(0,0,0,0.3)\",\n      zIndex: \"2147483646\",\n      opacity: \"0\",\n      transition: \"opacity 0.2s\",\n      pointerEvents: \"none\",\n    },\n  };\n\n  var state = {\n    opts: null,\n    button: null,\n    iframe: null,\n    overlay: null,\n    isOpen: false,\n    originalViewport: undefined,\n  };\n\n  function mergeStyles(base, overrides) {\n    var result = {};\n    for (var key in base) result[key] = base[key];\n    if (overrides) {\n      for (var key in overrides) result[key] = overrides[key];\n    }\n    return result;\n  }\n\n  function createButton() {\n    var opts = state.opts;\n    state.button = document.createElement(\"button\");\n    state.button.setAttribute(\"data-embed-chat-btn\", \"\");\n    state.button.setAttribute(\"aria-label\", \"Open chat\");\n    state.button.setAttribute(\"aria-expanded\", \"false\");\n    state.button.innerHTML = opts.buttonInnerHtml;\n    Object.assign(state.button.style, mergeStyles(DEFAULTS.buttonStyle, opts.buttonStyle));\n    state.button.addEventListener(\"mouseenter\", function () {\n      state.button.style.transform = \"scale(1.05)\";\n    });\n    state.button.addEventListener(\"mouseleave\", function () {\n      state.button.style.transform = \"\";\n    });\n    state.button.addEventListener(\"click\", toggle);\n    state.button.addEventListener(\"keydown\", function (e) {\n      if (e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault();\n        toggle();\n      }\n    });\n    document.body.appendChild(state.button);\n  }\n\n  function createOverlay() {\n    var opts = state.opts;\n    state.overlay = document.createElement(\"div\");\n    state.overlay.setAttribute(\"data-embed-chat-overlay\", \"\");\n    Object.assign(state.overlay.style, mergeStyles(DEFAULTS.overlayStyle, opts.overlayStyle));\n    state.overlay.addEventListener(\"click\", toggle);\n    document.body.appendChild(state.overlay);\n  }\n\n  function createIframe() {\n    var opts = state.opts;\n    state.iframe = document.createElement(\"iframe\");\n    state.iframe.setAttribute(\"data-embed-chat-iframe\", \"\");\n    state.iframe.setAttribute(\"title\", \"Chat Widget\");\n    state.iframe.setAttribute(\"role\", \"dialog\");\n    state.iframe.setAttribute(\"aria-modal\", \"true\");\n    state.iframe.setAttribute(\"allow\", \"clipboard-write; microphone\");\n    state.iframe.src = opts.iframeSrc;\n    Object.assign(state.iframe.style, {\n      position: \"fixed\",\n      bottom: \"96px\",\n      right: \"24px\",\n      width: \"420px\",\n      height: \"600px\",\n      maxWidth: \"calc(100dvw - 48px)\",\n      maxHeight: \"calc(100dvh - 120px)\",\n      border: \"none\",\n      borderRadius: \"16px\",\n      boxShadow: \"0 8px 32px rgba(0,0,0,0.15)\",\n      zIndex: \"2147483647\",\n      opacity: \"0\",\n      transform: \"translateY(16px) scale(0.96)\",\n      transition: \"opacity 0.2s, transform 0.25s\",\n      pointerEvents: \"none\",\n      background: \"#fff\",\n    });\n    document.body.appendChild(state.iframe);\n\n    state.iframe.addEventListener(\"load\", function () {\n      var savedTheme = \"auto\";\n      try {\n        var stored = localStorage.getItem(\"chat-theme\");\n        if (stored === \"light\" || stored === \"dark\" || stored === \"auto\") savedTheme = stored;\n      } catch { /* unavailable */ }\n      state.iframe.contentWindow.postMessage(\n        { type: \"chat-config\", title: opts.title, placeholder: opts.placeholder, theme: { mode: savedTheme } },\n        \"*\",\n      );\n    });\n  }\n\n  function close() {\n    if (!state.isOpen) return;\n    toggle();\n  }\n\n  function toggle() {\n    state.isOpen = !state.isOpen;\n    var open = state.isOpen;\n\n    state.button.setAttribute(\"aria-expanded\", String(open));\n    state.iframe.style.opacity = open ? \"1\" : \"0\";\n    state.iframe.style.transform = open ? \"translateY(0) scale(1)\" : \"translateY(16px) scale(0.96)\";\n    state.iframe.style.pointerEvents = open ? \"auto\" : \"none\";\n\n    state.overlay.style.opacity = open ? \"1\" : \"0\";\n    state.overlay.style.pointerEvents = open ? \"auto\" : \"none\";\n\n    state.button.style.transform = open ? \"scale(0)\" : \"\";\n    state.button.style.opacity = open ? \"0\" : \"1\";\n    state.button.style.pointerEvents = open ? \"none\" : \"auto\";\n\n    document.body.style.overflow = open ? \"hidden\" : \"\";\n\n    if (open) state.iframe.focus();\n  }\n\n  function handleMessage(event) {\n    if (!state.iframe || event.source !== state.iframe.contentWindow) return;\n    var data = event.data || {};\n    if (data.type === \"chat-message\") {\n      console.log(\"[Embed Chat] Message:\", data.text);\n    }\n    if (data.type === \"chat-close\") {\n      close();\n    }\n    if (data.type === \"chat-viewport-config\") {\n      var meta = document.querySelector('meta[name=\"viewport\"]');\n      if (!meta) return;\n      var current = meta.getAttribute(\"content\") || \"\";\n      if (data.content) {\n        if (state.originalViewport === undefined) state.originalViewport = current;\n        if (!current.includes(data.content)) {\n          meta.setAttribute(\"content\", current + (current ? \", \" : \"\") + data.content);\n        }\n      } else {\n        meta.setAttribute(\"content\", state.originalViewport ?? current);\n        state.originalViewport = undefined;\n      }\n    }\n  }\n\n  function initialize(opts) {\n    if (document.querySelector(\"[data-embed-chat-btn]\")) return;\n\n    state.opts = {};\n    for (var key in DEFAULTS) {\n      state.opts[key] = DEFAULTS[key];\n    }\n    if (opts) {\n      for (var key in opts) {\n        if (key === \"buttonStyle\" || key === \"overlayStyle\") {\n          state.opts[key] = mergeStyles(state.opts[key] || {}, opts[key]);\n        } else if (opts[key] !== undefined) {\n          state.opts[key] = opts[key];\n        }\n      }\n    }\n\n    var style = document.createElement(\"style\");\n    style.textContent =\n      '@media (max-width: 799px) { [data-embed-chat-iframe] { width: 100dvw !important; height: 100dvh !important; bottom: 0 !important; right: 0 !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; } [data-embed-chat-overlay] { display: none !important; } }';\n    document.head.appendChild(style);\n\n    createOverlay();\n    createIframe();\n    createButton();\n    window.addEventListener(\"message\", handleMessage);\n  }\n\n  window.ChatSDK = { initialize: initialize };\n})();\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useIframeBridge: () => useIframeBridge
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useIframeBridge.ts
+var import_react = require("react");
+function useIframeBridge() {
+  const [config, setConfig] = (0, import_react.useState)(null);
+  const notificationCbRef = (0, import_react.useRef)(null);
+  const isInIframe = typeof window !== "undefined" && window !== window.parent;
+  const notifyMessage = (0, import_react.useCallback)(
+    (text) => {
+      if (!isInIframe) return;
+      const msg = { type: "chat-message", text };
+      window.parent.postMessage(msg, "*");
+    },
+    [isInIframe]
+  );
+  const onNotificationClicked = (0, import_react.useCallback)((cb) => {
+    notificationCbRef.current = cb;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isInIframe) return;
+    function handleMessage(event) {
+      const data = event.data;
+      if (!data || typeof data !== "object" || !data.type) return;
+      switch (data.type) {
+        case "chat-config": {
+          const configData = { ...data };
+          delete configData.type;
+          setConfig(configData);
+          break;
+        }
+        case "chat-notification-clicked":
+          notificationCbRef.current?.();
+          break;
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isInIframe]);
+  return { config, isInIframe, notifyMessage, onNotificationClicked };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIframeBridge
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useIframeBridge.ts"],"sourcesContent":["export { useIframeBridge } from \"./useIframeBridge\";\nexport type { BridgeConfig, IframeBridgeHook, BridgeMessage } from \"./types\";\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { BridgeConfig, BridgeMessage, IframeBridgeHook } from \"./types\";\n\nexport function useIframeBridge(): IframeBridgeHook {\n  const [config, setConfig] = useState<BridgeConfig | null>(null);\n  const notificationCbRef = useRef<(() => void) | null>(null);\n\n  const isInIframe = typeof window !== \"undefined\" && window !== window.parent;\n\n  const notifyMessage = useCallback(\n    (text: string) => {\n      if (!isInIframe) return;\n      const msg: BridgeMessage = { type: \"chat-message\", text };\n      window.parent.postMessage(msg, \"*\");\n    },\n    [isInIframe],\n  );\n\n  const onNotificationClicked = useCallback((cb: () => void) => {\n    notificationCbRef.current = cb;\n  }, []);\n\n  useEffect(() => {\n    if (!isInIframe) return;\n\n    function handleMessage(event: MessageEvent) {\n      const data = event.data as Record<string, unknown>;\n      if (!data || typeof data !== \"object\" || !data.type) return;\n\n      switch (data.type) {\n        case \"chat-config\": {\n          const configData = { ...data };\n          delete configData.type;\n          setConfig(configData as BridgeConfig);\n          break;\n        }\n        case \"chat-notification-clicked\":\n          notificationCbRef.current?.();\n          break;\n      }\n    }\n\n    window.addEventListener(\"message\", handleMessage);\n    return () => window.removeEventListener(\"message\", handleMessage);\n  }, [isInIframe]);\n\n  return { config, isInIframe, notifyMessage, onNotificationClicked };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;AAGlD,SAAS,kBAAoC;AAClD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA8B,IAAI;AAC9D,QAAM,wBAAoB,qBAA4B,IAAI;AAE1D,QAAM,aAAa,OAAO,WAAW,eAAe,WAAW,OAAO;AAEtE,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,UAAI,CAAC,WAAY;AACjB,YAAM,MAAqB,EAAE,MAAM,gBAAgB,KAAK;AACxD,aAAO,OAAO,YAAY,KAAK,GAAG;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,4BAAwB,0BAAY,CAAC,OAAmB;AAC5D,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,aAAS,cAAc,OAAqB;AAC1C,YAAM,OAAO,MAAM;AACnB,UAAI,CAAC,QAAQ,OAAO,SAAS,YAAY,CAAC,KAAK,KAAM;AAErD,cAAQ,KAAK,MAAM;AAAA,QACjB,KAAK,eAAe;AAClB,gBAAM,aAAa,EAAE,GAAG,KAAK;AAC7B,iBAAO,WAAW;AAClB,oBAAU,UAA0B;AACpC;AAAA,QACF;AAAA,QACA,KAAK;AACH,4BAAkB,UAAU;AAC5B;AAAA,MACJ;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,EAAE,QAAQ,YAAY,eAAe,sBAAsB;AACpE;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,22 @@
+interface BridgeConfig {
+    locale?: string;
+    title?: string;
+    placeholder?: string;
+    theme?: {
+        mode?: "auto" | "light" | "dark";
+    };
+}
+interface IframeBridgeHook {
+    config: BridgeConfig | null;
+    isInIframe: boolean;
+    notifyMessage: (text: string) => void;
+    onNotificationClicked: (cb: () => void) => void;
+}
+interface BridgeMessage {
+    type: "chat-config" | "chat-message" | "chat-notification-clicked" | "chat-close";
+    [key: string]: unknown;
+}
+
+declare function useIframeBridge(): IframeBridgeHook;
+
+export { type BridgeConfig, type BridgeMessage, type IframeBridgeHook, useIframeBridge };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+interface BridgeConfig {
+    locale?: string;
+    title?: string;
+    placeholder?: string;
+    theme?: {
+        mode?: "auto" | "light" | "dark";
+    };
+}
+interface IframeBridgeHook {
+    config: BridgeConfig | null;
+    isInIframe: boolean;
+    notifyMessage: (text: string) => void;
+    onNotificationClicked: (cb: () => void) => void;
+}
+interface BridgeMessage {
+    type: "chat-config" | "chat-message" | "chat-notification-clicked" | "chat-close";
+    [key: string]: unknown;
+}
+
+declare function useIframeBridge(): IframeBridgeHook;
+
+export { type BridgeConfig, type BridgeMessage, type IframeBridgeHook, useIframeBridge };

package/dist/index.js

@@ -0,0 +1,43 @@
+// src/useIframeBridge.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useIframeBridge() {
+  const [config, setConfig] = useState(null);
+  const notificationCbRef = useRef(null);
+  const isInIframe = typeof window !== "undefined" && window !== window.parent;
+  const notifyMessage = useCallback(
+    (text) => {
+      if (!isInIframe) return;
+      const msg = { type: "chat-message", text };
+      window.parent.postMessage(msg, "*");
+    },
+    [isInIframe]
+  );
+  const onNotificationClicked = useCallback((cb) => {
+    notificationCbRef.current = cb;
+  }, []);
+  useEffect(() => {
+    if (!isInIframe) return;
+    function handleMessage(event) {
+      const data = event.data;
+      if (!data || typeof data !== "object" || !data.type) return;
+      switch (data.type) {
+        case "chat-config": {
+          const configData = { ...data };
+          delete configData.type;
+          setConfig(configData);
+          break;
+        }
+        case "chat-notification-clicked":
+          notificationCbRef.current?.();
+          break;
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isInIframe]);
+  return { config, isInIframe, notifyMessage, onNotificationClicked };
+}
+export {
+  useIframeBridge
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useIframeBridge.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { BridgeConfig, BridgeMessage, IframeBridgeHook } from \"./types\";\n\nexport function useIframeBridge(): IframeBridgeHook {\n  const [config, setConfig] = useState<BridgeConfig | null>(null);\n  const notificationCbRef = useRef<(() => void) | null>(null);\n\n  const isInIframe = typeof window !== \"undefined\" && window !== window.parent;\n\n  const notifyMessage = useCallback(\n    (text: string) => {\n      if (!isInIframe) return;\n      const msg: BridgeMessage = { type: \"chat-message\", text };\n      window.parent.postMessage(msg, \"*\");\n    },\n    [isInIframe],\n  );\n\n  const onNotificationClicked = useCallback((cb: () => void) => {\n    notificationCbRef.current = cb;\n  }, []);\n\n  useEffect(() => {\n    if (!isInIframe) return;\n\n    function handleMessage(event: MessageEvent) {\n      const data = event.data as Record<string, unknown>;\n      if (!data || typeof data !== \"object\" || !data.type) return;\n\n      switch (data.type) {\n        case \"chat-config\": {\n          const configData = { ...data };\n          delete configData.type;\n          setConfig(configData as BridgeConfig);\n          break;\n        }\n        case \"chat-notification-clicked\":\n          notificationCbRef.current?.();\n          break;\n      }\n    }\n\n    window.addEventListener(\"message\", handleMessage);\n    return () => window.removeEventListener(\"message\", handleMessage);\n  }, [isInIframe]);\n\n  return { config, isInIframe, notifyMessage, onNotificationClicked };\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAGlD,SAAS,kBAAoC;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA8B,IAAI;AAC9D,QAAM,oBAAoB,OAA4B,IAAI;AAE1D,QAAM,aAAa,OAAO,WAAW,eAAe,WAAW,OAAO;AAEtE,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,UAAI,CAAC,WAAY;AACjB,YAAM,MAAqB,EAAE,MAAM,gBAAgB,KAAK;AACxD,aAAO,OAAO,YAAY,KAAK,GAAG;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,wBAAwB,YAAY,CAAC,OAAmB;AAC5D,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,aAAS,cAAc,OAAqB;AAC1C,YAAM,OAAO,MAAM;AACnB,UAAI,CAAC,QAAQ,OAAO,SAAS,YAAY,CAAC,KAAK,KAAM;AAErD,cAAQ,KAAK,MAAM;AAAA,QACjB,KAAK,eAAe;AAClB,gBAAM,aAAa,EAAE,GAAG,KAAK;AAC7B,iBAAO,WAAW;AAClB,oBAAU,UAA0B;AACpC;AAAA,QACF;AAAA,QACA,KAAK;AACH,4BAAkB,UAAU;AAC5B;AAAA,MACJ;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,EAAE,QAAQ,YAAY,eAAe,sBAAsB;AACpE;","names":[]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@bootdesk/chat-widget-bridge",
+  "version": "0.1.0",
+  "description": "Iframe bridge for BootDesk Chat SDK - enables embedding the chat widget in an iframe with cross-frame communication via postMessage",
+  "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"
+    },
+    "./embed-chat": {
+      "import": "./dist/embed-chat.js",
+      "require": "./dist/embed-chat.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "lint": "eslint src",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "typecheck": "tsc --noEmit",
+    "docs": "typedoc --out ../../docs/_build/js/bridge src"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@types/react": "^18.0.0",
+    "eslint": "^10.4.0",
+    "eslint-config-prettier": "^10.1.8",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.8.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.59.4",
+    "vitest": "^1.0.0"
+  }
+}