@open-mercato/ui 0.6.2-develop.3461.1.605f31c2c9 → 0.6.2

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 135 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 351 entry points
+[build:ui] found 353 entry points
 [build:ui] built successfully

package/dist/ai/AiChat.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
   Activity,
@@ -16,12 +16,14 @@ import {
   CircleDashed,
   Copy,
   Database,
+  Download,
   FileQuestion,
   GitBranch,
   Handshake,
   Lightbulb,
   ListChecks,
   Loader2,
+  Maximize2,
   Paperclip,
   Plus,
   Search,
@@ -38,6 +40,13 @@ import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { Alert, AlertDescription, AlertTitle } from "../primitives/alert.js";
 import { Button } from "../primitives/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../primitives/dialog.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { Label } from "../primitives/label.js";
 import { Textarea } from "../primitives/textarea.js";
@@ -391,6 +400,124 @@ function ReasoningPanel({ text, streaming }) {
     }
   );
 }
+function getAttachmentImageUrl(file) {
+  if (file.id) return `/api/attachments/image/${encodeURIComponent(file.id)}`;
+  return file.previewUrl ?? null;
+}
+function getAttachmentDownloadUrl(file) {
+  if (file.id) return `/api/attachments/file/${encodeURIComponent(file.id)}?download=1`;
+  return file.previewUrl ?? null;
+}
+function MessageFileAttachment({ file }) {
+  const t = useT();
+  const [zoomOpen, setZoomOpen] = React.useState(false);
+  const imageUrl = file.previewUrl ? getAttachmentImageUrl(file) : null;
+  const downloadUrl = getAttachmentDownloadUrl(file);
+  const downloadLabel = t("ai_assistant.chat.downloadFile", "Download {name}").replace(
+    "{name}",
+    file.name
+  );
+  const zoomLabel = t("ai_assistant.chat.zoomImage", "Open {name} preview").replace(
+    "{name}",
+    file.name
+  );
+  if (!file.previewUrl) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs", children: [
+      /* @__PURE__ */ jsx(Paperclip, { className: "size-3 shrink-0", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate", children: file.name }),
+      downloadUrl ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          asChild: true,
+          variant: "ghost",
+          size: "xs",
+          className: "-mr-1 size-5 shrink-0",
+          children: /* @__PURE__ */ jsx("a", { href: downloadUrl, download: file.name, "aria-label": downloadLabel, children: /* @__PURE__ */ jsx(Download, { className: "size-3", "aria-hidden": true }) })
+        }
+      ) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "group/file relative max-w-full", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "block max-w-full rounded-md border border-border bg-muted/30 focus-visible:outline-none focus-visible:shadow-focus",
+          onClick: () => setZoomOpen(true),
+          "aria-label": zoomLabel,
+          "data-ai-chat-image-preview": "",
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: file.previewUrl,
+                alt: file.name,
+                className: "max-h-32 max-w-[200px] rounded-md object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-1 top-1 inline-flex size-6 items-center justify-center rounded-md bg-background/90 text-muted-foreground opacity-0 shadow-xs transition-opacity group-hover/file:opacity-100 group-focus-within/file:opacity-100", children: /* @__PURE__ */ jsx(Maximize2, { className: "size-3.5", "aria-hidden": true }) })
+          ]
+        }
+      ),
+      downloadUrl ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          asChild: true,
+          variant: "white",
+          size: "xs",
+          className: "absolute bottom-1 right-1 opacity-0 shadow-xs transition-opacity group-hover/file:opacity-100 group-focus-within/file:opacity-100",
+          children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: downloadUrl,
+              download: file.name,
+              "aria-label": downloadLabel,
+              onClick: (event) => event.stopPropagation(),
+              "data-ai-chat-file-download": "",
+              children: /* @__PURE__ */ jsx(Download, { className: "size-3.5", "aria-hidden": true })
+            }
+          )
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: zoomOpen, onOpenChange: setZoomOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-3 p-4 sm:max-w-[min(96vw,960px)]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { className: "min-w-0 pr-16", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "truncate text-sm", children: file.name }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: t("ai_assistant.chat.imagePreviewDialogDescription", "Image preview") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 items-center justify-center overflow-auto rounded-md bg-muted/30 p-2", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl ?? file.previewUrl,
+            alt: file.name,
+            className: "max-h-[75vh] max-w-full object-contain"
+          }
+        ),
+        downloadUrl ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            asChild: true,
+            variant: "white",
+            size: "sm",
+            className: "absolute bottom-3 right-3 shadow-xs",
+            children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: downloadUrl,
+                download: file.name,
+                "aria-label": downloadLabel,
+                "data-ai-chat-file-download": "",
+                children: /* @__PURE__ */ jsx(Download, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          }
+        ) : null
+      ] })
+    ] }) })
+  ] });
+}
 function MessageRow({
   message,
   registry,
@@ -468,27 +595,7 @@ function MessageRow({
               }
             ) : null
           ] }),
-          message.files && message.files.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 py-1", children: message.files.map(
-            (file, i) => file.previewUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: file.previewUrl,
-                alt: file.name,
-                className: "max-h-32 max-w-[200px] rounded-md border border-border object-cover"
-              },
-              i
-            ) : /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs",
-                children: [
-                  /* @__PURE__ */ jsx(Paperclip, { className: "size-3", "aria-hidden": true }),
-                  file.name
-                ]
-              },
-              i
-            )
-          ) }) : null,
+          message.files && message.files.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 py-1", children: message.files.map((file, i) => /* @__PURE__ */ jsx(MessageFileAttachment, { file }, `${file.id ?? file.name}:${i}`)) }) : null,
           isAssistant && message.reasoning ? /* @__PURE__ */ jsx(
             ReasoningPanel,
             {
@@ -867,6 +974,7 @@ function AiChat({
         const isImage = entry.file.type.startsWith("image/");
         const fallback = isImage ? URL.createObjectURL(entry.file) : void 0;
         return {
+          id: entry.attachmentId,
           name: entry.file.name,
           type: entry.file.type,
           previewUrl: isImage ? entry.previewDataUrl ?? fallback : void 0