@customerhero/react 2.1.1 → 2.3.0

package/dist/index.cjs

@@ -18,16 +18,16 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   ActionConfirmationCard: () => ActionConfirmationCard,
   ChatWidget: () => ChatWidget,
   useChat: () => useChat
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/chat-widget.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/context.tsx
 var import_react = require("react");
@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var CustomerHeroContext = (0, import_react.createContext)(null);
 function CustomerHeroProvider({
   children,
+  disableAutoFetch,
   ...config
 }) {
   const clientRef = (0, import_react.useRef)(null);
@@ -43,8 +44,9 @@ function CustomerHeroProvider({
     clientRef.current = new import_js.CustomerHeroChat(config);
   }
   (0, import_react.useEffect)(() => {
+    if (disableAutoFetch) return;
     clientRef.current?.fetchConfig();
-  }, []);
+  }, [disableAutoFetch]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomerHeroContext.Provider, { value: clientRef.current, children });
 }
 function useCustomerHeroClient() {
@@ -118,12 +120,16 @@ function useChat() {
     consumePendingPrefill: (0, import_react2.useCallback)(
       () => client.consumePendingPrefill(),
       [client]
+    ),
+    dismissIncidentBanner: (0, import_react2.useCallback)(
+      () => client.dismissIncidentBanner(),
+      [client]
     )
   };
 }
 
 // src/components/chat-bubble.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/use-reduced-motion.ts
 var import_react3 = require("react");
@@ -141,41 +147,110 @@ function useReducedMotion() {
   return reduced;
 }
 
+// src/use-effective-theme.ts
+var import_js2 = require("@customerhero/js");
+
+// src/use-prefers-dark.ts
+var import_react4 = require("react");
+function usePrefersDark() {
+  const [prefersDark, setPrefersDark] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const update = () => setPrefersDark(mq.matches);
+    update();
+    if (typeof mq.addEventListener === "function") {
+      mq.addEventListener("change", update);
+      return () => mq.removeEventListener("change", update);
+    }
+    mq.addListener(update);
+    return () => mq.removeListener(update);
+  }, []);
+  return prefersDark;
+}
+
+// src/use-effective-theme.ts
+function useEffectiveTheme() {
+  const { config } = useChat();
+  const prefersDark = usePrefersDark();
+  const scheme = (0, import_js2.resolveScheme)(config.colorScheme, prefersDark);
+  const colors = (0, import_js2.effectiveColors)(config, scheme);
+  const isDark = scheme === "dark";
+  return {
+    scheme,
+    primary: colors.primary,
+    background: colors.background,
+    text: colors.text,
+    bubbleBackground: isDark ? "rgba(255,255,255,0.08)" : "#f0f0f0",
+    divider: isDark ? "rgba(255,255,255,0.12)" : "#e0e0e0",
+    size: (0, import_js2.sizePreset)(config.size),
+    radius: (0, import_js2.panelRadius)(config.cornerStyle)
+  };
+}
+
 // src/components/chat-bubble.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function ChatBubble() {
+function ChatBubble({ embedded } = {}) {
   const { toggle, config, t, isRtl } = useChat();
   const reduced = useReducedMotion();
-  const [mounted, setMounted] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const theme = useEffectiveTheme();
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
     const id = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(id);
   }, []);
   const visible = mounted;
   const effectivePosition = isRtl ? config.position === "bottom-right" ? "bottom-left" : "bottom-right" : config.position;
