@yourgpt/copilot-sdk 2.1.5-alpha.5 → 2.1.5-alpha.7

package/dist/ui/index.js

@@ -1,9 +1,9 @@
-import { useThreadManager } from '../chunk-ZAOTYA5L.js';
+import { useThreadManager } from '../chunk-YHW6JZEF.js';
 import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
 import { cn, Loader, TextShimmerLoader } from '../chunk-TXQ37MAO.js';
 export { Loader, cn } from '../chunk-TXQ37MAO.js';
-import { useCopilot } from '../chunk-DH6EO6NW.js';
-import { createServerAdapter } from '../chunk-YLZCTR4O.js';
+import { useCopilot } from '../chunk-UZHGMDOK.js';
+import { createLocalStorageAdapter, createServerAdapter } from '../chunk-J5D3AZF6.js';
 import '../chunk-EWVQWTNV.js';
 import '../chunk-VNLLW3ZI.js';
 import '../chunk-533K2Z7C.js';
@@ -19,7 +19,7 @@ import '../chunk-MNDGIW47.js';
 import '../chunk-VD74IPKB.js';
 import '../chunk-DGUM43GV.js';
 import * as React19 from 'react';
-import React19__default, { memo, createContext, useState, useRef, useId, useCallback, useMemo, useLayoutEffect, useContext, useEffect } from 'react';
+import React19__default, { memo, createContext, useState, useRef, useId, useCallback, useMemo, useLayoutEffect, useContext, useReducer, useEffect } from 'react';
 import { Streamdown } from 'streamdown';
 import { code } from '@streamdown/code';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -31,6 +31,7 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { Globe, ChevronUp, ChevronDown, ExternalLink } from 'lucide-react';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
+import * as ReactDOM from 'react-dom';
 
 var createHeading = (Tag) => {
   const HeadingComponent = ({
@@ -3453,10 +3454,14 @@ function ThreadPicker({
   newButtonClassName
 }) {
   const [isOpen, setIsOpen] = React19.useState(false);
+  const [displayedThreads, setDisplayedThreads] = React19.useState(threads);
+  React19.useEffect(() => {
+    setDisplayedThreads(threads);
+  }, [threads]);
   const selectedThread = React19.useMemo(() => {
     if (!value) return null;
-    return threads.find((t) => t.id === value) ?? null;
-  }, [value, threads]);
+    return displayedThreads.find((t) => t.id === value) ?? null;
+  }, [value, displayedThreads]);
   const handleSelect = (threadId) => {
     onSelect?.(threadId);
     setIsOpen(false);
@@ -3465,6 +3470,10 @@ function ThreadPicker({
     onNewThread?.();
     setIsOpen(false);
   };
+  const handleDelete = (threadId) => {
+    setDisplayedThreads((prev) => prev.filter((t) => t.id !== threadId));
+    onDeleteThread?.(threadId);
+  };
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsxs(
       PopoverTrigger,
@@ -3517,7 +3526,7 @@ function ThreadPicker({
               ]
             }
           ),
-          threads.length > 0 ? threads.map((thread) => /* @__PURE__ */ jsxs(
+          displayedThreads.length > 0 ? displayedThreads.map((thread) => /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
@@ -3553,7 +3562,7 @@ function ThreadPicker({
                     type: "button",
                     onClick: (e) => {
                       e.stopPropagation();
-                      onDeleteThread(thread.id);
+                      handleDelete(thread.id);
                     },
                     className: "flex-shrink-0 p-1 rounded opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all focus:opacity-100 focus:outline-none",
                     "aria-label": "Delete thread",
@@ -4555,17 +4564,37 @@ function DefaultMessage({
               )
             ] })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            message.content && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                MessageContent,
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
                   className: cn(
-                    "csdk-message-user rounded-lg px-4 py-2 bg-primary text-primary-foreground",
+                    "csdk-message-user rounded-2xl overflow-hidden bg-primary text-primary-foreground",
+                    hasAttachments && "p-[3px]",
+                    hasAttachments && !message.content && "max-w-[260px]",
+                    hasAttachments && message.content && "max-w-[280px]",
+                    !hasAttachments && "",
                     userMessageClassName
                   ),
-                  markdown: true,
-                  size,
-                  children: message.content
+                  children: [
+                    hasAttachments && /* @__PURE__ */ jsx(
+                      MessageMedia,
+                      {
+                        attachments: message.attachments,
+                        hasText: !!message.content,
+                        align: "end"
+                      }
+                    ),
+                    message.content && /* @__PURE__ */ jsx(
+                      MessageContent,
+                      {
+                        className: cn("px-4 py-2"),
+                        markdown: true,
+                        size,
+                        children: message.content
+                      }
+                    )
+                  ]
                 }
               ),
               showEditBtn && /* @__PURE__ */ jsx(
@@ -4579,7 +4608,7 @@ function DefaultMessage({
                     "size-6 flex items-center justify-center rounded-full",
                     "text-muted-foreground bg-background border border-border shadow-sm",
                     "opacity-0 group-hover/user-msg:opacity-100 transition-opacity",
-                    "hover:text-foreground hover:bg-muted"
+                    "hover:text-foreground hover:bg-muted cursor-pointer"
                   ),
                   children: /* @__PURE__ */ jsxs(
                     "svg",
@@ -4601,7 +4630,6 @@ function DefaultMessage({
                 }
               )
             ] }),
-            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
             showBranchNav && /* @__PURE__ */ jsx(
               BranchNavigator,
               {
@@ -4873,7 +4901,14 @@ function DefaultMessage({
               tool.id
             );
           }) }),
-          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
+          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "csdk-assistant-attachments mt-2", children: /* @__PURE__ */ jsx(
+            MessageMedia,
+            {
+              attachments: message.attachments,
+              hasText: !!message.content,
+              align: "start"
+            }
+          ) }),
           shouldShowSources && /* @__PURE__ */ jsx(
             SourceGroup,
             {
@@ -4900,83 +4935,379 @@ function DefaultMessage({
     ] })
   ] });
 }
