@customerhero/react 2.1.0 → 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");
@@ -732,9 +736,11 @@ function renderMarkdown(source, opts = {}) {
             style: {
               margin: "0 0 8px",
               paddingLeft: 20,
-              lineHeight: 1.5
+              lineHeight: 1.5,
+              listStyleType: "disc",
+              listStylePosition: "outside"
             },
-            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -745,9 +751,11 @@ function renderMarkdown(source, opts = {}) {
             style: {
               margin: "0 0 8px",
               paddingLeft: 22,
-              lineHeight: 1.5
+              lineHeight: 1.5,
+              listStyleType: "decimal",
+              listStylePosition: "outside"
             },
-            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -950,11 +958,11 @@ function MessageStatusPill({
   const containerStyle = {
     display: "flex",
     alignItems: "center",
+    justifyContent: "flex-end",
     gap: 4,
     marginTop: 2,
     fontSize: 11,
-    color: failed ? "#b91c1c" : "#888",
-    alignSelf: "flex-end"
+    color: failed ? "#b91c1c" : "#888"
   };
   const labelKey = status === "sending" ? "status_sending" : status === "sent" ? "status_sent" : "status_failed";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, "aria-live": "polite", children: [
@@ -1263,13 +1271,20 @@ function Message({
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: bubbleStyle, children: isUser ? message.content : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      renderMarkdown(message.content, {
-        sources: message.sources,
-        linkColor
-      }),
-      message.streaming && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StreamingCursor, { reduced })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        style: bubbleStyle,
+        "data-streaming-bubble": !isUser && message.streaming ? "true" : void 0,
+        children: isUser ? message.content : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          renderMarkdown(message.content, {
+            sources: message.sources,
+            linkColor
+          }),
+          message.streaming && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StreamingCursor, { reduced })
+        ] })
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       BlockRenderer,
@@ -1354,16 +1369,51 @@ function ChatMessages() {
     t
   } = useChat();
   const reduced = useReducedMotion();
+  const containerRef = (0, import_react7.useRef)(null);
   const messagesEndRef = (0, import_react7.useRef)(null);
   const isFirstRender = (0, import_react7.useRef)(true);
   const prevMessageCount = (0, import_react7.useRef)(0);
+  const stickRef = (0, import_react7.useRef)(true);
+  const suppressScrollRef = (0, import_react7.useRef)(false);
+  const autoScrollTo = (top) => {
+    const el = containerRef.current;
+    if (!el) return;
+    suppressScrollRef.current = true;
+    el.scrollTop = top;
+    requestAnimationFrame(() => {
+      suppressScrollRef.current = false;
+    });
+  };
+  const handleScroll = () => {
+    if (suppressScrollRef.current) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    stickRef.current = distFromBottom < 60;
+  };
   (0, import_react7.useEffect)(() => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: isFirstRender.current || reduced ? "auto" : "smooth"
-      });
-      isFirstRender.current = false;
+    const el = containerRef.current;
+    if (!el) return;
+    const lastMsg2 = messages[messages.length - 1];
+    if (messages.length > prevMessageCount.current && lastMsg2?.role === "user") {
+      stickRef.current = true;
     }
+    if (!stickRef.current && !isFirstRender.current) {
+      return;
+    }
+    const streamingBubble = el.querySelector(
+      "[data-streaming-bubble='true']"
+    );
+    let target = el.scrollHeight - el.clientHeight;
+    if (streamingBubble && streamingBubble.offsetHeight > el.clientHeight - 24) {
+      const containerTop = el.getBoundingClientRect().top;
+      const bubbleTop = streamingBubble.getBoundingClientRect().top;
+      const TOP_GAP = 16;
+      target = el.scrollTop + (bubbleTop - containerTop) - TOP_GAP;
+      stickRef.current = false;
+    }
+    autoScrollTo(target);
+    isFirstRender.current = false;
   }, [messages, isLoading, reduced]);
   const newStartIndex = isFirstRender.current ? messages.length : prevMessageCount.current;
   (0, import_react7.useEffect)(() => {
@@ -1386,7 +1436,7 @@ function ChatMessages() {
   };
   const lastMsg = messages[messages.length - 1];
   const waitingForFirstToken = isLoading && (lastMsg?.role !== "bot" || lastMsg.streaming !== true);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: [
     messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Message,
       {
@@ -1505,12 +1555,23 @@ function ChatInput() {
   const [dragActive, setDragActive] = (0, import_react8.useState)(false);
   const [transientError, setTransientError] = (0, import_react8.useState)(null);
   const fileInputRef = (0, import_react8.useRef)(null);
+  const textInputRef = (0, import_react8.useRef)(null);
   const menuRef = (0, import_react8.useRef)(null);
   const menuButtonRef = (0, import_react8.useRef)(null);
   const dragCounterRef = (0, import_react8.useRef)(0);
   (0, import_react8.useEffect)(() => {
     setCaptureSupported((0, import_js2.canCaptureScreenshot)());
   }, []);
+  (0, import_react8.useEffect)(() => {
+    const id = requestAnimationFrame(() => textInputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, []);
+  (0, import_react8.useLayoutEffect)(() => {
+    const el = textInputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
   (0, import_react8.useEffect)(() => {
     if (pendingPrefill === null) return;
     const text = consumePendingPrefill();
@@ -1688,19 +1749,27 @@ function ChatInput() {
   };
   const rowStyle = {
     display: "flex",
-    alignItems: "center",
+    // Anchor the icon buttons to the bottom of the row so a multi-line
+    // textarea grows upward without dragging them along.
+    alignItems: "flex-end",
     gap: 8
   };
+  const TEXTAREA_MAX_HEIGHT = 140;
   const inputStyle = {
     flex: 1,
     border: "1px solid #e0e0e0",
-    borderRadius: 24,
+    borderRadius: 18,
     padding: "10px 16px",
     fontSize: 14,
+    lineHeight: 1.4,
     outline: "none",
     background: "#fafafa",
     color: config.textColor,
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    resize: "none",
+    overflowY: "auto",
+    maxHeight: TEXTAREA_MAX_HEIGHT,
+    boxSizing: "border-box"
   };
   const sendButtonStyle = {
     width: 36,
@@ -1758,6 +1827,7 @@ function ChatInput() {
     fontSize: 14,
     color: "#333",
     textAlign: "left",
+    whiteSpace: "nowrap",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const dropOverlayStyle = {
@@ -1884,9 +1954,10 @@ function ChatInput() {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "input",
+            "textarea",
             {
-              type: "text",
+              ref: textInputRef,
+              rows: 1,
               value,
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,
@@ -2159,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,
@@ -2172,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",
@@ -2185,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) {
@@ -2219,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 }));
@@ -2317,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];
@@ -2333,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" },
@@ -2347,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: {
@@ -2382,7 +2676,7 @@ function PreChatFormView() {
                   gap: 8
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -2391,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,
@@ -2407,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
@@ -2415,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,
@@ -2430,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",
@@ -2444,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 })
         ] })
       ]
     }
@@ -2453,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(() => {
@@ -2504,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",
@@ -2529,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;
@@ -2544,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 = {