+  const colors = theme;
+  const preset = theme.size;
+  const hasLabel = !!config.launcher.label;
+  const width = hasLabel ? "auto" : preset.bubble;
+  const height = preset.bubble;
+  const borderRadius = hasLabel ? preset.bubble / 2 : "50%";
   const style = {
-    position: "fixed",
-    bottom: 20,
-    [effectivePosition === "bottom-left" ? "left" : "right"]: 20,
-    width: 56,
-    height: 56,
-    borderRadius: "50%",
-    background: config.primaryColor,
-    color: "white",
+    position: embedded ? "absolute" : "fixed",
+    bottom: config.offset.bottom,
+    [effectivePosition === "bottom-left" ? "left" : "right"]: config.offset.side,
+    width,
+    height,
+    minWidth: preset.bubble,
+    paddingInline: hasLabel ? Math.round(preset.bubble * 0.35) : 0,
+    borderRadius,
+    background: colors.primary,
+    color: "#FFFFFF",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    gap: hasLabel ? 8 : 0,
     cursor: "pointer",
-    boxShadow: "0 4px 20px rgba(0,0,0,0.15)",
-    zIndex: 99999,
+    boxShadow: theme.scheme === "dark" ? "0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06)" : "0 4px 20px rgba(0,0,0,0.15)",
+    zIndex: config.zIndex,
     border: "none",
-    padding: 0,
+    fontSize: preset.fontSize,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontWeight: 500,
     opacity: visible ? 1 : 0,
     transform: visible ? "scale(1)" : "scale(0.6)",
     transition: reduced ? "none" : "opacity 0.25s ease, transform 0.25s ease",
     pointerEvents: visible ? "auto" : "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const iconSize = Math.round(preset.bubble * 0.43);
+  const dotSize = Math.max(10, Math.round(preset.bubble * 0.22));
+  const dotOffset = Math.round(preset.bubble * 0.08);
+  const dotStyle = {
+    position: "absolute",
+    top: dotOffset,
+    [effectivePosition === "bottom-left" ? "left" : "right"]: dotOffset,
+    width: dotSize,
+    height: dotSize,
+    borderRadius: "50%",
+    background: "#22c55e",
+    border: "2px solid rgba(255,255,255,0.9)",
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       onClick: toggle,
@@ -183,41 +258,55 @@ function ChatBubble() {
       dir: isRtl ? "rtl" : "ltr",
       "aria-label": t("open_chat"),
       onMouseEnter: (e) => {
-        if (!reduced) e.currentTarget.style.transform = "scale(1.1)";
+        if (!reduced) e.currentTarget.style.transform = "scale(1.06)";
       },
       onMouseLeave: (e) => {
         if (!reduced) e.currentTarget.style.transform = "scale(1)";
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "svg",
-        {
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-        }
-      )
+      children: [
+        config.launcher.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "img",
+          {
+            src: config.launcher.iconUrl,
+            alt: "",
+            width: iconSize,
+            height: iconSize,
+            style: { display: "block" }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            width: iconSize,
+            height: iconSize,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+          }
+        ),
+        hasLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: config.launcher.label }),
+        config.launcher.showOnlineDot && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: dotStyle, "aria-hidden": true })
+      ]
     }
   );
 }
 
 // src/components/chat-window.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/components/chat-header.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ChatHeader() {
   const { config, close, reset, t } = useChat();
   const reduced = useReducedMotion();