-function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React19.useState(false);
-  if (attachment.type !== "image") {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
-      /* @__PURE__ */ jsx("span", { children: attachment.filename || "Attachment" })
-    ] });
-  }
-  let src;
-  if (attachment.url) {
-    src = attachment.url;
-  } else if (attachment.data) {
-    src = attachment.data.startsWith("data:") ? attachment.data : `data:${attachment.mimeType};base64,${attachment.data}`;
-  } else {
-    return null;
+function getAttachmentSrc(attachment) {
+  if (attachment.url) return attachment.url;
+  if (attachment.data) {
+    return attachment.data.startsWith("data:") ? attachment.data : `data:${attachment.mimeType};base64,${attachment.data}`;
   }
+  return null;
+}
+function ImageLightbox({
+  src,
+  alt,
+  onClose
+}) {
+  const [closing, setClosing] = React19.useState(false);
+  const backdropRef = React19.useRef(null);
+  const handleClose = React19.useCallback(() => {
+    setClosing(true);
+    setTimeout(onClose, 180);
+  }, [onClose]);
+  React19.useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") handleClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [handleClose]);
+  React19.useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  const portal = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: backdropRef,
+      className: "csdk-lightbox csdk-lightbox-backdrop fixed inset-0 z-[9999] flex items-center justify-center cursor-zoom-out",
+      onClick: handleClose,
+      style: {
+        animation: closing ? "csdk-lightbox-backdrop-out 180ms ease-in forwards" : "csdk-lightbox-backdrop-in 200ms ease-out forwards"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "csdk-lightbox-scrim absolute inset-0",
+            style: {
+              backgroundColor: "rgba(0, 0, 0, 0.88)",
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              animation: closing ? "csdk-lightbox-fade-out 180ms ease-in forwards" : "csdk-lightbox-fade-in 200ms ease-out forwards"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "csdk-lightbox-content relative z-10 max-w-[90vw] max-h-[90vh]",
+            style: {
+              animation: closing ? "csdk-lightbox-img-out 180ms ease-in forwards" : "csdk-lightbox-img-in 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src,
+                  alt,
+                  className: "csdk-lightbox-image max-w-full max-h-[90vh] object-contain rounded-xl",
+                  style: { boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)" },
+                  draggable: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "csdk-lightbox-close absolute -top-3 -right-3 size-8 flex items-center justify-center rounded-full shadow-lg transition-[background,transform] duration-150 cursor-pointer active:scale-95",
+                  style: { backgroundColor: "rgba(255,255,255,0.9)" },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "rgba(255,255,255,1)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.9)";
+                  },
+                  onClick: handleClose,
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "size-4",
+                      style: { color: "#333" },
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      strokeWidth: 2.5,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes csdk-lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes csdk-lightbox-fade-out { from { opacity: 1; } to { opacity: 0; } }
+        @keyframes csdk-lightbox-img-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
+        @keyframes csdk-lightbox-img-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
+        @keyframes csdk-lightbox-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes csdk-lightbox-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+      ` })
+      ]
+    }
+  );
+  return typeof document !== "undefined" ? ReactDOM.createPortal(portal, document.body) : null;
+}
+function ImageThumb({
+  src,
+  alt,
+  className
+}) {
+  const [expanded, setExpanded] = React19.useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setExpanded(true),
-        className: "relative rounded-lg overflow-hidden border bg-muted/50 hover:opacity-90 transition-opacity",
+        className: cn(
+          "csdk-attachment-image relative overflow-hidden cursor-zoom-in",
+          "transition-[opacity,transform] duration-150 hover:opacity-90 active:scale-[0.98]",
+          className
+        ),
+        style: { backgroundColor: "#000" },
         children: /* @__PURE__ */ jsx(
           "img",
           {
             src,
-            alt: attachment.filename || "Image",
-            className: "max-w-[200px] max-h-[150px] object-cover"
+            alt,
+            className: "w-full h-full object-cover",
+            loading: "lazy",
+            draggable: false
           }
         )
       }
     ),
-    expanded && /* @__PURE__ */ jsx(
+    expanded && /* @__PURE__ */ jsx(ImageLightbox, { src, alt, onClose: () => setExpanded(false) })
+  ] });
+}
+function FileCard({ attachment }) {
+  const isPdfFile = isPdf(attachment);
+  const isAudio = attachment.type === "audio";
+  const isVideo = attachment.type === "video";
+  const accent = isPdfFile ? { color: "#ef4444", bg: "rgba(239,68,68,0.12)" } : isAudio ? { color: "#10b981", bg: "rgba(16,185,129,0.12)" } : isVideo ? { color: "#8b5cf6", bg: "rgba(139,92,246,0.12)" } : { color: "#3b82f6", bg: "rgba(59,130,246,0.12)" };
+  const label = isPdfFile ? "PDF" : attachment.mimeType?.split("/")[1]?.toUpperCase() || attachment.type?.toUpperCase() || "FILE";
+  const filename = attachment.filename || "Attachment";
+  const href = attachment.url || (attachment.data?.startsWith("data:") ? attachment.data : null);
+  const cssClass = isPdfFile ? "csdk-attachment-pdf" : "csdk-attachment-file";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: href ?? void 0,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      download: isPdfFile ? void 0 : attachment.filename,
+      className: cn(
+        cssClass,
+        "flex items-center gap-2 rounded-lg min-w-0 w-full",
+        "px-2 py-1.5 cursor-pointer transition-opacity duration-150 hover:opacity-80",
+        "no-underline"
+      ),
+      style: { backgroundColor: "rgba(255,255,255,0.92)", color: "#1a1a1a" },
+      onClick: (e) => {
+        if (!href) e.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "size-8 rounded-md flex items-center justify-center shrink-0",
+            style: { backgroundColor: accent.bg },
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "size-4",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: accent.color,
+                strokeWidth: 1.8,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: isPdfFile || !isAudio && !isVideo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+                  /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+                ] }) : isAudio ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("path", { d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.934a.5.5 0 0 0-.777-.416L16 11" }),
+                  /* @__PURE__ */ jsx("rect", { width: "14", height: "12", x: "2", y: "6", rx: "2" })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium truncate leading-tight", children: filename }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-[9px] font-semibold uppercase tracking-wider leading-tight mt-0.5",
+              style: { color: accent.color },
+              children: label
+            }
+          )
+        ] }),
+        href && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "size-6 rounded-md flex items-center justify-center shrink-0",
+            style: { backgroundColor: "rgba(0,0,0,0.05)" },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "size-3",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: { opacity: 0.35 },
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ImageGrid({
+  images,
+  bubbleRadius
+}) {
+  const srcs = images.map((img) => getAttachmentSrc(img)).filter(Boolean);
+  if (srcs.length === 0) return null;
+  const innerRadius = bubbleRadius ? `calc(${bubbleRadius} - 2px)` : "0.875rem";
+  if (srcs.length === 1) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "csdk-attachment-grid",
+        style: { borderRadius: innerRadius, overflow: "hidden" },
+        children: /* @__PURE__ */ jsx(
+          ImageThumb,
+          {
+            src: srcs[0],
+            alt: images[0].filename || "Image",
+            className: "w-full"
+          }
+        )
+      }
+    );
+  }
+  if (srcs.length === 2) {
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "csdk-image-backdrop fixed inset-0 z-50 flex items-center justify-center bg-black/80",
-        onClick: () => setExpanded(false),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-[90vw] max-h-[90vh]", children: [
+        className: "csdk-attachment-grid grid grid-cols-2 gap-[2px]",
+        style: { borderRadius: innerRadius, overflow: "hidden" },
+        children: srcs.map((src, i) => /* @__PURE__ */ jsx(
+          ImageThumb,
+          {
+            src,
+            alt: images[i].filename || "Image",
+            className: "aspect-square"
+          },
+          i
+        ))
+      }
+    );
+  }
+  if (srcs.length === 3) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "csdk-attachment-grid grid grid-cols-2 gap-[2px]",
+        style: { borderRadius: innerRadius, overflow: "hidden" },
+        children: [
           /* @__PURE__ */ jsx(
-            "img",
+            ImageThumb,
             {
-              src,
-              alt: attachment.filename || "Image (expanded)",
-              className: "max-w-full max-h-full object-contain rounded-lg"
+              src: srcs[0],
+              alt: images[0].filename || "Image",
+              className: "col-span-2 max-h-[180px] min-h-[100px]"
             }
           ),
           /* @__PURE__ */ jsx(
-            "button",
+            ImageThumb,
             {
-              type: "button",
-              className: "csdk-image-close absolute top-2 right-2 bg-white/90 rounded-full p-2 hover:bg-white transition-colors",
-              onClick: (e) => {
-                e.stopPropagation();
-                setExpanded(false);
-              },
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  strokeWidth: 2,
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
+              src: srcs[1],
+              alt: images[1].filename || "Image",
+              className: "aspect-square"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ImageThumb,
+            {
+              src: srcs[2],
+              alt: images[2].filename || "Image",
+              className: "aspect-square"
             }
           )
-        ] })
+        ]
+      }
+    );
+  }
+  const showOverlay = srcs.length > 4;
+  const gridSrcs = srcs.slice(0, 4);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "csdk-attachment-grid grid grid-cols-2 gap-[2px]",
+      style: { borderRadius: innerRadius, overflow: "hidden" },
+      children: gridSrcs.map((src, i) => /* @__PURE__ */ jsxs("div", { className: "relative aspect-square", children: [
+        /* @__PURE__ */ jsx(
+          ImageThumb,
+          {
+            src,
+            alt: images[i].filename || "Image",
+            className: "w-full h-full"
+          }
+        ),
+        i === 3 && showOverlay && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs("span", { className: "text-white text-lg font-semibold", children: [
+          "+",
+          srcs.length - 4
+        ] }) })
+      ] }, i))
+    }
+  );
+}
+function isPdf(a) {
+  return a.mimeType === "application/pdf" || a.filename?.toLowerCase().endsWith(".pdf") === true;
+}
+function MessageMedia({
+  attachments,
+  hasText,
+  align = "end"
+}) {
+  const images = attachments.filter((a) => a.type === "image");
+  const pdfs = attachments.filter((a) => isPdf(a));
+  const files = attachments.filter((a) => a.type !== "image" && !isPdf(a));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("csdk-attachment-images", hasText ? "mb-0" : ""), children: /* @__PURE__ */ jsx(ImageGrid, { images, bubbleRadius: "0.5rem" }) }),
+    (pdfs.length > 0 || files.length > 0) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "csdk-attachment-files flex flex-col gap-1",
+          hasText || images.length > 0 ? "px-1.5 pb-1.5 pt-1" : "p-1.5"
+        ),
+        children: [...pdfs, ...files].map((file, i) => /* @__PURE__ */ jsx(FileCard, { attachment: file }, i))
       }
     )
   ] });
@@ -5571,7 +5902,8 @@ function ChatComponent({
   allowedFileTypes = DEFAULT_ALLOWED_TYPES2,
   attachmentsEnabled = true,
   attachmentsDisabledTooltip = "Attachments not supported by this model",
-  processAttachment: processAttachmentProp,
+  upload: uploadProp,
+  processAttachment: deprecatedProcessAttachment,
   // Suggestions
   suggestions = [],
   onSuggestionClick,
@@ -5670,8 +6002,34 @@ function ChatComponent({
         ]);
         try {
           let attachment;
-          if (processAttachmentProp) {
-            attachment = await processAttachmentProp(file);
+          const uploader = uploadProp ?? deprecatedProcessAttachment;
+          if (typeof uploader === "function") {
+            attachment = await uploader(file);
+          } else if (uploader) {
+            const config = typeof uploader === "string" ? { url: uploader } : uploader;
+            const extraHeaders = typeof config.headers === "function" ? config.headers() : config.headers;
+            const extraBody = typeof config.body === "function" ? config.body() : config.body;
+            const data = await fileToBase642(file);
+            const res = await fetch(config.url, {
+              method: "POST",
+              headers: { "Content-Type": "application/json", ...extraHeaders },
+              body: JSON.stringify({
+                data,
+                mimeType: file.type,
+                filename: file.name,
+                ...extraBody
+              })
+            });
+            if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
+            const result = await res.json();
+            const url = result.url ?? result.data?.url;
+            if (!url) throw new Error("Upload returned no URL");
+            attachment = {
+              type: getAttachmentType2(file.type),
+              url,
+              mimeType: file.type,
+              filename: file.name
+            };
           } else {
             const data = await fileToBase642(file);
             attachment = {
@@ -5699,7 +6057,13 @@ function ChatComponent({
         }
       }
     },
-    [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
+    [
+      attachmentsEnabled,
+      maxFileSize,
+      isFileTypeAllowed,
+      uploadProp,
+      deprecatedProcessAttachment
+    ]
   );
   const handleInputChange = useCallback(
     (e) => {
@@ -5843,7 +6207,7 @@ function ChatComponent({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       children: [
-        isDragging && /* @__PURE__ */ jsx("div", { className: "csdk-dropzone-overlay absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
+        isDragging && !renderInput && /* @__PURE__ */ jsx("div", { className: "csdk-dropzone-overlay absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
         showHeader && (renderHeader ? renderHeader() : /* @__PURE__ */ jsx(
           ChatHeader,
           {
@@ -5877,7 +6241,7 @@ function ChatComponent({
               attachmentsDisabledTooltip,
               maxFileSize,
               allowedFileTypes,
-              processAttachment: processAttachmentProp
+              processAttachment: typeof uploadProp === "function" ? uploadProp : deprecatedProcessAttachment
             }
           )
         ) : null,
@@ -6316,6 +6680,106 @@ function ToolExecutionMessage({
     ] })
   ] });
 }
+var INITIAL_STATE = {
+  phase: "idle",
+  threadId: null,
+  lastSnapshot: "",
+  initialized: false
+};
+function threadReducer(state, action) {
+  switch (action.type) {
+    case "FIRST_RESPONSE_COMPLETE":
+      if (state.phase !== "idle") return state;
+      return { ...state, phase: "awaiting_server_id", initialized: true };
+    case "SERVER_ID_RECEIVED":
+      if (state.phase !== "awaiting_server_id") return state;
+      return { ...state, phase: "creating" };
+    case "CREATE_WITH_LOCAL_ID":
+      if (state.phase !== "awaiting_server_id") return state;
+      return { ...state, phase: "creating" };
+    case "THREAD_CREATED":
+      return {
+        ...state,
+        phase: "active",
+        threadId: action.threadId,
+        lastSnapshot: action.snapshot,
+        initialized: true
+      };
+    case "MESSAGES_SAVED":
+      if (state.phase !== "active") return state;
+      return { ...state, lastSnapshot: action.snapshot };
+    case "START_SWITCH":
+      if (state.phase !== "active" && state.phase !== "idle") return state;
+      return { ...state, phase: "switching" };
+    case "SWITCH_COMPLETE":
+      return {
+        ...state,
+        phase: "active",
+        threadId: action.threadId,
+        lastSnapshot: action.snapshot
+      };
+    case "NEW_THREAD":
+      return {
+        ...INITIAL_STATE,
+        initialized: true
+      };
+    case "RESTORE_START":
+      if (state.initialized) return state;
+      if (state.phase === "creating" || state.phase === "awaiting_server_id")
+        return state;
+      return { ...state, phase: "restoring" };
+    case "RESTORE_COMPLETE":
+      return {
+        ...state,
+        phase: "active",
+        threadId: action.threadId,
+        lastSnapshot: action.snapshot,
+        initialized: true
+      };
+    case "SKIP_RESTORE":
+      return { ...state, initialized: true };
+    default:
+      return state;
+  }
+}
+function getMessageSnapshot(msgs) {
+  return msgs.map((m) => {
+    const preview = (m.content ?? "").slice(0, 20);
+    return `${m.id}:${preview}:${m.content?.length ?? 0}`;
+  }).join("|");
+}
+function convertToCore(msgs) {
+  return msgs.map((m) => ({
+    id: m.id,
+    role: m.role,
+    content: m.content,
+    created_at: m.createdAt,
+    tool_calls: m.toolCalls,
+    tool_call_id: m.toolCallId,
+    parent_id: m.parentId,
+    children_ids: m.childrenIds,
+    metadata: {
+      ...m.metadata,
+      attachments: m.attachments,
+      thinking: m.thinking
+    }
+  }));
+}
+function coreToUI(m) {
+  return {
+    id: m.id,
+    role: m.role,
+    content: m.content ?? "",
+    createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
+    toolCalls: m.tool_calls,
+    toolCallId: m.tool_call_id,
+    parentId: m.parent_id,
+    childrenIds: m.children_ids,
+    attachments: m.metadata?.attachments,
+    thinking: m.metadata?.thinking,
+    metadata: m.metadata
+  };
+}
 function useInternalThreadManager(config = {}) {
   const {
     adapter,
@@ -6324,20 +6788,20 @@ function useInternalThreadManager(config = {}) {
     onThreadChange,
     enabled = true
   } = config;
-  const threadManagerConfig = {
+  const [state, dispatch] = useReducer(threadReducer, INITIAL_STATE);
+  const isLoadingRef = useRef(false);
+  const threadManager = useThreadManager({
     adapter,
     saveDebounce,
     autoRestoreLastThread
-  };
-  const threadManager = useThreadManager(threadManagerConfig);
+  });
   const {
     currentThread,
     currentThreadId,
     createThread,
     switchThread,
     updateCurrentThread,
-    clearCurrentThread,
-    refreshThreads
+    clearCurrentThread
   } = threadManager;
   const {
     messages,
@@ -6345,183 +6809,148 @@ function useInternalThreadManager(config = {}) {
     status,
     isLoading,
     getAllMessages,
-    switchBranch
+    switchBranch,
+    threadId: sdkThreadId,
+    setActiveThread
   } = useCopilot();
-  const isLoadingMessagesRef = useRef(false);
-  const savingToThreadRef = useRef(null);
-  const lastSavedSnapshotRef = useRef("");
-  const hasInitializedRef = useRef(false);
-  const getMessageSnapshot = useCallback((msgs) => {
-    return msgs.map((m) => {
-      const contentPreview = (m.content ?? "").slice(0, 20);
-      return `${m.id}:${contentPreview}:${m.content?.length ?? 0}`;
-    }).join("|");
-  }, []);
-  const convertToCore = useCallback((msgs) => {
-    return msgs.map((m) => ({
-      id: m.id,
-      role: m.role,
-      content: m.content,
-      created_at: m.createdAt,
-      tool_calls: m.toolCalls,
-      tool_call_id: m.toolCallId,
-      parent_id: m.parentId,
-      children_ids: m.childrenIds,
-      // Preserve full metadata including citations, toolExecutions, etc.
-      metadata: {
-        ...m.metadata,
-        attachments: m.attachments,
-        thinking: m.thinking
-      }
-    }));
-  }, []);
-  const handleSwitchThread = useCallback(
-    async (threadId) => {
-      isLoadingMessagesRef.current = true;
-      const thread = await switchThread(threadId);
-      if (thread?.messages) {
-        const uiMessages = thread.messages.map((m) => ({
-          id: m.id,
-          role: m.role,
-          content: m.content ?? "",
-          createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
-          toolCalls: m.tool_calls,
-          toolCallId: m.tool_call_id,
-          parentId: m.parent_id,
-          childrenIds: m.children_ids,
-          attachments: m.metadata?.attachments,
-          thinking: m.metadata?.thinking,
-          // Preserve full metadata including citations, toolCallsHidden, toolExecutions, etc.
-          metadata: m.metadata
-        }));
-        lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
-        savingToThreadRef.current = threadId;
-        setMessages(uiMessages);
-        if (thread.activeLeafId) {
-          switchBranch(thread.activeLeafId);
-        }
-      } else {
-        lastSavedSnapshotRef.current = "";
-        savingToThreadRef.current = threadId;
-        setMessages([]);
-      }
-      onThreadChange?.(threadId);
-      requestAnimationFrame(() => {
-        isLoadingMessagesRef.current = false;
-      });
-    },
-    [
-      switchThread,
-      setMessages,
-      switchBranch,
-      getMessageSnapshot,
-      onThreadChange
-    ]
-  );
-  const handleNewThread = useCallback(async () => {
-    isLoadingMessagesRef.current = true;
-    clearCurrentThread();
-    lastSavedSnapshotRef.current = "";
-    savingToThreadRef.current = null;
-    setMessages([]);
-    onThreadChange?.(null);
-    requestAnimationFrame(() => {
-      isLoadingMessagesRef.current = false;
-    });
-  }, [clearCurrentThread, setMessages, onThreadChange]);
   useEffect(() => {
-    if (!enabled) return;
-    if (hasInitializedRef.current || !currentThread) {
-      return;
-    }
-    hasInitializedRef.current = true;
-    isLoadingMessagesRef.current = true;
+    if (!enabled || state.initialized || !currentThread) return;
+    dispatch({ type: "RESTORE_START" });
+    isLoadingRef.current = true;
     if (currentThread.messages && currentThread.messages.length > 0) {
-      const uiMessages = currentThread.messages.map((m) => ({
-        id: m.id,
-        role: m.role,
-        content: m.content ?? "",
-        createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
-        toolCalls: m.tool_calls,
-        toolCallId: m.tool_call_id,
-        parentId: m.parent_id,
-        childrenIds: m.children_ids,
-        attachments: m.metadata?.attachments,
-        thinking: m.metadata?.thinking,
-        // Preserve full metadata including citations, toolExecutions, etc.
-        metadata: m.metadata
-      }));
-      lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
-      savingToThreadRef.current = currentThread.id;
+      const uiMessages = currentThread.messages.map(coreToUI);
+      const snapshot = getMessageSnapshot(uiMessages);
       setMessages(uiMessages);
-      if (currentThread.activeLeafId) {
-        switchBranch(currentThread.activeLeafId);
-      }
+      if (currentThread.activeLeafId) switchBranch(currentThread.activeLeafId);
+      onThreadChange?.(currentThread.id);
+      dispatch({
+        type: "RESTORE_COMPLETE",
+        threadId: currentThread.id,
+        snapshot
+      });
     } else {
-      lastSavedSnapshotRef.current = "";
-      savingToThreadRef.current = currentThread.id;
+      onThreadChange?.(currentThread.id);
+      dispatch({
+        type: "RESTORE_COMPLETE",
+        threadId: currentThread.id,
+        snapshot: ""
+      });
     }
-    onThreadChange?.(currentThread.id);
     requestAnimationFrame(() => {
-      isLoadingMessagesRef.current = false;
+      isLoadingRef.current = false;
     });
   }, [
     enabled,
-    adapter,
     currentThread,
+    state.initialized,
     setMessages,
     switchBranch,
-    getMessageSnapshot,
     onThreadChange
   ]);
   useEffect(() => {
-    if (!enabled) return;
-    if (isLoadingMessagesRef.current) {
-      return;
-    }
-    if (status === "streaming" || status === "submitted") {
+    if (!enabled) {
+      dispatch({ type: "SKIP_RESTORE" });
       return;
     }
-    if (messages.length === 0) {
-      return;
+    if (!autoRestoreLastThread && !state.initialized) {
+      dispatch({ type: "SKIP_RESTORE" });
     }
-    const currentSnapshot = getMessageSnapshot(messages);
-    if (currentSnapshot === lastSavedSnapshotRef.current) {
-      return;
+  }, [enabled, autoRestoreLastThread, state.initialized]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (state.phase !== "idle") return;
+    if (isLoadingRef.current) return;
+    if (status === "streaming" || status === "submitted") return;
+    if (messages.length === 0) return;
+    if (currentThreadId) return;
+    dispatch({ type: "FIRST_RESPONSE_COMPLETE" });
+  }, [enabled, state.phase, status, messages.length, currentThreadId]);
+  useEffect(() => {
+    if (state.phase !== "awaiting_server_id") return;
+    if (sdkThreadId) {
+      dispatch({ type: "SERVER_ID_RECEIVED", threadId: sdkThreadId });
+    } else {
+      dispatch({ type: "CREATE_WITH_LOCAL_ID" });
     }
+  }, [state.phase, sdkThreadId]);
+  useEffect(() => {
+    if (state.phase !== "creating") return;
+    const allUIMessages = getAllMessages();
+    const coreMessages = convertToCore(
+      allUIMessages.length > 0 ? allUIMessages : messages
+    );
+    const activeLeafId = messages[messages.length - 1]?.id;
+    const snapshot = getMessageSnapshot(messages);
+    createThread({
+      id: sdkThreadId ?? void 0,
+      messages: coreMessages,
+      activeLeafId
+    }).then((thread) => {
+      dispatch({ type: "THREAD_CREATED", threadId: thread.id, snapshot });
+      onThreadChange?.(thread.id);
+    });
+  }, [state.phase]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (state.phase !== "active") return;
+    if (isLoadingRef.current) return;
+    if (status === "streaming" || status === "submitted") return;
+    if (messages.length === 0) return;
+    const snapshot = getMessageSnapshot(messages);
+    if (snapshot === state.lastSnapshot) return;
+    if (state.threadId && state.threadId !== currentThreadId) return;
     const allUIMessages = getAllMessages();
     const coreMessages = convertToCore(
       allUIMessages.length > 0 ? allUIMessages : messages
     );
     const activeLeafId = messages[messages.length - 1]?.id;
-    if (!currentThreadId && !savingToThreadRef.current) {
-      savingToThreadRef.current = "creating";
-      createThread({ messages: coreMessages, activeLeafId }).then((thread) => {
-        lastSavedSnapshotRef.current = currentSnapshot;
-        savingToThreadRef.current = thread.id;
-        onThreadChange?.(thread.id);
-      });
-      return;
-    }
-    if (savingToThreadRef.current && savingToThreadRef.current !== currentThreadId) {
-      return;
-    }
     updateCurrentThread({ messages: coreMessages, activeLeafId });
-    lastSavedSnapshotRef.current = currentSnapshot;
+    dispatch({ type: "MESSAGES_SAVED", snapshot });
   }, [
     enabled,
-    adapter,
+    state.phase,
+    state.lastSnapshot,
+    state.threadId,
     messages,
-    currentThreadId,
     status,
+    currentThreadId,
     updateCurrentThread,
-    createThread,
-    refreshThreads,
-    getMessageSnapshot,
-    convertToCore,
-    getAllMessages,
-    onThreadChange
+    getAllMessages
   ]);
+  const handleSwitchThread = useCallback(
+    async (threadId) => {
+      dispatch({ type: "START_SWITCH" });
+      isLoadingRef.current = true;
+      const thread = await switchThread(threadId);
+      if (thread?.messages) {
+        const uiMessages = thread.messages.map(coreToUI);
+        const snapshot = getMessageSnapshot(uiMessages);
+        setMessages(uiMessages);
+        if (thread.activeLeafId) switchBranch(thread.activeLeafId);
+        onThreadChange?.(threadId);
+        dispatch({ type: "SWITCH_COMPLETE", threadId, snapshot });
+      } else {
+        setMessages([]);
+        onThreadChange?.(threadId);
+        dispatch({ type: "SWITCH_COMPLETE", threadId, snapshot: "" });
+      }
+      requestAnimationFrame(() => {
+        isLoadingRef.current = false;
+      });
+    },
+    [switchThread, setMessages, switchBranch, onThreadChange]
+  );
+  const handleNewThread = useCallback(async () => {
+    isLoadingRef.current = true;
+    clearCurrentThread();
+    setMessages([]);
+    setActiveThread(null);
+    onThreadChange?.(null);
+    dispatch({ type: "NEW_THREAD" });
+    requestAnimationFrame(() => {
+      isLoadingRef.current = false;
+    });
+  }, [clearCurrentThread, setMessages, setActiveThread, onThreadChange]);
   const isBusy = isLoading || status === "streaming" || status === "submitted";
   return {
     threadManager,
@@ -6587,7 +7016,15 @@ function CopilotChatBase(props) {
     allowEdit = false,
     ...chatProps
   } = props;
+  const localStorageKey = typeof persistence === "object" && "type" in persistence && persistence.type === "local" ? persistence.localStorageKey : void 0;
+  const customAdapter = useMemo(
+    () => localStorageKey ? createLocalStorageAdapter({ storageKey: localStorageKey }) : void 0,
+    [localStorageKey]
+  );
   const persistenceConfig = parsePersistenceConfig(persistence, onThreadChange);
+  if (persistenceConfig && customAdapter) {
+    persistenceConfig.adapter = customAdapter;
+  }
   const threadManagerResult = useInternalThreadManager(
     persistenceConfig ?? { autoRestoreLastThread: false, enabled: false }
   );
@@ -6890,6 +7327,515 @@ function PoweredBy({ className, showLogo = true }) {
     }
   );
 }
+var DEFAULT_MAX_FILES = 5;
+var DEFAULT_MAX_FILE_SIZE3 = 10 * 1024 * 1024;
+var DEFAULT_ALLOWED_TYPES3 = [
+  "image/*",
+  "application/pdf",
+  "text/csv",
+  "text/plain",
+  "text/markdown",
+  "application/json",
+  ".csv",
+  ".txt",
+  ".md",
+  ".json"
+];
+var TEXT_MIME_TYPES = /* @__PURE__ */ new Set([
+  "text/csv",
+  "text/plain",
+  "text/markdown",
+  "text/x-markdown",
+  "application/json",
+  "application/csv"
+]);
+function isTextFile(file) {
+  if (TEXT_MIME_TYPES.has(file.type)) return true;
+  const ext = file.name.toLowerCase().split(".").pop();
+  return ext === "csv" || ext === "txt" || ext === "md" || ext === "json";
+}
+function readFileAsText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsText(file);
+  });
+}
+function generateId() {
+  return `att_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+}
+function getAttachmentType3(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.startsWith("video/")) return "video";
+  return "file";
+}
+function isTypeAllowed(file, allowedTypes) {
+  for (const type of allowedTypes) {
+    if (type === file.type) return true;
+    if (type.endsWith("/*") && file.type.startsWith(type.slice(0, -1)))
+      return true;
+    if (type.startsWith(".") && file.name.toLowerCase().endsWith(type))
+      return true;
+  }
+  return false;
+}
+function fileToBase643(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function createPreview(file) {
+  if (file.type.startsWith("image/")) {
+    return URL.createObjectURL(file);
+  }
+  return void 0;
+}
+function useAttachments(config = {}) {
+  const {
+    upload,
+    maxFiles = DEFAULT_MAX_FILES,
+    maxFileSize = DEFAULT_MAX_FILE_SIZE3,
+    allowedFileTypes = DEFAULT_ALLOWED_TYPES3
+  } = config;
+  const [attachments, setAttachments] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const abortControllers = useRef(/* @__PURE__ */ new Map());
+  const fileInputRef = useRef(null);
+  const dragCounter = useRef(0);
+  const uploadFile = useCallback(
+    async (id, file) => {
+      const updateProgress = (progress) => {
+        setAttachments(
+          (prev) => prev.map((a) => a.id === id ? { ...a, progress } : a)
+        );
+      };
+      const markReady = (attachment) => {
+        setAttachments(
+          (prev) => prev.map(
+            (a) => a.id === id ? { ...a, status: "ready", progress: 100, attachment } : a
+          )
+        );
+      };
+      const markError = (error) => {
+        setAttachments(
+          (prev) => prev.map(
+            (a) => a.id === id ? { ...a, status: "error", error } : a
+          )
+        );
+      };
+      try {
+        const controller = new AbortController();
+        abortControllers.current.set(id, controller);
+        let result;
+        if (isTextFile(file)) {
+          updateProgress(50);
+          const textContent = await readFileAsText(file);
+          result = {
+            type: "file",
+            data: textContent,
+            mimeType: file.type || "text/plain",
+            filename: file.name
+          };
+          markReady(result);
+          return;
+        }
+        if (typeof upload === "function") {
+          updateProgress(50);
+          result = await upload(file);
+        } else if (upload) {
+          const uploadConfig = typeof upload === "string" ? { url: upload } : upload;
+          const extraHeaders = typeof uploadConfig.headers === "function" ? uploadConfig.headers() : uploadConfig.headers;
+          const extraBody = typeof uploadConfig.body === "function" ? uploadConfig.body() : uploadConfig.body;
+          const base64 = await fileToBase643(file);
+          updateProgress(30);
+          const body = JSON.stringify({
+            data: base64,
+            mimeType: file.type,
+            filename: file.name,
+            ...extraBody
+          });
+          const res = await fetch(uploadConfig.url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", ...extraHeaders },
+            body,
+            signal: controller.signal
+          });
+          updateProgress(90);
+          if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
+          const json = await res.json();
+          const url = json.url ?? json.data?.url;
+          if (!url) throw new Error("Upload returned no URL");
+          result = {
+            type: getAttachmentType3(file.type),
+            url,
+            mimeType: file.type,
+            filename: file.name
+          };
+        } else {
+          updateProgress(50);
+          const data = await fileToBase643(file);
+          result = {
+            type: getAttachmentType3(file.type),
+            data,
+            mimeType: file.type,
+            filename: file.name
+          };
+        }
+        markReady(result);
+      } catch (err) {
+        if (err?.name === "AbortError") return;
+        markError(err?.message ?? "Upload failed");
+      } finally {
+        abortControllers.current.delete(id);
+      }
+    },
+    [upload]
+  );
+  const addFiles = useCallback(
+    (files) => {
+      const fileArray = Array.from(files);
+      const remaining = maxFiles - attachments.length;
+      if (remaining <= 0) return;
+      const toAdd = fileArray.slice(0, remaining);
+      const newAttachments = [];
+      for (const file of toAdd) {
+        if (!isTypeAllowed(file, allowedFileTypes)) continue;
+        if (file.size > maxFileSize) continue;
+        const id = generateId();
+        const preview = createPreview(file);
+        newAttachments.push({
+          id,
+          file,
+          preview,
+          status: "uploading",
+          progress: 0
+        });
+      }
+      if (newAttachments.length === 0) return;
+      setAttachments((prev) => [...prev, ...newAttachments]);
+      for (const att of newAttachments) {
+        uploadFile(att.id, att.file);
+      }
+    },
+    [attachments.length, maxFiles, maxFileSize, allowedFileTypes, uploadFile]
+  );
+  const removeAttachment = useCallback((id) => {
+    setAttachments((prev) => {
+      const att = prev.find((a) => a.id === id);
+      if (att?.preview) URL.revokeObjectURL(att.preview);
+      return prev.filter((a) => a.id !== id);
+    });
+    const controller = abortControllers.current.get(id);
+    if (controller) {
+      controller.abort();
+      abortControllers.current.delete(id);
+    }
+  }, []);
+  const cancelUpload = useCallback(
+    (id) => {
+      removeAttachment(id);
+    },
+    [removeAttachment]
+  );
+  const retryUpload = useCallback(
+    (id) => {
+      setAttachments(
+        (prev) => prev.map(
+          (a) => a.id === id ? {
+            ...a,
+            status: "uploading",
+            progress: 0,
+            error: void 0
+          } : a
+        )
+      );
+      const att = attachments.find((a) => a.id === id);
+      if (att) uploadFile(id, att.file);
+    },
+    [attachments, uploadFile]
+  );
+  const clearAll = useCallback(() => {
+    for (const att of attachments) {
+      if (att.preview) URL.revokeObjectURL(att.preview);
+    }
+    for (const controller of abortControllers.current.values()) {
+      controller.abort();
+    }
+    abortControllers.current.clear();
+    setAttachments([]);
+  }, [attachments]);
+  const getReadyAttachments = useCallback(() => {
+    return attachments.filter((a) => a.status === "ready" && a.attachment).map((a) => a.attachment);
+  }, [attachments]);
+  const hasAttachments = attachments.length > 0;
+  const isUploading = attachments.some((a) => a.status === "uploading");
+  const canSend = hasAttachments && attachments.some((a) => a.status === "ready") && !isUploading;
+  const dragHandlers = useMemo(
+    () => ({
+      onDragEnter: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current++;
+        if (e.dataTransfer.types.includes("Files")) {
+          setIsDragging(true);
+        }
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onDragLeave: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current--;
+        if (dragCounter.current === 0) {
+          setIsDragging(false);
+        }
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current = 0;
+        setIsDragging(false);
+        if (e.dataTransfer.files?.length) {
+          addFiles(e.dataTransfer.files);
+        }
+      }
+    }),
+    [addFiles]
+  );
+  const openFilePicker = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const onFileInputChange = useCallback(
+    (e) => {
+      if (e.target.files?.length) {
+        addFiles(e.target.files);
+      }
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    },
+    [addFiles]
+  );
+  return {
+    attachments,
+    isDragging,
+    addFiles,
+    removeAttachment,
+    cancelUpload,
+    retryUpload,
+    clearAll,
+    getReadyAttachments,
+    hasAttachments,
+    isUploading,
+    canSend,
+    dragHandlers,
+    openFilePicker,
+    fileInputRef,
+    onFileInputChange
+  };
+}
+var svgProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function ImageIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps, className, children: [
+    /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+  ] });
+}
+function FileTextIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps, className, children: [
+    /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 17H8" })
+  ] });
+}
+function MusicIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps, className, children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+  ] });
+}
+function VideoIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps, className, children: [
+    /* @__PURE__ */ jsx("path", { d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.934a.5.5 0 0 0-.777-.416L16 11" }),
+    /* @__PURE__ */ jsx("rect", { width: "14", height: "12", x: "2", y: "6", rx: "2" })
+  ] });
+}
+function XIcon3({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps, className, children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+  ] });
+}
+function RefreshCwIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { ...svgProps, className, children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
+  ] });
+}
+function Loader2Icon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps, className, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function CheckIcon4({ className }) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps, className, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function FileTypeIcon({ mimeType }) {
+  const cls = "size-3.5";
+  if (mimeType.startsWith("image/")) return /* @__PURE__ */ jsx(ImageIcon, { className: cls });
+  if (mimeType.startsWith("audio/")) return /* @__PURE__ */ jsx(MusicIcon, { className: cls });
+  if (mimeType.startsWith("video/")) return /* @__PURE__ */ jsx(VideoIcon, { className: cls });
+  return /* @__PURE__ */ jsx(FileTextIcon, { className: cls });
+}
+function StatusBadge2({ status }) {
+  if (status === "uploading") {
+    return /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 animate-spin text-blue-400" });
+  }
+  if (status === "ready") {
+    return /* @__PURE__ */ jsx(CheckIcon4, { className: "size-3 text-emerald-400" });
+  }
+  return null;
+}
+function AttachmentCard({
+  attachment,
+  onRemove,
+  onRetry
+}) {
+  const { id, file, preview, status, progress, error } = attachment;
+  const isError = status === "error";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        csdk-attachment-card group relative flex items-center gap-1.5
+        rounded-lg border px-2 py-1.5 min-w-0 max-w-[160px]
+        transition-colors duration-150
+        ${isError ? "border-red-500/30 bg-red-500/5" : "border-border/60 bg-muted/40 hover:bg-muted/60"}
+      `,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-7 rounded shrink-0 overflow-hidden bg-muted/60 flex items-center justify-center", children: preview ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: preview,
+            alt: file.name,
+            className: "size-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx(FileTypeIcon, { mimeType: file.type }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium truncate leading-tight text-foreground/80", children: file.name }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 mt-0.5", children: isError ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onRetry(id),
+              className: "flex items-center gap-0.5 text-[9px] text-red-400 hover:text-red-300 cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-2.5" }),
+                "Retry"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(StatusBadge2, { status }),
+            /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground", children: status === "uploading" ? `${progress}%` : formatBytes(file.size) })
+          ] }) })
+        ] }),
+        status === "uploading" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] rounded-b-lg overflow-hidden bg-muted/40", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full bg-blue-500 transition-[width] duration-300 ease-out",
+            style: { width: `${progress}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onRemove(id),
+            className: "\n          size-4 rounded-full shrink-0 flex items-center justify-center\n          text-muted-foreground/50 hover:text-foreground hover:bg-muted\n          transition-colors cursor-pointer\n        ",
+            "aria-label": "Remove attachment",
+            children: /* @__PURE__ */ jsx(XIcon3, { className: "size-2.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function AttachmentStrip({
+  attachments,
+  onRemove,
+  onRetry,
+  className = ""
+}) {
+  if (attachments.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `csdk-attachment-strip flex gap-1.5 overflow-x-auto px-1 py-1.5 scrollbar-none ${className}`,
+      children: attachments.map((att) => /* @__PURE__ */ jsx(
+        AttachmentCard,
+        {
+          attachment: att,
+          onRemove,
+          onRetry
+        },
+        att.id
+      ))
+    }
+  );
+}
+var svgProps2 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function PaperclipIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps2, className, children: /* @__PURE__ */ jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+}
+function DropZoneOverlay({
+  isDragging,
+  className = ""
+}) {
+  if (!isDragging) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        csdk-drop-zone absolute inset-0 z-50 flex items-center justify-center
+        bg-background/80 backdrop-blur-sm border-2 border-dashed border-primary/40
+        rounded-xl pointer-events-none
+        ${className}
+      `,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-primary/70", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Drop files to attach" })
+      ] })
+    }
+  );
+}
 
 // src/ui/index.ts
 var ChatPrimitives = {
@@ -6923,6 +7869,6 @@ var ChatPrimitives = {
   Loader
 };
 
-export { AlertTriangleIcon, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
+export { AlertTriangleIcon, AttachmentStrip, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, DropZoneOverlay, FeedbackBar, FollowUpQuestions, InlineToolSteps, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, parseFollowUps, resultsToCitations, useAttachments, useChatContainer, useCopilotChatContext, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map