@customerhero/react 2.2.0 → 2.3.0

package/dist/preview.cjs

@@ -0,0 +1,2976 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/preview.tsx
+var preview_exports = {};
+__export(preview_exports, {
+  PreviewWidget: () => PreviewWidget
+});
+module.exports = __toCommonJS(preview_exports);
+var import_react12 = require("react");
+
+// src/context.tsx
+var import_react = require("react");
+var import_js = require("@customerhero/js");
+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);
+  if (!clientRef.current) {
+    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() {
+  const client = (0, import_react.useContext)(CustomerHeroContext);
+  if (!client) {
+    throw new Error(
+      "useCustomerHeroClient must be used within a <CustomerHeroProvider>"
+    );
+  }
+  return client;
+}
+
+// src/components/chat-bubble.tsx
+var import_react5 = require("react");
+
+// src/use-chat.ts
+var import_react2 = require("react");
+function useChat() {
+  const client = useCustomerHeroClient();
+  const state = (0, import_react2.useSyncExternalStore)(
+    (0, import_react2.useCallback)((cb) => client.subscribe(cb), [client]),
+    () => client.getState(),
+    () => client.getState()
+  );
+  return {
+    ...state,
+    t: client.t,
+    sendMessage: (0, import_react2.useCallback)(
+      (message, options) => client.sendMessage(message, options),
+      [client]
+    ),
+    uploadAttachment: (0, import_react2.useCallback)(
+      (blob, options) => client.uploadAttachment(blob, options),
+      [client]
+    ),
+    rateMessage: (0, import_react2.useCallback)(
+      (messageId, rating) => client.rateMessage(messageId, rating),
+      [client]
+    ),
+    approveAction: (0, import_react2.useCallback)(
+      (pendingId) => client.approveAction(pendingId),
+      [client]
+    ),
+    cancelAction: (0, import_react2.useCallback)(
+      (pendingId) => client.cancelAction(pendingId),
+      [client]
+    ),
+    setLocale: (0, import_react2.useCallback)((tag) => client.setLocale(tag), [client]),
+    toggle: (0, import_react2.useCallback)(() => client.toggle(), [client]),
+    open: (0, import_react2.useCallback)(() => client.open(), [client]),
+    close: (0, import_react2.useCallback)(() => client.close(), [client]),
+    reset: (0, import_react2.useCallback)(() => client.reset(), [client]),
+    identify: (0, import_react2.useCallback)(
+      (payload) => client.identify(payload),
+      [client]
+    ),
+    setConsent: (0, import_react2.useCallback)(
+      (consent) => client.setConsent(consent),
+      [client]
+    ),
+    setTraits: (0, import_react2.useCallback)(
+      (traits) => client.setTraits(traits),
+      [client]
+    ),
+    submitPreChatForm: (0, import_react2.useCallback)(
+      (submission) => client.submitPreChatForm(submission),
+      [client]
+    ),
+    cancelPreChatForm: (0, import_react2.useCallback)(() => client.cancelPreChatForm(), [client]),
+    fireTrigger: (0, import_react2.useCallback)(
+      (triggerId) => client.fireTrigger(triggerId),
+      [client]
+    ),
+    consumePendingPrefill: (0, import_react2.useCallback)(
+      () => client.consumePendingPrefill(),
+      [client]
+    ),
+    dismissIncidentBanner: (0, import_react2.useCallback)(
+      () => client.dismissIncidentBanner(),
+      [client]
+    )
+  };
+}
+
+// src/use-reduced-motion.ts
+var import_react3 = require("react");
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react3.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  (0, import_react3.useEffect)(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => setReduced(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  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({ embedded } = {}) {
+  const { toggle, config, t, isRtl } = useChat();
+  const reduced = useReducedMotion();
+  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: 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: 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",
+    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"
+  };
+  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,
+      style,
+      dir: isRtl ? "rtl" : "ltr",
+      "aria-label": t("open_chat"),
+      onMouseEnter: (e) => {
+        if (!reduced) e.currentTarget.style.transform = "scale(1.06)";
+      },
+      onMouseLeave: (e) => {
+        if (!reduced) e.currentTarget.style.transform = "scale(1)";
+      },
+      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_react11 = require("react");
+
+// src/components/chat-header.tsx
+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 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)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [menuOpen]);
+  const headerStyle = {
+    background: theme.primary,
+    padding: 16,
+    display: "flex",
+    alignItems: "center",
+    gap: 12
+  };
+  const avatarStyle = {
+    width: 36,
+    height: 36,
+    borderRadius: "50%",
+    background: "rgba(255,255,255,0.2)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  const titleStyle = {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "white",
+    margin: 0
+  };
+  const subtitleStyle = {
+    fontSize: 11,
+    color: "rgba(255,255,255,0.7)",
+    margin: 0
+  };
+  const headerButtonStyle = {
+    background: "none",
+    border: "none",
+    color: "white",
+    cursor: "pointer",
+    opacity: 0.7,
+    padding: 4
+  };
+  const isDark = theme.scheme === "dark";
+  const menuStyle = {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: 4,
+    background: theme.background,
+    border: `1px solid ${theme.divider}`,
+    borderRadius: 8,
+    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,
+    transformOrigin: "top right",
+    animation: reduced ? "none" : "ch-menu-in 0.15s ease"
+  };
+  const menuItemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    width: "100%",
+    padding: "10px 14px",
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    fontSize: 13,
+    color: theme.text,
+    textAlign: "left",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: headerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: avatarStyle, children: config.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "img",
+      {
+        src: config.avatarUrl,
+        alt: "",
+        style: { width: 36, height: 36, borderRadius: "50%" }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "white",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.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" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: titleStyle, children: config.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: subtitleStyle, children: t("online") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: menuRef, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: () => setMenuOpen(!menuOpen),
+          style: headerButtonStyle,
+          "aria-label": t("menu"),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.opacity = "1";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.opacity = "0.7";
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "svg",
+            {
+              width: "18",
+              height: "18",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "19", r: "1" })
+              ]
+            }
+          )
+        }
+      ),
+      menuOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: menuStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `@keyframes ch-menu-in {
+                from { opacity: 0; transform: scale(0.9); }
+                to { opacity: 1; transform: scale(1); }
+              }` }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            style: menuItemStyle,
+            onClick: () => {
+              setMenuOpen(false);
+              reset();
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = theme.bubbleBackground;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 20h9" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+                  ]
+                }
+              ),
+              t("new_conversation")
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        onClick: close,
+        style: headerButtonStyle,
+        "aria-label": t("close_chat"),
+        onMouseEnter: (e) => {
+          e.currentTarget.style.opacity = "1";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.opacity = "0.7";
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/chat-messages.tsx
+var import_react8 = require("react");
+
+// src/markdown/render.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function parseBlocks(source) {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    const fenceMatch = line.match(/^```(.*)$/);
+    if (fenceMatch) {
+      const lang = fenceMatch[1].trim() || void 0;
+      const body2 = [];
+      i++;
+      while (i < lines.length && !/^```\s*$/.test(lines[i])) {
+        body2.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) i++;
+      blocks.push({ kind: "code", lines: body2, lang });
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,6})\s+(.*?)\s*#*\s*$/);
+    if (headingMatch) {
+      blocks.push({
+        kind: "heading",
+        level: headingMatch[1].length,
+        lines: [headingMatch[2]]
+      });
+      i++;
+      continue;
+    }
+    if (/^(\s*)[-*+]\s+/.test(line)) {
+      const body2 = [];
+      while (i < lines.length && /^(\s*)[-*+]\s+/.test(lines[i])) {
+        body2.push(lines[i].replace(/^(\s*)[-*+]\s+/, ""));
+        i++;
+      }
+      blocks.push({ kind: "ul", lines: body2 });
+      continue;
+    }
+    if (/^(\s*)\d+\.\s+/.test(line)) {
+      const body2 = [];
+      while (i < lines.length && /^(\s*)\d+\.\s+/.test(lines[i])) {
+        body2.push(lines[i].replace(/^(\s*)\d+\.\s+/, ""));
+        i++;
+      }
+      blocks.push({ kind: "ol", lines: body2 });
+      continue;
+    }
+    if (/^>\s?/.test(line)) {
+      const body2 = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) {
+        body2.push(lines[i].replace(/^>\s?/, ""));
+        i++;
+      }
+      blocks.push({ kind: "blockquote", lines: body2 });
+      continue;
+    }
+    const body = [line];
+    i++;
+    while (i < lines.length) {
+      const next = lines[i];
+      if (next.trim() === "") break;
+      if (/^```/.test(next) || /^#{1,6}\s/.test(next) || /^(\s*)[-*+]\s+/.test(next) || /^(\s*)\d+\.\s+/.test(next) || /^>\s?/.test(next)) {
+        break;
+      }
+      body.push(next);
+      i++;
+    }
+    blocks.push({ kind: "paragraph", lines: body });
+  }
+  return blocks;
+}
+function findClosing(text, from, end) {
+  let i = from;
+  while (i <= text.length - end.length) {
+    const c = text[i];
+    if (c === "\\") {
+      i += 2;
+      continue;
+    }
+    if (text.startsWith(end, i)) return i;
+    i++;
+  }
+  return -1;
+}
+function renderInlineText(text, ctx) {
+  const out = [];
+  let buffer = "";
+  let i = 0;
+  const flushBuffer = () => {
+    if (buffer.length > 0) {
+      out.push(buffer);
+      buffer = "";
+    }
+  };
+  while (i < text.length) {
+    const c = text[i];
+    if (c === "\\" && i + 1 < text.length) {
+      buffer += text[i + 1];
+      i += 2;
+      continue;
+    }
+    if (c === " " && text[i + 1] === " " && text[i + 2] === "\n") {
+      flushBuffer();
+      out.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}, ctx.nextKey()));
+      i += 3;
+      continue;
+    }
+    if (c === "\n") {
+      buffer += " ";
+      i++;
+      continue;
+    }
+    if (c === "`") {
+      const close = findClosing(text, i + 1, "`");
+      if (close !== -1) {
+        flushBuffer();
+        out.push(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "code",
+            {
+              style: {
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+                fontSize: "0.92em",
+                background: "rgba(0,0,0,0.06)",
+                padding: "1px 4px",
+                borderRadius: 3
+              },
+              children: text.slice(i + 1, close)
+            },
+            ctx.nextKey()
+          )
+        );
+        i = close + 1;
+        continue;
+      }
+    }
+    if ((text.startsWith("**", i) || text.startsWith("__", i)) && i + 2 < text.length) {
+      const marker = text.slice(i, i + 2);
+      const close = findClosing(text, i + 2, marker);
+      if (close !== -1 && close > i + 2) {
+        flushBuffer();
+        const inner = renderInlineText(text.slice(i + 2, close), ctx);
+        out.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: inner }, ctx.nextKey()));
+        i = close + 2;
+        continue;
+      }
+    }
+    if (c === "*" || c === "_") {
+      const prev = i === 0 ? " " : text[i - 1];
+      const isWordBoundaryBefore = c === "*" || !/\w/.test(prev);
+      if (isWordBoundaryBefore) {
+        const close = findClosing(text, i + 1, c);
+        const prevOfClose = close === -1 ? " " : close + 1 < text.length ? text[close + 1] : " ";
+        const isWordBoundaryAfter = c === "*" || !/\w/.test(prevOfClose);
+        if (close !== -1 && close > i + 1 && text[close + 1] !== c && isWordBoundaryAfter) {
+          flushBuffer();
+          const inner = renderInlineText(text.slice(i + 1, close), ctx);
+          out.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("em", { children: inner }, ctx.nextKey()));
+          i = close + 1;
+          continue;
+        }
+      }
+    }
+    if (c === "[") {
+      const closeLabel = findClosing(text, i + 1, "]");
+      if (closeLabel !== -1 && text[closeLabel + 1] === "(") {
+        const closeUrl = findClosing(text, closeLabel + 2, ")");
+        if (closeUrl !== -1) {
+          const label = text.slice(i + 1, closeLabel);
+          const url = text.slice(closeLabel + 2, closeUrl).trim();
+          if (isSafeUrl(url)) {
+            flushBuffer();
+            out.push(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "a",
+                {
+                  href: url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  style: { color: ctx.linkColor, textDecoration: "underline" },
+                  children: renderInlineText(label, ctx)
+                },
+                ctx.nextKey()
+              )
+            );
+            i = closeUrl + 1;
+            continue;
+          }
+        }
+      }
+      if (closeLabel !== -1 && ctx.sources && ctx.sources.length > 0) {
+        const body = text.slice(i + 1, closeLabel).trim();
+        const parts = body.split(/\s*,\s*/).filter((s) => s.length > 0);
+        const indices = parts.map((p) => Number(p));
+        const allValid = parts.length > 0 && indices.every(
+          (n) => Number.isInteger(n) && n >= 1 && n <= (ctx.sources?.length ?? 0)
+        );
+        if (allValid) {
+          flushBuffer();
+          out.push(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sup", { style: { whiteSpace: "nowrap" }, children: indices.map((n, idx) => {
+              const src = ctx.sources[n - 1];
+              const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.75em",
+                    color: ctx.linkColor,
+                    cursor: src.url ? "pointer" : "default"
+                  },
+                  title: src.heading ? `${src.title} \u2014 ${src.heading}` : src.title,
+                  children: [
+                    "[",
+                    n,
+                    "]"
+                  ]
+                }
+              );
+              const separator = idx > 0 ? " " : null;
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+                separator,
+                src.url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "a",
+                  {
+                    href: src.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: {
+                      color: ctx.linkColor,
+                      textDecoration: "none"
+                    },
+                    children: content
+                  }
+                ) : content
+              ] }, `${ctx.keyRoot}-cit-${idx}`);
+            }) }, ctx.nextKey())
+          );
+          i = closeLabel + 1;
+          continue;
+        }
+      }
+    }
+    buffer += c;
+    i++;
+  }
+  flushBuffer();
+  return out;
+}
+function isSafeUrl(url) {
+  if (/^https?:\/\//i.test(url)) return true;
+  if (/^mailto:/i.test(url)) return true;
+  if (/^tel:/i.test(url)) return true;
+  if (/^\/[^/]/.test(url) || /^#/.test(url)) return true;
+  return false;
+}
+function renderMarkdown(source, opts = {}) {
+  const blocks = parseBlocks(source);
+  const linkColor = opts.linkColor ?? "#6C3CE1";
+  let keyCounter = 0;
+  const ctx = {
+    sources: opts.sources,
+    linkColor,
+    keyRoot: "md",
+    nextKey: () => `md-${keyCounter++}`
+  };
+  const renderInline = (line) => renderInlineText(line, ctx);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: blocks.map((block, idx) => {
+    const key = `b-${idx}`;
+    switch (block.kind) {
+      case "heading": {
+        const level = block.level ?? 1;
+        const style = {
+          margin: "8px 0 4px",
+          fontWeight: 600,
+          fontSize: level <= 2 ? "1.15em" : level === 3 ? "1.05em" : "1em"
+        };
+        const children = renderInline(block.lines[0] ?? "");
+        if (level === 1)
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { style, children }, key);
+        if (level === 2)
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { style, children }, key);
+        if (level === 3)
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style, children }, key);
+        if (level === 4)
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { style, children }, key);
+        if (level === 5)
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { style, children }, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h6", { style, children }, key);
+      }
+      case "paragraph":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "0 0 8px", lineHeight: 1.5 }, children: renderInline(block.lines.join("\n")) }, key);
+      case "ul":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "ul",
+          {
+            style: {
+              margin: "0 0 8px",
+              paddingLeft: 20,
+              lineHeight: 1.5,
+              listStyleType: "disc",
+              listStylePosition: "outside"
+            },
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
+          },
+          key
+        );
+      case "ol":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "ol",
+          {
+            style: {
+              margin: "0 0 8px",
+              paddingLeft: 22,
+              lineHeight: 1.5,
+              listStyleType: "decimal",
+              listStylePosition: "outside"
+            },
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
+          },
+          key
+        );
+      case "code":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "pre",
+          {
+            style: {
+              margin: "0 0 8px",
+              padding: "10px 12px",
+              background: "rgba(0,0,0,0.06)",
+              borderRadius: 6,
+              overflowX: "auto",
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+              fontSize: "0.88em",
+              lineHeight: 1.45
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { children: block.lines.join("\n") })
+          },
+          key
+        );
+      case "blockquote":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "blockquote",
+          {
+            style: {
+              margin: "0 0 8px",
+              padding: "4px 0 4px 10px",
+              borderLeft: "3px solid rgba(0,0,0,0.15)",
+              color: "rgba(0,0,0,0.75)",
+              fontStyle: "italic"
+            },
+            children: renderInline(block.lines.join("\n"))
+          },
+          key
+        );
+    }
+  }) });
+}
+
+// src/components/action-confirmation-card.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ActionConfirmationCard({
+  block,
+  primaryColor,
+  t,
+  onApprove,
+  onCancel
+}) {
+  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);
+    setError(null);
+    const spinnerTimer = window.setTimeout(() => setShowSpinner(true), 800);
+    try {
+      const fn = choice === "approve" ? onApprove : onCancel;
+      await fn(block.pendingToolCallId);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : t("action_failed");
+      setError(msg);
+      setChosen(null);
+    } finally {
+      window.clearTimeout(spinnerTimer);
+      setShowSpinner(false);
+    }
+  };
+  const cardStyle = {
+    marginTop: 6,
+    padding: 12,
+    borderRadius: 12,
+    border: "1px solid #e0e0e0",
+    background: "#fff",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    fontSize: 13,
+    lineHeight: 1.4
+  };
+  const titleStyle = {
+    fontWeight: 600,
+    color: "#222"
+  };
+  const disclosureBtn = {
+    background: "none",
+    border: "none",
+    padding: 0,
+    color: primaryColor,
+    fontSize: 12,
+    cursor: "pointer",
+    textAlign: "left",
+    fontFamily: "inherit"
+  };
+  const summaryStyle = {
+    color: "#555",
+    background: "#fafafa",
+    padding: 8,
+    borderRadius: 8,
+    whiteSpace: "pre-wrap"
+  };
+  const buttonRow = {
+    display: "flex",
+    gap: 8,
+    marginTop: 4
+  };
+  const baseBtn = (variant) => ({
+    flex: 1,
+    padding: "8px 12px",
+    borderRadius: 8,
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: chosen ? "default" : "pointer",
+    border: variant === "primary" ? `1px solid ${primaryColor}` : "1px solid #ddd",
+    background: variant === "primary" ? primaryColor : "#fff",
+    color: variant === "primary" ? "#fff" : "#333",
+    opacity: chosen && chosen !== (variant === "primary" ? "approve" : "cancel") ? 0.5 : 1,
+    transition: "opacity 0.15s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    fontFamily: "inherit"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: cardStyle, role: "group", "aria-label": block.title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: titleStyle, children: block.title }),
+    block.summary && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          type: "button",
+          style: disclosureBtn,
+          onClick: () => setShowSummary((s) => !s),
+          "aria-expanded": showSummary,
+          children: [
+            showSummary ? "\u25BE" : "\u25B8",
+            " ",
+            t("action_what_will_happen")
+          ]
+        }
+      ),
+      showSummary && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: summaryStyle, children: block.summary })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: buttonRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          style: baseBtn("ghost"),
+          disabled: chosen !== null,
+          onClick: () => handle("cancel"),
+          children: chosen === "cancel" && showSpinner ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { color: "#333" }) : t("action_cancel")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          style: baseBtn("primary"),
+          disabled: chosen !== null,
+          onClick: () => handle("approve"),
+          children: chosen === "approve" && showSpinner ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { color: "#fff" }) : t("action_approve")
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "alert", style: { color: "#b91c1c", fontSize: 12 }, children: error })
+  ] });
+}
+function Spinner({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes ch-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: 14,
+          height: 14,
+          borderRadius: "50%",
+          border: `2px solid ${color}`,
+          borderTopColor: "transparent",
+          animation: "ch-spin 0.8s linear infinite",
+          display: "inline-block"
+        }
+      }
+    )
+  ] });
+}
+
+// src/components/chat-messages.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function MessageStatusPill({
+  status,
+  t
+}) {
+  const failed = status === "failed";
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 4,
+    marginTop: 2,
+    fontSize: 11,
+    color: failed ? "#b91c1c" : "#888"
+  };
+  const labelKey = status === "sending" ? "status_sending" : status === "sent" ? "status_sent" : "status_failed";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, "aria-live": "polite", children: [
+    status === "sending" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClockIcon, {}),
+    status === "sent" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}),
+    status === "failed" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExclamationIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: t(labelKey) })
+  ] });
+}
+function ClockIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      width: "11",
+      height: "11",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "12 6 12 12 16 14" })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      width: "11",
+      height: "11",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ExclamationIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      width: "11",
+      height: "11",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  );
+}
+function MessageRatingButtons({
+  messageId,
+  onRate,
+  primaryColor,
+  t,
+  reduced
+}) {
+  const [rated, setRated] = (0, import_react8.useState)(null);
+  const handleRate = (rating) => {
+    setRated(rating);
+    onRate(messageId, rating);
+  };
+  const buttonStyle = (isRated) => ({
+    background: isRated ? `${primaryColor}11` : "none",
+    border: `1px solid ${isRated ? primaryColor : "#ddd"}`,
+    borderRadius: 4,
+    padding: "4px 6px",
+    cursor: rated ? "default" : "pointer",
+    color: isRated ? primaryColor : "#888",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: reduced ? "color 0.15s" : "all 0.15s",
+    transform: isRated && !reduced ? "scale(1.15)" : "scale(1)"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        onClick: () => handleRate("positive"),
+        disabled: rated !== null,
+        style: buttonStyle(rated === "positive"),
+        title: t("helpful"),
+        "aria-label": t("helpful"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M7 10v12" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        onClick: () => handleRate("negative"),
+        disabled: rated !== null,
+        style: buttonStyle(rated === "negative"),
+        title: t("not_helpful"),
+        "aria-label": t("not_helpful"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M17 14V2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function AnimatedMessage({
+  children,
+  isUser,
+  animate,
+  reduced
+}) {
+  const [visible, setVisible] = (0, import_react8.useState)(!animate);
+  (0, import_react8.useEffect)(() => {
+    if (!animate || reduced) {
+      setVisible(true);
+      return;
+    }
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
+  }, [animate, reduced]);
+  const style = {
+    alignSelf: isUser ? "flex-end" : "flex-start",
+    maxWidth: "80%",
+    opacity: visible ? 1 : 0,
+    transform: visible ? "translateX(0)" : `translateX(${isUser ? "12px" : "-12px"})`,
+    transition: animate && !reduced ? "opacity 0.2s ease, transform 0.2s ease" : "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style, children });
+}
+function ChipRow({
+  options,
+  onSelect,
+  primaryColor,
+  reduced
+}) {
+  const chip = {
+    background: "none",
+    border: "1px solid #e0e0e0",
+    borderRadius: 20,
+    padding: "6px 12px",
+    fontSize: 13,
+    color: "#333",
+    cursor: "pointer",
+    textAlign: "left",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    transition: reduced ? "none" : "border-color 0.15s, background 0.15s"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 6,
+        marginTop: 6
+      },
+      children: options.map((text) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          style: chip,
+          onClick: () => onSelect(text),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.borderColor = primaryColor;
+            e.currentTarget.style.background = `${primaryColor}08`;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.borderColor = "#e0e0e0";
+            e.currentTarget.style.background = "none";
+          },
+          children: text
+        },
+        text
+      ))
+    }
+  );
+}
+function BlockRenderer({
+  block,
+  onSend,
+  onApproveAction,
+  onCancelAction,
+  primaryColor,
+  reduced,
+  t
+}) {
+  switch (block.type) {
+    case "quick_replies":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ChipRow,
+        {
+          options: block.options,
+          onSelect: onSend,
+          primaryColor,
+          reduced
+        }
+      );
+    case "action_confirmation":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ActionConfirmationCard,
+        {
+          block,
+          primaryColor,
+          t,
+          onApprove: onApproveAction,
+          onCancel: onCancelAction
+        }
+      );
+  }
+}
+function StreamingCursor({ reduced }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes ch-caret-blink {
+          0%, 50% { opacity: 1; }
+          50.01%, 100% { opacity: 0; }
+        }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          display: "inline-block",
+          width: 2,
+          height: "1em",
+          marginLeft: 2,
+          verticalAlign: "text-bottom",
+          background: "#777",
+          animation: reduced ? "none" : "ch-caret-blink 1s step-start infinite"
+        }
+      }
+    )
+  ] });
+}
+function Message({
+  message,
+  config,
+  onRate,
+  onSend,
+  onApproveAction,
+  onCancelAction,
+  hasConversation,
+  t,
+  animate,
+  reduced,
+  showSuggestions
+}) {
+  const isUser = message.role === "user";
+  const bubbleStyle = {
+    padding: "10px 14px",
+    borderRadius: 16,
+    fontSize: 14,
+    lineHeight: 1.5,
+    wordBreak: "break-word",
+    ...isUser ? {
+      background: config.primaryColor,
+      color: "white",
+      borderBottomRightRadius: 4
+    } : {
+      background: config.bubbleBackground,
+      color: config.textColor,
+      borderBottomLeftRadius: 4
+    }
+  };
+  const linkColor = isUser ? "#ffffff" : config.primaryColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        style: bubbleStyle,
+        "data-streaming-bubble": !isUser && message.streaming ? "true" : void 0,
+        children: isUser ? message.content : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          renderMarkdown(message.content, {
+            sources: message.sources,
+            linkColor
+          }),
+          message.streaming && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StreamingCursor, { reduced })
+        ] })
+      }
+    ),
+    isUser && message.status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageStatusPill, { status: message.status, t }),
+    !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      BlockRenderer,
+      {
+        block,
+        onSend,
+        onApproveAction,
+        onCancelAction,
+        primaryColor: config.primaryColor,
+        reduced,
+        t
+      },
+      i
+    )),
+    !isUser && showSuggestions && message.suggestions?.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ChipRow,
+      {
+        options: message.suggestions,
+        onSelect: onSend,
+        primaryColor: config.primaryColor,
+        reduced
+      }
+    ) : null,
+    message.role === "bot" && message.id && hasConversation && !message.streaming && !message.blocks?.some((b) => b.type === "action_confirmation") && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      MessageRatingButtons,
+      {
+        messageId: message.id,
+        onRate,
+        primaryColor: config.primaryColor,
+        t,
+        reduced
+      }
+    )
+  ] });
+}
+function TypingDots({ reduced }) {
+  const dotStyle = (delay) => ({
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    background: "#999",
+    animation: reduced ? "none" : `ch-dot-pulse 1.2s ease-in-out ${delay}s infinite`
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes ch-dot-pulse {
+          0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+          40% { opacity: 1; transform: scale(1); }
+        }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        style: {
+          alignSelf: "flex-start",
+          padding: "12px 16px",
+          borderRadius: 16,
+          borderBottomLeftRadius: 4,
+          background: "#f0f0f0",
+          display: "flex",
+          gap: 4,
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: dotStyle(0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: dotStyle(0.2) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: dotStyle(0.4) })
+        ]
+      }
+    )
+  ] });
+}
+function ChatMessages() {
+  const {
+    messages,
+    isLoading,
+    error,
+    conversationId,
+    rateMessage,
+    sendMessage,
+    approveAction,
+    cancelAction,
+    t
+  } = useChat();
+  const theme = useEffectiveTheme();
+  const themedConfig = {
+    primaryColor: theme.primary,
+    textColor: theme.text,
+    bubbleBackground: theme.bubbleBackground
+  };
+  const reduced = useReducedMotion();
+  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;
+    suppressScrollRef.current = true;
+    el.scrollTop = top;
+    requestAnimationFrame(() => {
+      suppressScrollRef.current = false;
+    });
+  };
+  const handleScroll = () => {
+    if (suppressScrollRef.current) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    stickRef.current = distFromBottom < 60;
+  };
+  (0, import_react8.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const lastMsg2 = messages[messages.length - 1];
+    if (messages.length > prevMessageCount.current && lastMsg2?.role === "user") {
+      stickRef.current = true;
+    }
+    if (!stickRef.current && !isFirstRender.current) {
+      return;
+    }
+    const streamingBubble = el.querySelector(
+      "[data-streaming-bubble='true']"
+    );
+    let target = el.scrollHeight - el.clientHeight;
+    if (streamingBubble && streamingBubble.offsetHeight > el.clientHeight - 24) {
+      const containerTop = el.getBoundingClientRect().top;
+      const bubbleTop = streamingBubble.getBoundingClientRect().top;
+      const TOP_GAP = 16;
+      target = el.scrollTop + (bubbleTop - containerTop) - TOP_GAP;
+      stickRef.current = false;
+    }
+    autoScrollTo(target);
+    isFirstRender.current = false;
+  }, [messages, isLoading, reduced]);
+  const newStartIndex = isFirstRender.current ? messages.length : prevMessageCount.current;
+  (0, import_react8.useEffect)(() => {
+    prevMessageCount.current = messages.length;
+  }, [messages.length]);
+  let lastBotIndex = -1;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i].role === "bot") {
+      lastBotIndex = i;
+      break;
+    }
+  }
+  const containerStyle = {
+    flex: 1,
+    overflowY: "auto",
+    padding: 16,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12
+  };
+  const lastMsg = messages[messages.length - 1];
+  const waitingForFirstToken = isLoading && (lastMsg?.role !== "bot" || lastMsg.streaming !== true);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: [
+    messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Message,
+      {
+        message: msg,
+        config: themedConfig,
+        onRate: rateMessage,
+        onSend: sendMessage,
+        onApproveAction: approveAction,
+        onCancelAction: cancelAction,
+        hasConversation: conversationId !== null,
+        t,
+        animate: i >= newStartIndex,
+        reduced,
+        showSuggestions: i === lastBotIndex && !isLoading && msg.streaming !== true
+      },
+      i
+    )),
+    waitingForFirstToken && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TypingDots, { reduced }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        role: "alert",
+        style: {
+          alignSelf: "flex-start",
+          padding: "10px 14px",
+          borderRadius: 16,
+          borderBottomLeftRadius: 4,
+          fontSize: 13,
+          background: "#fee2e2",
+          color: "#b91c1c"
+        },
+        children: error
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: messagesEndRef })
+  ] });
+}
+
+// src/components/chat-suggestions.tsx
+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",
+    flexWrap: "wrap",
+    gap: 6,
+    justifyContent: "flex-end"
+  };
+  const chipStyle = {
+    background: "none",
+    border: `1px solid ${idleBorder}`,
+    borderRadius: 20,
+    padding: "7px 14px",
+    fontSize: 13,
+    color: theme.text,
+    cursor: "pointer",
+    textAlign: "left",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    transition: reduced ? "none" : "border-color 0.15s, background 0.15s"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: containerStyle, children: config.suggestedMessages.map((text) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "button",
+    {
+      style: chipStyle,
+      onClick: () => sendMessage(text),
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = theme.primary;
+        e.currentTarget.style.background = `${theme.primary}14`;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = idleBorder;
+        e.currentTarget.style.background = "none";
+      },
+      children: text
+    },
+    text
+  )) });
+}
+
+// src/components/chat-input.tsx
+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 = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "application/pdf"
+];
+var ACCEPT_ATTR = ALLOWED_MIME_TYPES.join(",");
+function isImageMime(mime) {
+  return mime.startsWith("image/");
+}
+function ChatInput() {
+  const {
+    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_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_react9.useEffect)(() => {
+    const id = requestAnimationFrame(() => textInputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, []);
+  (0, import_react9.useLayoutEffect)(() => {
+    const el = textInputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+  (0, import_react9.useEffect)(() => {
+    if (pendingPrefill === null) return;
+    const text = consumePendingPrefill();
+    if (text !== null) setValue(text);
+  }, [pendingPrefill, consumePendingPrefill]);
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
+    };
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (!menuOpen) return;
+    const onClick = (e) => {
+      const target = e.target;
+      if (menuRef.current?.contains(target) || menuButtonRef.current?.contains(target)) {
+        return;
+      }
+      setMenuOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [menuOpen]);
+  (0, import_react9.useEffect)(() => {
+    if (!transientError) return;
+    const id = window.setTimeout(() => setTransientError(null), 4e3);
+    return () => window.clearTimeout(id);
+  }, [transientError]);
+  const updateAttachment = (id, patch) => {
+    setAttachments(
+      (current) => current.map(
+        (a) => a.id === id ? { ...a, ...patch } : a
+      )
+    );
+  };
+  const startUpload = async (blob, filename) => {
+    if (attachments.length >= MAX_ATTACHMENTS) return;
+    const id = `att_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+    const previewUrl = URL.createObjectURL(blob);
+    setAttachments((current) => [
+      ...current,
+      { id, status: "uploading", previewUrl, blob, filename }
+    ]);
+    try {
+      const { attachmentToken } = await uploadAttachment(blob, { filename });
+      updateAttachment(id, {
+        status: "ready",
+        token: attachmentToken
+      });
+    } catch {
+      updateAttachment(id, { status: "error" });
+    }
+  };
+  const ingestFiles = (files) => {
+    const remainingSlots = Math.max(0, MAX_ATTACHMENTS - attachments.length);
+    if (remainingSlots === 0) return 0;
+    let queued = 0;
+    let rejectedAny = false;
+    for (const f of Array.from(files)) {
+      if (queued >= remainingSlots) break;
+      const type = f.type;
+      if (!ALLOWED_MIME_TYPES.includes(
+        type
+      )) {
+        rejectedAny = true;
+        continue;
+      }
+      const filename = typeof f.name === "string" && f.name.length > 0 ? f.name : void 0;
+      void startUpload(f, filename);
+      queued += 1;
+    }
+    if (rejectedAny) {
+      setTransientError(t("attachment_unsupported_type"));
+    }
+    return queued;
+  };
+  const handleCapture = async () => {
+    setMenuOpen(false);
+    try {
+      const blob = await (0, import_js3.captureScreenshot)();
+      await startUpload(blob);
+    } catch (e) {
+      if (e instanceof import_js3.ScreenshotCancelled) return;
+    }
+  };
+  const handlePickFile = () => {
+    setMenuOpen(false);
+    fileInputRef.current?.click();
+  };
+  const handleFileInputChange = (e) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      ingestFiles(files);
+    }
+    e.target.value = "";
+  };
+  const handleRemove = (id) => {
+    setAttachments((current) => {
+      const target = current.find((a) => a.id === id);
+      if (target) URL.revokeObjectURL(target.previewUrl);
+      return current.filter((a) => a.id !== id);
+    });
+  };
+  const handlePaste = (e) => {
+    const items = e.clipboardData?.items;
+    if (!items || items.length === 0) return;
+    const blobs = [];
+    for (const item of Array.from(items)) {
+      if (item.kind !== "file") continue;
+      const blob = item.getAsFile();
+      if (blob) blobs.push(blob);
+    }
+    if (blobs.length === 0) return;
+    e.preventDefault();
+    ingestFiles(blobs);
+  };
+  const handleDragEnter = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    dragCounterRef.current += 1;
+    setDragActive(true);
+  };
+  const handleDragOver = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+  };
+  const handleDragLeave = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+    if (dragCounterRef.current === 0) setDragActive(false);
+  };
+  const handleDrop = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    dragCounterRef.current = 0;
+    setDragActive(false);
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      ingestFiles(files);
+    }
+  };
+  const readyTokens = attachments.filter(
+    (a) => a.status === "ready"
+  ).map((a) => a.token);
+  const handleSend = () => {
+    if (!value.trim() || isLoading) return;
+    sendMessage(
+      value,
+      readyTokens.length > 0 ? { attachmentTokens: readyTokens } : void 0
+    );
+    for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
+    setAttachments([]);
+    setValue("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const containerStyle = {
+    position: "relative",
+    padding: "12px 16px",
+    borderTop: `1px solid ${theme.divider}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  };
+  const rowStyle = {
+    display: "flex",
+    // Anchor the icon buttons to the bottom of the row so a multi-line
+    // textarea grows upward without dragging them along.
+    alignItems: "flex-end",
+    gap: 8
+  };
+  const TEXTAREA_MAX_HEIGHT = 140;
+  const inputStyle = {
+    flex: 1,
+    border: `1px solid ${theme.divider}`,
+    borderRadius: 18,
+    padding: "10px 16px",
+    fontSize: 14,
+    lineHeight: 1.4,
+    outline: "none",
+    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",
+    maxHeight: TEXTAREA_MAX_HEIGHT,
+    boxSizing: "border-box"
+  };
+  const sendButtonStyle = {
+    width: 36,
+    height: 36,
+    borderRadius: "50%",
+    background: theme.primary,
+    border: "none",
+    color: "white",
+    cursor: isLoading ? "not-allowed" : "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: isLoading ? 0.5 : 1,
+    transition: reduced ? "opacity 0.2s" : "opacity 0.2s, transform 0.15s",
+    flexShrink: 0,
+    transform: "scale(1)"
+  };
+  const iconButtonStyle = (disabled) => ({
+    width: 36,
+    height: 36,
+    borderRadius: "50%",
+    background: "transparent",
+    border: "none",
+    color: disabled ? "#ccc" : "#666",
+    cursor: disabled ? "not-allowed" : "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    padding: 0
+  });
+  const menuStyle = {
+    position: "absolute",
+    bottom: "calc(100% + 4px)",
+    left: 0,
+    background: theme.background,
+    border: `1px solid ${theme.divider}`,
+    borderRadius: 8,
+    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,
+    display: "flex",
+    flexDirection: "column"
+  };
+  const menuItemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    background: "transparent",
+    border: "none",
+    borderRadius: 4,
+    cursor: "pointer",
+    fontSize: 14,
+    color: theme.text,
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const dropOverlayStyle = {
+    position: "absolute",
+    inset: 0,
+    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: theme.primary,
+    fontSize: 14,
+    fontWeight: 500,
+    pointerEvents: "none",
+    zIndex: 11
+  };
+  const errorPillStyle = {
+    alignSelf: "flex-start",
+    background: "#fef2f2",
+    color: "#b91c1c",
+    border: "1px solid #fecaca",
+    borderRadius: 12,
+    padding: "4px 10px",
+    fontSize: 12
+  };
+  const attachDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading || readOnly;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      style: containerStyle,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        dragActive && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: dropOverlayStyle, "aria-hidden": "true", children: t("drop_files_here") }),
+        transientError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", style: errorPillStyle, children: transientError }),
+        attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            style: { display: "flex", gap: 8, flexWrap: "wrap" },
+            "aria-label": "Attachments",
+            children: attachments.map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Thumbnail,
+              {
+                attachment: a,
+                onRemove: () => handleRemove(a.id),
+                t
+              },
+              a.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
+          config.allowAttachments !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                ref: menuButtonRef,
+                type: "button",
+                onClick: () => setMenuOpen((o) => !o),
+                disabled: attachDisabled,
+                style: iconButtonStyle(attachDisabled),
+                "aria-label": t("attach_menu_open"),
+                "aria-haspopup": "menu",
+                "aria-expanded": menuOpen,
+                title: t("attach_menu_open"),
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaperclipIcon, {})
+              }
+            ),
+            menuOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: menuRef, role: "menu", style: menuStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: handlePickFile,
+                  style: menuItemStyle,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = theme.bubbleBackground;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ImageIcon, {}),
+                    t("attach_photo")
+                  ]
+                }
+              ),
+              captureSupported && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: handleCapture,
+                  style: menuItemStyle,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = theme.bubbleBackground;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CameraIcon, {}),
+                    t("screenshot_capture")
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: ACCEPT_ATTR,
+              multiple: true,
+              onChange: handleFileInputChange,
+              style: { display: "none" },
+              "aria-hidden": "true",
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "textarea",
+            {
+              ref: textInputRef,
+              rows: 1,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder: config.placeholderText,
+              style: inputStyle,
+              disabled: isLoading || readOnly
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              onClick: handleSend,
+              disabled: isLoading || readOnly || !value.trim(),
+              style: sendButtonStyle,
+              "aria-label": t("send_message"),
+              onMouseEnter: (e) => {
+                if (!reduced && !isLoading)
+                  e.currentTarget.style.transform = "scale(1.1)";
+              },
+              onMouseLeave: (e) => {
+                if (!reduced) e.currentTarget.style.transform = "scale(1)";
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function hasFiles(e) {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === "Files") return true;
+  }
+  return false;
+}
+function Thumbnail({
+  attachment,
+  onRemove,
+  t
+}) {
+  const { status, previewUrl, blob, filename } = attachment;
+  const isImage = isImageMime(blob.type);
+  const wrap = {
+    position: "relative",
+    width: isImage ? 56 : 160,
+    height: 56,
+    borderRadius: 8,
+    overflow: "hidden",
+    border: status === "error" ? "2px solid #b91c1c" : "1px solid #e0e0e0",
+    background: "#f5f5f5",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: isImage ? "stretch" : "flex-start",
+    gap: isImage ? 0 : 8,
+    padding: isImage ? 0 : "0 8px"
+  };
+  const img = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  };
+  const removeBtn = {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    width: 18,
+    height: 18,
+    borderRadius: "50%",
+    border: "none",
+    background: "rgba(0,0,0,0.6)",
+    color: "white",
+    fontSize: 11,
+    lineHeight: "18px",
+    padding: 0,
+    cursor: "pointer",
+    textAlign: "center"
+  };
+  const overlay = {
+    position: "absolute",
+    inset: 0,
+    background: "rgba(255,255,255,0.7)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const docName = {
+    fontSize: 12,
+    fontWeight: 500,
+    color: "#333",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 110,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const docMeta = {
+    fontSize: 11,
+    color: "#888",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const displayName = filename ?? (isImage ? "" : "Document");
+  const sizeLabel = formatBytes(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, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            minWidth: 0,
+            flex: 1
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: docName, title: displayName, children: displayName }),
+            sizeLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: docMeta, children: sizeLabel })
+          ]
+        }
+      )
+    ] }),
+    status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: overlay, "aria-label": "Uploading", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner2, {}) }),
+    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        style: { ...overlay, background: "rgba(255,255,255,0.85)" },
+        "aria-label": t("status_failed"),
+        title: t("status_failed"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#b91c1c", fontSize: 11, fontWeight: 600 }, children: "!" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        style: removeBtn,
+        onClick: onRemove,
+        "aria-label": t("attachment_remove"),
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function PaperclipIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+    }
+  );
+}
+function ImageIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "21 15 16 10 5 21" })
+      ]
+    }
+  );
+}
+function DocIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { color: "#666", flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "10 9 9 9 8 9" })
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function CameraIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "13", r: "4" })
+      ]
+    }
+  );
+}
+function Spinner2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes ch-att-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: 16,
+          height: 16,
+          borderRadius: "50%",
+          border: "2px solid #888",
+          borderTopColor: "transparent",
+          animation: "ch-att-spin 0.8s linear infinite",
+          display: "inline-block"
+        }
+      }
+    )
+  ] });
+}
+
+// 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,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+    textAlign: "center",
+    gap: 8
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: errorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "svg",
+      {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "#999",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__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_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) {
+  if (field.kind === "name" || field.kind === "email" || field.kind === "phone") {
+    return field.kind;
+  }
+  return field.key;
+}
+function fieldLabel(field) {
+  if (field.kind === "name") return field.label ?? "Name";
+  if (field.kind === "email") return field.label ?? "Email";
+  if (field.kind === "phone") return field.label ?? "Phone";
+  return field.label;
+}
+function validateField(field, value) {
+  const required = "required" in field ? !!field.required : false;
+  if (required && (value === void 0 || value === "" || value === false)) {
+    return "Required";
+  }
+  if (field.kind === "email" && typeof value === "string" && value !== "") {
+    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value)) return "Invalid email";
+  }
+  return null;
+}
+function PreChatFormView() {
+  const { preChatForm, submitPreChatForm, cancelPreChatForm, config, t } = useChat();
+  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 }));
+    setErrors((prev) => ({ ...prev, [key]: null }));
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!preChatForm) return;
+    const nextErrors = {};
+    let hasError = false;
+    for (const f of preChatForm.fields) {
+      const k = fieldKey(f);
+      const err = validateField(f, values[k]);
+      nextErrors[k] = err;
+      if (err) hasError = true;
+    }
+    setErrors(nextErrors);
+    if (hasError) return;
+    const submission = {};
+    const properties = {};
+    for (const f of preChatForm.fields) {
+      const k = fieldKey(f);
+      const v = values[k];
+      if (v === void 0 || v === "") continue;
+      if (f.kind === "name" && typeof v === "string") submission.name = v;
+      else if (f.kind === "email" && typeof v === "string")
+        submission.email = v;
+      else if (f.kind === "phone" && typeof v === "string")
+        submission.phone = v;
+      else if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+        properties[k] = v;
+      }
+    }
+    if (Object.keys(properties).length > 0) submission.properties = properties;
+    setSubmitting(true);
+    try {
+      await submitPreChatForm(submission);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const containerStyle = {
+    flex: 1,
+    overflowY: "auto",
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    background: config.backgroundColor,
+    color: config.textColor
+  };
+  const labelStyle = {
+    fontSize: 13,
+    fontWeight: 500,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  };
+  const inputStyle = {
+    width: "100%",
+    border: "1px solid #d4d4d8",
+    borderRadius: 8,
+    padding: "8px 10px",
+    fontSize: 14,
+    background: "white",
+    color: "#111",
+    boxSizing: "border-box"
+  };
+  const errorStyle = { color: "#dc2626", fontSize: 12 };
+  const buttonRowStyle = {
+    display: "flex",
+    gap: 8,
+    marginTop: 8
+  };
+  const submitStyle = {
+    flex: 1,
+    background: config.primaryColor,
+    color: "white",
+    border: "none",
+    borderRadius: 8,
+    padding: "10px 14px",
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: submitting ? "not-allowed" : "pointer",
+    opacity: submitting ? 0.7 : 1
+  };
+  const cancelStyle = {
+    background: "transparent",
+    color: config.textColor,
+    border: "1px solid #d4d4d8",
+    borderRadius: 8,
+    padding: "10px 14px",
+    fontSize: 14,
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "form",
+    {
+      style: containerStyle,
+      onSubmit: handleSubmit,
+      "data-customerhero-prechat-form": true,
+      children: [
+        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];
+          const err = errors[k];
+          const required = "required" in field ? !!field.required : false;
+          const label = fieldLabel(field);
+          if (field.kind === "textarea") {
+            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_runtime10.jsx)(
+                "textarea",
+                {
+                  style: { ...inputStyle, minHeight: 80, resize: "vertical" },
+                  value: v ?? "",
+                  maxLength: field.maxLength,
+                  onChange: (e) => setValue(k, e.target.value)
+                }
+              ),
+              err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
+            ] }, k);
+          }
+          if (field.kind === "select") {
+            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_runtime10.jsxs)(
+                "select",
+                {
+                  style: inputStyle,
+                  value: v ?? "",
+                  onChange: (e) => setValue(k, e.target.value),
+                  children: [
+                    /* @__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_runtime10.jsx)("span", { style: errorStyle, children: err })
+            ] }, k);
+          }
+          if (field.kind === "consent") {
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              "label",
+              {
+                style: {
+                  ...labelStyle,
+                  flexDirection: "row",
+                  alignItems: "flex-start",
+                  gap: 8
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: v === true,
+                      onChange: (e) => setValue(k, e.target.checked),
+                      style: { marginTop: 3 }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
+                    field.label,
+                    field.url && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "a",
+                        {
+                          href: field.url,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: { color: config.primaryColor },
+                          children: "\u2197"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
+                ]
+              },
+              k
+            );
+          }
+          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_runtime10.jsxs)("label", { style: labelStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+              label,
+              required && " *"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                type: inputType,
+                style: inputStyle,
+                value: v ?? "",
+                maxLength,
+                onChange: (e) => setValue(k, e.target.value)
+              }
+            ),
+            err && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: errorStyle, children: err })
+          ] }, k);
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: buttonRowStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: cancelPreChatForm,
+              style: cancelStyle,
+              disabled: submitting,
+              children: t("action_cancel")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
+        ] })
+      ]
+    }
+  );
+}
+function ChatWindow({ embedded } = {}) {
+  const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
+  const reduced = useReducedMotion();
+  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(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+    } else {
+      setVisible(false);
+      if (reduced) {
+        setShouldRender(false);
+      } else {
+        const timer = setTimeout(() => setShouldRender(false), 250);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [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: 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",
+    // 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: isDark ? "rgba(255,255,255,0.45)" : "#aaa"
+  };
+  const linkStyle = {
+    color: isDark ? "rgba(255,255,255,0.6)" : "#888",
+    textDecoration: "underline",
+    textUnderlineOffset: 2
+  };
+  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_runtime10.jsxs)("div", { style: poweredStyle, children: [
+      t("powered_by"),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "a",
+        {
+          href: "https://customerhero.app",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: linkStyle,
+          children: "CustomerHero"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/preview.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function PreviewBootstrap({
+  config,
+  banner
+}) {
+  const client = useCustomerHeroClient();
+  (0, import_react12.useEffect)(() => {
+    client.__seedForPreview(config, { banner: banner ?? null });
+  }, [client]);
+  const configKey = JSON.stringify(config);
+  const bannerKey = JSON.stringify(banner ?? null);
+  (0, import_react12.useEffect)(() => {
+    client.__seedForPreview(config, { banner: banner ?? null });
+  }, [client, configKey, bannerKey]);
+  return null;
+}
+var wrapperStyleBase = {
+  position: "relative",
+  overflow: "hidden"
+};
+function PreviewWidget({
+  style,
+  className,
+  banner,
+  ...config
+}) {
+  const initialConfig = (0, import_react12.useMemo)(() => config, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      className,
+      style: { ...wrapperStyleBase, ...style },
+      "data-customerhero-preview": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CustomerHeroProvider, { disableAutoFetch: true, ...initialConfig, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PreviewBootstrap, { config, banner }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatBubble, { embedded: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatWindow, { embedded: true })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PreviewWidget
+});