-  const [menuOpen, setMenuOpen] = (0, import_react5.useState)(false);
-  const menuRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const theme = useEffectiveTheme();
+  const [menuOpen, setMenuOpen] = (0, import_react6.useState)(false);
+  const menuRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!menuOpen) return;
     const handleClick = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -228,7 +317,7 @@ function ChatHeader() {
     return () => document.removeEventListener("mousedown", handleClick);
   }, [menuOpen]);
   const headerStyle = {
-    background: config.primaryColor,
+    background: theme.primary,
     padding: 16,
     display: "flex",
     alignItems: "center",
@@ -263,14 +352,16 @@ function ChatHeader() {
     opacity: 0.7,
     padding: 4
   };
+  const isDark = theme.scheme === "dark";
   const menuStyle = {
     position: "absolute",
     top: "100%",
     right: 0,
     marginTop: 4,
-    background: "white",
+    background: theme.background,
+    border: `1px solid ${theme.divider}`,
     borderRadius: 8,
-    boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
+    boxShadow: isDark ? "0 4px 16px rgba(0,0,0,0.5)" : "0 4px 16px rgba(0,0,0,0.15)",
     minWidth: 180,
     overflow: "hidden",
     zIndex: 10,
@@ -287,7 +378,7 @@ function ChatHeader() {
     background: "none",
     cursor: "pointer",
     fontSize: 13,
-    color: "#333",
+    color: theme.text,
     textAlign: "left",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
@@ -364,7 +455,7 @@ function ChatHeader() {
               reset();
             },
             onMouseEnter: (e) => {
-              e.currentTarget.style.background = "#f5f5f5";
+              e.currentTarget.style.background = theme.bubbleBackground;
             },
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
@@ -426,7 +517,7 @@ function ChatHeader() {
 }
 
 // src/components/chat-messages.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/markdown/render.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -793,7 +884,7 @@ function renderMarkdown(source, opts = {}) {
 }
 
 // src/components/action-confirmation-card.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ActionConfirmationCard({
   block,
@@ -802,10 +893,10 @@ function ActionConfirmationCard({
   onApprove,
   onCancel
 }) {
-  const [chosen, setChosen] = (0, import_react6.useState)(null);
-  const [showSpinner, setShowSpinner] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [showSummary, setShowSummary] = (0, import_react6.useState)(false);
+  const [chosen, setChosen] = (0, import_react7.useState)(null);
+  const [showSpinner, setShowSpinner] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [showSummary, setShowSummary] = (0, import_react7.useState)(false);
   const handle = async (choice) => {
     if (chosen) return;
     setChosen(choice);
@@ -1033,7 +1124,7 @@ function MessageRatingButtons({
   t,
   reduced
 }) {
-  const [rated, setRated] = (0, import_react7.useState)(null);
+  const [rated, setRated] = (0, import_react8.useState)(null);
   const handleRate = (rating) => {
     setRated(rating);
     onRate(messageId, rating);
@@ -1114,8 +1205,8 @@ function AnimatedMessage({
   animate,
   reduced
 }) {
-  const [visible, setVisible] = (0, import_react7.useState)(!animate);
-  (0, import_react7.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react8.useState)(!animate);
+  (0, import_react8.useEffect)(() => {
     if (!animate || reduced) {
       setVisible(true);
       return;
@@ -1260,7 +1351,7 @@ function Message({
       color: "white",
       borderBottomRightRadius: 4
     } : {
-      background: "#f0f0f0",
+      background: config.bubbleBackground,
       color: config.textColor,
       borderBottomLeftRadius: 4
     }
@@ -1356,7 +1447,6 @@ function ChatMessages() {
     messages,
     isLoading,
     error,
-    config,
     conversationId,
     rateMessage,
     sendMessage,
@@ -1364,13 +1454,19 @@ function ChatMessages() {
     cancelAction,
     t
   } = useChat();
+  const theme = useEffectiveTheme();
+  const themedConfig = {
+    primaryColor: theme.primary,
+    textColor: theme.text,
+    bubbleBackground: theme.bubbleBackground
+  };
   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 containerRef = (0, import_react8.useRef)(null);
+  const messagesEndRef = (0, import_react8.useRef)(null);
+  const isFirstRender = (0, import_react8.useRef)(true);
+  const prevMessageCount = (0, import_react8.useRef)(0);
+  const stickRef = (0, import_react8.useRef)(true);
+  const suppressScrollRef = (0, import_react8.useRef)(false);
   const autoScrollTo = (top) => {
     const el = containerRef.current;
     if (!el) return;
@@ -1387,7 +1483,7 @@ function ChatMessages() {
     const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
     stickRef.current = distFromBottom < 60;
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const lastMsg2 = messages[messages.length - 1];
@@ -1412,7 +1508,7 @@ function ChatMessages() {
     isFirstRender.current = false;
   }, [messages, isLoading, reduced]);
   const newStartIndex = isFirstRender.current ? messages.length : prevMessageCount.current;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     prevMessageCount.current = messages.length;
   }, [messages.length]);
   let lastBotIndex = -1;
@@ -1437,7 +1533,7 @@ function ChatMessages() {
       Message,
       {
         message: msg,
-        config,
+        config: themedConfig,
         onRate: rateMessage,
         onSend: sendMessage,
         onApproveAction: approveAction,
@@ -1476,10 +1572,13 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function ChatSuggestions() {
   const { messages, isLoading, config, sendMessage } = useChat();
   const reduced = useReducedMotion();
+  const theme = useEffectiveTheme();
   const hasUserMessage = messages.some((m) => m.role === "user");
   if (config.suggestedMessages.length === 0 || hasUserMessage || isLoading) {
     return null;
   }
+  const isDark = theme.scheme === "dark";
+  const idleBorder = isDark ? "rgba(255,255,255,0.18)" : "#e0e0e0";
   const containerStyle = {
     padding: "8px 16px",
     display: "flex",
@@ -1489,11 +1588,11 @@ function ChatSuggestions() {
   };
   const chipStyle = {
     background: "none",
-    border: "1px solid #e0e0e0",
+    border: `1px solid ${idleBorder}`,
     borderRadius: 20,
     padding: "7px 14px",
     fontSize: 13,
-    color: "#333",
+    color: theme.text,
     cursor: "pointer",
     textAlign: "left",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
@@ -1505,11 +1604,11 @@ function ChatSuggestions() {
       style: chipStyle,
       onClick: () => sendMessage(text),
       onMouseEnter: (e) => {
-        e.currentTarget.style.borderColor = config.primaryColor;
-        e.currentTarget.style.background = `${config.primaryColor}08`;
+        e.currentTarget.style.borderColor = theme.primary;
+        e.currentTarget.style.background = `${theme.primary}14`;
       },
       onMouseLeave: (e) => {
-        e.currentTarget.style.borderColor = "#e0e0e0";
+        e.currentTarget.style.borderColor = idleBorder;
         e.currentTarget.style.background = "none";
       },
       children: text
@@ -1519,8 +1618,8 @@ function ChatSuggestions() {
 }
 
 // src/components/chat-input.tsx
-var import_react8 = require("react");
-var import_js2 = require("@customerhero/js");
+var import_react9 = require("react");
+var import_js3 = require("@customerhero/js");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MAX_ATTACHMENTS = 3;
 var ALLOWED_MIME_TYPES = [
@@ -1538,47 +1637,50 @@ function ChatInput() {
     sendMessage,
     uploadAttachment,
     isLoading,
+    readOnly,
     config,
     t,
     consumePendingPrefill,
     pendingPrefill
   } = useChat();
+  const theme = useEffectiveTheme();
+  const isDark = theme.scheme === "dark";
   const reduced = useReducedMotion();
-  const [value, setValue] = (0, import_react8.useState)("");
-  const [attachments, setAttachments] = (0, import_react8.useState)([]);
-  const [captureSupported, setCaptureSupported] = (0, import_react8.useState)(false);
-  const [menuOpen, setMenuOpen] = (0, import_react8.useState)(false);
-  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)());
+  const [value, setValue] = (0, import_react9.useState)("");
+  const [attachments, setAttachments] = (0, import_react9.useState)([]);
+  const [captureSupported, setCaptureSupported] = (0, import_react9.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react9.useState)(false);
+  const [dragActive, setDragActive] = (0, import_react9.useState)(false);
+  const [transientError, setTransientError] = (0, import_react9.useState)(null);
+  const fileInputRef = (0, import_react9.useRef)(null);
+  const textInputRef = (0, import_react9.useRef)(null);
+  const menuRef = (0, import_react9.useRef)(null);
+  const menuButtonRef = (0, import_react9.useRef)(null);
+  const dragCounterRef = (0, import_react9.useRef)(0);
+  (0, import_react9.useEffect)(() => {
+    setCaptureSupported((0, import_js3.canCaptureScreenshot)());
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const id = requestAnimationFrame(() => textInputRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, []);
-  (0, import_react8.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     const el = textInputRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   }, [value]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (pendingPrefill === null) return;
     const text = consumePendingPrefill();
     if (text !== null) setValue(text);
   }, [pendingPrefill, consumePendingPrefill]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
       for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
     };
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!menuOpen) return;
     const onClick = (e) => {
       const target = e.target;
@@ -1597,7 +1699,7 @@ function ChatInput() {
       document.removeEventListener("keydown", onKey);
     };
   }, [menuOpen]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!transientError) return;
     const id = window.setTimeout(() => setTransientError(null), 4e3);
     return () => window.clearTimeout(id);
@@ -1653,10 +1755,10 @@ function ChatInput() {
   const handleCapture = async () => {
     setMenuOpen(false);
     try {
-      const blob = await (0, import_js2.captureScreenshot)();
+      const blob = await (0, import_js3.captureScreenshot)();
       await startUpload(blob);
     } catch (e) {
-      if (e instanceof import_js2.ScreenshotCancelled) return;
+      if (e instanceof import_js3.ScreenshotCancelled) return;
     }
   };
   const handlePickFile = () => {
@@ -1738,7 +1840,7 @@ function ChatInput() {
   const containerStyle = {
     position: "relative",
     padding: "12px 16px",
-    borderTop: "1px solid #eee",
+    borderTop: `1px solid ${theme.divider}`,
     display: "flex",
     flexDirection: "column",
     gap: 8
@@ -1753,14 +1855,14 @@ function ChatInput() {
   const TEXTAREA_MAX_HEIGHT = 140;
   const inputStyle = {
     flex: 1,
-    border: "1px solid #e0e0e0",
+    border: `1px solid ${theme.divider}`,
     borderRadius: 18,
     padding: "10px 16px",
     fontSize: 14,
     lineHeight: 1.4,
     outline: "none",
-    background: "#fafafa",
-    color: config.textColor,
+    background: isDark ? "rgba(255,255,255,0.06)" : "#fafafa",
+    color: theme.text,
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
     resize: "none",
     overflowY: "auto",
@@ -1771,7 +1873,7 @@ function ChatInput() {
     width: 36,
     height: 36,
     borderRadius: "50%",
-    background: config.primaryColor,
+    background: theme.primary,
     border: "none",
     color: "white",
     cursor: isLoading ? "not-allowed" : "pointer",
@@ -1801,10 +1903,10 @@ function ChatInput() {
     position: "absolute",
     bottom: "calc(100% + 4px)",
     left: 0,
-    background: "white",
-    border: "1px solid #e0e0e0",
+    background: theme.background,
+    border: `1px solid ${theme.divider}`,
     borderRadius: 8,
-    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+    boxShadow: isDark ? "0 4px 16px rgba(0,0,0,0.5)" : "0 4px 16px rgba(0,0,0,0.12)",
     padding: 4,
     minWidth: 180,
     zIndex: 10,
@@ -1821,7 +1923,7 @@ function ChatInput() {
     borderRadius: 4,
     cursor: "pointer",
     fontSize: 14,
-    color: "#333",
+    color: theme.text,
     textAlign: "left",
     whiteSpace: "nowrap",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
@@ -1829,13 +1931,13 @@ function ChatInput() {
   const dropOverlayStyle = {
     position: "absolute",
     inset: 0,
-    background: "rgba(255,255,255,0.92)",
-    border: `2px dashed ${config.primaryColor}`,
+    background: isDark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.92)",
+    border: `2px dashed ${theme.primary}`,
     borderRadius: 4,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: config.primaryColor,
+    color: theme.primary,
     fontSize: 14,
     fontWeight: 500,
     pointerEvents: "none",
@@ -1850,7 +1952,7 @@ function ChatInput() {
     padding: "4px 10px",
     fontSize: 12
   };
-  const attachDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading;
+  const attachDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading || readOnly;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
@@ -1879,7 +1981,7 @@ function ChatInput() {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { position: "relative" }, children: [
+          config.allowAttachments !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { position: "relative" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
@@ -1904,7 +2006,7 @@ function ChatInput() {
                   onClick: handlePickFile,
                   style: menuItemStyle,
                   onMouseEnter: (e) => {
-                    e.currentTarget.style.background = "#f5f5f5";
+                    e.currentTarget.style.background = theme.bubbleBackground;
                   },
                   onMouseLeave: (e) => {
                     e.currentTarget.style.background = "transparent";
@@ -1923,7 +2025,7 @@ function ChatInput() {
                   onClick: handleCapture,
                   style: menuItemStyle,
                   onMouseEnter: (e) => {
-                    e.currentTarget.style.background = "#f5f5f5";
+                    e.currentTarget.style.background = theme.bubbleBackground;
                   },
                   onMouseLeave: (e) => {
                     e.currentTarget.style.background = "transparent";
@@ -1960,14 +2062,14 @@ function ChatInput() {
               onPaste: handlePaste,
               placeholder: config.placeholderText,
               style: inputStyle,
-              disabled: isLoading
+              disabled: isLoading || readOnly
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               onClick: handleSend,
-              disabled: isLoading || !value.trim(),
+              disabled: isLoading || readOnly || !value.trim(),
               style: sendButtonStyle,
               "aria-label": t("send_message"),
               onMouseEnter: (e) => {
@@ -2226,8 +2328,231 @@ function Spinner2() {
   ] });
 }
 
-// src/components/chat-window.tsx
+// src/components/incident-banner.tsx
+var import_react10 = 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_react10.useState)(false);
+  const [closeHover, setCloseHover] = (0, import_react10.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 +2564,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 +2577,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 +2611,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_react11.useState)({});
+  const [errors, setErrors] = (0, import_react11.useState)({});
+  const [submitting, setSubmitting] = (0, import_react11.useState)(false);
   if (!preChatForm) return null;
   function setValue(key, value) {
     setValues((prev) => ({ ...prev, [key]: value }));
@@ -2384,15 +2709,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 +2725,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 +2739,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 +2774,7 @@ function PreChatFormView() {
                   gap: 8
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -2458,11 +2783,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 +2799,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 +2807,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 +2822,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,18 +2836,19 @@ 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 })
         ] })
       ]
     }
   );
 }
-function ChatWindow() {
+function ChatWindow({ embedded } = {}) {
   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 theme = useEffectiveTheme();
+  const [visible, setVisible] = (0, import_react11.useState)(false);
+  const [shouldRender, setShouldRender] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     if (isOpen) {
       setShouldRender(true);
       requestAnimationFrame(() => {
@@ -2540,48 +2866,59 @@ function ChatWindow() {
   }, [isOpen, reduced]);
   if (!shouldRender) return null;
   const effectivePosition = isRtl ? config.position === "bottom-right" ? "bottom-left" : "bottom-right" : config.position;
+  const colors = theme;
+  const preset = theme.size;
+  const radius = theme.radius;
+  const panelBottom = config.offset.bottom + preset.bubble + 14;
   const style = {
-    position: "fixed",
-    bottom: 90,
-    [effectivePosition === "bottom-left" ? "left" : "right"]: 20,
-    width: 380,
-    maxWidth: "calc(100vw - 40px)",
-    height: 520,
-    maxHeight: "calc(100vh - 120px)",
-    borderRadius: 16,
+    position: embedded ? "absolute" : "fixed",
+    bottom: panelBottom,
+    [effectivePosition === "bottom-left" ? "left" : "right"]: config.offset.side,
+    width: preset.width,
+    maxWidth: embedded ? "calc(100% - 16px)" : "calc(100vw - 40px)",
+    height: preset.height,
+    maxHeight: embedded ? `calc(100% - ${panelBottom + 16}px)` : `calc(100vh - ${panelBottom + 30}px)`,
+    borderRadius: radius,
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
-    boxShadow: "0 8px 40px rgba(0,0,0,0.15)",
-    zIndex: 99999,
-    background: config.backgroundColor,
+    // In dark mode the default 0.15 opacity black shadow is invisible
+    // against a dark page; switch to a stronger shadow plus a subtle 1px
+    // light outline so the panel still reads as a separated surface.
+    boxShadow: theme.scheme === "dark" ? "0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06)" : "0 8px 40px rgba(0,0,0,0.15)",
+    zIndex: config.zIndex,
+    background: colors.background,
+    color: colors.text,
+    fontSize: preset.fontSize,
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
     opacity: visible ? 1 : 0,
     transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.97)",
     transition: reduced ? "none" : "opacity 0.25s ease, transform 0.25s ease"
   };
+  const isDark = theme.scheme === "dark";
   const poweredStyle = {
     textAlign: "center",
     padding: 6,
     fontSize: 10,
-    color: "#aaa"
+    color: isDark ? "rgba(255,255,255,0.45)" : "#aaa"
   };
   const linkStyle = {
-    color: "#888",
+    color: isDark ? "rgba(255,255,255,0.6)" : "#888",
     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 +2933,15 @@ function ChatWindow() {
 }
 
 // src/components/chat-widget.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function ChatWidgetInner({ identity }) {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ChatWidgetInner({
+  identity,
+  embedded
+}) {
   const client = useCustomerHeroClient();
   const { configLoaded, configError } = useChat();
-  const prevIdentityRef = (0, import_react10.useRef)(void 0);
-  (0, import_react10.useEffect)(() => {
+  const prevIdentityRef = (0, import_react12.useRef)(void 0);
+  (0, import_react12.useEffect)(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
     if (key !== prevIdentityRef.current) {
       prevIdentityRef.current = key;
@@ -2611,13 +2951,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, { embedded }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatWindow, { embedded })
   ] });
 }
-function ChatWidget({ identity, ...config }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatWidgetInner, { identity }) });
+function ChatWidget({ identity, embedded, ...config }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatWidgetInner, { identity, embedded }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {