@customerhero/react 2.1.1 → 2.2.0

package/dist/index.cjs

@@ -27,7 +27,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat-widget.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/context.tsx
 var import_react = require("react");
@@ -118,6 +118,10 @@ function useChat() {
     consumePendingPrefill: (0, import_react2.useCallback)(
       () => client.consumePendingPrefill(),
       [client]
+    ),
+    dismissIncidentBanner: (0, import_react2.useCallback)(
+      () => client.dismissIncidentBanner(),
+      [client]
     )
   };
 }
@@ -207,7 +211,7 @@ function ChatBubble() {
 }
 
 // src/components/chat-window.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/chat-header.tsx
 var import_react5 = require("react");
@@ -2226,8 +2230,231 @@ function Spinner2() {
   ] });
 }
 
-// src/components/chat-window.tsx
+// src/components/incident-banner.tsx
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var PALETTE = {
+  info: {
+    bg: "#EFF6FF",
+    fg: "#1E3A8A",
+    fgMuted: "#3B5BA9",
+    accent: "#2563EB",
+    iconBg: "#DBEAFE",
+    iconFg: "#2563EB"
+  },
+  warning: {
+    bg: "#FFFBEB",
+    fg: "#78350F",
+    fgMuted: "#92541A",
+    accent: "#B45309",
+    iconBg: "#FEF3C7",
+    iconFg: "#B45309"
+  },
+  outage: {
+    bg: "#FEF2F2",
+    fg: "#991B1B",
+    fgMuted: "#B23A3A",
+    accent: "#DC2626",
+    iconBg: "#FEE2E2",
+    iconFg: "#DC2626"
+  }
+};
+function SeverityIcon({
+  severity,
+  color
+}) {
+  const props = {
+    width: 14,
+    height: 14,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  };
+  if (severity === "outage") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+    ] });
+  }
+  if (severity === "warning") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+function IncidentBanner() {
+  const { incidentBanner, incidentBannerDismissed, dismissIncidentBanner, t } = useChat();
+  const [linkHover, setLinkHover] = (0, import_react9.useState)(false);
+  const [closeHover, setCloseHover] = (0, import_react9.useState)(false);
+  if (!incidentBanner || incidentBannerDismissed) return null;
+  const palette = PALETTE[incidentBanner.severity];
+  const wrap = {
+    background: palette.bg,
+    color: palette.fg,
+    padding: "12px 14px 12px 12px",
+    display: "flex",
+    gap: 10,
+    alignItems: "flex-start",
+    fontSize: 13,
+    lineHeight: 1.45,
+    boxShadow: "inset 0 -1px 0 rgba(0,0,0,0.04)"
+  };
+  const iconBadge = {
+    width: 22,
+    height: 22,
+    borderRadius: "50%",
+    background: palette.iconBg,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    marginTop: 1
+  };
+  const titleStyle = {
+    margin: 0,
+    fontSize: 13,
+    fontWeight: 600,
+    letterSpacing: "-0.005em"
+  };
+  const bodyStyle = {
+    margin: "3px 0 0",
+    fontSize: 12.5,
+    color: palette.fgMuted
+  };
+  const footerRowStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 10,
+    marginTop: 8
+  };
+  const etaStyle = {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: 4,
+    fontSize: 11,
+    fontWeight: 500,
+    color: palette.accent,
+    background: palette.iconBg,
+    lineHeight: 1.4
+  };
+  const linkStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    color: palette.accent,
+    textDecoration: linkHover ? "underline" : "none",
+    textUnderlineOffset: 3,
+    fontSize: 12.5,
+    fontWeight: 600
+  };
+  const closeButtonStyle = {
+    background: closeHover ? "rgba(0,0,0,0.06)" : "transparent",
+    border: "none",
+    color: palette.fgMuted,
+    cursor: "pointer",
+    padding: 4,
+    borderRadius: 6,
+    flexShrink: 0,
+    lineHeight: 0,
+    marginTop: -2,
+    marginRight: -2,
+    transition: "background-color 0.12s ease"
+  };
+  const role = incidentBanner.severity === "outage" ? "alert" : "status";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { role, style: wrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: iconBadge, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      SeverityIcon,
+      {
+        severity: incidentBanner.severity,
+        color: palette.iconFg
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: titleStyle, children: incidentBanner.title }),
+      incidentBanner.body ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: bodyStyle, children: incidentBanner.body }) : null,
+      incidentBanner.eta || incidentBanner.link ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: footerRowStyle, children: [
+        incidentBanner.eta ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: etaStyle, children: incidentBanner.eta }) : null,
+        incidentBanner.link ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "a",
+          {
+            href: incidentBanner.link.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: linkStyle,
+            onMouseEnter: () => setLinkHover(true),
+            onMouseLeave: () => setLinkHover(false),
+            children: [
+              incidentBanner.link.label ?? t("incident_default_link_label"),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "svg",
+                {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "12 5 19 12 12 19" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: dismissIncidentBanner,
+        "aria-label": t("incident_dismiss"),
+        style: closeButtonStyle,
+        onMouseEnter: () => setCloseHover(true),
+        onMouseLeave: () => setCloseHover(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/chat-window.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ConfigError({ message, title }) {
   const errorStyle = {
     flex: 1,
@@ -2239,8 +2466,8 @@ function ConfigError({ message, title }) {
     textAlign: "center",
     gap: 8
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: errorStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: errorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "svg",
       {
         width: "32",
@@ -2252,14 +2479,14 @@ function ConfigError({ message, title }) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
   ] });
 }
 function fieldKey(field) {
@@ -2286,9 +2513,9 @@ function validateField(field, value) {
 }
 function PreChatFormView() {
   const { preChatForm, submitPreChatForm, cancelPreChatForm, config, t } = useChat();
-  const [values, setValues] = (0, import_react9.useState)({});
-  const [errors, setErrors] = (0, import_react9.useState)({});
-  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const [values, setValues] = (0, import_react10.useState)({});
+  const [errors, setErrors] = (0, import_react10.useState)({});
+  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
   if (!preChatForm) return null;
   function setValue(key, value) {
     setValues((prev) => ({ ...prev, [key]: value }));
@@ -2384,15 +2611,15 @@ function PreChatFormView() {
     fontSize: 14,
     cursor: "pointer"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "form",
     {
       style: containerStyle,
       onSubmit: handleSubmit,
       "data-customerhero-prechat-form": true,
       children: [
-        preChatForm.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
-        preChatForm.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
+        preChatForm.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
+        preChatForm.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
         preChatForm.fields.map((field) => {
           const k = fieldKey(field);
           const v = values[k];
@@ -2400,12 +2627,12 @@ function PreChatFormView() {
           const required = "required" in field ? !!field.required : false;
           const label = fieldLabel(field);
           if (field.kind === "textarea") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: labelStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { style: labelStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                 label,
                 required && " *"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "textarea",
                 {
                   style: { ...inputStyle, minHeight: 80, resize: "vertical" },
@@ -2414,32 +2641,32 @@ function PreChatFormView() {
                   onChange: (e) => setValue(k, e.target.value)
                 }
               ),
-              err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+              err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
             ] }, k);
           }
           if (field.kind === "select") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: labelStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { style: labelStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                 label,
                 required && " *"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "select",
                 {
                   style: inputStyle,
                   value: v ?? "",
                   onChange: (e) => setValue(k, e.target.value),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "\u2014" }),
-                    field.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "\u2014" }),
+                    field.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
                   ]
                 }
               ),
-              err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+              err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
             ] }, k);
           }
           if (field.kind === "consent") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "label",
               {
                 style: {
@@ -2449,7 +2676,7 @@ function PreChatFormView() {
                   gap: 8
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -2458,11 +2685,11 @@ function PreChatFormView() {
                       style: { marginTop: 3 }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
                     field.label,
-                    field.url && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                    field.url && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
                       " ",
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "a",
                         {
                           href: field.url,
@@ -2474,7 +2701,7 @@ function PreChatFormView() {
                       )
                     ] })
                   ] }),
