@algenium/blocks 1.21.0 → 1.22.0

package/dist/index.cjs

@@ -7991,6 +7991,94 @@ function useChatRoom(roomId, config, options = {}) {
     isInitialLoading
   };
 }
+function AuthenticatedAttachment({
+  url,
+  getToken,
+  fileName,
+  fileSize,
+  mimeType,
+  formatFileSize
+}) {
+  const [blobUrl, setBlobUrl] = React7.useState(null);
+  const [failed, setFailed] = React7.useState(false);
+  const isImage2 = mimeType.startsWith("image/");
+  React7.useEffect(() => {
+    let cancelled = false;
+    let objectUrl = null;
+    void (async () => {
+      try {
+        const jwt = await getToken();
+        if (!jwt) throw new Error("No auth token");
+        const res = await fetch(url, {
+          headers: { Authorization: `Bearer ${jwt}` }
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const blob = await res.blob();
+        if (cancelled) return;
+        objectUrl = URL.createObjectURL(blob);
+        setBlobUrl(objectUrl);
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [url, getToken]);
+  if (failed) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-2 py-1.5 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: fileName })
+    ] });
+  }
+  if (!blobUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: isImage2 ? "flex h-24 w-[200px] items-center justify-center rounded-lg border bg-muted/30" : "flex items-center gap-2 rounded-lg border bg-muted/30 px-2 py-1.5 text-xs",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+      }
+    );
+  }
+  if (isImage2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: blobUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "block max-w-[200px] overflow-hidden rounded-lg border",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: blobUrl,
+            alt: fileName,
+            className: "h-auto w-full object-cover"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: blobUrl,
+      download: fileName,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-2 py-1.5 text-xs transition-colors hover:bg-muted",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: fileName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(fileSize) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" })
+      ]
+    }
+  );
+}
 var roleColors = {
   client: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
   seller: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
@@ -8278,44 +8366,18 @@ function ChatRoomView({
                                   children: message.content
                                 }
                               ),
-                              message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map(
-                                (att) => att.mimeType.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx(
-                                  "a",
-                                  {
-                                    href: getAttachmentUrl(att.id),
-                                    target: "_blank",
-                                    rel: "noopener noreferrer",
-                                    className: "block max-w-[200px] overflow-hidden rounded-lg border",
-                                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                                      "img",
-                                      {
-                                        src: getAttachmentUrl(att.id),
-                                        alt: att.fileName,
-                                        className: "h-auto w-full object-cover",
-                                        loading: "lazy"
-                                      }
-                                    )
-                                  },
-                                  att.id
-                                ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                                  "a",
-                                  {
-                                    href: getAttachmentUrl(att.id),
-                                    target: "_blank",
-                                    rel: "noopener noreferrer",
-                                    className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-2 py-1.5 text-xs transition-colors hover:bg-muted",
-                                    children: [
-                                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
-                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: att.fileName }),
-                                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(att.fileSize) })
-                                      ] }),
-                                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" })
-                                    ]
-                                  },
-                                  att.id
-                                )
-                              ) }),
+                              message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map((att) => /* @__PURE__ */ jsxRuntime.jsx(
+                                AuthenticatedAttachment,
+                                {
+                                  url: getAttachmentUrl(att.id),
+                                  getToken: config.getToken,
+                                  fileName: att.fileName,
+                                  fileSize: att.fileSize,
+                                  mimeType: att.mimeType,
+                                  formatFileSize
+                                },
+                                att.id
+                              )) }),
                               isCurrentUser && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex items-center gap-0.5 text-[10px] text-muted-foreground", children: seen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { className: "h-3 w-3 text-primary" }),
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.seen ?? "Seen" })