@customerhero/react 2.3.0 → 2.4.1

package/dist/{chunk-BB2DI7WR.js → chunk-M7MROJ5Z.js}

@@ -1307,6 +1307,201 @@ function StreamingCursor({ reduced }) {
     )
   ] });
 }
+function formatBytes(n) {
+  if (n == null || n <= 0) return null;
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AttachmentList({
+  attachments,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    marginTop: 6,
+    alignItems: isUser ? "flex-end" : "flex-start"
+  };
+  return /* @__PURE__ */ jsx6("div", { style: containerStyle, children: attachments.map((a) => /* @__PURE__ */ jsx6(
+    AttachmentTile,
+    {
+      attachment: a,
+      isUser,
+      primaryColor,
+      t
+    },
+    a.id
+  )) });
+}
+function AttachmentTile({
+  attachment,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const tileBg = isUser ? `${primaryColor}11` : "#f3f4f6";
+  const tileBorder = isUser ? `${primaryColor}33` : "#e5e7eb";
+  if (attachment.kind === "image" && attachment.url) {
+    return /* @__PURE__ */ jsx6(
+      "a",
+      {
+        href: attachment.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { display: "inline-block", maxWidth: 220, lineHeight: 0 },
+        "aria-label": attachment.filename ?? t("attachment_image_alt"),
+        children: /* @__PURE__ */ jsx6(
+          "img",
+          {
+            src: attachment.url,
+            alt: attachment.filename ?? t("attachment_image_alt"),
+            style: {
+              display: "block",
+              maxWidth: 220,
+              maxHeight: 220,
+              width: "auto",
+              height: "auto",
+              borderRadius: 12,
+              border: `1px solid ${tileBorder}`,
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  if (attachment.kind === "location" && attachment.location) {
+    const { latitude, longitude, label } = attachment.location;
+    const href = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
+    return /* @__PURE__ */ jsxs5(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: tileLinkStyle(tileBg, tileBorder),
+        children: [
+          /* @__PURE__ */ jsx6(PinIcon, {}),
+          /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx6("span", { style: tileTitleStyle(), children: label || t("attachment_location") }),
+            /* @__PURE__ */ jsxs5("span", { style: tileSubStyle(), children: [
+              latitude.toFixed(4),
+              ", ",
+              longitude.toFixed(4)
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (!attachment.url) return null;
+  const sub = [attachment.mimeType, formatBytes(attachment.sizeBytes)].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs5(
+    "a",
+    {
+      href: attachment.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: t("attachment_open"),
+      style: tileLinkStyle(tileBg, tileBorder),
+      children: [
+        /* @__PURE__ */ jsx6(FileIcon, { kind: attachment.kind }),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx6("span", { style: tileTitleStyle(), children: attachment.filename ?? t("attachment_open") }),
+          sub && /* @__PURE__ */ jsx6("span", { style: tileSubStyle(), children: sub })
+        ] })
+      ]
+    }
+  );
+}
+function tileLinkStyle(bg, border) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: 12,
+    textDecoration: "none",
+    color: "inherit",
+    maxWidth: 260
+  };
+}
+function tileTitleStyle() {
+  return {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#1f2937",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function tileSubStyle() {
+  return {
+    fontSize: 11,
+    color: "#6b7280",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function FileIcon({ kind }) {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: kind === "audio" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx6("path", { d: "M9 18V5l12-2v13" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "6", cy: "18", r: "3" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "18", cy: "16", r: "3" })
+      ] }) : kind === "video" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx6("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" }),
+        /* @__PURE__ */ jsx6("path", { d: "m22 8-6 4 6 4z" })
+      ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx6("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx6("polyline", { points: "14 2 14 8 20 8" })
+      ] })
+    }
+  );
+}
+function PinIcon() {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx6("path", { d: "M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "10", r: "3" })
+      ]
+    }
+  );
+}
 function Message({
   message,
   config,
@@ -1338,8 +1533,10 @@ function Message({
     }
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
+  const hasContent = message.content.trim().length > 0;
+  const hasAttachments = !!message.attachments?.length;
   return /* @__PURE__ */ jsxs5(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ jsx6(
+    hasContent && /* @__PURE__ */ jsx6(
       "div",
       {
         style: bubbleStyle,
@@ -1353,6 +1550,15 @@ function Message({
         ] })
       }
     ),
+    hasAttachments && /* @__PURE__ */ jsx6(
+      AttachmentList,
+      {
+        attachments: message.attachments,
+        isUser,
+        primaryColor: config.primaryColor,
+        t
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ jsx6(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ jsx6(
       BlockRenderer,
@@ -2167,7 +2373,7 @@ function Thumbnail({
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const displayName = filename ?? (isImage ? "" : "Document");
-  const sizeLabel = formatBytes(blob.size);
+  const sizeLabel = formatBytes2(blob.size);
   return /* @__PURE__ */ jsxs6("div", { style: wrap, children: [
     isImage ? /* @__PURE__ */ jsx8("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
       /* @__PURE__ */ jsx8(DocIcon, {}),
@@ -2271,7 +2477,7 @@ function DocIcon() {
     }
   );
 }
-function formatBytes(bytes) {
+function formatBytes2(bytes) {
   if (!Number.isFinite(bytes) || bytes <= 0) return "";
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;

package/dist/index.cjs

@@ -1326,6 +1326,201 @@ function StreamingCursor({ reduced }) {
     )
   ] });
 }
+function formatBytes(n) {
+  if (n == null || n <= 0) return null;
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AttachmentList({
+  attachments,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    marginTop: 6,
+    alignItems: isUser ? "flex-end" : "flex-start"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: containerStyle, children: attachments.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    AttachmentTile,
+    {
+      attachment: a,
+      isUser,
+      primaryColor,
+      t
+    },
+    a.id
+  )) });
+}
+function AttachmentTile({
+  attachment,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const tileBg = isUser ? `${primaryColor}11` : "#f3f4f6";
+  const tileBorder = isUser ? `${primaryColor}33` : "#e5e7eb";
+  if (attachment.kind === "image" && attachment.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "a",
+      {
+        href: attachment.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { display: "inline-block", maxWidth: 220, lineHeight: 0 },
+        "aria-label": attachment.filename ?? t("attachment_image_alt"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src: attachment.url,
+            alt: attachment.filename ?? t("attachment_image_alt"),
+            style: {
+              display: "block",
+              maxWidth: 220,
+              maxHeight: 220,
+              width: "auto",
+              height: "auto",
+              borderRadius: 12,
+              border: `1px solid ${tileBorder}`,
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  if (attachment.kind === "location" && attachment.location) {
+    const { latitude, longitude, label } = attachment.location;
+    const href = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: tileLinkStyle(tileBg, tileBorder),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PinIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileTitleStyle(), children: label || t("attachment_location") }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: tileSubStyle(), children: [
+              latitude.toFixed(4),
+              ", ",
+              longitude.toFixed(4)
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (!attachment.url) return null;
+  const sub = [attachment.mimeType, formatBytes(attachment.sizeBytes)].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "a",
+    {
+      href: attachment.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: t("attachment_open"),
+      style: tileLinkStyle(tileBg, tileBorder),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon, { kind: attachment.kind }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileTitleStyle(), children: attachment.filename ?? t("attachment_open") }),
+          sub && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileSubStyle(), children: sub })
+        ] })
+      ]
+    }
+  );
+}
+function tileLinkStyle(bg, border) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: 12,
+    textDecoration: "none",
+    color: "inherit",
+    maxWidth: 260
+  };
+}
+function tileTitleStyle() {
+  return {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#1f2937",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function tileSubStyle() {
+  return {
+    fontSize: 11,
+    color: "#6b7280",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function FileIcon({ kind }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: kind === "audio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 18V5l12-2v13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6", cy: "18", r: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "18", cy: "16", r: "3" })
+      ] }) : kind === "video" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m22 8-6 4 6 4z" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "14 2 14 8 20 8" })
+      ] })
+    }
+  );
+}
+function PinIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "10", r: "3" })
+      ]
+    }
+  );
+}
 function Message({
   message,
   config,
@@ -1357,8 +1552,10 @@ function Message({
     }
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
+  const hasContent = message.content.trim().length > 0;
+  const hasAttachments = !!message.attachments?.length;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    hasContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: bubbleStyle,
@@ -1372,6 +1569,15 @@ function Message({
         ] })
       }
     ),
+    hasAttachments && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      AttachmentList,
+      {
+        attachments: message.attachments,
+        isUser,
+        primaryColor: config.primaryColor,
+        t
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       BlockRenderer,
@@ -2177,7 +2383,7 @@ function Thumbnail({
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const displayName = filename ?? (isImage ? "" : "Document");
-  const sizeLabel = formatBytes(blob.size);
+  const sizeLabel = formatBytes2(blob.size);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: wrap, children: [
     isImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocIcon, {}),
@@ -2281,7 +2487,7 @@ function DocIcon() {
     }
   );
 }
-function formatBytes(bytes) {
+function formatBytes2(bytes) {
   if (!Number.isFinite(bytes) || bytes <= 0) return "";
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   CustomerHeroProvider,
   useChat,
   useCustomerHeroClient
-} from "./chunk-BB2DI7WR.js";
+} from "./chunk-M7MROJ5Z.js";
 
 // src/components/chat-widget.tsx
 import { useEffect, useRef } from "react";

package/dist/preview.cjs

@@ -1322,6 +1322,201 @@ function StreamingCursor({ reduced }) {
     )
   ] });
 }
+function formatBytes(n) {
+  if (n == null || n <= 0) return null;
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AttachmentList({
+  attachments,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    marginTop: 6,
+    alignItems: isUser ? "flex-end" : "flex-start"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: containerStyle, children: attachments.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    AttachmentTile,
+    {
+      attachment: a,
+      isUser,
+      primaryColor,
+      t
+    },
+    a.id
+  )) });
+}
+function AttachmentTile({
+  attachment,
+  isUser,
+  primaryColor,
+  t
+}) {
+  const tileBg = isUser ? `${primaryColor}11` : "#f3f4f6";
+  const tileBorder = isUser ? `${primaryColor}33` : "#e5e7eb";
+  if (attachment.kind === "image" && attachment.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "a",
+      {
+        href: attachment.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { display: "inline-block", maxWidth: 220, lineHeight: 0 },
+        "aria-label": attachment.filename ?? t("attachment_image_alt"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src: attachment.url,
+            alt: attachment.filename ?? t("attachment_image_alt"),
+            style: {
+              display: "block",
+              maxWidth: 220,
+              maxHeight: 220,
+              width: "auto",
+              height: "auto",
+              borderRadius: 12,
+              border: `1px solid ${tileBorder}`,
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  if (attachment.kind === "location" && attachment.location) {
+    const { latitude, longitude, label } = attachment.location;
+    const href = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: tileLinkStyle(tileBg, tileBorder),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PinIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileTitleStyle(), children: label || t("attachment_location") }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: tileSubStyle(), children: [
+              latitude.toFixed(4),
+              ", ",
+              longitude.toFixed(4)
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (!attachment.url) return null;
+  const sub = [attachment.mimeType, formatBytes(attachment.sizeBytes)].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "a",
+    {
+      href: attachment.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: t("attachment_open"),
+      style: tileLinkStyle(tileBg, tileBorder),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon, { kind: attachment.kind }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileTitleStyle(), children: attachment.filename ?? t("attachment_open") }),
+          sub && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: tileSubStyle(), children: sub })
+        ] })
+      ]
+    }
+  );
+}
+function tileLinkStyle(bg, border) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: 12,
+    textDecoration: "none",
+    color: "inherit",
+    maxWidth: 260
+  };
+}
+function tileTitleStyle() {
+  return {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#1f2937",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function tileSubStyle() {
+  return {
+    fontSize: 11,
+    color: "#6b7280",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 200
+  };
+}
+function FileIcon({ kind }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: kind === "audio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 18V5l12-2v13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6", cy: "18", r: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "18", cy: "16", r: "3" })
+      ] }) : kind === "video" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m22 8-6 4 6 4z" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "14 2 14 8 20 8" })
+      ] })
+    }
+  );
+}
+function PinIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4b5563",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "10", r: "3" })
+      ]
+    }
+  );
+}
 function Message({
   message,
   config,
@@ -1353,8 +1548,10 @@ function Message({
     }
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
+  const hasContent = message.content.trim().length > 0;
+  const hasAttachments = !!message.attachments?.length;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    hasContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: bubbleStyle,
@@ -1368,6 +1565,15 @@ function Message({
         ] })
       }
     ),
+    hasAttachments && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      AttachmentList,
+      {
+        attachments: message.attachments,
+        isUser,
+        primaryColor: config.primaryColor,
+        t
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       BlockRenderer,
@@ -2173,7 +2379,7 @@ function Thumbnail({
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const displayName = filename ?? (isImage ? "" : "Document");
-  const sizeLabel = formatBytes(blob.size);
+  const sizeLabel = formatBytes2(blob.size);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: wrap, children: [
     isImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocIcon, {}),
@@ -2277,7 +2483,7 @@ function DocIcon() {
     }
   );
 }
-function formatBytes(bytes) {
+function formatBytes2(bytes) {
   if (!Number.isFinite(bytes) || bytes <= 0) return "";
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;

package/dist/preview.js

@@ -3,7 +3,7 @@ import {
   ChatWindow,
   CustomerHeroProvider,
   useCustomerHeroClient
-} from "./chunk-BB2DI7WR.js";
+} from "./chunk-M7MROJ5Z.js";
 
 // src/preview.tsx
 import { useEffect, useMemo } from "react";

package/package.json

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