@algenium/blocks 1.21.0 → 1.22.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import * as React7 from 'react';
 import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo, useId } from 'react';
-import { ChevronsUpDown, CheckIcon, SearchIcon, Loader2, AlertTriangle, Inbox, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Building2, Check, Plus, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Bell, CheckCheck, XCircle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Search, CheckCircle2, Link2, HelpCircle, Circle, Wifi, WifiOff, MessageSquare, FileIcon, Download, Paperclip, Send, Store, ArrowLeft, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Smile, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, CreditCard, BadgeCheck, CircleCheck, CircleDollarSign, Users } from 'lucide-react';
+import { ChevronsUpDown, CheckIcon, SearchIcon, Loader2, AlertTriangle, Inbox, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Building2, Check, Plus, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Bell, CheckCheck, XCircle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Search, CheckCircle2, Link2, HelpCircle, Circle, Wifi, WifiOff, MessageSquare, FileIcon, Paperclip, Send, Store, ArrowLeft, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Smile, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, CreditCard, BadgeCheck, CircleCheck, CircleDollarSign, Users, Download } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -7958,6 +7958,94 @@ function useChatRoom(roomId, config, options = {}) {
     isInitialLoading
   };
 }
+function AuthenticatedAttachment({
+  url,
+  getToken,
+  fileName,
+  fileSize,
+  mimeType,
+  formatFileSize
+}) {
+  const [blobUrl, setBlobUrl] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const isImage2 = mimeType.startsWith("image/");
+  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__ */ 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__ */ jsx(FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: fileName })
+    ] });
+  }
+  if (!blobUrl) {
+    return /* @__PURE__ */ 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__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+      }
+    );
+  }
+  if (isImage2) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: blobUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "block max-w-[200px] overflow-hidden rounded-lg border",
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: blobUrl,
+            alt: fileName,
+            className: "h-auto w-full object-cover"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsx(FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: fileName }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(fileSize) })
+        ] }),
+        /* @__PURE__ */ jsx(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",
@@ -8245,44 +8333,18 @@ function ChatRoomView({
                                   children: message.content
                                 }
                               ),
-                              message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map(
-                                (att) => att.mimeType.startsWith("image/") ? /* @__PURE__ */ jsx(
-                                  "a",
-                                  {
-                                    href: getAttachmentUrl(att.id),
-                                    target: "_blank",
-                                    rel: "noopener noreferrer",
-                                    className: "block max-w-[200px] overflow-hidden rounded-lg border",
-                                    children: /* @__PURE__ */ jsx(
-                                      "img",
-                                      {
-                                        src: getAttachmentUrl(att.id),
-                                        alt: att.fileName,
-                                        className: "h-auto w-full object-cover",
-                                        loading: "lazy"
-                                      }
-                                    )
-                                  },
-                                  att.id
-                                ) : /* @__PURE__ */ 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__ */ jsx(FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
-                                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                                        /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: att.fileName }),
-                                        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(att.fileSize) })
-                                      ] }),
-                                      /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" })
-                                    ]
-                                  },
-                                  att.id
-                                )
-                              ) }),
+                              message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map((att) => /* @__PURE__ */ jsx(
+                                AuthenticatedAttachment,
+                                {
+                                  url: getAttachmentUrl(att.id),
+                                  getToken: config.getToken,
+                                  fileName: att.fileName,
+                                  fileSize: att.fileSize,
+                                  mimeType: att.mimeType,
+                                  formatFileSize
+                                },
+                                att.id
+                              )) }),
                               isCurrentUser && /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex items-center gap-0.5 text-[10px] text-muted-foreground", children: seen ? /* @__PURE__ */ jsxs(Fragment, { children: [
                                 /* @__PURE__ */ jsx(CheckCheck, { className: "h-3 w-3 text-primary" }),
                                 /* @__PURE__ */ jsx("span", { children: labels.seen ?? "Seen" })