-                  err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+                  err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
                 ]
               },
               k
@@ -2482,12 +2709,12 @@ function PreChatFormView() {
           }
           const inputType = field.kind === "email" ? "email" : field.kind === "phone" ? "tel" : "text";
           const maxLength = field.kind === "text" ? field.maxLength : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: labelStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { style: labelStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
               label,
               required && " *"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               {
                 type: inputType,
@@ -2497,11 +2724,11 @@ function PreChatFormView() {
                 onChange: (e) => setValue(k, e.target.value)
               }
             ),
-            err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+            err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
           ] }, k);
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: buttonRowStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: buttonRowStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -2511,7 +2738,7 @@ function PreChatFormView() {
               children: t("action_cancel")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
         ] })
       ]
     }
@@ -2520,9 +2747,9 @@ function PreChatFormView() {
 function ChatWindow() {
   const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
   const reduced = useReducedMotion();
-  const [visible, setVisible] = (0, import_react9.useState)(false);
-  const [shouldRender, setShouldRender] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const [shouldRender, setShouldRender] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     if (isOpen) {
       setShouldRender(true);
       requestAnimationFrame(() => {
@@ -2571,17 +2798,18 @@ function ChatWindow() {
     textDecoration: "underline",
     textUnderlineOffset: 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatHeader, {}),
-    configError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreChatFormView, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatMessages, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatSuggestions, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatInput, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatHeader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IncidentBanner, {}),
+    configError ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PreChatFormView, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatMessages, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatSuggestions, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatInput, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: poweredStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: poweredStyle, children: [
       t("powered_by"),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "a",
         {
           href: "https://customerhero.app",
@@ -2596,12 +2824,12 @@ function ChatWindow() {
 }
 
 // src/components/chat-widget.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ChatWidgetInner({ identity }) {
   const client = useCustomerHeroClient();
   const { configLoaded, configError } = useChat();
-  const prevIdentityRef = (0, import_react10.useRef)(void 0);
-  (0, import_react10.useEffect)(() => {
+  const prevIdentityRef = (0, import_react11.useRef)(void 0);
+  (0, import_react11.useEffect)(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
     if (key !== prevIdentityRef.current) {
       prevIdentityRef.current = key;
@@ -2611,13 +2839,13 @@ function ChatWidgetInner({ identity }) {
     }
   }, [identity, client]);
   if (!configLoaded || configError) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatBubble, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatWindow, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatBubble, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatWindow, {})
   ] });
 }
 function ChatWidget({ identity, ...config }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatWidgetInner, { identity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatWidgetInner, { identity }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -44,6 +44,7 @@ interface UseChatReturn extends ChatState {
     cancelPreChatForm: () => void;
     fireTrigger: (triggerId: string) => void;
     consumePendingPrefill: () => string | null;
+    dismissIncidentBanner: () => void;
 }
 declare function useChat(): UseChatReturn;
 

package/dist/index.d.ts

@@ -44,6 +44,7 @@ interface UseChatReturn extends ChatState {
     cancelPreChatForm: () => void;
     fireTrigger: (triggerId: string) => void;
     consumePendingPrefill: () => string | null;
+    dismissIncidentBanner: () => void;
 }
 declare function useChat(): UseChatReturn;
 

package/dist/index.js

@@ -97,6 +97,10 @@ function useChat() {
     consumePendingPrefill: useCallback(
       () => client.consumePendingPrefill(),
       [client]
+    ),
+    dismissIncidentBanner: useCallback(
+      () => client.dismissIncidentBanner(),
+      [client]
     )
   };
 }
@@ -186,7 +190,7 @@ function ChatBubble() {
 }
 
 // src/components/chat-window.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/chat-header.tsx
 import { useState as useState3, useEffect as useEffect4, useRef as useRef2 } from "react";
@@ -2214,8 +2218,231 @@ function Spinner2() {
   ] });
 }
 
+// src/components/incident-banner.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var PALETTE = {
+  info: {
+    bg: "#EFF6FF",
+    fg: "#1E3A8A",
+    fgMuted: "#3B5BA9",
+    accent: "#2563EB",
+    iconBg: "#DBEAFE",
+    iconFg: "#2563EB"
+  },
+  warning: {
+    bg: "#FFFBEB",
+    fg: "#78350F",
+    fgMuted: "#92541A",
+    accent: "#B45309",
+    iconBg: "#FEF3C7",
+    iconFg: "#B45309"
+  },
+  outage: {
+    bg: "#FEF2F2",
+    fg: "#991B1B",
+    fgMuted: "#B23A3A",
+    accent: "#DC2626",
+    iconBg: "#FEE2E2",
+    iconFg: "#DC2626"
+  }
+};
+function SeverityIcon({
+  severity,
+  color
+}) {
+  const props = {
+    width: 14,
+    height: 14,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  };
+  if (severity === "outage") {
+    return /* @__PURE__ */ jsxs6("svg", { ...props, children: [
+      /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+    ] });
+  }
+  if (severity === "warning") {
+    return /* @__PURE__ */ jsxs6("svg", { ...props, children: [
+      /* @__PURE__ */ jsx9("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("svg", { ...props, children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx9("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx9("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+function IncidentBanner() {
+  const { incidentBanner, incidentBannerDismissed, dismissIncidentBanner, t } = useChat();
+  const [linkHover, setLinkHover] = useState7(false);
+  const [closeHover, setCloseHover] = useState7(false);
+  if (!incidentBanner || incidentBannerDismissed) return null;
+  const palette = PALETTE[incidentBanner.severity];
+  const wrap = {
+    background: palette.bg,
+    color: palette.fg,
+    padding: "12px 14px 12px 12px",
+    display: "flex",
+    gap: 10,
+    alignItems: "flex-start",
+    fontSize: 13,
+    lineHeight: 1.45,
+    boxShadow: "inset 0 -1px 0 rgba(0,0,0,0.04)"
+  };
+  const iconBadge = {
+    width: 22,
+    height: 22,
+    borderRadius: "50%",
+    background: palette.iconBg,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    marginTop: 1
+  };
+  const titleStyle = {
+    margin: 0,
+    fontSize: 13,
+    fontWeight: 600,
+    letterSpacing: "-0.005em"
+  };
+  const bodyStyle = {
+    margin: "3px 0 0",
+    fontSize: 12.5,
+    color: palette.fgMuted
+  };
+  const footerRowStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 10,
+    marginTop: 8
+  };
+  const etaStyle = {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: 4,
+    fontSize: 11,
+    fontWeight: 500,
+    color: palette.accent,
+    background: palette.iconBg,
+    lineHeight: 1.4
+  };
+  const linkStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    color: palette.accent,
+    textDecoration: linkHover ? "underline" : "none",
+    textUnderlineOffset: 3,
+    fontSize: 12.5,
+    fontWeight: 600
+  };
+  const closeButtonStyle = {
+    background: closeHover ? "rgba(0,0,0,0.06)" : "transparent",
+    border: "none",
+    color: palette.fgMuted,
+    cursor: "pointer",
+    padding: 4,
+    borderRadius: 6,
+    flexShrink: 0,
+    lineHeight: 0,
+    marginTop: -2,
+    marginRight: -2,
+    transition: "background-color 0.12s ease"
+  };
+  const role = incidentBanner.severity === "outage" ? "alert" : "status";
+  return /* @__PURE__ */ jsxs6("div", { role, style: wrap, children: [
+    /* @__PURE__ */ jsx9("div", { style: iconBadge, children: /* @__PURE__ */ jsx9(
+      SeverityIcon,
+      {
+        severity: incidentBanner.severity,
+        color: palette.iconFg
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx9("p", { style: titleStyle, children: incidentBanner.title }),
+      incidentBanner.body ? /* @__PURE__ */ jsx9("p", { style: bodyStyle, children: incidentBanner.body }) : null,
+      incidentBanner.eta || incidentBanner.link ? /* @__PURE__ */ jsxs6("div", { style: footerRowStyle, children: [
+        incidentBanner.eta ? /* @__PURE__ */ jsx9("span", { style: etaStyle, children: incidentBanner.eta }) : null,
+        incidentBanner.link ? /* @__PURE__ */ jsxs6(
+          "a",
+          {
+            href: incidentBanner.link.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: linkStyle,
+            onMouseEnter: () => setLinkHover(true),
+            onMouseLeave: () => setLinkHover(false),
+            children: [
+              incidentBanner.link.label ?? t("incident_default_link_label"),
+              /* @__PURE__ */ jsxs6(
+                "svg",
+                {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx9("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                    /* @__PURE__ */ jsx9("polyline", { points: "12 5 19 12 12 19" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        onClick: dismissIncidentBanner,
+        "aria-label": t("incident_dismiss"),
+        style: closeButtonStyle,
+        onMouseEnter: () => setCloseHover(true),
+        onMouseLeave: () => setCloseHover(false),
+        children: /* @__PURE__ */ jsxs6(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx9("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx9("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/components/chat-window.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ConfigError({ message, title }) {
   const errorStyle = {
     flex: 1,
@@ -2227,8 +2454,8 @@ function ConfigError({ message, title }) {
     textAlign: "center",
     gap: 8
   };
-  return /* @__PURE__ */ jsxs6("div", { style: errorStyle, children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("div", { style: errorStyle, children: [
+    /* @__PURE__ */ jsxs7(
       "svg",
       {
         width: "32",
@@ -2240,14 +2467,14 @@ function ConfigError({ message, title }) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx9("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-          /* @__PURE__ */ jsx9("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+          /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx9("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
-    /* @__PURE__ */ jsx9("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
+    /* @__PURE__ */ jsx10("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
+    /* @__PURE__ */ jsx10("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
   ] });
 }
 function fieldKey(field) {
@@ -2274,9 +2501,9 @@ function validateField(field, value) {
 }
 function PreChatFormView() {
   const { preChatForm, submitPreChatForm, cancelPreChatForm, config, t } = useChat();
-  const [values, setValues] = useState7({});
-  const [errors, setErrors] = useState7({});
-  const [submitting, setSubmitting] = useState7(false);
+  const [values, setValues] = useState8({});
+  const [errors, setErrors] = useState8({});
+  const [submitting, setSubmitting] = useState8(false);
   if (!preChatForm) return null;
   function setValue(key, value) {
     setValues((prev) => ({ ...prev, [key]: value }));
@@ -2372,15 +2599,15 @@ function PreChatFormView() {
     fontSize: 14,
     cursor: "pointer"
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "form",
     {
       style: containerStyle,
       onSubmit: handleSubmit,
       "data-customerhero-prechat-form": true,
       children: [
-        preChatForm.title && /* @__PURE__ */ jsx9("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
-        preChatForm.description && /* @__PURE__ */ jsx9("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
+        preChatForm.title && /* @__PURE__ */ jsx10("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
+        preChatForm.description && /* @__PURE__ */ jsx10("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
         preChatForm.fields.map((field) => {
           const k = fieldKey(field);
           const v = values[k];
@@ -2388,12 +2615,12 @@ function PreChatFormView() {
           const required = "required" in field ? !!field.required : false;
           const label = fieldLabel(field);
           if (field.kind === "textarea") {
-            return /* @__PURE__ */ jsxs6("label", { style: labelStyle, children: [
-              /* @__PURE__ */ jsxs6("span", { children: [
+            return /* @__PURE__ */ jsxs7("label", { style: labelStyle, children: [
+              /* @__PURE__ */ jsxs7("span", { children: [
                 label,
                 required && " *"
               ] }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "textarea",
                 {
                   style: { ...inputStyle, minHeight: 80, resize: "vertical" },
@@ -2402,32 +2629,32 @@ function PreChatFormView() {
                   onChange: (e) => setValue(k, e.target.value)
                 }
               ),
-              err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+              err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
             ] }, k);
           }
           if (field.kind === "select") {
-            return /* @__PURE__ */ jsxs6("label", { style: labelStyle, children: [
-              /* @__PURE__ */ jsxs6("span", { children: [
+            return /* @__PURE__ */ jsxs7("label", { style: labelStyle, children: [
+              /* @__PURE__ */ jsxs7("span", { children: [
                 label,
                 required && " *"
               ] }),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 "select",
                 {
                   style: inputStyle,
                   value: v ?? "",
                   onChange: (e) => setValue(k, e.target.value),
                   children: [
-                    /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
-                    field.options.map((opt) => /* @__PURE__ */ jsx9("option", { value: opt.value, children: opt.label }, opt.value))
+                    /* @__PURE__ */ jsx10("option", { value: "", children: "\u2014" }),
+                    field.options.map((opt) => /* @__PURE__ */ jsx10("option", { value: opt.value, children: opt.label }, opt.value))
                   ]
                 }
               ),
-              err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+              err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
             ] }, k);
           }
           if (field.kind === "consent") {
-            return /* @__PURE__ */ jsxs6(
+            return /* @__PURE__ */ jsxs7(
               "label",
               {
                 style: {
@@ -2437,7 +2664,7 @@ function PreChatFormView() {
                   gap: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "checkbox",
@@ -2446,11 +2673,11 @@ function PreChatFormView() {
                       style: { marginTop: 3 }
                     }
                   ),
-                  /* @__PURE__ */ jsxs6("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
+                  /* @__PURE__ */ jsxs7("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
                     field.label,
-                    field.url && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+                    field.url && /* @__PURE__ */ jsxs7(Fragment5, { children: [
                       " ",
-                      /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx10(
                         "a",
                         {
                           href: field.url,
@@ -2462,7 +2689,7 @@ function PreChatFormView() {
                       )
                     ] })
                   ] }),
-                  err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+                  err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
                 ]
               },
               k
@@ -2470,12 +2697,12 @@ function PreChatFormView() {
           }
           const inputType = field.kind === "email" ? "email" : field.kind === "phone" ? "tel" : "text";
           const maxLength = field.kind === "text" ? field.maxLength : void 0;
-          return /* @__PURE__ */ jsxs6("label", { style: labelStyle, children: [
-            /* @__PURE__ */ jsxs6("span", { children: [
+          return /* @__PURE__ */ jsxs7("label", { style: labelStyle, children: [
+            /* @__PURE__ */ jsxs7("span", { children: [
               label,
               required && " *"
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 type: inputType,
@@ -2485,11 +2712,11 @@ function PreChatFormView() {
                 onChange: (e) => setValue(k, e.target.value)
               }
             ),
-            err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+            err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
           ] }, k);
         }),
-        /* @__PURE__ */ jsxs6("div", { style: buttonRowStyle, children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs7("div", { style: buttonRowStyle, children: [
+          /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -2499,7 +2726,7 @@ function PreChatFormView() {
               children: t("action_cancel")
             }
           ),
-          /* @__PURE__ */ jsx9("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
+          /* @__PURE__ */ jsx10("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
         ] })
       ]
     }
@@ -2508,8 +2735,8 @@ function PreChatFormView() {
 function ChatWindow() {
   const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
   const reduced = useReducedMotion();
-  const [visible, setVisible] = useState7(false);
-  const [shouldRender, setShouldRender] = useState7(false);
+  const [visible, setVisible] = useState8(false);
+  const [shouldRender, setShouldRender] = useState8(false);
   useEffect7(() => {
     if (isOpen) {
       setShouldRender(true);
@@ -2559,17 +2786,18 @@ function ChatWindow() {
     textDecoration: "underline",
     textUnderlineOffset: 2
   };
-  return /* @__PURE__ */ jsxs6("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
-    /* @__PURE__ */ jsx9(ChatHeader, {}),
-    configError ? /* @__PURE__ */ jsx9(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ jsx9(PreChatFormView, {}) : /* @__PURE__ */ jsxs6(Fragment5, { children: [
-      /* @__PURE__ */ jsx9(ChatMessages, {}),
-      /* @__PURE__ */ jsx9(ChatSuggestions, {}),
-      /* @__PURE__ */ jsx9(ChatInput, {})
+  return /* @__PURE__ */ jsxs7("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
+    /* @__PURE__ */ jsx10(ChatHeader, {}),
+    /* @__PURE__ */ jsx10(IncidentBanner, {}),
+    configError ? /* @__PURE__ */ jsx10(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ jsx10(PreChatFormView, {}) : /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsx10(ChatMessages, {}),
+      /* @__PURE__ */ jsx10(ChatSuggestions, {}),
+      /* @__PURE__ */ jsx10(ChatInput, {})
     ] }),
-    /* @__PURE__ */ jsxs6("div", { style: poweredStyle, children: [
+    /* @__PURE__ */ jsxs7("div", { style: poweredStyle, children: [
       t("powered_by"),
       " ",
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "a",
         {
           href: "https://customerhero.app",
@@ -2584,7 +2812,7 @@ function ChatWindow() {
 }
 
 // src/components/chat-widget.tsx
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function ChatWidgetInner({ identity }) {
   const client = useCustomerHeroClient();
   const { configLoaded, configError } = useChat();
@@ -2599,13 +2827,13 @@ function ChatWidgetInner({ identity }) {
     }
   }, [identity, client]);
   if (!configLoaded || configError) return null;
-  return /* @__PURE__ */ jsxs7(Fragment6, { children: [
-    /* @__PURE__ */ jsx10(ChatBubble, {}),
-    /* @__PURE__ */ jsx10(ChatWindow, {})
+  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    /* @__PURE__ */ jsx11(ChatBubble, {}),
+    /* @__PURE__ */ jsx11(ChatWindow, {})
   ] });
 }
 function ChatWidget({ identity, ...config }) {
-  return /* @__PURE__ */ jsx10(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ jsx10(ChatWidgetInner, { identity }) });
+  return /* @__PURE__ */ jsx11(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ jsx11(ChatWidgetInner, { identity }) });
 }
 export {
   ActionConfirmationCard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customerhero/react",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "private": false,
   "description": "React components for embedding the CustomerHero chat widget.",
   "keywords": [
@@ -58,7 +58,7 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@customerhero/js": "^2.1.1",
+    "@customerhero/js": "^2.2.0",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",