@copilotz/chat-ui 0.7.7 → 0.7.9

package/dist/index.cjs

@@ -970,7 +970,7 @@ var AttachmentDownloadButton = ({ attachment }) => /* @__PURE__ */ (0, import_js
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Download, { className: "h-4 w-4" }),
   "Download"
 ] }) });
-var AttachmentMetadata = ({ attachment }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm", children: [
+var AttachmentMetadata = ({ attachment }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("dl", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 text-sm", children: [
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dt", { className: "text-muted-foreground", children: "Type" }),
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { className: "min-w-0 truncate", children: attachment.mimeType || "application/octet-stream" }),
   attachment.fileName && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
@@ -985,7 +985,7 @@ var AttachmentMetadata = ({ attachment }) => /* @__PURE__ */ (0, import_jsx_runt
 var FileAttachmentCard = ({ attachment, compact = false }) => {
   const Icon = getAttachmentIcon(attachment);
   const size = formatFileSize(attachment.size);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex items-center gap-3 rounded-lg border bg-muted/20 text-left ${compact ? "p-2" : "p-3"} max-w-md`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex w-full min-w-0 max-w-md items-center gap-3 rounded-lg border bg-muted/20 text-left ${compact ? "p-2" : "p-3"}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "h-5 w-5 text-foreground" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "truncate text-sm font-medium", children: getAttachmentLabel(attachment) }),
@@ -998,20 +998,20 @@ var AttachmentDialog = ({ attachment, children }) => {
   const Icon = getAttachmentIcon(attachment);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogContent, { className: "max-w-3xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogTitle, { className: "truncate", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: "Attachment details and download options." })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogContent, { className: "w-[min(calc(100vw-2rem),48rem)] max-w-[calc(100vw-2rem)] overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogHeader, { className: "min-w-0 pr-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogTitle, { className: "min-w-0 truncate", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { className: "min-w-0 truncate", children: "Attachment details and download options." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-4", children: [
-        attachment.kind === "image" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-h-[65vh] overflow-auto rounded-lg border bg-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "min-w-0 max-w-full space-y-4 overflow-hidden", children: [
+        attachment.kind === "image" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-h-[65vh] min-w-0 overflow-auto rounded-lg border bg-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "img",
           {
             src: attachment.dataUrl,
             alt: label,
             className: "mx-auto h-auto max-h-[65vh] w-auto max-w-full object-contain"
           }
-        ) }) : attachment.kind === "video" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "rounded-lg border bg-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ) }) : attachment.kind === "video" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "min-w-0 rounded-lg border bg-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "video",
           {
             src: attachment.dataUrl,
@@ -1019,13 +1019,13 @@ var AttachmentDialog = ({ attachment, children }) => {
             controls: true,
             className: "max-h-[65vh] w-full rounded-lg"
           }
-        ) }) : attachment.kind === "audio" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("audio", { className: "w-full", preload: "metadata", controls: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("source", { src: attachment.dataUrl, type: attachment.mimeType }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-lg border bg-muted/20 p-8 text-center", children: [
+        ) }) : attachment.kind === "audio" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("audio", { className: "w-full", preload: "metadata", controls: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("source", { src: attachment.dataUrl, type: attachment.mimeType }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-col items-center gap-3 rounded-lg border bg-muted/20 p-8 text-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-16 w-16 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "h-8 w-8 text-foreground" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "max-w-full truncate text-sm font-medium", children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "w-full min-w-0 truncate text-sm font-medium", children: label })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentMetadata, { attachment })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentDownloadButton, { attachment }) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogFooter, { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentDownloadButton, { attachment }) })
     ] })
   ] });
 };
@@ -1095,7 +1095,7 @@ var MediaRenderer = (0, import_react2.memo)(function MediaRenderer2({ attachment
         attachment.fileName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 p-2 text-xs text-white", children: attachment.fileName })
       ] }) }) });
     case "file":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentDialog, { attachment, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "block max-w-md text-left", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FileAttachmentCard, { attachment }) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentDialog, { attachment, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "block w-full max-w-md text-left", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FileAttachmentCard, { attachment }) }) });
     default:
       return null;
   }