@customerhero/react 1.1.0 → 2.1.0

package/dist/index.cjs

@@ -57,9 +57,6 @@ function useCustomerHeroClient() {
   return client;
 }
 
-// src/components/chat-bubble.tsx
-var import_react4 = require("react");
-
 // src/use-chat.ts
 var import_react2 = require("react");
 function useChat() {
@@ -125,6 +122,9 @@ function useChat() {
   };
 }
 
+// src/components/chat-bubble.tsx
+var import_react4 = require("react");
+
 // src/use-reduced-motion.ts
 var import_react3 = require("react");
 function useReducedMotion() {
@@ -1477,6 +1477,16 @@ var import_react8 = require("react");
 var import_js2 = require("@customerhero/js");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MAX_ATTACHMENTS = 3;
+var ALLOWED_MIME_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "application/pdf"
+];
+var ACCEPT_ATTR = ALLOWED_MIME_TYPES.join(",");
+function isImageMime(mime) {
+  return mime.startsWith("image/");
+}
 function ChatInput() {
   const {
     sendMessage,
@@ -1491,6 +1501,13 @@ function ChatInput() {
   const [value, setValue] = (0, import_react8.useState)("");
   const [attachments, setAttachments] = (0, import_react8.useState)([]);
   const [captureSupported, setCaptureSupported] = (0, import_react8.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react8.useState)(false);
+  const [dragActive, setDragActive] = (0, import_react8.useState)(false);
+  const [transientError, setTransientError] = (0, import_react8.useState)(null);
+  const fileInputRef = (0, import_react8.useRef)(null);
+  const menuRef = (0, import_react8.useRef)(null);
+  const menuButtonRef = (0, import_react8.useRef)(null);
+  const dragCounterRef = (0, import_react8.useRef)(0);
   (0, import_react8.useEffect)(() => {
     setCaptureSupported((0, import_js2.canCaptureScreenshot)());
   }, []);
@@ -1504,6 +1521,30 @@ function ChatInput() {
       for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
     };
   }, []);
+  (0, import_react8.useEffect)(() => {
+    if (!menuOpen) return;
+    const onClick = (e) => {
+      const target = e.target;
+      if (menuRef.current?.contains(target) || menuButtonRef.current?.contains(target)) {
+        return;
+      }
+      setMenuOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [menuOpen]);
+  (0, import_react8.useEffect)(() => {
+    if (!transientError) return;
+    const id = window.setTimeout(() => setTransientError(null), 4e3);
+    return () => window.clearTimeout(id);
+  }, [transientError]);
   const updateAttachment = (id, patch) => {
     setAttachments(
       (current) => current.map(
@@ -1511,16 +1552,16 @@ function ChatInput() {
       )
     );
   };
-  const startUpload = async (blob) => {
+  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 }
+      { id, status: "uploading", previewUrl, blob, filename }
     ]);
     try {
-      const { attachmentToken } = await uploadAttachment(blob);
+      const { attachmentToken } = await uploadAttachment(blob, { filename });
       updateAttachment(id, {
         status: "ready",
         token: attachmentToken
@@ -1529,7 +1570,31 @@ function ChatInput() {
       updateAttachment(id, { status: "error" });
     }
   };
+  const ingestFiles = (files) => {
+    const remainingSlots = Math.max(0, MAX_ATTACHMENTS - attachments.length);
+    if (remainingSlots === 0) return 0;
+    let queued = 0;
+    let rejectedAny = false;
+    for (const f of Array.from(files)) {
+      if (queued >= remainingSlots) break;
+      const type = f.type;
+      if (!ALLOWED_MIME_TYPES.includes(
+        type
+      )) {
+        rejectedAny = true;
+        continue;
+      }
+      const filename = typeof f.name === "string" && f.name.length > 0 ? f.name : void 0;
+      void startUpload(f, filename);
+      queued += 1;
+    }
+    if (rejectedAny) {
+      setTransientError(t("attachment_unsupported_type"));
+    }
+    return queued;
+  };
   const handleCapture = async () => {
+    setMenuOpen(false);
     try {
       const blob = await (0, import_js2.captureScreenshot)();
       await startUpload(blob);
@@ -1537,6 +1602,17 @@ function ChatInput() {
       if (e instanceof import_js2.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);
@@ -1544,6 +1620,45 @@ function ChatInput() {
       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);
@@ -1564,6 +1679,7 @@ function ChatInput() {
     }
   };
   const containerStyle = {
+    position: "relative",
     padding: "12px 16px",
     borderTop: "1px solid #eee",
     display: "flex",
@@ -1616,99 +1732,236 @@ function ChatInput() {
     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",
-      {
-        style: { display: "flex", gap: 8, flexWrap: "wrap" },
-        "aria-label": "Attachments",
-        children: attachments.map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Thumbnail,
+  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",
+    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__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      style: containerStyle,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        dragActive && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: dropOverlayStyle, "aria-hidden": "true", children: t("drop_files_here") }),
+        transientError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", style: errorPillStyle, children: transientError }),
+        attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
           {
-            attachment: a,
-            onRemove: () => handleRemove(a.id),
-            t
-          },
-          a.id
-        ))
-      }
-    ),
-    /* @__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",
+            style: { display: "flex", gap: 8, flexWrap: "wrap" },
+            "aria-label": "Attachments",
+            children: attachments.map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Thumbnail,
+              {
+                attachment: a,
+                onRemove: () => handleRemove(a.id),
+                t
+              },
+              a.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                ref: menuButtonRef,
+                type: "button",
+                onClick: () => setMenuOpen((o) => !o),
+                disabled: attachDisabled,
+                style: iconButtonStyle(attachDisabled),
+                "aria-label": t("attach_menu_open"),
+                "aria-haspopup": "menu",
+                "aria-expanded": menuOpen,
+                title: t("attach_menu_open"),
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaperclipIcon, {})
+              }
+            ),
+            menuOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: menuRef, role: "menu", style: menuStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: handlePickFile,
+                  style: menuItemStyle,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "#f5f5f5";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ImageIcon, {}),
+                    t("attach_photo")
+                  ]
+                }
+              ),
+              captureSupported && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: handleCapture,
+                  style: menuItemStyle,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "#f5f5f5";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CameraIcon, {}),
+                    t("screenshot_capture")
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
             {
-              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" })
-              ]
+              ref: fileInputRef,
+              type: "file",
+              accept: ACCEPT_ATTR,
+              multiple: true,
+              onChange: handleFileInputChange,
+              style: { display: "none" },
+              "aria-hidden": "true",
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              type: "text",
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              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 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 } = attachment;
+  const { status, previewUrl, blob, filename } = attachment;
+  const isImage = isImageMime(blob.type);
   const wrap = {
     position: "relative",
-    width: 56,
+    width: isImage ? 56 : 160,
     height: 56,
     borderRadius: 8,
     overflow: "hidden",
     border: status === "error" ? "2px solid #b91c1c" : "1px solid #e0e0e0",
-    background: "#f5f5f5"
+    background: "#f5f5f5",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: isImage ? "stretch" : "flex-start",
+    gap: isImage ? 0 : 8,
+    padding: isImage ? 0 : "0 8px"
   };
   const img = {
     width: "100%",
@@ -1739,8 +1992,42 @@ function Thumbnail({
     alignItems: "center",
     justifyContent: "center"
   };
+  const docName = {
+    fontSize: 12,
+    fontWeight: 500,
+    color: "#333",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 110,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const docMeta = {
+    fontSize: 11,
+    color: "#888",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const displayName = filename ?? (isImage ? "" : "Document");
+  const sizeLabel = formatBytes(blob.size);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewUrl, alt: "", style: img }),
+    isImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            minWidth: 0,
+            flex: 1
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: docName, title: displayName, children: displayName }),
+            sizeLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: docMeta, children: sizeLabel })
+          ]
+        }
+      )
+    ] }),
     status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: overlay, "aria-label": "Uploading", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner2, {}) }),
     status === "error" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
@@ -1763,7 +2050,45 @@ function Thumbnail({
     )
   ] });
 }
-function CameraIcon() {
+function PaperclipIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+    }
+  );
+}
+function ImageIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "21 15 16 10 5 21" })
+      ]
+    }
+  );
+}
+function DocIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
@@ -1776,6 +2101,36 @@ function CameraIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
+      style: { color: "#666", flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "10 9 9 9 8 9" })
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function CameraIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "13", r: "4" })
@@ -2177,6 +2532,7 @@ function ChatWindow() {
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function ChatWidgetInner({ identity }) {
   const client = useCustomerHeroClient();
+  const { configLoaded, configError } = useChat();
   const prevIdentityRef = (0, import_react10.useRef)(void 0);
   (0, import_react10.useEffect)(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
@@ -2187,6 +2543,7 @@ function ChatWidgetInner({ identity }) {
       }
     }
   }, [identity, client]);
+  if (!configLoaded || configError) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatBubble, {}),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatWindow, {})

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat-widget.tsx
-import { useEffect as useEffect8, useRef as useRef4 } from "react";
+import { useEffect as useEffect8, useRef as useRef5 } from "react";
 
 // src/context.tsx
 import {
@@ -36,9 +36,6 @@ function useCustomerHeroClient() {
   return client;
 }
 
-// src/components/chat-bubble.tsx
-import { useEffect as useEffect3, useState as useState2 } from "react";
-
 // src/use-chat.ts
 import { useCallback, useSyncExternalStore } from "react";
 function useChat() {
@@ -104,6 +101,9 @@ function useChat() {
   };
 }
 
+// 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() {
@@ -1454,6 +1454,7 @@ function ChatSuggestions() {
 // src/components/chat-input.tsx
 import {
   useEffect as useEffect6,
+  useRef as useRef4,
   useState as useState6
 } from "react";
 import {
@@ -1463,6 +1464,16 @@ import {
 } 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,
@@ -1477,6 +1488,13 @@ function ChatInput() {
   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 menuRef = useRef4(null);
+  const menuButtonRef = useRef4(null);
+  const dragCounterRef = useRef4(0);
   useEffect6(() => {
     setCaptureSupported(canCaptureScreenshot());
   }, []);
@@ -1490,6 +1508,30 @@ function ChatInput() {
       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(
@@ -1497,16 +1539,16 @@ function ChatInput() {
       )
     );
   };
-  const startUpload = async (blob) => {
+  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 }
+      { id, status: "uploading", previewUrl, blob, filename }
     ]);
     try {
-      const { attachmentToken } = await uploadAttachment(blob);
+      const { attachmentToken } = await uploadAttachment(blob, { filename });
       updateAttachment(id, {
         status: "ready",
         token: attachmentToken
@@ -1515,7 +1557,31 @@ function ChatInput() {
       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);
@@ -1523,6 +1589,17 @@ function ChatInput() {
       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);
@@ -1530,6 +1607,45 @@ function ChatInput() {
       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);
@@ -1550,6 +1666,7 @@ function ChatInput() {
     }
   };
   const containerStyle = {
+    position: "relative",
     padding: "12px 16px",
     borderTop: "1px solid #eee",
     display: "flex",
@@ -1602,99 +1719,236 @@ function ChatInput() {
     flexShrink: 0,
     padding: 0
   });
-  const captureDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading;
-  return /* @__PURE__ */ jsxs5("div", { style: containerStyle, children: [
-    attachments.length > 0 && /* @__PURE__ */ jsx8(
-      "div",
-      {
-        style: { display: "flex", gap: 8, flexWrap: "wrap" },
-        "aria-label": "Attachments",
-        children: attachments.map((a) => /* @__PURE__ */ jsx8(
-          Thumbnail,
+  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",
+    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",
           {
-            attachment: a,
-            onRemove: () => handleRemove(a.id),
-            t
-          },
-          a.id
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsxs5("div", { style: rowStyle, children: [
-      captureSupported && /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          onClick: handleCapture,
-          disabled: captureDisabled,
-          style: iconButtonStyle(captureDisabled),
-          "aria-label": t("screenshot_capture"),
-          title: t("screenshot_capture"),
-          children: /* @__PURE__ */ jsx8(CameraIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "input",
-        {
-          type: "text",
-          value,
-          onChange: (e) => setValue(e.target.value),
-          onKeyDown: handleKeyDown,
-          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",
+            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",
             {
-              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" })
-              ]
+              ref: fileInputRef,
+              type: "file",
+              accept: ACCEPT_ATTR,
+              multiple: true,
+              onChange: handleFileInputChange,
+              style: { display: "none" },
+              "aria-hidden": "true",
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              type: "text",
+              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 } = attachment;
+  const { status, previewUrl, blob, filename } = attachment;
+  const isImage = isImageMime(blob.type);
   const wrap = {
     position: "relative",
-    width: 56,
+    width: isImage ? 56 : 160,
     height: 56,
     borderRadius: 8,
     overflow: "hidden",
     border: status === "error" ? "2px solid #b91c1c" : "1px solid #e0e0e0",
-    background: "#f5f5f5"
+    background: "#f5f5f5",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: isImage ? "stretch" : "flex-start",
+    gap: isImage ? 0 : 8,
+    padding: isImage ? 0 : "0 8px"
   };
   const img = {
     width: "100%",
@@ -1725,8 +1979,42 @@ function Thumbnail({
     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: [
-    /* @__PURE__ */ jsx8("img", { src: previewUrl, alt: "", style: img }),
+    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",
@@ -1749,7 +2037,45 @@ function Thumbnail({
     )
   ] });
 }
-function CameraIcon() {
+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",
     {
@@ -1762,6 +2088,36 @@ function CameraIcon() {
       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" })
@@ -2163,7 +2519,8 @@ function ChatWindow() {
 import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ChatWidgetInner({ identity }) {
   const client = useCustomerHeroClient();
-  const prevIdentityRef = useRef4(void 0);
+  const { configLoaded, configError } = useChat();
+  const prevIdentityRef = useRef5(void 0);
   useEffect8(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
     if (key !== prevIdentityRef.current) {
@@ -2173,6 +2530,7 @@ function ChatWidgetInner({ identity }) {
       }
     }
   }, [identity, client]);
+  if (!configLoaded || configError) return null;
   return /* @__PURE__ */ jsxs7(Fragment6, { children: [
     /* @__PURE__ */ jsx10(ChatBubble, {}),
     /* @__PURE__ */ jsx10(ChatWindow, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customerhero/react",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "private": false,
   "description": "React components for embedding the CustomerHero chat widget.",
   "keywords": [
@@ -58,7 +58,7 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@customerhero/js": "^2.0.0",
+    "@customerhero/js": "^2.1.0",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",