@customerhero/react 2.2.0 → 2.4.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_react11 = 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() {
@@ -127,7 +129,7 @@ function useChat() {
 }
 
 // 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");
@@ -145,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,
@@ -187,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_react10 = 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)) {
@@ -232,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",
@@ -267,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,
@@ -291,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"
   };
@@ -368,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";
@@ -430,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");
@@ -797,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,
@@ -806,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);
@@ -1037,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);
@@ -1118,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;
@@ -1239,6 +1326,201 @@ function StreamingCursor({ reduced }) {
     )
   ] });
 }
+function formatBytes(n) {
+  if (n == null || n <= 0) return null;
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AttachmentList({
+  attachments,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    marginTop: 6,
+    alignItems: isUser ? "flex-end" : "flex-start"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: containerStyle, children: attachments.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    AttachmentTile,
+    {
+      attachment: a,
+      isUser,
+      primaryColor,
+      t
+    },
+    a.id
+  )) });
+}
+function AttachmentTile({
+  attachment,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const tileBg = isUser ? `${primaryColor}11` : "#f3f4f6";
+  const tileBorder = isUser ? `${primaryColor}33` : "#e5e7eb";
+  if (attachment.kind === "image" && attachment.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "a",
+      {
+        href: attachment.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { display: "inline-block", maxWidth: 220, lineHeight: 0 },
+        "aria-label": attachment.filename ?? t("attachment_image_alt"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src: attachment.url,
+            alt: attachment.filename ?? t("attachment_image_alt"),
+            style: {
+              display: "block",
+              maxWidth: 220,
+              maxHeight: 220,
+              width: "auto",
+              height: "auto",
+              borderRadius: 12,
+              border: `1px solid ${tileBorder}`,
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  if (attachment.kind === "location" && attachment.location) {
+    const { latitude, longitude, label } = attachment.location;
+    const href = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: tileLinkStyle(tileBg, tileBorder),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PinIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileTitleStyle(), children: label || t("attachment_location") }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: tileSubStyle(), children: [
+              latitude.toFixed(4),
+              ", ",
+              longitude.toFixed(4)
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (!attachment.url) return null;
+  const sub = [attachment.mimeType, formatBytes(attachment.sizeBytes)].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "a",
+    {
+      href: attachment.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: t("attachment_open"),
+      style: tileLinkStyle(tileBg, tileBorder),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon, { kind: attachment.kind }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileTitleStyle(), children: attachment.filename ?? t("attachment_open") }),
+          sub && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileSubStyle(), children: sub })
+        ] })
+      ]
+    }
+  );
+}
+function tileLinkStyle(bg, border) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: 12,
+    textDecoration: "none",
+    color: "inherit",
+    maxWidth: 260
+  };
+}
+function tileTitleStyle() {
+  return {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#1f2937",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function tileSubStyle() {
+  return {
+    fontSize: 11,
+    color: "#6b7280",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function FileIcon({ kind }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: kind === "audio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 18V5l12-2v13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6", cy: "18", r: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "18", cy: "16", r: "3" })
+      ] }) : kind === "video" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m22 8-6 4 6 4z" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "14 2 14 8 20 8" })
+      ] })
+    }
+  );
+}
+function PinIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "10", r: "3" })
+      ]
+    }
+  );
+}
 function Message({
   message,
   config,
@@ -1264,14 +1546,16 @@ function Message({
       color: "white",
       borderBottomRightRadius: 4
     } : {
-      background: "#f0f0f0",
+      background: config.bubbleBackground,
       color: config.textColor,
       borderBottomLeftRadius: 4
     }
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
+  const hasContent = message.content.trim().length > 0;
+  const hasAttachments = !!message.attachments?.length;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    hasContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: bubbleStyle,
@@ -1285,6 +1569,15 @@ function Message({
         ] })
       }
     ),
+    hasAttachments && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      AttachmentList,
+      {
+        attachments: message.attachments,
+        isUser,
+        primaryColor: config.primaryColor,
+        t
+      }
+    ),
     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,
