@customerhero/react 0.0.2 → 1.0.1

package/dist/index.cjs

@@ -20,12 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ChatWidget: () => ChatWidget
+  ActionConfirmationCard: () => ActionConfirmationCard,
+  ChatWidget: () => ChatWidget,
+  useChat: () => useChat
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat-widget.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/context.tsx
 var import_react = require("react");
@@ -71,13 +73,26 @@ function useChat() {
     ...state,
     t: client.t,
     sendMessage: (0, import_react2.useCallback)(
-      (message) => client.sendMessage(message),
+      (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]),
@@ -108,7 +123,7 @@ function useReducedMotion() {
 // src/components/chat-bubble.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function ChatBubble() {
-  const { toggle, config, t } = useChat();
+  const { toggle, config, t, isRtl } = useChat();
   const reduced = useReducedMotion();
   const [mounted, setMounted] = (0, import_react4.useState)(false);
   (0, import_react4.useEffect)(() => {
@@ -116,10 +131,11 @@ function ChatBubble() {
     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,
-    [config.position === "bottom-left" ? "left" : "right"]: 20,
+    [effectivePosition === "bottom-left" ? "left" : "right"]: 20,
     width: 56,
     height: 56,
     borderRadius: "50%",
@@ -143,6 +159,7 @@ function ChatBubble() {
     {
       onClick: toggle,
       style,
+      dir: isRtl ? "rtl" : "ltr",
       "aria-label": t("open_chat"),
       onMouseEnter: (e) => {
         if (!reduced) e.currentTarget.style.transform = "scale(1.1)";
@@ -169,7 +186,7 @@ function ChatBubble() {
 }
 
 // src/components/chat-window.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/chat-header.tsx
 var import_react5 = require("react");
@@ -388,8 +405,602 @@ function ChatHeader() {
 }
 
 // src/components/chat-messages.tsx
-var import_react6 = require("react");
+var import_react7 = 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
+            },
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { 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
+            },
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { 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_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ActionConfirmationCard({
+  block,
+  primaryColor,
+  t,
+  onApprove,
+  onCancel
+}) {
+  const [chosen, setChosen] = (0, import_react6.useState)(null);
+  const [showSpinner, setShowSpinner] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [showSummary, setShowSummary] = (0, import_react6.useState)(false);
+  const 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",
+    gap: 4,
+    marginTop: 2,
+    fontSize: 11,
+    color: failed ? "#b91c1c" : "#888",
+    alignSelf: "flex-end"
+  };
+  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,
@@ -397,7 +1008,7 @@ function MessageRatingButtons({
   t,
   reduced
 }) {
-  const [rated, setRated] = (0, import_react6.useState)(null);
+  const [rated, setRated] = (0, import_react7.useState)(null);
   const handleRate = (rating) => {
     setRated(rating);
     onRate(messageId, rating);
@@ -415,15 +1026,16 @@ function MessageRatingButtons({
     transition: reduced ? "color 0.15s" : "all 0.15s",
     transform: isRated && !reduced ? "scale(1.15)" : "scale(1)"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  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"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "aria-label": t("helpful"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "svg",
           {
             width: "14",
@@ -435,21 +1047,22 @@ function MessageRatingButtons({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 10v12" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.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)("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_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: () => handleRate("negative"),
         disabled: rated !== null,
         style: buttonStyle(rated === "negative"),
         title: t("not_helpful"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "aria-label": t("not_helpful"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "svg",
           {
             width: "14",
@@ -461,8 +1074,8 @@ function MessageRatingButtons({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17 14V2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.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" })
+              /* @__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" })
             ]
           }
         )
@@ -476,12 +1089,14 @@ function AnimatedMessage({
   animate,
   reduced
 }) {
-  const [visible, setVisible] = (0, import_react6.useState)(!animate);
-  (0, import_react6.useEffect)(() => {
-    if (animate && !reduced) {
-      const id = requestAnimationFrame(() => setVisible(true));
-      return () => cancelAnimationFrame(id);
+  const [visible, setVisible] = (0, import_react7.useState)(!animate);
+  (0, import_react7.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",
@@ -490,16 +1105,123 @@ function AnimatedMessage({
     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_runtime4.jsx)("div", { style, children });
+  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
+  reduced,
+  showSuggestions
 }) {
   const isUser = message.role === "user";
   const bubbleStyle = {
@@ -518,9 +1240,39 @@ function Message({
       borderBottomLeftRadius: 4
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: bubbleStyle, children: message.content }),
-    message.role === "bot" && message.id && hasConversation && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  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, 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,
@@ -540,12 +1292,12 @@ function TypingDots({ reduced }) {
     background: "#999",
     animation: reduced ? "none" : `ch-dot-pulse 1.2s ease-in-out ${delay}s infinite`
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes ch-dot-pulse {
+  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_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         style: {
@@ -559,21 +1311,32 @@ function TypingDots({ reduced }) {
           alignItems: "center"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: dotStyle(0) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: dotStyle(0.2) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: dotStyle(0.4) })
+          /* @__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, config, conversationId, rateMessage, t } = useChat();
+  const {
+    messages,
+    isLoading,
+    error,
+    config,
+    conversationId,
+    rateMessage,
+    sendMessage,
+    approveAction,
+    cancelAction,
+    t
+  } = useChat();
   const reduced = useReducedMotion();
-  const messagesEndRef = (0, import_react6.useRef)(null);
-  const isFirstRender = (0, import_react6.useRef)(true);
-  const prevMessageCount = (0, import_react6.useRef)(0);
-  (0, import_react6.useEffect)(() => {
+  const messagesEndRef = (0, import_react7.useRef)(null);
+  const isFirstRender = (0, import_react7.useRef)(true);
+  const prevMessageCount = (0, import_react7.useRef)(0);
+  (0, import_react7.useEffect)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({
         behavior: isFirstRender.current || reduced ? "auto" : "smooth"
@@ -582,9 +1345,16 @@ function ChatMessages() {
     }
   }, [messages, isLoading, reduced]);
   const newStartIndex = isFirstRender.current ? messages.length : prevMessageCount.current;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.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",
@@ -593,24 +1363,31 @@ function ChatMessages() {
     flexDirection: "column",
     gap: 12
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, children: [
-    messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const lastMsg = messages[messages.length - 1];
+  const waitingForFirstToken = isLoading && (lastMsg?.role !== "bot" || lastMsg.streaming !== true);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
+    messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Message,
       {
         message: msg,
         config,
         onRate: rateMessage,
+        onSend: sendMessage,
+        onApproveAction: approveAction,
+        onCancelAction: cancelAction,
         hasConversation: conversationId !== null,
         t,
         animate: i >= newStartIndex,
-        reduced
+        reduced,
+        showSuggestions: i === lastBotIndex && !isLoading && msg.streaming !== true
       },
       i
     )),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypingDots, { reduced }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    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",
@@ -623,12 +1400,12 @@ function ChatMessages() {
         children: error
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: messagesEndRef })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: messagesEndRef })
   ] });
 }
 
 // src/components/chat-suggestions.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ChatSuggestions() {
   const { messages, isLoading, config, sendMessage } = useChat();
   const reduced = useReducedMotion();
@@ -655,7 +1432,7 @@ function ChatSuggestions() {
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
     transition: reduced ? "none" : "border-color 0.15s, background 0.15s"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, children: config.suggestedMessages.map((text) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: containerStyle, children: config.suggestedMessages.map((text) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       style: chipStyle,
@@ -675,15 +1452,75 @@ function ChatSuggestions() {
 }
 
 // src/components/chat-input.tsx
-var import_react7 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_js2 = require("@customerhero/js");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MAX_ATTACHMENTS = 3;
 function ChatInput() {
-  const { sendMessage, isLoading, config, t } = useChat();
+  const { sendMessage, uploadAttachment, isLoading, config, t } = useChat();
   const reduced = useReducedMotion();
-  const [value, setValue] = (0, import_react7.useState)("");
+  const [value, setValue] = (0, import_react8.useState)("");
+  const [attachments, setAttachments] = (0, import_react8.useState)([]);
+  const [captureSupported, setCaptureSupported] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    setCaptureSupported((0, import_js2.canCaptureScreenshot)());
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    return () => {
+      for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
+    };
+  }, []);
+  const updateAttachment = (id, patch) => {
+    setAttachments(
+      (current) => current.map(
+        (a) => a.id === id ? { ...a, ...patch } : a
+      )
+    );
+  };
+  const startUpload = async (blob) => {
+    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 }
+    ]);
+    try {
+      const { attachmentToken } = await uploadAttachment(blob);
+      updateAttachment(id, {
+        status: "ready",
+        token: attachmentToken
+      });
+    } catch {
+      updateAttachment(id, { status: "error" });
+    }
+  };
+  const handleCapture = async () => {
+    try {
+      const blob = await (0, import_js2.captureScreenshot)();
+      await startUpload(blob);
+    } catch (e) {
+      if (e instanceof import_js2.ScreenshotCancelled) return;
+    }
+  };
+  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 readyTokens = attachments.filter(
+    (a) => a.status === "ready"
+  ).map((a) => a.token);
   const handleSend = () => {
     if (!value.trim() || isLoading) return;
-    sendMessage(value);
+    sendMessage(
+      value,
+      readyTokens.length > 0 ? { attachmentTokens: readyTokens } : void 0
+    );
+    for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
+    setAttachments([]);
     setValue("");
   };
   const handleKeyDown = (e) => {
@@ -695,6 +1532,11 @@ function ChatInput() {
   const containerStyle = {
     padding: "12px 16px",
     borderTop: "1px solid #eee",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  };
+  const rowStyle = {
     display: "flex",
     alignItems: "center",
     gap: 8
@@ -710,7 +1552,7 @@ function ChatInput() {
     color: config.textColor,
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
-  const buttonStyle = {
+  const sendButtonStyle = {
     width: 36,
     height: 36,
     borderRadius: "50%",
@@ -726,57 +1568,210 @@ function ChatInput() {
     flexShrink: 0,
     transform: "scale(1)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "input",
+  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 captureDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: containerStyle, children: [
+    attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
       {
-        type: "text",
-        value,
-        onChange: (e) => setValue(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder: config.placeholderText,
-        style: inputStyle,
-        disabled: isLoading
+        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_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
+      captureSupported && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleCapture,
+          disabled: captureDisabled,
+          style: iconButtonStyle(captureDisabled),
+          "aria-label": t("screenshot_capture"),
+          title: t("screenshot_capture"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CameraIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: config.placeholderText,
+          style: inputStyle,
+          disabled: isLoading
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "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__ */ (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 Thumbnail({
+  attachment,
+  onRemove,
+  t
+}) {
+  const { status, previewUrl } = attachment;
+  const wrap = {
+    position: "relative",
+    width: 56,
+    height: 56,
+    borderRadius: 8,
+    overflow: "hidden",
+    border: status === "error" ? "2px solid #b91c1c" : "1px solid #e0e0e0",
+    background: "#f5f5f5"
+  };
+  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"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: wrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewUrl, alt: "", style: img }),
+    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",
       {
-        onClick: handleSend,
-        disabled: isLoading || !value.trim(),
-        style: buttonStyle,
-        "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_runtime6.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_runtime6.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
-            ]
-          }
-        )
+        type: "button",
+        style: removeBtn,
+        onClick: onRemove,
+        "aria-label": t("attachment_remove"),
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function CameraIcon() {
+  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",
+      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/chat-window.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ConfigError({ message, title }) {
   const errorStyle = {
     flex: 1,
@@ -788,8 +1783,8 @@ function ConfigError({ message, title }) {
     textAlign: "center",
     gap: 8
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: errorStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: errorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "svg",
       {
         width: "32",
@@ -801,22 +1796,22 @@ function ConfigError({ message, title }) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 14, fontWeight: 500, color: "#333", margin: 0 }, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
   ] });
 }
 function ChatWindow() {
-  const { isOpen, config, configError, t } = useChat();
+  const { isOpen, config, configError, t, isRtl } = useChat();
   const reduced = useReducedMotion();
-  const [visible, setVisible] = (0, import_react8.useState)(false);
-  const [shouldRender, setShouldRender] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react9.useState)(false);
+  const [shouldRender, setShouldRender] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     if (isOpen) {
       setShouldRender(true);
       requestAnimationFrame(() => {
@@ -833,10 +1828,11 @@ function ChatWindow() {
     }
   }, [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,
-    [config.position === "bottom-left" ? "left" : "right"]: 20,
+    [effectivePosition === "bottom-left" ? "left" : "right"]: 20,
     width: 380,
     maxWidth: "calc(100vw - 40px)",
     height: 520,
@@ -864,17 +1860,17 @@ function ChatWindow() {
     textDecoration: "underline",
     textUnderlineOffset: 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatHeader, {}),
-    configError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfigError, { title: t("unable_to_load"), message: configError }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatMessages, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatSuggestions, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatInput, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatHeader, {}),
+    configError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfigError, { title: t("unable_to_load"), message: configError }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatMessages, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatSuggestions, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatInput, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: poweredStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: poweredStyle, children: [
       t("powered_by"),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "a",
         {
           href: "https://customerhero.app",
@@ -889,11 +1885,11 @@ function ChatWindow() {
 }
 
 // src/components/chat-widget.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ChatWidgetInner({ identity }) {
   const client = useCustomerHeroClient();
-  const prevIdentityRef = (0, import_react9.useRef)(void 0);
-  (0, import_react9.useEffect)(() => {
+  const prevIdentityRef = (0, import_react10.useRef)(void 0);
+  (0, import_react10.useEffect)(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
     if (key !== prevIdentityRef.current) {
       prevIdentityRef.current = key;
@@ -902,15 +1898,17 @@ function ChatWidgetInner({ identity }) {
       }
     }
   }, [identity, client]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatBubble, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatWindow, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatBubble, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatWindow, {})
   ] });
 }
 function ChatWidget({ identity, ...config }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatWidgetInner, { identity }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomerHeroProvider, { ...config, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatWidgetInner, { identity }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ChatWidget
+  ActionConfirmationCard,
+  ChatWidget,
+  useChat
 });