@customerhero/react 2.1.1 → 2.3.0

package/dist/preview.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { CustomerHeroChatConfig, IncidentBanner } from '@customerhero/js';
+
+interface PreviewWidgetProps extends CustomerHeroChatConfig {
+    /**
+     * Optional wrapper styles. The component already wraps its children in a
+     * `position: relative` block; this lets the host control width/height/
+     * background of the preview canvas.
+     */
+    style?: CSSProperties;
+    /** Optional className on the outer wrapper. */
+    className?: string;
+    /**
+     * Render the chatbot's incident banner inside the preview chat window.
+     * `null` (or omitted) hides the banner. The banner is sanitized client-side
+     * so dashboard-side typos in fields like `link.url` don't crash the preview.
+     */
+    banner?: IncidentBanner | null;
+}
+/**
+ * Render the chat widget for visual preview only — no API calls, no SSE,
+ * no localStorage writes, input disabled. The window auto-opens. The bubble
+ * and window are positioned `absolute` inside the wrapper element.
+ *
+ * The host passes the same config shape as `<ChatWidget>`, plus an optional
+ * `colorScheme` (`light` / `dark` / `auto`) to drive the visitor-side dark
+ * mode toggle independently of the chatbot's own light/dark palettes.
+ */
+declare function PreviewWidget({ style, className, banner, ...config }: PreviewWidgetProps): react_jsx_runtime.JSX.Element;
+
+export { PreviewWidget, type PreviewWidgetProps };

package/dist/preview.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { CustomerHeroChatConfig, IncidentBanner } from '@customerhero/js';
+
+interface PreviewWidgetProps extends CustomerHeroChatConfig {
+    /**
+     * Optional wrapper styles. The component already wraps its children in a
+     * `position: relative` block; this lets the host control width/height/
+     * background of the preview canvas.
+     */
+    style?: CSSProperties;
+    /** Optional className on the outer wrapper. */
+    className?: string;
+    /**
+     * Render the chatbot's incident banner inside the preview chat window.
+     * `null` (or omitted) hides the banner. The banner is sanitized client-side
+     * so dashboard-side typos in fields like `link.url` don't crash the preview.
+     */
+    banner?: IncidentBanner | null;
+}
+/**
+ * Render the chat widget for visual preview only — no API calls, no SSE,
+ * no localStorage writes, input disabled. The window auto-opens. The bubble
+ * and window are positioned `absolute` inside the wrapper element.
+ *
+ * The host passes the same config shape as `<ChatWidget>`, plus an optional
+ * `colorScheme` (`light` / `dark` / `auto`) to drive the visitor-side dark
+ * mode toggle independently of the chatbot's own light/dark palettes.
+ */
+declare function PreviewWidget({ style, className, banner, ...config }: PreviewWidgetProps): react_jsx_runtime.JSX.Element;
+
+export { PreviewWidget, type PreviewWidgetProps };

package/dist/preview.js

@@ -0,0 +1,53 @@
+import {
+  ChatBubble,
+  ChatWindow,
+  CustomerHeroProvider,
+  useCustomerHeroClient
+} from "./chunk-BB2DI7WR.js";
+
+// src/preview.tsx
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PreviewBootstrap({
+  config,
+  banner
+}) {
+  const client = useCustomerHeroClient();
+  useEffect(() => {
+    client.__seedForPreview(config, { banner: banner ?? null });
+  }, [client]);
+  const configKey = JSON.stringify(config);
+  const bannerKey = JSON.stringify(banner ?? null);
+  useEffect(() => {
+    client.__seedForPreview(config, { banner: banner ?? null });
+  }, [client, configKey, bannerKey]);
+  return null;
+}
+var wrapperStyleBase = {
+  position: "relative",
+  overflow: "hidden"
+};
+function PreviewWidget({
+  style,
+  className,
+  banner,
+  ...config
+}) {
+  const initialConfig = useMemo(() => config, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: { ...wrapperStyleBase, ...style },
+      "data-customerhero-preview": "true",
+      children: /* @__PURE__ */ jsxs(CustomerHeroProvider, { disableAutoFetch: true, ...initialConfig, children: [
+        /* @__PURE__ */ jsx(PreviewBootstrap, { config, banner }),
+        /* @__PURE__ */ jsx(ChatBubble, { embedded: true }),
+        /* @__PURE__ */ jsx(ChatWindow, { embedded: true })
+      ] })
+    }
+  );
+}
+export {
+  PreviewWidget
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customerhero/react",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "private": false,
   "description": "React components for embedding the CustomerHero chat widget.",
   "keywords": [
@@ -34,6 +34,16 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
+    },
+    "./preview": {
+      "import": {
+        "types": "./dist/preview.d.ts",
+        "default": "./dist/preview.js"
+      },
+      "require": {
+        "types": "./dist/preview.d.cts",
+        "default": "./dist/preview.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
@@ -58,7 +68,7 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@customerhero/js": "^2.1.1",
+    "@customerhero/js": "^2.3.0",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",