@customerhero/react 2.1.0 → 2.2.0

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";
@@ -711,9 +715,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__ */ jsx4("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -724,9 +730,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__ */ jsx4("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -929,11 +937,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__ */ jsxs4("div", { style: containerStyle, "aria-live": "polite", children: [
@@ -1242,13 +1250,20 @@ function Message({
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
   return /* @__PURE__ */ jsxs4(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ jsx6("div", { style: bubbleStyle, children: isUser ? message.content : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      renderMarkdown(message.content, {
-        sources: message.sources,
-        linkColor
-      }),
-      message.streaming && /* @__PURE__ */ jsx6(StreamingCursor, { reduced })
-    ] }) }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        style: bubbleStyle,
+        "data-streaming-bubble": !isUser && message.streaming ? "true" : void 0,
+        children: isUser ? message.content : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+          renderMarkdown(message.content, {
+            sources: message.sources,
+            linkColor
+          }),
+          message.streaming && /* @__PURE__ */ jsx6(StreamingCursor, { reduced })
+        ] })
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ jsx6(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ jsx6(
       BlockRenderer,
@@ -1333,16 +1348,51 @@ function ChatMessages() {
     t
   } = useChat();
   const reduced = useReducedMotion();
+  const containerRef = useRef3(null);
   const messagesEndRef = useRef3(null);
   const isFirstRender = useRef3(true);
   const prevMessageCount = useRef3(0);
+  const stickRef = useRef3(true);
+  const suppressScrollRef = useRef3(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;
+  };
   useEffect5(() => {
-    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;
   useEffect5(() => {
@@ -1365,7 +1415,7 @@ function ChatMessages() {
   };
   const lastMsg = messages[messages.length - 1];
   const waitingForFirstToken = isLoading && (lastMsg?.role !== "bot" || lastMsg.streaming !== true);
-  return /* @__PURE__ */ jsxs4("div", { style: containerStyle, children: [
+  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: [
     messages.map((msg, i) => /* @__PURE__ */ jsx6(
       Message,
       {
@@ -1454,6 +1504,7 @@ function ChatSuggestions() {
 // src/components/chat-input.tsx
 import {
   useEffect as useEffect6,
+  useLayoutEffect,
   useRef as useRef4,
   useState as useState6
 } from "react";
@@ -1492,12 +1543,23 @@ function ChatInput() {
   const [dragActive, setDragActive] = useState6(false);
   const [transientError, setTransientError] = useState6(null);
   const fileInputRef = useRef4(null);
+  const textInputRef = useRef4(null);
   const menuRef = useRef4(null);
   const menuButtonRef = useRef4(null);
   const dragCounterRef = useRef4(0);
   useEffect6(() => {
     setCaptureSupported(canCaptureScreenshot());
   }, []);
+  useEffect6(() => {
+    const id = requestAnimationFrame(() => textInputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useLayoutEffect(() => {
+    const el = textInputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
   useEffect6(() => {
     if (pendingPrefill === null) return;
     const text = consumePendingPrefill();
@@ -1675,19 +1737,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,
@@ -1745,6 +1815,7 @@ function ChatInput() {
     fontSize: 14,
     color: "#333",
     textAlign: "left",
+    whiteSpace: "nowrap",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const dropOverlayStyle = {
@@ -1871,9 +1942,10 @@ function ChatInput() {
             }
           ),
           /* @__PURE__ */ jsx8(
-            "input",
+            "textarea",
             {
-              type: "text",
+              ref: textInputRef,
+              rows: 1,
               value,
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,
@@ -2146,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,
@@ -2159,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",
@@ -2172,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) {
@@ -2206,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 }));
@@ -2304,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];
@@ -2320,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" },
@@ -2334,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: {
@@ -2369,7 +2664,7 @@ function PreChatFormView() {
                   gap: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "checkbox",
@@ -2378,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,
@@ -2394,7 +2689,7 @@ function PreChatFormView() {
                       )
                     ] })
                   ] }),
-                  err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+                  err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
                 ]
               },
               k
@@ -2402,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,
@@ -2417,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",
@@ -2431,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 })
         ] })
       ]
     }
@@ -2440,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);
@@ -2491,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",
@@ -2516,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();
@@ -2531,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,