@algenium/blocks 1.20.0 → 1.22.0

package/dist/index.cjs

@@ -6662,7 +6662,12 @@ function TimeCombobox({
       setDraft(formatTimeDisplay(value));
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  const handleListWheel = (e) => {
+    e.currentTarget.scrollTop += e.deltaY;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -6714,38 +6719,46 @@ function TimeCombobox({
               "aria-label": ariaLabel
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: listRef, className: "max-h-56 overflow-y-auto py-1", children: [
-            filtered.map((slot) => {
-              const selected = slot === value;
-              const label = formatTimeDisplay(slot);
-              const hint = durationFrom != null ? formatDurationHintClean(durationFrom, slot) : null;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  ref: selected ? selectedRef : void 0,
-                  type: "button",
-                  className: cn(
-                    "flex w-full items-center justify-between px-3 py-1.5 text-left text-sm tabular-nums hover:bg-accent",
-                    selected && "bg-accent font-medium"
-                  ),
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                  },
-                  onClick: () => {
-                    onChange(slot);
-                    setDraft(formatTimeDisplay(slot));
-                    setOpen(false);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-                    hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: hint })
-                  ]
-                },
-                slot
-              );
-            }),
-            filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No matching times" })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: listRef,
+              className: "max-h-56 overflow-y-auto py-1",
+              onWheel: handleListWheel,
+              children: [
+                filtered.map((slot) => {
+                  const selected = slot === value;
+                  const label = formatTimeDisplay(slot);
+                  const hint = durationFrom != null ? formatDurationHintClean(durationFrom, slot) : null;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      ref: selected ? selectedRef : void 0,
+                      type: "button",
+                      className: cn(
+                        "flex w-full items-center justify-between px-3 py-1.5 text-left text-sm tabular-nums hover:bg-accent",
+                        selected && "bg-accent font-medium"
+                      ),
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                      },
+                      onClick: () => {
+                        onChange(slot);
+                        setDraft(formatTimeDisplay(slot));
+                        setOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                        hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: hint })
+                      ]
+                    },
+                    slot
+                  );
+                }),
+                filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No matching times" })
+              ]
+            }
+          )
         ]
       }
     )
@@ -7978,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",
@@ -8265,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" })