@customerhero/react 2.2.0 → 2.3.0

package/dist/index.js

@@ -1,2823 +1,23 @@
-// src/components/chat-widget.tsx
-import { useEffect as useEffect8, useRef as useRef5 } from "react";
-
-// src/context.tsx
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef
-} from "react";
 import {
-  CustomerHeroChat
-} from "@customerhero/js";
-import { jsx } from "react/jsx-runtime";
-var CustomerHeroContext = createContext(null);
-function CustomerHeroProvider({
-  children,
-  ...config
-}) {
-  const clientRef = useRef(null);
-  if (!clientRef.current) {
-    clientRef.current = new CustomerHeroChat(config);
-  }
-  useEffect(() => {
-    clientRef.current?.fetchConfig();
-  }, []);
-  return /* @__PURE__ */ jsx(CustomerHeroContext.Provider, { value: clientRef.current, children });
-}
-function useCustomerHeroClient() {
-  const client = useContext(CustomerHeroContext);
-  if (!client) {
-    throw new Error(
-      "useCustomerHeroClient must be used within a <CustomerHeroProvider>"
-    );
-  }
-  return client;
-}
-
-// src/use-chat.ts
-import { useCallback, useSyncExternalStore } from "react";
-function useChat() {
-  const client = useCustomerHeroClient();
-  const state = useSyncExternalStore(
-    useCallback((cb) => client.subscribe(cb), [client]),
-    () => client.getState(),
-    () => client.getState()
-  );
-  return {
-    ...state,
-    t: client.t,
-    sendMessage: useCallback(
-      (message, options) => client.sendMessage(message, options),
-      [client]
-    ),
-    uploadAttachment: useCallback(
-      (blob, options) => client.uploadAttachment(blob, options),
-      [client]
-    ),
-    rateMessage: useCallback(
-      (messageId, rating) => client.rateMessage(messageId, rating),
-      [client]
-    ),
-    approveAction: useCallback(
-      (pendingId) => client.approveAction(pendingId),
-      [client]
-    ),
-    cancelAction: useCallback(
-      (pendingId) => client.cancelAction(pendingId),
-      [client]
-    ),
-    setLocale: useCallback((tag) => client.setLocale(tag), [client]),
-    toggle: useCallback(() => client.toggle(), [client]),
-    open: useCallback(() => client.open(), [client]),
-    close: useCallback(() => client.close(), [client]),
-    reset: useCallback(() => client.reset(), [client]),
-    identify: useCallback(
-      (payload) => client.identify(payload),
-      [client]
-    ),
-    setConsent: useCallback(
-      (consent) => client.setConsent(consent),
-      [client]
-    ),
-    setTraits: useCallback(
-      (traits) => client.setTraits(traits),
-      [client]
-    ),
-    submitPreChatForm: useCallback(
-      (submission) => client.submitPreChatForm(submission),
-      [client]
-    ),
-    cancelPreChatForm: useCallback(() => client.cancelPreChatForm(), [client]),
-    fireTrigger: useCallback(
-      (triggerId) => client.fireTrigger(triggerId),
-      [client]
-    ),
-    consumePendingPrefill: useCallback(
-      () => client.consumePendingPrefill(),
-      [client]
-    ),
-    dismissIncidentBanner: useCallback(
-      () => client.dismissIncidentBanner(),
-      [client]
-    )
-  };
-}
-
-// src/components/chat-bubble.tsx
-import { useEffect as useEffect3, useState as useState2 } from "react";
-
-// src/use-reduced-motion.ts
-import { useEffect as useEffect2, useState } from "react";
-function useReducedMotion() {
-  const [reduced, setReduced] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  });
-  useEffect2(() => {
-    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/components/chat-bubble.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function ChatBubble() {
-  const { toggle, config, t, isRtl } = useChat();
-  const reduced = useReducedMotion();
-  const [mounted, setMounted] = useState2(false);
-  useEffect3(() => {
-    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 style = {
-    position: "fixed",
-    bottom: 20,
-    [effectivePosition === "bottom-left" ? "left" : "right"]: 20,
-    width: 56,
-    height: 56,
-    borderRadius: "50%",
-    background: config.primaryColor,
-    color: "white",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    boxShadow: "0 4px 20px rgba(0,0,0,0.15)",
-    zIndex: 99999,
-    border: "none",
-    padding: 0,
-    opacity: visible ? 1 : 0,
-    transform: visible ? "scale(1)" : "scale(0.6)",
-    transition: reduced ? "none" : "opacity 0.25s ease, transform 0.25s ease",
-    pointerEvents: visible ? "auto" : "none"
-  };
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      onClick: toggle,
-      style,
-      dir: isRtl ? "rtl" : "ltr",
-      "aria-label": t("open_chat"),
-      onMouseEnter: (e) => {
-        if (!reduced) e.currentTarget.style.transform = "scale(1.1)";
-      },
-      onMouseLeave: (e) => {
-        if (!reduced) e.currentTarget.style.transform = "scale(1)";
-      },
-      children: /* @__PURE__ */ jsx2(
-        "svg",
-        {
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx2("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-        }
-      )
-    }
-  );
-}
-
-// src/components/chat-window.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
-
-// src/components/chat-header.tsx
-import { useState as useState3, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function ChatHeader() {
-  const { config, close, reset, t } = useChat();
-  const reduced = useReducedMotion();
-  const [menuOpen, setMenuOpen] = useState3(false);
-  const menuRef = useRef2(null);
-  useEffect4(() => {
-    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: config.primaryColor,
-    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 menuStyle = {
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    marginTop: 4,
-    background: "white",
-    borderRadius: 8,
-    boxShadow: "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: "#333",
-    textAlign: "left",
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
-    /* @__PURE__ */ jsx3("div", { style: avatarStyle, children: config.avatarUrl ? /* @__PURE__ */ jsx3(
-      "img",
-      {
-        src: config.avatarUrl,
-        alt: "",
-        style: { width: 36, height: 36, borderRadius: "50%" }
-      }
-    ) : /* @__PURE__ */ jsx3(
-      "svg",
-      {
-        width: "18",
-        height: "18",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "white",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: /* @__PURE__ */ jsx3("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__ */ jsxs("div", { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx3("h3", { style: titleStyle, children: config.title }),
-      /* @__PURE__ */ jsx3("p", { style: subtitleStyle, children: t("online") })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { ref: menuRef, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx3(
-        "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__ */ jsxs(
-            "svg",
-            {
-              width: "18",
-              height: "18",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: [
-                /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "5", r: "1" }),
-                /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1" }),
-                /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "19", r: "1" })
-              ]
-            }
-          )
-        }
-      ),
-      menuOpen && /* @__PURE__ */ jsxs("div", { style: menuStyle, children: [
-        /* @__PURE__ */ jsx3("style", { children: `@keyframes ch-menu-in {
-                from { opacity: 0; transform: scale(0.9); }
-                to { opacity: 1; transform: scale(1); }
-              }` }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            style: menuItemStyle,
-            onClick: () => {
-              setMenuOpen(false);
-              reset();
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.background = "#f5f5f5";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = "none";
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsx3("path", { d: "M12 20h9" }),
-                    /* @__PURE__ */ jsx3("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__ */ jsx3(
-      "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__ */ jsxs(
-          "svg",
-          {
-            width: "20",
-            height: "20",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: [
-              /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-            ]
-          }
-        )
-      }
-    )
-  ] });
-}
-
-// src/components/chat-messages.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
-
-// src/markdown/render.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "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__ */ jsx4("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__ */ jsx4(
-            "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__ */ jsx4("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__ */ jsx4("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__ */ jsx4(
-                "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__ */ jsx4("sup", { style: { whiteSpace: "nowrap" }, children: indices.map((n, idx) => {
-              const src = ctx.sources[n - 1];
-              const content = /* @__PURE__ */ jsxs2(
-                "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__ */ jsxs2("span", { children: [
-                separator,
-                src.url ? /* @__PURE__ */ jsx4(
-                  "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__ */ jsx4(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__ */ jsx4("h1", { style, children }, key);
-        if (level === 2)
-          return /* @__PURE__ */ jsx4("h2", { style, children }, key);
-        if (level === 3)
-          return /* @__PURE__ */ jsx4("h3", { style, children }, key);
-        if (level === 4)
-          return /* @__PURE__ */ jsx4("h4", { style, children }, key);
-        if (level === 5)
-          return /* @__PURE__ */ jsx4("h5", { style, children }, key);
-        return /* @__PURE__ */ jsx4("h6", { style, children }, key);
-      }
-      case "paragraph":
-        return /* @__PURE__ */ jsx4("p", { style: { margin: "0 0 8px", lineHeight: 1.5 }, children: renderInline(block.lines.join("\n")) }, key);
-      case "ul":
-        return /* @__PURE__ */ jsx4(
-          "ul",
-          {
-            style: {
-              margin: "0 0 8px",
-              paddingLeft: 20,
-              lineHeight: 1.5,
-              listStyleType: "disc",
-              listStylePosition: "outside"
-            },
-            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
-          },
-          key
-        );
-      case "ol":
-        return /* @__PURE__ */ jsx4(
-          "ol",
-          {
-            style: {
-              margin: "0 0 8px",
-              paddingLeft: 22,
-              lineHeight: 1.5,
-              listStyleType: "decimal",
-              listStylePosition: "outside"
-            },
-            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
-          },
-          key
-        );
-      case "code":
-        return /* @__PURE__ */ jsx4(
-          "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__ */ jsx4("code", { children: block.lines.join("\n") })
-          },
-          key
-        );
-      case "blockquote":
-        return /* @__PURE__ */ jsx4(
-          "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
-import { useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function ActionConfirmationCard({
-  block,
-  primaryColor,
-  t,
-  onApprove,
-  onCancel
-}) {
-  const [chosen, setChosen] = useState4(null);
-  const [showSpinner, setShowSpinner] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [showSummary, setShowSummary] = useState4(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__ */ jsxs3("div", { style: cardStyle, role: "group", "aria-label": block.title, children: [
-    /* @__PURE__ */ jsx5("div", { style: titleStyle, children: block.title }),
-    block.summary && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsxs3(
-        "button",
-        {
-          type: "button",
-          style: disclosureBtn,
-          onClick: () => setShowSummary((s) => !s),
-          "aria-expanded": showSummary,
-          children: [
-            showSummary ? "\u25BE" : "\u25B8",
-            " ",
-            t("action_what_will_happen")
-          ]
-        }
-      ),
-      showSummary && /* @__PURE__ */ jsx5("div", { style: summaryStyle, children: block.summary })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { style: buttonRow, children: [
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          type: "button",
-          style: baseBtn("ghost"),
-          disabled: chosen !== null,
-          onClick: () => handle("cancel"),
-          children: chosen === "cancel" && showSpinner ? /* @__PURE__ */ jsx5(Spinner, { color: "#333" }) : t("action_cancel")
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          type: "button",
-          style: baseBtn("primary"),
-          disabled: chosen !== null,
-          onClick: () => handle("approve"),
-          children: chosen === "approve" && showSpinner ? /* @__PURE__ */ jsx5(Spinner, { color: "#fff" }) : t("action_approve")
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsx5("div", { role: "alert", style: { color: "#b91c1c", fontSize: 12 }, children: error })
-  ] });
-}
-function Spinner({ color }) {
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx5("style", { children: `@keyframes ch-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ jsx5(
-      "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
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "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__ */ jsxs4("div", { style: containerStyle, "aria-live": "polite", children: [
-    status === "sending" && /* @__PURE__ */ jsx6(ClockIcon, {}),
-    status === "sent" && /* @__PURE__ */ jsx6(CheckIcon, {}),
-    status === "failed" && /* @__PURE__ */ jsx6(ExclamationIcon, {}),
-    /* @__PURE__ */ jsx6("span", { children: t(labelKey) })
-  ] });
-}
-function ClockIcon() {
-  return /* @__PURE__ */ jsxs4(
-    "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__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx6("polyline", { points: "12 6 12 12 16 14" })
-      ]
-    }
-  );
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsx6(
-    "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__ */ jsx6("polyline", { points: "20 6 9 17 4 12" })
-    }
-  );
-}
-function ExclamationIcon() {
-  return /* @__PURE__ */ jsxs4(
-    "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__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx6("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsx6("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
-      ]
-    }
-  );
-}
-function MessageRatingButtons({
-  messageId,
-  onRate,
-  primaryColor,
-  t,
-  reduced
-}) {
-  const [rated, setRated] = useState5(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__ */ jsxs4("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
-    /* @__PURE__ */ jsx6(
-      "button",
-      {
-        onClick: () => handleRate("positive"),
-        disabled: rated !== null,
-        style: buttonStyle(rated === "positive"),
-        title: t("helpful"),
-        "aria-label": t("helpful"),
-        children: /* @__PURE__ */ jsxs4(
-          "svg",
-          {
-            width: "14",
-            height: "14",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: [
-              /* @__PURE__ */ jsx6("path", { d: "M7 10v12" }),
-              /* @__PURE__ */ jsx6("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__ */ jsx6(
-      "button",
-      {
-        onClick: () => handleRate("negative"),
-        disabled: rated !== null,
-        style: buttonStyle(rated === "negative"),
-        title: t("not_helpful"),
-        "aria-label": t("not_helpful"),
-        children: /* @__PURE__ */ jsxs4(
-          "svg",
-          {
-            width: "14",
-            height: "14",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: [
-              /* @__PURE__ */ jsx6("path", { d: "M17 14V2" }),
-              /* @__PURE__ */ jsx6("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] = useState5(!animate);
-  useEffect5(() => {
-    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__ */ jsx6("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__ */ jsx6(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexWrap: "wrap",
-        gap: 6,
-        marginTop: 6
-      },
-      children: options.map((text) => /* @__PURE__ */ jsx6(
-        "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__ */ jsx6(
-        ChipRow,
-        {
-          options: block.options,
-          onSelect: onSend,
-          primaryColor,
-          reduced
-        }
-      );
-    case "action_confirmation":
-      return /* @__PURE__ */ jsx6(
-        ActionConfirmationCard,
-        {
-          block,
-          primaryColor,
-          t,
-          onApprove: onApproveAction,
-          onCancel: onCancelAction
-        }
-      );
-  }
-}
-function StreamingCursor({ reduced }) {
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx6("style", { children: `@keyframes ch-caret-blink {
-          0%, 50% { opacity: 1; }
-          50.01%, 100% { opacity: 0; }
-        }` }),
-    /* @__PURE__ */ jsx6(
-      "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: "#f0f0f0",
-      color: config.textColor,
-      borderBottomLeftRadius: 4
-    }
-  };
-  const linkColor = isUser ? "#ffffff" : config.primaryColor;
-  return /* @__PURE__ */ jsxs4(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ jsx6(
-      "div",
-      {
-        style: bubbleStyle,
-        "data-streaming-bubble": !isUser && message.streaming ? "true" : void 0,
-        children: isUser ? message.content : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          renderMarkdown(message.content, {
-            sources: message.sources,
-            linkColor
-          }),
-          message.streaming && /* @__PURE__ */ jsx6(StreamingCursor, { reduced })
-        ] })
-      }
-    ),
-    isUser && message.status && /* @__PURE__ */ jsx6(MessageStatusPill, { status: message.status, t }),
-    !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ jsx6(
-      BlockRenderer,
-      {
-        block,
-        onSend,
-        onApproveAction,
-        onCancelAction,
-        primaryColor: config.primaryColor,
-        reduced,
-        t
-      },
-      i
-    )),
-    !isUser && showSuggestions && message.suggestions?.length ? /* @__PURE__ */ jsx6(
-      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__ */ jsx6(
-      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__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx6("style", { children: `@keyframes ch-dot-pulse {
-          0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-          40% { opacity: 1; transform: scale(1); }
-        }` }),
-    /* @__PURE__ */ jsxs4(
-      "div",
-      {
-        style: {
-          alignSelf: "flex-start",
-          padding: "12px 16px",
-          borderRadius: 16,
-          borderBottomLeftRadius: 4,
-          background: "#f0f0f0",
-          display: "flex",
-          gap: 4,
-          alignItems: "center"
-        },
-        children: [
-          /* @__PURE__ */ jsx6("div", { style: dotStyle(0) }),
-          /* @__PURE__ */ jsx6("div", { style: dotStyle(0.2) }),
-          /* @__PURE__ */ jsx6("div", { style: dotStyle(0.4) })
-        ]
-      }
-    )
-  ] });
-}
-function ChatMessages() {
-  const {
-    messages,
-    isLoading,
-    error,
-    config,
-    conversationId,
-    rateMessage,
-    sendMessage,
-    approveAction,
-    cancelAction,
-    t
-  } = useChat();
-  const reduced = useReducedMotion();
-  const containerRef = useRef3(null);
-  const messagesEndRef = useRef3(null);
-  const isFirstRender = useRef3(true);
-  const prevMessageCount = useRef3(0);
-  const stickRef = useRef3(true);
-  const suppressScrollRef = useRef3(false);
-  const autoScrollTo = (top) => {
-    const el = containerRef.current;
-    if (!el) return;
-    suppressScrollRef.current = true;
-    el.scrollTop = top;
-    requestAnimationFrame(() => {
-      suppressScrollRef.current = false;
-    });
-  };
-  const handleScroll = () => {
-    if (suppressScrollRef.current) return;
-    const el = containerRef.current;
-    if (!el) return;
-    const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-    stickRef.current = distFromBottom < 60;
-  };
-  useEffect5(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const lastMsg2 = messages[messages.length - 1];
-    if (messages.length > prevMessageCount.current && lastMsg2?.role === "user") {
-      stickRef.current = true;
-    }
-    if (!stickRef.current && !isFirstRender.current) {
-      return;
-    }
-    const streamingBubble = el.querySelector(
-      "[data-streaming-bubble='true']"
-    );
-    let target = el.scrollHeight - el.clientHeight;
-    if (streamingBubble && streamingBubble.offsetHeight > el.clientHeight - 24) {
-      const containerTop = el.getBoundingClientRect().top;
-      const bubbleTop = streamingBubble.getBoundingClientRect().top;
-      const TOP_GAP = 16;
-      target = el.scrollTop + (bubbleTop - containerTop) - TOP_GAP;
-      stickRef.current = false;
-    }
-    autoScrollTo(target);
-    isFirstRender.current = false;
-  }, [messages, isLoading, reduced]);
-  const newStartIndex = isFirstRender.current ? messages.length : prevMessageCount.current;
-  useEffect5(() => {
-    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__ */ jsxs4("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: [
-    messages.map((msg, i) => /* @__PURE__ */ jsx6(
-      Message,
-      {
-        message: msg,
-        config,
-        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__ */ jsx6(TypingDots, { reduced }),
-    error && /* @__PURE__ */ jsx6(
-      "div",
-      {
-        role: "alert",
-        style: {
-          alignSelf: "flex-start",
-          padding: "10px 14px",
-          borderRadius: 16,
-          borderBottomLeftRadius: 4,
-          fontSize: 13,
-          background: "#fee2e2",
-          color: "#b91c1c"
-        },
-        children: error
-      }
-    ),
-    /* @__PURE__ */ jsx6("div", { ref: messagesEndRef })
-  ] });
-}
-
-// src/components/chat-suggestions.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function ChatSuggestions() {
-  const { messages, isLoading, config, sendMessage } = useChat();
-  const reduced = useReducedMotion();
-  const hasUserMessage = messages.some((m) => m.role === "user");
-  if (config.suggestedMessages.length === 0 || hasUserMessage || isLoading) {
-    return null;
-  }
-  const containerStyle = {
-    padding: "8px 16px",
-    display: "flex",
-    flexWrap: "wrap",
-    gap: 6,
-    justifyContent: "flex-end"
-  };
-  const chipStyle = {
-    background: "none",
-    border: "1px solid #e0e0e0",
-    borderRadius: 20,
-    padding: "7px 14px",
-    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__ */ jsx7("div", { style: containerStyle, children: config.suggestedMessages.map((text) => /* @__PURE__ */ jsx7(
-    "button",
-    {
-      style: chipStyle,
-      onClick: () => sendMessage(text),
-      onMouseEnter: (e) => {
-        e.currentTarget.style.borderColor = config.primaryColor;
-        e.currentTarget.style.background = `${config.primaryColor}08`;
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.borderColor = "#e0e0e0";
-        e.currentTarget.style.background = "none";
-      },
-      children: text
-    },
-    text
-  )) });
-}
-
-// src/components/chat-input.tsx
-import {
-  useEffect as useEffect6,
-  useLayoutEffect,
-  useRef as useRef4,
-  useState as useState6
-} from "react";
-import {
-  ScreenshotCancelled,
-  canCaptureScreenshot,
-  captureScreenshot
-} from "@customerhero/js";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "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,
-    config,
-    t,
-    consumePendingPrefill,
-    pendingPrefill
-  } = useChat();
-  const reduced = useReducedMotion();
-  const [value, setValue] = useState6("");
-  const [attachments, setAttachments] = useState6([]);
-  const [captureSupported, setCaptureSupported] = useState6(false);
-  const [menuOpen, setMenuOpen] = useState6(false);
-  const [dragActive, setDragActive] = useState6(false);
-  const [transientError, setTransientError] = useState6(null);
-  const fileInputRef = useRef4(null);
-  const textInputRef = useRef4(null);
-  const menuRef = useRef4(null);
-  const menuButtonRef = useRef4(null);
-  const dragCounterRef = useRef4(0);
-  useEffect6(() => {
-    setCaptureSupported(canCaptureScreenshot());
-  }, []);
-  useEffect6(() => {
-    const id = requestAnimationFrame(() => textInputRef.current?.focus());
-    return () => cancelAnimationFrame(id);
-  }, []);
-  useLayoutEffect(() => {
-    const el = textInputRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, [value]);
-  useEffect6(() => {
-    if (pendingPrefill === null) return;
-    const text = consumePendingPrefill();
-    if (text !== null) setValue(text);
-  }, [pendingPrefill, consumePendingPrefill]);
-  useEffect6(() => {
-    return () => {
-      for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
-    };
-  }, []);
-  useEffect6(() => {
-    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]);
-  useEffect6(() => {
-    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 captureScreenshot();
-      await startUpload(blob);
-    } catch (e) {
-      if (e instanceof 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 #eee",
-    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 #e0e0e0",
-    borderRadius: 18,
-    padding: "10px 16px",
-    fontSize: 14,
-    lineHeight: 1.4,
-    outline: "none",
-    background: "#fafafa",
-    color: config.textColor,
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-    resize: "none",
-    overflowY: "auto",
-    maxHeight: TEXTAREA_MAX_HEIGHT,
-    boxSizing: "border-box"
-  };
-  const sendButtonStyle = {
-    width: 36,
-    height: 36,
-    borderRadius: "50%",
-    background: config.primaryColor,
-    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: "white",
-    border: "1px solid #e0e0e0",
-    borderRadius: 8,
-    boxShadow: "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: "#333",
-    textAlign: "left",
-    whiteSpace: "nowrap",
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
-  };
-  const dropOverlayStyle = {
-    position: "absolute",
-    inset: 0,
-    background: "rgba(255,255,255,0.92)",
-    border: `2px dashed ${config.primaryColor}`,
-    borderRadius: 4,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: config.primaryColor,
-    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;
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      style: containerStyle,
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      children: [
-        dragActive && /* @__PURE__ */ jsx8("div", { style: dropOverlayStyle, "aria-hidden": "true", children: t("drop_files_here") }),
-        transientError && /* @__PURE__ */ jsx8("div", { role: "alert", style: errorPillStyle, children: transientError }),
-        attachments.length > 0 && /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: { display: "flex", gap: 8, flexWrap: "wrap" },
-            "aria-label": "Attachments",
-            children: attachments.map((a) => /* @__PURE__ */ jsx8(
-              Thumbnail,
-              {
-                attachment: a,
-                onRemove: () => handleRemove(a.id),
-                t
-              },
-              a.id
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxs5("div", { style: rowStyle, children: [
-          /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx8(
-              "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__ */ jsx8(PaperclipIcon, {})
-              }
-            ),
-            menuOpen && /* @__PURE__ */ jsxs5("div", { ref: menuRef, role: "menu", style: menuStyle, children: [
-              /* @__PURE__ */ jsxs5(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  onClick: handlePickFile,
-                  style: menuItemStyle,
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.background = "#f5f5f5";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = "transparent";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx8(ImageIcon, {}),
-                    t("attach_photo")
-                  ]
-                }
-              ),
-              captureSupported && /* @__PURE__ */ jsxs5(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  onClick: handleCapture,
-                  style: menuItemStyle,
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.background = "#f5f5f5";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = "transparent";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx8(CameraIcon, {}),
-                    t("screenshot_capture")
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx8(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              accept: ACCEPT_ATTR,
-              multiple: true,
-              onChange: handleFileInputChange,
-              style: { display: "none" },
-              "aria-hidden": "true",
-              tabIndex: -1
-            }
-          ),
-          /* @__PURE__ */ jsx8(
-            "textarea",
-            {
-              ref: textInputRef,
-              rows: 1,
-              value,
-              onChange: (e) => setValue(e.target.value),
-              onKeyDown: handleKeyDown,
-              onPaste: handlePaste,
-              placeholder: config.placeholderText,
-              style: inputStyle,
-              disabled: isLoading
-            }
-          ),
-          /* @__PURE__ */ jsx8(
-            "button",
-            {
-              onClick: handleSend,
-              disabled: isLoading || !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__ */ jsxs5(
-                "svg",
-                {
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-                    /* @__PURE__ */ jsx8("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__ */ jsxs5("div", { style: wrap, children: [
-    isImage ? /* @__PURE__ */ jsx8("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
-      /* @__PURE__ */ jsx8(DocIcon, {}),
-      /* @__PURE__ */ jsxs5(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            minWidth: 0,
-            flex: 1
-          },
-          children: [
-            /* @__PURE__ */ jsx8("span", { style: docName, title: displayName, children: displayName }),
-            sizeLabel && /* @__PURE__ */ jsx8("span", { style: docMeta, children: sizeLabel })
-          ]
-        }
-      )
-    ] }),
-    status === "uploading" && /* @__PURE__ */ jsx8("div", { style: overlay, "aria-label": "Uploading", children: /* @__PURE__ */ jsx8(Spinner2, {}) }),
-    status === "error" && /* @__PURE__ */ jsx8(
-      "div",
-      {
-        style: { ...overlay, background: "rgba(255,255,255,0.85)" },
-        "aria-label": t("status_failed"),
-        title: t("status_failed"),
-        children: /* @__PURE__ */ jsx8("span", { style: { color: "#b91c1c", fontSize: 11, fontWeight: 600 }, children: "!" })
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      "button",
-      {
-        type: "button",
-        style: removeBtn,
-        onClick: onRemove,
-        "aria-label": t("attachment_remove"),
-        children: "\xD7"
-      }
-    )
-  ] });
-}
-function PaperclipIcon() {
-  return /* @__PURE__ */ jsx8(
-    "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__ */ jsx8("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__ */ jsxs5(
-    "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__ */ jsx8("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx8("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ jsx8("polyline", { points: "21 15 16 10 5 21" })
-      ]
-    }
-  );
-}
-function DocIcon() {
-  return /* @__PURE__ */ jsxs5(
-    "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__ */ jsx8("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ jsx8("polyline", { points: "14 2 14 8 20 8" }),
-        /* @__PURE__ */ jsx8("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-        /* @__PURE__ */ jsx8("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-        /* @__PURE__ */ jsx8("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__ */ jsxs5(
-    "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__ */ jsx8("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__ */ jsx8("circle", { cx: "12", cy: "13", r: "4" })
-      ]
-    }
-  );
-}
-function Spinner2() {
-  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx8("style", { children: `@keyframes ch-att-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ jsx8(
-      "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
-import { useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var PALETTE = {
-  info: {
-    bg: "#EFF6FF",
-    fg: "#1E3A8A",
-    fgMuted: "#3B5BA9",
-    accent: "#2563EB",
-    iconBg: "#DBEAFE",
-    iconFg: "#2563EB"
-  },
-  warning: {
-    bg: "#FFFBEB",
-    fg: "#78350F",
-    fgMuted: "#92541A",
-    accent: "#B45309",
-    iconBg: "#FEF3C7",
-    iconFg: "#B45309"
-  },
-  outage: {
-    bg: "#FEF2F2",
-    fg: "#991B1B",
-    fgMuted: "#B23A3A",
-    accent: "#DC2626",
-    iconBg: "#FEE2E2",
-    iconFg: "#DC2626"
-  }
-};
-function SeverityIcon({
-  severity,
-  color
-}) {
-  const props = {
-    width: 14,
-    height: 14,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: 2.25,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true
-  };
-  if (severity === "outage") {
-    return /* @__PURE__ */ jsxs6("svg", { ...props, children: [
-      /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
-    ] });
-  }
-  if (severity === "warning") {
-    return /* @__PURE__ */ jsxs6("svg", { ...props, children: [
-      /* @__PURE__ */ jsx9("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-      /* @__PURE__ */ jsx9("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs6("svg", { ...props, children: [
-    /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx9("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-    /* @__PURE__ */ jsx9("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
-  ] });
-}
-function IncidentBanner() {
-  const { incidentBanner, incidentBannerDismissed, dismissIncidentBanner, t } = useChat();
-  const [linkHover, setLinkHover] = useState7(false);
-  const [closeHover, setCloseHover] = useState7(false);
-  if (!incidentBanner || incidentBannerDismissed) return null;
-  const palette = PALETTE[incidentBanner.severity];
-  const wrap = {
-    background: palette.bg,
-    color: palette.fg,
-    padding: "12px 14px 12px 12px",
-    display: "flex",
-    gap: 10,
-    alignItems: "flex-start",
-    fontSize: 13,
-    lineHeight: 1.45,
-    boxShadow: "inset 0 -1px 0 rgba(0,0,0,0.04)"
-  };
-  const iconBadge = {
-    width: 22,
-    height: 22,
-    borderRadius: "50%",
-    background: palette.iconBg,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    marginTop: 1
-  };
-  const titleStyle = {
-    margin: 0,
-    fontSize: 13,
-    fontWeight: 600,
-    letterSpacing: "-0.005em"
-  };
-  const bodyStyle = {
-    margin: "3px 0 0",
-    fontSize: 12.5,
-    color: palette.fgMuted
-  };
-  const footerRowStyle = {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: 10,
-    marginTop: 8
-  };
-  const etaStyle = {
-    display: "inline-block",
-    padding: "2px 8px",
-    borderRadius: 4,
-    fontSize: 11,
-    fontWeight: 500,
-    color: palette.accent,
-    background: palette.iconBg,
-    lineHeight: 1.4
-  };
-  const linkStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 4,
-    color: palette.accent,
-    textDecoration: linkHover ? "underline" : "none",
-    textUnderlineOffset: 3,
-    fontSize: 12.5,
-    fontWeight: 600
-  };
-  const closeButtonStyle = {
-    background: closeHover ? "rgba(0,0,0,0.06)" : "transparent",
-    border: "none",
-    color: palette.fgMuted,
-    cursor: "pointer",
-    padding: 4,
-    borderRadius: 6,
-    flexShrink: 0,
-    lineHeight: 0,
-    marginTop: -2,
-    marginRight: -2,
-    transition: "background-color 0.12s ease"
-  };
-  const role = incidentBanner.severity === "outage" ? "alert" : "status";
-  return /* @__PURE__ */ jsxs6("div", { role, style: wrap, children: [
-    /* @__PURE__ */ jsx9("div", { style: iconBadge, children: /* @__PURE__ */ jsx9(
-      SeverityIcon,
-      {
-        severity: incidentBanner.severity,
-        color: palette.iconFg
-      }
-    ) }),
-    /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx9("p", { style: titleStyle, children: incidentBanner.title }),
-      incidentBanner.body ? /* @__PURE__ */ jsx9("p", { style: bodyStyle, children: incidentBanner.body }) : null,
-      incidentBanner.eta || incidentBanner.link ? /* @__PURE__ */ jsxs6("div", { style: footerRowStyle, children: [
-        incidentBanner.eta ? /* @__PURE__ */ jsx9("span", { style: etaStyle, children: incidentBanner.eta }) : null,
-        incidentBanner.link ? /* @__PURE__ */ jsxs6(
-          "a",
-          {
-            href: incidentBanner.link.url,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: linkStyle,
-            onMouseEnter: () => setLinkHover(true),
-            onMouseLeave: () => setLinkHover(false),
-            children: [
-              incidentBanner.link.label ?? t("incident_default_link_label"),
-              /* @__PURE__ */ jsxs6(
-                "svg",
-                {
-                  width: "12",
-                  height: "12",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  "aria-hidden": "true",
-                  children: [
-                    /* @__PURE__ */ jsx9("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-                    /* @__PURE__ */ jsx9("polyline", { points: "12 5 19 12 12 19" })
-                  ]
-                }
-              )
-            ]
-          }
-        ) : null
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsx9(
-      "button",
-      {
-        type: "button",
-        onClick: dismissIncidentBanner,
-        "aria-label": t("incident_dismiss"),
-        style: closeButtonStyle,
-        onMouseEnter: () => setCloseHover(true),
-        onMouseLeave: () => setCloseHover(false),
-        children: /* @__PURE__ */ jsxs6(
-          "svg",
-          {
-            width: "14",
-            height: "14",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx9("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsx9("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-            ]
-          }
-        )
-      }
-    )
-  ] });
-}
-
-// src/components/chat-window.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "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__ */ jsxs7("div", { style: errorStyle, children: [
-    /* @__PURE__ */ jsxs7(
-      "svg",
-      {
-        width: "32",
-        height: "32",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "#999",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: [
-          /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx10("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
-    /* @__PURE__ */ jsx10("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
-  ] });
-}
-function fieldKey(field) {
-  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] = useState8({});
-  const [errors, setErrors] = useState8({});
-  const [submitting, setSubmitting] = useState8(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__ */ jsxs7(
-    "form",
-    {
-      style: containerStyle,
-      onSubmit: handleSubmit,
-      "data-customerhero-prechat-form": true,
-      children: [
-        preChatForm.title && /* @__PURE__ */ jsx10("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
-        preChatForm.description && /* @__PURE__ */ jsx10("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
-        preChatForm.fields.map((field) => {
-          const k = fieldKey(field);
-          const v = values[k];
-          const err = errors[k];
-          const required = "required" in field ? !!field.required : false;
-          const label = fieldLabel(field);
-          if (field.kind === "textarea") {
-            return /* @__PURE__ */ jsxs7("label", { style: labelStyle, children: [
-              /* @__PURE__ */ jsxs7("span", { children: [
-                label,
-                required && " *"
-              ] }),
-              /* @__PURE__ */ jsx10(
-                "textarea",
-                {
-                  style: { ...inputStyle, minHeight: 80, resize: "vertical" },
-                  value: v ?? "",
-                  maxLength: field.maxLength,
-                  onChange: (e) => setValue(k, e.target.value)
-                }
-              ),
-              err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
-            ] }, k);
-          }
-          if (field.kind === "select") {
-            return /* @__PURE__ */ jsxs7("label", { style: labelStyle, children: [
-              /* @__PURE__ */ jsxs7("span", { children: [
-                label,
-                required && " *"
-              ] }),
-              /* @__PURE__ */ jsxs7(
-                "select",
-                {
-                  style: inputStyle,
-                  value: v ?? "",
-                  onChange: (e) => setValue(k, e.target.value),
-                  children: [
-                    /* @__PURE__ */ jsx10("option", { value: "", children: "\u2014" }),
-                    field.options.map((opt) => /* @__PURE__ */ jsx10("option", { value: opt.value, children: opt.label }, opt.value))
-                  ]
-                }
-              ),
-              err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
-            ] }, k);
-          }
-          if (field.kind === "consent") {
-            return /* @__PURE__ */ jsxs7(
-              "label",
-              {
-                style: {
-                  ...labelStyle,
-                  flexDirection: "row",
-                  alignItems: "flex-start",
-                  gap: 8
-                },
-                children: [
-                  /* @__PURE__ */ jsx10(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: v === true,
-                      onChange: (e) => setValue(k, e.target.checked),
-                      style: { marginTop: 3 }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs7("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
-                    field.label,
-                    field.url && /* @__PURE__ */ jsxs7(Fragment5, { children: [
-                      " ",
-                      /* @__PURE__ */ jsx10(
-                        "a",
-                        {
-                          href: field.url,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          style: { color: config.primaryColor },
-                          children: "\u2197"
-                        }
-                      )
-                    ] })
-                  ] }),
-                  err && /* @__PURE__ */ jsx10("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__ */ jsxs7("label", { style: labelStyle, children: [
-            /* @__PURE__ */ jsxs7("span", { children: [
-              label,
-              required && " *"
-            ] }),
-            /* @__PURE__ */ jsx10(
-              "input",
-              {
-                type: inputType,
-                style: inputStyle,
-                value: v ?? "",
-                maxLength,
-                onChange: (e) => setValue(k, e.target.value)
-              }
-            ),
-            err && /* @__PURE__ */ jsx10("span", { style: errorStyle, children: err })
-          ] }, k);
-        }),
-        /* @__PURE__ */ jsxs7("div", { style: buttonRowStyle, children: [
-          /* @__PURE__ */ jsx10(
-            "button",
-            {
-              type: "button",
-              onClick: cancelPreChatForm,
-              style: cancelStyle,
-              disabled: submitting,
-              children: t("action_cancel")
-            }
-          ),
-          /* @__PURE__ */ jsx10("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
-        ] })
-      ]
-    }
-  );
-}
-function ChatWindow() {
-  const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
-  const reduced = useReducedMotion();
-  const [visible, setVisible] = useState8(false);
-  const [shouldRender, setShouldRender] = useState8(false);
-  useEffect7(() => {
-    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 style = {
-    position: "fixed",
-    bottom: 90,
-    [effectivePosition === "bottom-left" ? "left" : "right"]: 20,
-    width: 380,
-    maxWidth: "calc(100vw - 40px)",
-    height: 520,
-    maxHeight: "calc(100vh - 120px)",
-    borderRadius: 16,
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    boxShadow: "0 8px 40px rgba(0,0,0,0.15)",
-    zIndex: 99999,
-    background: config.backgroundColor,
-    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 poweredStyle = {
-    textAlign: "center",
-    padding: 6,
-    fontSize: 10,
-    color: "#aaa"
-  };
-  const linkStyle = {
-    color: "#888",
-    textDecoration: "underline",
-    textUnderlineOffset: 2
-  };
-  return /* @__PURE__ */ jsxs7("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
-    /* @__PURE__ */ jsx10(ChatHeader, {}),
-    /* @__PURE__ */ jsx10(IncidentBanner, {}),
-    configError ? /* @__PURE__ */ jsx10(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ jsx10(PreChatFormView, {}) : /* @__PURE__ */ jsxs7(Fragment5, { children: [
-      /* @__PURE__ */ jsx10(ChatMessages, {}),
-      /* @__PURE__ */ jsx10(ChatSuggestions, {}),
-      /* @__PURE__ */ jsx10(ChatInput, {})
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { style: poweredStyle, children: [
-      t("powered_by"),
-      " ",
-      /* @__PURE__ */ jsx10(
-        "a",
-        {
-          href: "https://customerhero.app",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: linkStyle,
-          children: "CustomerHero"
-        }
-      )
-    ] })
-  ] });
-}
+  ActionConfirmationCard,
+  ChatBubble,
+  ChatWindow,
+  CustomerHeroProvider,
+  useChat,
+  useCustomerHeroClient
+} from "./chunk-BB2DI7WR.js";
 
 // src/components/chat-widget.tsx
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function ChatWidgetInner({ identity }) {
+import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ChatWidgetInner({
+  identity,
+  embedded
+}) {
   const client = useCustomerHeroClient();
   const { configLoaded, configError } = useChat();
-  const prevIdentityRef = useRef5(void 0);
-  useEffect8(() => {
+  const prevIdentityRef = useRef(void 0);
+  useEffect(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
     if (key !== prevIdentityRef.current) {
       prevIdentityRef.current = key;
@@ -2827,13 +27,13 @@ function ChatWidgetInner({ identity }) {
     }
   }, [identity, client]);
   if (!configLoaded || configError) return null;
-  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx11(ChatBubble, {}),
-    /* @__PURE__ */ jsx11(ChatWindow, {})
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ChatBubble, { embedded }),
+    /* @__PURE__ */ jsx(ChatWindow, { embedded })
   ] });
 }
-function ChatWidget({ identity, ...config }) {
-  return /* @__PURE__ */ jsx11(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ jsx11(ChatWidgetInner, { identity }) });
+function ChatWidget({ identity, embedded, ...config }) {
+  return /* @__PURE__ */ jsx(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ jsx(ChatWidgetInner, { identity, embedded }) });
 }
 export {
   ActionConfirmationCard,