@@ -1360,7 +1653,6 @@ function ChatMessages() {
     messages,
     isLoading,
     error,
-    config,
     conversationId,
     rateMessage,
     sendMessage,
@@ -1368,13 +1660,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;
@@ -1391,7 +1689,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];
@@ -1416,7 +1714,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;
@@ -1441,7 +1739,7 @@ function ChatMessages() {
       Message,
       {
         message: msg,
-        config,
+        config: themedConfig,
         onRate: rateMessage,
         onSend: sendMessage,
         onApproveAction: approveAction,
@@ -1480,10 +1778,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",
@@ -1493,11 +1794,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",
@@ -1509,11 +1810,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
@@ -1523,8 +1824,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 = [
@@ -1542,47 +1843,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;
@@ -1601,7 +1905,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);
@@ -1657,10 +1961,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 = () => {
@@ -1742,7 +2046,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
@@ -1757,14 +2061,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",
@@ -1775,7 +2079,7 @@ function ChatInput() {
     width: 36,
     height: 36,
     borderRadius: "50%",
-    background: config.primaryColor,
+    background: theme.primary,
     border: "none",
     color: "white",
     cursor: isLoading ? "not-allowed" : "pointer",
@@ -1805,10 +2109,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,
@@ -1825,7 +2129,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"
@@ -1833,13 +2137,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",
@@ -1854,7 +2158,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",
     {
@@ -1883,7 +2187,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",
               {
@@ -1908,7 +2212,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";
@@ -1927,7 +2231,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";
@@ -1964,14 +2268,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) => {
@@ -2079,7 +2383,7 @@ function Thumbnail({
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const displayName = filename ?? (isImage ? "" : "Document");
-  const sizeLabel = formatBytes(blob.size);
+  const sizeLabel = formatBytes2(blob.size);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: wrap, children: [
     isImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocIcon, {}),
@@ -2183,7 +2487,7 @@ function DocIcon() {
     }
   );
 }
-function formatBytes(bytes) {
+function formatBytes2(bytes) {
   if (!Number.isFinite(bytes) || bytes <= 0) return "";
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
@@ -2231,7 +2535,7 @@ function Spinner2() {
 }
 
 // src/components/incident-banner.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var PALETTE = {
   info: {
@@ -2296,8 +2600,8 @@ function SeverityIcon({
 }
 function IncidentBanner() {
   const { incidentBanner, incidentBannerDismissed, dismissIncidentBanner, t } = useChat();
-  const [linkHover, setLinkHover] = (0, import_react9.useState)(false);
-  const [closeHover, setCloseHover] = (0, import_react9.useState)(false);
+  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 = {
@@ -2513,9 +2817,9 @@ function validateField(field, value) {
 }
 function PreChatFormView() {
   const { preChatForm, submitPreChatForm, cancelPreChatForm, config, t } = useChat();
-  const [values, setValues] = (0, import_react10.useState)({});
-  const [errors, setErrors] = (0, import_react10.useState)({});
-  const [submitting, setSubmitting] = (0, import_react10.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 }));
@@ -2744,12 +3048,13 @@ function PreChatFormView() {
     }
   );
 }
-function ChatWindow() {
+function ChatWindow({ embedded } = {}) {
   const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
   const reduced = useReducedMotion();
-  const [visible, setVisible] = (0, import_react10.useState)(false);
-  const [shouldRender, setShouldRender] = (0, import_react10.useState)(false);
-  (0, import_react10.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(() => {
@@ -2767,34 +3072,44 @@ 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
   };
@@ -2825,11 +3140,14 @@ function ChatWindow() {
 
 // src/components/chat-widget.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function ChatWidgetInner({ identity }) {
+function ChatWidgetInner({
+  identity,
+  embedded
+}) {
   const client = useCustomerHeroClient();
   const { configLoaded, configError } = useChat();
-  const prevIdentityRef = (0, import_react11.useRef)(void 0);
-  (0, import_react11.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;
@@ -2840,12 +3158,12 @@ function ChatWidgetInner({ identity }) {
   }, [identity, client]);
   if (!configLoaded || configError) return null;
   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, {})
+    /* @__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_runtime11.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime11.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 = {