@puckeditor/plugin-ai 0.9.0-canary.9a2a27cf → 0.9.0-canary.9ff9b8a5

package/dist/index.js

@@ -995,7 +995,7 @@ function useChat({
 // src/components/Chat/index.tsx
 var import_core5 = require("@puckeditor/core");
 var import_ai5 = require("ai");
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_ulid = require("ulid");
 
 // ../utils/lib/get-class-name-factory.ts
@@ -1038,7 +1038,7 @@ var styles_module_default = { "Chat": "_Chat_1ei0a_1", "Chat-header": "_Chat-hea
 
 // src/components/ChatBody/index.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_use_stick_to_bottom = require("use-stick-to-bottom");
 var import_react_markdown = __toESM(require("react-markdown"));
 
@@ -1814,6 +1814,42 @@ var matchesAccept = (file, accept) => {
     return file.type === entry;
   });
 };
+var documentExtensionByMediaType = {
+  "application/msword": "doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "text/markdown": "md",
+  "application/pdf": "pdf",
+  "text/plain": "txt"
+};
+var mediaTypeToExtension = (mediaType) => {
+  const mapped = documentExtensionByMediaType[mediaType];
+  if (mapped) {
+    return mapped;
+  }
+  const subtype = mediaType.split("/")[1] ?? "";
+  return subtype.split("+")[0] || "bin";
+};
+var getFilesFromClipboard = (data) => {
+  const files = [];
+  for (const item of data.items ? Array.from(data.items) : []) {
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      if (file) {
+        files.push(file);
+      }
+    }
+  }
+  if (files.length === 0 && data.files) {
+    files.push(...Array.from(data.files));
+  }
+  return files.map(
+    (file, index) => file.name ? file : new File(
+      [file],
+      `pasted-${Date.now()}-${index}.${mediaTypeToExtension(file.type)}`,
+      { type: file.type }
+    )
+  );
+};
 var getAttachmentIdFromRef = (url) => url.startsWith("attachment://") ? url.slice("attachment://".length) : null;
 var resolveAttachmentUrl = (url, attachmentEndpoint) => {
   if (!attachmentEndpoint) {
@@ -1825,6 +1861,20 @@ var resolveAttachmentUrl = (url, attachmentEndpoint) => {
   }
   return `${attachmentEndpoint.replace(/\/$/, "")}/${attachmentId}`;
 };
+var fetchAttachmentUrl = async (endpoint, signal) => {
+  const response = await fetch(endpoint, { redirect: "manual", signal });
+  if (response.type === "opaqueredirect" || response.status >= 300 && response.status < 400) {
+    return endpoint;
+  }
+  if (!response.ok) {
+    throw new Error(`Attachment URL request failed with ${response.status}`);
+  }
+  const { url } = await response.json();
+  if (typeof url !== "string" || !url) {
+    throw new Error("Attachment URL response did not include a url");
+  }
+  return url;
+};
 var isInternalMessage = (text) => text.startsWith(INTERNAL_MESSAGE_PREFIX);
 var truncateFilename = (name, max = 25) => {
   if (name.length <= max) return name;
@@ -1896,6 +1946,16 @@ function PromptForm({
     },
     [canDrop, onFileDrop]
   );
+  const handlePaste = (0, import_react19.useCallback)(
+    (e) => {
+      if (!canDrop) return;
+      const files = getFilesFromClipboard(e.clipboardData);
+      if (files.length === 0) return;
+      e.preventDefault();
+      onFileDrop(files);
+    },
+    [canDrop, onFileDrop]
+  );
   (0, import_react19.useEffect)(() => {
     setPrompt(value);
   }, [setPrompt, value]);
@@ -1997,6 +2057,7 @@ function PromptForm({
                       internalRef.current = node;
                     },
                     onChange: (e) => setPrompt(e.target.value),
+                    onPaste: onFileDrop ? handlePaste : void 0,
                     onKeyDown: (e) => {
                       if (!e.shiftKey && e.key === "Enter") {
                         e.preventDefault();
@@ -2064,6 +2125,35 @@ var HostProvider = hostContext.Provider;
 var subagentStateContext = (0, import_react20.createContext)({});
 var SubagentStateProvider = subagentStateContext.Provider;
 
+// src/lib/use-attachment-url.ts
+init_react_import();
+var import_react21 = require("react");
+function useAttachmentUrl(url, endpoint) {
+  const isRef = getAttachmentIdFromRef(url) !== null;
+  const [fetched, setFetched] = (0, import_react21.useState)();
+  (0, import_react21.useEffect)(() => {
+    if (!isRef) return;
+    const controller = new AbortController();
+    const loadUrl = async () => {
+      try {
+        const resolved = await fetchAttachmentUrl(
+          resolveAttachmentUrl(url, endpoint),
+          controller.signal
+        );
+        setFetched({ ref: url, url: resolved });
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error("Failed to load attachment:", error);
+        }
+      }
+    };
+    loadUrl();
+    return () => controller.abort();
+  }, [isRef, url, endpoint]);
+  if (!isRef) return url;
+  return fetched?.ref === url ? fetched.url : void 0;
+}
+
 // src/components/ChatBody/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var cx8 = getClassNameFactory2("Chat", styles_module_default7);
@@ -2167,7 +2257,7 @@ function mergeReasoningParts(parts) {
 }
 function ChatMessage({ message }) {
   const { role, parts: rawParts } = message;
-  const parts = (0, import_react21.useMemo)(() => mergeReasoningParts(rawParts), [rawParts]);
+  const parts = (0, import_react22.useMemo)(() => mergeReasoningParts(rawParts), [rawParts]);
   if (role === "user") {
     const attachmentParts = parts.filter((part) => part.type === "file");
     const otherParts = parts.filter((part) => part.type !== "file");
@@ -2219,9 +2309,9 @@ function ChatAttachmentThumbnail({
   mediaType,
   url
 }) {
-  const host = (0, import_react21.useContext)(hostContext);
+  const host = (0, import_react22.useContext)(hostContext);
   const endpoint = host ? `${host.replace(/\/$/, "")}/attachments` : "/api/puck/chat/attachments";
-  const resolvedUrl = resolveAttachmentUrl(url, endpoint);
+  const resolvedUrl = useAttachmentUrl(url, endpoint);
   const attachmentId = getAttachmentIdFromRef(url);
   const label = filename || attachmentId || "Attachment";
   const isImage = mediaType.startsWith("image/");
@@ -2235,7 +2325,7 @@ function ChatAttachmentThumbnail({
       target: "_blank",
       title: label,
       children: [
-        isImage ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { alt: label, src: resolvedUrl }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FileText, { size: 20 }),
+        isImage ? resolvedUrl && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { alt: label, src: resolvedUrl }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FileText, { size: 20 }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cxMessage("thumbnailLabel"), children: label })
       ]
     }
@@ -2256,12 +2346,12 @@ function ChatMessageWrapper({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children });
 }
 function ReasoningBlock({ part }) {
-  const startTimeRef = (0, import_react21.useRef)(null);
-  const [durationSecs, setDurationSecs] = (0, import_react21.useState)(null);
+  const startTimeRef = (0, import_react22.useRef)(null);
+  const [durationSecs, setDurationSecs] = (0, import_react22.useState)(null);
   if (part.state !== "done" && startTimeRef.current === null) {
     startTimeRef.current = Date.now();
   }
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (part.state === "done" && startTimeRef.current !== null) {
       setDurationSecs(Math.round((Date.now() - startTimeRef.current) / 1e3));
     }
@@ -2313,13 +2403,13 @@ function ChatAttachment({
   mediaType,
   url
 }) {
-  const host = (0, import_react21.useContext)(hostContext);
+  const host = (0, import_react22.useContext)(hostContext);
   const endpoint = host ? `${host.replace(/\/$/, "")}/attachments` : "/api/puck/chat/attachments";
-  const resolvedUrl = resolveAttachmentUrl(url, endpoint);
+  const resolvedUrl = useAttachmentUrl(url, endpoint);
   const attachmentId = getAttachmentIdFromRef(url);
   const label = filename || attachmentId || "Attachment";
   if (mediaType.startsWith("image/")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cxMessage("attachmentImage"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: resolvedUrl, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { alt: label, src: resolvedUrl }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cxMessage("attachmentImage"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: resolvedUrl, target: "_blank", rel: "noreferrer", children: resolvedUrl && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { alt: label, src: resolvedUrl }) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cxMessage("attachmentFile"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("a", { href: resolvedUrl, target: "_blank", rel: "noreferrer", children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FileText, { size: 16 }),
@@ -2332,10 +2422,10 @@ function PuckTool({
   defaultLabel = "Thinking...",
   type
 }) {
-  const toolStatus = (0, import_react21.useContext)(toolStatusContext)[toolCallId];
+  const toolStatus = (0, import_react22.useContext)(toolStatusContext)[toolCallId];
   const outputObj = output;
   const status = outputObj && "status" in outputObj ? outputObj.status : toolStatus ?? { loading: true, label: defaultLabel };
-  let icon = (0, import_react21.useMemo)(() => {
+  let icon = (0, import_react22.useMemo)(() => {
     if (type === "tool-write") {
       return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Pen, { size: 18 });
     } else if (type === "tool-refreshPageData") {
@@ -2352,16 +2442,16 @@ function PuckTool({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChatEvent, { status, icon });
 }
 function SubagentBlock({ toolCallId }) {
-  const subagentState = (0, import_react21.useContext)(subagentStateContext);
+  const subagentState = (0, import_react22.useContext)(subagentStateContext);
   const state = subagentState[toolCallId];
-  const toolStatusMap = (0, import_react21.useContext)(toolStatusContext);
+  const toolStatusMap = (0, import_react22.useContext)(toolStatusContext);
   const toolStatus = toolStatusMap[toolCallId];
   const fallbackLabel = toolStatus?.label ?? "Running subagent";
   const label = state?.label ? state.state === "done" ? `${state.agentType} subagent complete` : state.label : fallbackLabel;
   const loading = state ? state.state !== "done" : toolStatus?.loading ?? true;
   const hasBody = !!state && state.parts.length > 0;
   const parts = state?.parts ?? [];
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "details",
     {
@@ -2420,7 +2510,7 @@ function ChatEvent({
   status,
   icon = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Check, { size: 18 })
 }) {
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "details",
     {
@@ -2545,7 +2635,7 @@ var import_core4 = require("@puckeditor/core");
 // src/lib/design/component.tsx
 init_react_import();
 var import_core3 = require("@puckeditor/core");
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/lib/morph-html.ts
 init_react_import();
@@ -3658,7 +3748,7 @@ var wireArrayItemEditing = ({
 // src/lib/design/render-html.tsx
 init_react_import();
 var import_htmlparser22 = require("htmlparser2");
-var import_react22 = require("react");
+var import_react23 = require("react");
 var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "area",
   "base",
@@ -3721,7 +3811,7 @@ var nodeToReact = (node, slots, key) => {
       if (isEventHandlerAttr2(name)) continue;
       props2[REACT_PROP_NAMES[name] || name] = value;
     }
-    return (0, import_react22.createElement)(tag, props2, slots[slotName]);
+    return (0, import_react23.createElement)(tag, props2, slots[slotName]);
   }
   const props = { key };
   for (const [name, value] of Object.entries(attribs)) {
@@ -3733,10 +3823,10 @@ var nodeToReact = (node, slots, key) => {
     }
   }
   if (VOID_ELEMENTS.has(tag)) {
-    return (0, import_react22.createElement)(tag, props);
+    return (0, import_react23.createElement)(tag, props);
   }
   const children = el.children.map((child, i) => nodeToReact(child, slots, i)).filter((c) => c !== null);
-  return (0, import_react22.createElement)(tag, props, ...children);
+  return (0, import_react23.createElement)(tag, props, ...children);
 };
 var htmlToReactTree = (html, slots) => {
   if (!html) return null;
@@ -3744,12 +3834,12 @@ var htmlToReactTree = (html, slots) => {
   const children = doc.children.map((child, i) => nodeToReact(child, slots, i)).filter((c) => c !== null);
   if (children.length === 0) return null;
   if (children.length === 1) return children[0];
-  return (0, import_react22.createElement)(import_react22.Fragment, null, ...children);
+  return (0, import_react23.createElement)(import_react23.Fragment, null, ...children);
 };
 
 // src/lib/design/slot-portal.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var parseInlineStyle = (cssText) => {
@@ -3773,13 +3863,13 @@ var SlotPortal = ({
   slotClassName,
   SlotContent
 }) => {
-  const [target, setTarget] = (0, import_react23.useState)(null);
-  const lastTarget = (0, import_react23.useRef)(null);
-  const style = (0, import_react23.useMemo)(
+  const [target, setTarget] = (0, import_react24.useState)(null);
+  const lastTarget = (0, import_react24.useRef)(null);
+  const style = (0, import_react24.useMemo)(
     () => slotStyle ? parseInlineStyle(slotStyle) : void 0,
     [slotStyle]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const el = entry.querySelector(`[data-puck-slot="${cssEscape(slotName)}"]`);
     if (el !== lastTarget.current) {
       el?.replaceChildren();
@@ -3900,11 +3990,11 @@ function createDesignComponentConfig(registration) {
     style,
     ...props
   }) {
-    const getSnapshot = (0, import_react24.useCallback)(
+    const getSnapshot = (0, import_react25.useCallback)(
       () => registrationStore.get(name) ?? registration,
       []
     );
-    const reg = (0, import_react24.useSyncExternalStore)(
+    const reg = (0, import_react25.useSyncExternalStore)(
       registrationStore.subscribe,
       getSnapshot,
       getSnapshot
@@ -3912,10 +4002,10 @@ function createDesignComponentConfig(registration) {
     const html = reg.html ?? "";
     const styles = reg.styles;
     const script = reg.script;
-    const [entryEl, setEntryEl] = (0, import_react24.useState)(null);
-    const scriptRef = (0, import_react24.useRef)(null);
-    const annotations = (0, import_react24.useMemo)(() => getAnnotations(html), [html]);
-    const { attrFields, arrayFields, attrSig, arraySig } = (0, import_react24.useMemo)(() => {
+    const [entryEl, setEntryEl] = (0, import_react25.useState)(null);
+    const scriptRef = (0, import_react25.useRef)(null);
+    const annotations = (0, import_react25.useMemo)(() => getAnnotations(html), [html]);
+    const { attrFields, arrayFields, attrSig, arraySig } = (0, import_react25.useMemo)(() => {
       const attr = [];
       const arrays = [];
       for (const field of annotations.fields) {
@@ -3937,11 +4027,11 @@ function createDesignComponentConfig(registration) {
         arraySig: JSON.stringify(arrays)
       };
     }, [props, annotations]);
-    const patchedHtml = (0, import_react24.useMemo)(() => {
+    const patchedHtml = (0, import_react25.useMemo)(() => {
       if (puck.isEditing) return html;
       return patchHtmlAnnotations(html, props);
     }, [html, props, puck.isEditing]);
-    const fieldValueAttrs = (0, import_react24.useMemo)(() => {
+    const fieldValueAttrs = (0, import_react25.useMemo)(() => {
       const attrs = {};
       attrs["data-puck-design"] = name;
       for (const field of annotations.fields) {
@@ -3952,17 +4042,17 @@ function createDesignComponentConfig(registration) {
       }
       return attrs;
     }, [annotations, props, puck.isEditing]);
-    const editorEntryNode = (0, import_react24.useMemo)(
+    const editorEntryNode = (0, import_react25.useMemo)(
       () => puck.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: setEntryEl }) : null,
       [puck.isEditing]
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       if (!puck.isEditing || !getPuck) return;
       getPuck().resolveDataById(id, "force");
     }, [reg, puck.isEditing, getPuck, id]);
-    const fieldWiring = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
-    const morphed = (0, import_react24.useRef)(null);
-    (0, import_react24.useLayoutEffect)(() => {
+    const fieldWiring = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+    const morphed = (0, import_react25.useRef)(null);
+    (0, import_react25.useLayoutEffect)(() => {
       if (!puck.isEditing || !entryEl) return;
       if (morphed.current?.el !== entryEl || morphed.current?.html !== html || morphed.current?.attrSig !== attrSig) {
         morphed.current = { el: entryEl, html, attrSig };
@@ -3979,14 +4069,14 @@ function createDesignComponentConfig(registration) {
         });
       }
     });
-    (0, import_react24.useEffect)(
+    (0, import_react25.useEffect)(
       () => () => {
         fieldWiring.current.forEach((cleanup) => cleanup());
         fieldWiring.current.clear();
       },
       []
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       if (!entryEl || !puck.isEditing) return;
       for (const attr of Array.from(entryEl.attributes)) {
         if ((attr.name === "data-puck-design" || attr.name.startsWith("data-puck-field-value-")) && !(attr.name in fieldValueAttrs)) {
@@ -3999,10 +4089,10 @@ function createDesignComponentConfig(registration) {
         }
       }
     }, [entryEl, fieldValueAttrs]);
-    const appliedArrayHtml = (0, import_react24.useRef)(/* @__PURE__ */ new WeakMap());
-    const arrayItemWiring = (0, import_react24.useRef)({});
-    const appliedArrays = (0, import_react24.useRef)(null);
-    (0, import_react24.useEffect)(() => {
+    const appliedArrayHtml = (0, import_react25.useRef)(/* @__PURE__ */ new WeakMap());
+    const arrayItemWiring = (0, import_react25.useRef)({});
+    const appliedArrays = (0, import_react25.useRef)(null);
+    (0, import_react25.useEffect)(() => {
       if (!puck.isEditing || !entryEl || !getPuck) return;
       if (appliedArrays.current?.el === entryEl && appliedArrays.current?.html === html && appliedArrays.current?.sig === arraySig) {
         return;
@@ -4054,7 +4144,7 @@ function createDesignComponentConfig(registration) {
       id,
       getPuck
     ]);
-    (0, import_react24.useEffect)(
+    (0, import_react25.useEffect)(
       () => () => {
         Object.values(arrayItemWiring.current).forEach(
           (wiring) => wiring.forEach(({ cleanup }) => cleanup())
@@ -4062,7 +4152,7 @@ function createDesignComponentConfig(registration) {
       },
       []
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       if (!script || !entryEl) return;
       scriptRef.current?.remove();
       const doc = entryEl.ownerDocument;
@@ -4117,7 +4207,7 @@ function createDesignComponentConfig(registration) {
 
 // src/lib/design/globals.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function getDynamicConfigGlobals(dynamicConfig) {
   if (typeof dynamicConfig !== "object" || dynamicConfig === null) return {};
@@ -4133,9 +4223,9 @@ function DesignGlobals({
   script,
   isEditing
 }) {
-  const scriptRef = (0, import_react25.useRef)(null);
-  const hostRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const scriptRef = (0, import_react26.useRef)(null);
+  const hostRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     if (!script) return;
     scriptRef.current?.remove();
     const doc = hostRef.current?.ownerDocument ?? document;
@@ -4473,6 +4563,14 @@ var getDocumentSize = (root) => {
   };
 };
 
+// src/lib/screenshot-overflow.ts
+init_react_import();
+var applyBrowserOverflowStylesTo = (document2) => {
+  for (const element of [document2.documentElement, document2.body]) {
+    element?.style.setProperty("overflow", "visible", "important");
+  }
+};
+
 // src/lib/capture-screenshot.ts
 var editorOnlyClassPrefixes = ["_DraggableComponent--hover", "_ActionBar"];
 var releaseCanvas = (canvas) => {
@@ -4541,6 +4639,7 @@ var captureScreenshot = async (root, { scale = CAPTURE_SCALE, quality = 0.8, wid
     allowTaint: false,
     useCORS: true,
     scrollY: 0,
+    onclone: applyBrowserOverflowStylesTo,
     ignoreElements: (el) => Array.from(el.classList).some(
       (c) => editorOnlyClassPrefixes.some((prefix) => c.startsWith(prefix))
     )
@@ -4575,7 +4674,7 @@ var q = (0, import_qler.default)();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
 var CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE = "Unable to verify the page data. Please enable the `/chat/tool` endpoint on the server and try again.";
-var PLUGIN_AI_VERSION = true ? "0.9.0-canary.9a2a27cf" : "unknown";
+var PLUGIN_AI_VERSION = true ? "0.9.0-canary.9ff9b8a5" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4598,32 +4697,32 @@ function Chat2(props) {
   } = chat ?? {};
   const puckDispatch = usePuck((s) => s.dispatch);
   const getPuck = (0, import_core5.useGetPuck)();
-  const localChatId = (0, import_react27.useRef)("");
-  const inputRef = (0, import_react27.useRef)(null);
-  const pluginRef = (0, import_react27.useRef)(null);
-  const [mode, setMode] = (0, import_react27.useState)(defaultMode);
-  const modeRef = (0, import_react27.useRef)(mode);
+  const localChatId = (0, import_react28.useRef)("");
+  const inputRef = (0, import_react28.useRef)(null);
+  const pluginRef = (0, import_react28.useRef)(null);
+  const [mode, setMode] = (0, import_react28.useState)(defaultMode);
+  const modeRef = (0, import_react28.useRef)(mode);
   const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     modeRef.current = mode;
   }, [mode]);
   const puckData = usePuck((s) => s.appState.data);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     syncDesignComponents(getPuck);
   }, [puckData, getPuck]);
-  const [error, setError] = (0, import_react27.useState)();
-  const [userError, setUserError] = (0, import_react27.useState)();
-  const clientToolEndpointUnavailableRef = (0, import_react27.useRef)(false);
-  const stopChatRef = (0, import_react27.useRef)(null);
-  const [composerAttachments, setComposerAttachments] = (0, import_react27.useState)([]);
-  const removedAttachmentClientIdsRef = (0, import_react27.useRef)(/* @__PURE__ */ new Set());
-  const uploadControllersRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
-  const pendingBuildOpsRef = (0, import_react27.useRef)([]);
-  const lastStreamActivityRef = (0, import_react27.useRef)(0);
-  const hiddenSinceRef = (0, import_react27.useRef)(null);
-  const [toolStatus, setToolStatus] = (0, import_react27.useState)({});
-  const [subagentState, setSubagentState] = (0, import_react27.useState)({});
-  const attachmentConfig = (0, import_react27.useMemo)(
+  const [error, setError] = (0, import_react28.useState)();
+  const [userError, setUserError] = (0, import_react28.useState)();
+  const clientToolEndpointUnavailableRef = (0, import_react28.useRef)(false);
+  const stopChatRef = (0, import_react28.useRef)(null);
+  const [composerAttachments, setComposerAttachments] = (0, import_react28.useState)([]);
+  const removedAttachmentClientIdsRef = (0, import_react28.useRef)(/* @__PURE__ */ new Set());
+  const uploadControllersRef = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
+  const pendingBuildOpsRef = (0, import_react28.useRef)([]);
+  const lastStreamActivityRef = (0, import_react28.useRef)(0);
+  const hiddenSinceRef = (0, import_react28.useRef)(null);
+  const [toolStatus, setToolStatus] = (0, import_react28.useState)({});
+  const [subagentState, setSubagentState] = (0, import_react28.useState)({});
+  const attachmentConfig = (0, import_react28.useMemo)(
     () => ({
       accept: attachments?.accept ?? defaultAttachmentAccept,
       enabled: attachments?.enabled ?? true,
@@ -4633,14 +4732,14 @@ function Chat2(props) {
     }),
     [attachments, host]
   );
-  (0, import_react27.useEffect)(
+  (0, import_react28.useEffect)(
     () => () => {
       uploadControllersRef.current.forEach((controller) => controller.abort());
       uploadControllersRef.current.clear();
     },
     []
   );
-  const deleteAttachment = (0, import_react27.useCallback)(
+  const deleteAttachment = (0, import_react28.useCallback)(
     async (attachmentId) => {
       try {
         await fetch(`${attachmentConfig.endpoint}/${attachmentId}`, {
@@ -4652,7 +4751,7 @@ function Chat2(props) {
     },
     [attachmentConfig.endpoint]
   );
-  const uploadScreenshot = (0, import_react27.useCallback)(
+  const uploadScreenshot = (0, import_react28.useCallback)(
     async (width, bucketUrl) => {
       try {
         const iframeDocument = document?.getElementById("preview-frame")?.contentDocument?.documentElement ?? null;
@@ -4707,14 +4806,14 @@ function Chat2(props) {
     BUILD_OP_DEBOUNCE_MS,
     { maxWait: BUILD_OP_DEBOUNCE_MS }
   );
-  const queueBuildOp = (0, import_react27.useCallback)(
+  const queueBuildOp = (0, import_react28.useCallback)(
     (operation) => {
       pendingBuildOpsRef.current.push(operation);
       debouncedFlushBuildOps();
     },
     [debouncedFlushBuildOps]
   );
-  const handleClientToolEndpointUnavailable = (0, import_react27.useCallback)(() => {
+  const handleClientToolEndpointUnavailable = (0, import_react28.useCallback)(() => {
     if (clientToolEndpointUnavailableRef.current) return;
     clientToolEndpointUnavailableRef.current = true;
     setError(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
@@ -4738,7 +4837,7 @@ function Chat2(props) {
     });
     stopChatRef.current?.();
   }, []);
-  const sendClientToolResponse = (0, import_react27.useCallback)(
+  const sendClientToolResponse = (0, import_react28.useCallback)(
     async (body) => {
       try {
         await postClientToolResponse(host, body);
@@ -4748,7 +4847,7 @@ function Chat2(props) {
     },
     [handleClientToolEndpointUnavailable, host]
   );
-  const processData = (0, import_react27.useCallback)(
+  const processData = (0, import_react28.useCallback)(
     (dataPart) => {
       lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
@@ -4777,12 +4876,14 @@ function Chat2(props) {
         }
         case "data-client-request": {
           const { requestId, action } = dataPart.data;
+          const chatId = localChatId.current || void 0;
           if (action === "getPageData") {
             debouncedFlushBuildOps.flush();
             q.wait().then(() => {
               const { appState } = getPuck();
               return sendClientToolResponse({
                 id: requestId,
+                chatId,
                 responses: [{ action, output: appState.data }]
               });
             }).catch((e) => {
@@ -4812,12 +4913,14 @@ function Chat2(props) {
               }
               return sendClientToolResponse({
                 id: requestId,
+                chatId,
                 responses: [{ action, output: { sizeBytes: blob.size } }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
               return sendClientToolResponse({
                 id: requestId,
+                chatId,
                 responses: [{ action, output: { sizeBytes: 0 } }]
               });
             });
@@ -4955,21 +5058,21 @@ function Chat2(props) {
       });
     }
   });
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     stopChatRef.current = stop;
     return () => {
       stopChatRef.current = null;
       stop();
     };
   }, [stop]);
-  const statusRef = (0, import_react27.useRef)(status);
-  (0, import_react27.useEffect)(() => {
+  const statusRef = (0, import_react28.useRef)(status);
+  (0, import_react28.useEffect)(() => {
     statusRef.current = status;
   }, [status]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     lastStreamActivityRef.current = Date.now();
   }, [messages]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const FROZEN_HIDDEN_MS = 3 * 6e4;
     const RESUME_GRACE_MS = 12e3;
     const isStreaming = () => statusRef.current === "streaming" || statusRef.current === "submitted";
@@ -5012,12 +5115,12 @@ function Chat2(props) {
       if (graceTimer) clearTimeout(graceTimer);
     };
   }, [stop]);
-  const [forcedStatus, setForcedStatus] = (0, import_react27.useState)();
-  const resolvedStatus = (0, import_react27.useMemo)(
+  const [forcedStatus, setForcedStatus] = (0, import_react28.useState)();
+  const resolvedStatus = (0, import_react28.useMemo)(
     () => forcedStatus ?? status,
     [status, forcedStatus]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!scrollTrackingId) return;
     dispatchScrollTrackingEvent({
       id: scrollTrackingId,
@@ -5030,7 +5133,7 @@ function Chat2(props) {
       });
     };
   }, [resolvedStatus, scrollTrackingId]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     window.__PUCK_AI = {
       processData,
       setMessages,
@@ -5241,7 +5344,7 @@ function Chat2(props) {
     if (!target?.attachmentId) return;
     await deleteAttachment(target.attachmentId);
   };
-  const messagesWithStatuses = (0, import_react27.useMemo)(() => {
+  const messagesWithStatuses = (0, import_react28.useMemo)(() => {
     return messages.map((msg) => {
       return {
         ...msg,
@@ -5426,8 +5529,8 @@ function AttachmentComposer({
   maxFiles,
   onChange
 }) {
-  const id = (0, import_react27.useId)();
-  const inputId = (0, import_react27.useMemo)(() => `attachment-input-${id}`, []);
+  const id = (0, import_react28.useId)();
+  const inputId = (0, import_react28.useMemo)(() => `attachment-input-${id}`, []);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName18("attachmentControls"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
@@ -5527,7 +5630,7 @@ function isScrolledIntoView(el) {
 
 // src/components/ScrollTracking/ScrollTracking.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/lib/scroll-into-view-local.ts
 init_react_import();
@@ -5550,9 +5653,9 @@ function scrollIntoViewLocal(el, win, behavior = "smooth") {
 
 // src/lib/use-frame-mutation-observer.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 function useFrameMutationObserver(callback) {
-  return (0, import_react28.useCallback)(() => {
+  return (0, import_react29.useCallback)(() => {
     const frame = document?.getElementById(
       "preview-frame"
     );
@@ -5597,9 +5700,9 @@ var ScrollTracking = ({
   children,
   trackingId
 }) => {
-  const followedRefs = (0, import_react29.useRef)([]);
-  const enabledRef = (0, import_react29.useRef)(false);
-  (0, import_react29.useEffect)(() => {
+  const followedRefs = (0, import_react30.useRef)([]);
+  const enabledRef = (0, import_react30.useRef)(false);
+  (0, import_react30.useEffect)(() => {
     return subscribeToScrollTrackingEvents(({ id, enabled }) => {
       if (id !== trackingId) return;
       enabledRef.current = enabled;
@@ -5618,7 +5721,7 @@ var ScrollTracking = ({
       });
     }
   });
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     follow();
   }, [follow]);
   return children;
@@ -5631,7 +5734,7 @@ var import_core7 = require("@puckeditor/core");
 // src/components/ManageComponents/index.tsx
 init_react_import();
 var import_core6 = require("@puckeditor/core");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/ManageComponents/styles.module.css#css-module
 init_react_import();
@@ -5640,7 +5743,7 @@ var styles_module_default10 = { "ManageComponents-cta": "_ManageComponents-cta_x
 // src/components/ManageComponents/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var cx10 = getClassNameFactory2("ManageComponents", styles_module_default10);
-var useRegistrations = () => (0, import_react30.useSyncExternalStore)(
+var useRegistrations = () => (0, import_react31.useSyncExternalStore)(
   registrationStore.subscribe,
   () => registrationStore.getAll(),
   () => registrationStore.getAll()
@@ -5648,9 +5751,9 @@ var useRegistrations = () => (0, import_react30.useSyncExternalStore)(
 function ManageModalContent({ onClose }) {
   const getPuck = (0, import_core6.useGetPuck)();
   const { visible, setVisible } = useModal();
-  const [confirmTarget, setConfirmTarget] = (0, import_react30.useState)(null);
+  const [confirmTarget, setConfirmTarget] = (0, import_react31.useState)(null);
   const entries = useRegistrations();
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!visible) onClose();
   }, [visible, onClose]);
   const handleDelete = (name) => {
@@ -5705,9 +5808,9 @@ function ManageModalContent({ onClose }) {
   ] }) });
 }
 function ManageComponentsCta() {
-  const [open, setOpen] = (0, import_react30.useState)(false);
+  const [open, setOpen] = (0, import_react31.useState)(false);
   const entries = useRegistrations();
-  const handleClose = (0, import_react30.useCallback)(() => setOpen(false), []);
+  const handleClose = (0, import_react31.useCallback)(() => setOpen(false), []);
   if (entries.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("button", { className: cx10("cta"), onClick: () => setOpen(true), type: "button", children: [

package/dist/index.mjs

@@ -999,11 +999,11 @@ import {
 } from "ai";
 import {
   useCallback as useCallback6,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useId as useId3,
   useMemo as useMemo6,
   useRef as useRef13,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { ulid } from "ulid";
 
@@ -1049,10 +1049,10 @@ var styles_module_default = { "Chat": "_Chat_1ei0a_1", "Chat-header": "_Chat-hea
 init_react_import();
 import {
   useContext as useContext3,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo3,
   useRef as useRef9,
-  useState as useState13
+  useState as useState14
 } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 import Markdown from "react-markdown";
@@ -1834,6 +1834,42 @@ var matchesAccept = (file, accept) => {
     return file.type === entry;
   });
 };
+var documentExtensionByMediaType = {
+  "application/msword": "doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "text/markdown": "md",
+  "application/pdf": "pdf",
+  "text/plain": "txt"
+};
+var mediaTypeToExtension = (mediaType) => {
+  const mapped = documentExtensionByMediaType[mediaType];
+  if (mapped) {
+    return mapped;
+  }
+  const subtype = mediaType.split("/")[1] ?? "";
+  return subtype.split("+")[0] || "bin";
+};
+var getFilesFromClipboard = (data) => {
+  const files = [];
+  for (const item of data.items ? Array.from(data.items) : []) {
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      if (file) {
+        files.push(file);
+      }
+    }
+  }
+  if (files.length === 0 && data.files) {
+    files.push(...Array.from(data.files));
+  }
+  return files.map(
+    (file, index) => file.name ? file : new File(
+      [file],
+      `pasted-${Date.now()}-${index}.${mediaTypeToExtension(file.type)}`,
+      { type: file.type }
+    )
+  );
+};
 var getAttachmentIdFromRef = (url) => url.startsWith("attachment://") ? url.slice("attachment://".length) : null;
 var resolveAttachmentUrl = (url, attachmentEndpoint) => {
   if (!attachmentEndpoint) {
@@ -1845,6 +1881,20 @@ var resolveAttachmentUrl = (url, attachmentEndpoint) => {
   }
   return `${attachmentEndpoint.replace(/\/$/, "")}/${attachmentId}`;
 };
+var fetchAttachmentUrl = async (endpoint, signal) => {
+  const response = await fetch(endpoint, { redirect: "manual", signal });
+  if (response.type === "opaqueredirect" || response.status >= 300 && response.status < 400) {
+    return endpoint;
+  }
+  if (!response.ok) {
+    throw new Error(`Attachment URL request failed with ${response.status}`);
+  }
+  const { url } = await response.json();
+  if (typeof url !== "string" || !url) {
+    throw new Error("Attachment URL response did not include a url");
+  }
+  return url;
+};
 var isInternalMessage = (text) => text.startsWith(INTERNAL_MESSAGE_PREFIX);
 var truncateFilename = (name, max = 25) => {
   if (name.length <= max) return name;
@@ -1916,6 +1966,16 @@ function PromptForm({
     },
     [canDrop, onFileDrop]
   );
+  const handlePaste = useCallback4(
+    (e) => {
+      if (!canDrop) return;
+      const files = getFilesFromClipboard(e.clipboardData);
+      if (files.length === 0) return;
+      e.preventDefault();
+      onFileDrop(files);
+    },
+    [canDrop, onFileDrop]
+  );
   useEffect8(() => {
     setPrompt(value);
   }, [setPrompt, value]);
@@ -2017,6 +2077,7 @@ function PromptForm({
                       internalRef.current = node;
                     },
                     onChange: (e) => setPrompt(e.target.value),
+                    onPaste: onFileDrop ? handlePaste : void 0,
                     onKeyDown: (e) => {
                       if (!e.shiftKey && e.key === "Enter") {
                         e.preventDefault();
@@ -2084,6 +2145,35 @@ var HostProvider = hostContext.Provider;
 var subagentStateContext = createContext3({});
 var SubagentStateProvider = subagentStateContext.Provider;
 
+// src/lib/use-attachment-url.ts
+init_react_import();
+import { useEffect as useEffect9, useState as useState13 } from "react";
+function useAttachmentUrl(url, endpoint) {
+  const isRef = getAttachmentIdFromRef(url) !== null;
+  const [fetched, setFetched] = useState13();
+  useEffect9(() => {
+    if (!isRef) return;
+    const controller = new AbortController();
+    const loadUrl = async () => {
+      try {
+        const resolved = await fetchAttachmentUrl(
+          resolveAttachmentUrl(url, endpoint),
+          controller.signal
+        );
+        setFetched({ ref: url, url: resolved });
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error("Failed to load attachment:", error);
+        }
+      }
+    };
+    loadUrl();
+    return () => controller.abort();
+  }, [isRef, url, endpoint]);
+  if (!isRef) return url;
+  return fetched?.ref === url ? fetched.url : void 0;
+}
+
 // src/components/ChatBody/index.tsx
 import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var cx8 = getClassNameFactory2("Chat", styles_module_default7);
@@ -2241,7 +2331,7 @@ function ChatAttachmentThumbnail({
 }) {
   const host = useContext3(hostContext);
   const endpoint = host ? `${host.replace(/\/$/, "")}/attachments` : "/api/puck/chat/attachments";
-  const resolvedUrl = resolveAttachmentUrl(url, endpoint);
+  const resolvedUrl = useAttachmentUrl(url, endpoint);
   const attachmentId = getAttachmentIdFromRef(url);
   const label = filename || attachmentId || "Attachment";
   const isImage = mediaType.startsWith("image/");
@@ -2255,7 +2345,7 @@ function ChatAttachmentThumbnail({
       target: "_blank",
       title: label,
       children: [
-        isImage ? /* @__PURE__ */ jsx29("img", { alt: label, src: resolvedUrl }) : /* @__PURE__ */ jsx29(FileText, { size: 20 }),
+        isImage ? resolvedUrl && /* @__PURE__ */ jsx29("img", { alt: label, src: resolvedUrl }) : /* @__PURE__ */ jsx29(FileText, { size: 20 }),
         /* @__PURE__ */ jsx29("span", { className: cxMessage("thumbnailLabel"), children: label })
       ]
     }
@@ -2277,11 +2367,11 @@ function ChatMessageWrapper({
 }
 function ReasoningBlock({ part }) {
   const startTimeRef = useRef9(null);
-  const [durationSecs, setDurationSecs] = useState13(null);
+  const [durationSecs, setDurationSecs] = useState14(null);
   if (part.state !== "done" && startTimeRef.current === null) {
     startTimeRef.current = Date.now();
   }
-  useEffect9(() => {
+  useEffect10(() => {
     if (part.state === "done" && startTimeRef.current !== null) {
       setDurationSecs(Math.round((Date.now() - startTimeRef.current) / 1e3));
     }
@@ -2335,11 +2425,11 @@ function ChatAttachment({
 }) {
   const host = useContext3(hostContext);
   const endpoint = host ? `${host.replace(/\/$/, "")}/attachments` : "/api/puck/chat/attachments";
-  const resolvedUrl = resolveAttachmentUrl(url, endpoint);
+  const resolvedUrl = useAttachmentUrl(url, endpoint);
   const attachmentId = getAttachmentIdFromRef(url);
   const label = filename || attachmentId || "Attachment";
   if (mediaType.startsWith("image/")) {
-    return /* @__PURE__ */ jsx29("div", { className: cxMessage("attachmentImage"), children: /* @__PURE__ */ jsx29("a", { href: resolvedUrl, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx29("img", { alt: label, src: resolvedUrl }) }) });
+    return /* @__PURE__ */ jsx29("div", { className: cxMessage("attachmentImage"), children: /* @__PURE__ */ jsx29("a", { href: resolvedUrl, target: "_blank", rel: "noreferrer", children: resolvedUrl && /* @__PURE__ */ jsx29("img", { alt: label, src: resolvedUrl }) }) });
   }
   return /* @__PURE__ */ jsx29("div", { className: cxMessage("attachmentFile"), children: /* @__PURE__ */ jsxs16("a", { href: resolvedUrl, target: "_blank", rel: "noreferrer", children: [
     /* @__PURE__ */ jsx29(FileText, { size: 16 }),
@@ -2381,7 +2471,7 @@ function SubagentBlock({ toolCallId }) {
   const loading = state ? state.state !== "done" : toolStatus?.loading ?? true;
   const hasBody = !!state && state.parts.length > 0;
   const parts = state?.parts ?? [];
-  const [isOpen, setIsOpen] = useState13(false);
+  const [isOpen, setIsOpen] = useState14(false);
   return /* @__PURE__ */ jsxs16(
     "details",
     {
@@ -2440,7 +2530,7 @@ function ChatEvent({
   status,
   icon = /* @__PURE__ */ jsx29(Check, { size: 18 })
 }) {
-  const [isOpen, setIsOpen] = useState13(false);
+  const [isOpen, setIsOpen] = useState14(false);
   return /* @__PURE__ */ jsxs16(
     "details",
     {
@@ -2571,11 +2661,11 @@ import {
 } from "@puckeditor/core";
 import {
   useCallback as useCallback5,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useLayoutEffect,
   useMemo as useMemo5,
   useRef as useRef11,
-  useState as useState15,
+  useState as useState16,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
@@ -3781,7 +3871,7 @@ var htmlToReactTree = (html, slots) => {
 
 // src/lib/design/slot-portal.tsx
 init_react_import();
-import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef10, useState as useState14 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef10, useState as useState15 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var parseInlineStyle = (cssText) => {
@@ -3805,13 +3895,13 @@ var SlotPortal = ({
   slotClassName,
   SlotContent
 }) => {
-  const [target, setTarget] = useState14(null);
+  const [target, setTarget] = useState15(null);
   const lastTarget = useRef10(null);
   const style = useMemo4(
     () => slotStyle ? parseInlineStyle(slotStyle) : void 0,
     [slotStyle]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     const el = entry.querySelector(`[data-puck-slot="${cssEscape(slotName)}"]`);
     if (el !== lastTarget.current) {
       el?.replaceChildren();
@@ -3944,7 +4034,7 @@ function createDesignComponentConfig(registration) {
     const html = reg.html ?? "";
     const styles = reg.styles;
     const script = reg.script;
-    const [entryEl, setEntryEl] = useState15(null);
+    const [entryEl, setEntryEl] = useState16(null);
     const scriptRef = useRef11(null);
     const annotations = useMemo5(() => getAnnotations(html), [html]);
     const { attrFields, arrayFields, attrSig, arraySig } = useMemo5(() => {
@@ -3988,7 +4078,7 @@ function createDesignComponentConfig(registration) {
       () => puck.isEditing ? /* @__PURE__ */ jsx32("div", { ref: setEntryEl }) : null,
       [puck.isEditing]
     );
-    useEffect11(() => {
+    useEffect12(() => {
       if (!puck.isEditing || !getPuck) return;
       getPuck().resolveDataById(id, "force");
     }, [reg, puck.isEditing, getPuck, id]);
@@ -4011,14 +4101,14 @@ function createDesignComponentConfig(registration) {
         });
       }
     });
-    useEffect11(
+    useEffect12(
       () => () => {
         fieldWiring.current.forEach((cleanup) => cleanup());
         fieldWiring.current.clear();
       },
       []
     );
-    useEffect11(() => {
+    useEffect12(() => {
       if (!entryEl || !puck.isEditing) return;
       for (const attr of Array.from(entryEl.attributes)) {
         if ((attr.name === "data-puck-design" || attr.name.startsWith("data-puck-field-value-")) && !(attr.name in fieldValueAttrs)) {
@@ -4034,7 +4124,7 @@ function createDesignComponentConfig(registration) {
     const appliedArrayHtml = useRef11(/* @__PURE__ */ new WeakMap());
     const arrayItemWiring = useRef11({});
     const appliedArrays = useRef11(null);
-    useEffect11(() => {
+    useEffect12(() => {
       if (!puck.isEditing || !entryEl || !getPuck) return;
       if (appliedArrays.current?.el === entryEl && appliedArrays.current?.html === html && appliedArrays.current?.sig === arraySig) {
         return;
@@ -4086,7 +4176,7 @@ function createDesignComponentConfig(registration) {
       id,
       getPuck
     ]);
-    useEffect11(
+    useEffect12(
       () => () => {
         Object.values(arrayItemWiring.current).forEach(
           (wiring) => wiring.forEach(({ cleanup }) => cleanup())
@@ -4094,7 +4184,7 @@ function createDesignComponentConfig(registration) {
       },
       []
     );
-    useEffect11(() => {
+    useEffect12(() => {
       if (!script || !entryEl) return;
       scriptRef.current?.remove();
       const doc = entryEl.ownerDocument;
@@ -4149,7 +4239,7 @@ function createDesignComponentConfig(registration) {
 
 // src/lib/design/globals.tsx
 init_react_import();
-import { useEffect as useEffect12, useRef as useRef12 } from "react";
+import { useEffect as useEffect13, useRef as useRef12 } from "react";
 import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function getDynamicConfigGlobals(dynamicConfig) {
   if (typeof dynamicConfig !== "object" || dynamicConfig === null) return {};
@@ -4167,7 +4257,7 @@ function DesignGlobals({
 }) {
   const scriptRef = useRef12(null);
   const hostRef = useRef12(null);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!script) return;
     scriptRef.current?.remove();
     const doc = hostRef.current?.ownerDocument ?? document;
@@ -4505,6 +4595,14 @@ var getDocumentSize = (root) => {
   };
 };
 
+// src/lib/screenshot-overflow.ts
+init_react_import();
+var applyBrowserOverflowStylesTo = (document2) => {
+  for (const element of [document2.documentElement, document2.body]) {
+    element?.style.setProperty("overflow", "visible", "important");
+  }
+};
+
 // src/lib/capture-screenshot.ts
 var editorOnlyClassPrefixes = ["_DraggableComponent--hover", "_ActionBar"];
 var releaseCanvas = (canvas) => {
@@ -4573,6 +4671,7 @@ var captureScreenshot = async (root, { scale = CAPTURE_SCALE, quality = 0.8, wid
     allowTaint: false,
     useCORS: true,
     scrollY: 0,
+    onclone: applyBrowserOverflowStylesTo,
     ignoreElements: (el) => Array.from(el.classList).some(
       (c) => editorOnlyClassPrefixes.some((prefix) => c.startsWith(prefix))
     )
@@ -4607,7 +4706,7 @@ var q = qler();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
 var CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE = "Unable to verify the page data. Please enable the `/chat/tool` endpoint on the server and try again.";
-var PLUGIN_AI_VERSION = true ? "0.9.0-canary.9a2a27cf" : "unknown";
+var PLUGIN_AI_VERSION = true ? "0.9.0-canary.9ff9b8a5" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4633,28 +4732,28 @@ function Chat2(props) {
   const localChatId = useRef13("");
   const inputRef = useRef13(null);
   const pluginRef = useRef13(null);
-  const [mode, setMode] = useState16(defaultMode);
+  const [mode, setMode] = useState17(defaultMode);
   const modeRef = useRef13(mode);
   const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
-  useEffect13(() => {
+  useEffect14(() => {
     modeRef.current = mode;
   }, [mode]);
   const puckData = usePuck((s) => s.appState.data);
-  useEffect13(() => {
+  useEffect14(() => {
     syncDesignComponents(getPuck);
   }, [puckData, getPuck]);
-  const [error, setError] = useState16();
-  const [userError, setUserError] = useState16();
+  const [error, setError] = useState17();
+  const [userError, setUserError] = useState17();
   const clientToolEndpointUnavailableRef = useRef13(false);
   const stopChatRef = useRef13(null);
-  const [composerAttachments, setComposerAttachments] = useState16([]);
+  const [composerAttachments, setComposerAttachments] = useState17([]);
   const removedAttachmentClientIdsRef = useRef13(/* @__PURE__ */ new Set());
   const uploadControllersRef = useRef13(/* @__PURE__ */ new Map());
   const pendingBuildOpsRef = useRef13([]);
   const lastStreamActivityRef = useRef13(0);
   const hiddenSinceRef = useRef13(null);
-  const [toolStatus, setToolStatus] = useState16({});
-  const [subagentState, setSubagentState] = useState16({});
+  const [toolStatus, setToolStatus] = useState17({});
+  const [subagentState, setSubagentState] = useState17({});
   const attachmentConfig = useMemo6(
     () => ({
       accept: attachments?.accept ?? defaultAttachmentAccept,
@@ -4665,7 +4764,7 @@ function Chat2(props) {
     }),
     [attachments, host]
   );
-  useEffect13(
+  useEffect14(
     () => () => {
       uploadControllersRef.current.forEach((controller) => controller.abort());
       uploadControllersRef.current.clear();
@@ -4809,12 +4908,14 @@ function Chat2(props) {
         }
         case "data-client-request": {
           const { requestId, action } = dataPart.data;
+          const chatId = localChatId.current || void 0;
           if (action === "getPageData") {
             debouncedFlushBuildOps.flush();
             q.wait().then(() => {
               const { appState } = getPuck();
               return sendClientToolResponse({
                 id: requestId,
+                chatId,
                 responses: [{ action, output: appState.data }]
               });
             }).catch((e) => {
@@ -4844,12 +4945,14 @@ function Chat2(props) {
               }
               return sendClientToolResponse({
                 id: requestId,
+                chatId,
                 responses: [{ action, output: { sizeBytes: blob.size } }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
               return sendClientToolResponse({
                 id: requestId,
+                chatId,
                 responses: [{ action, output: { sizeBytes: 0 } }]
               });
             });
@@ -4987,7 +5090,7 @@ function Chat2(props) {
       });
     }
   });
-  useEffect13(() => {
+  useEffect14(() => {
     stopChatRef.current = stop;
     return () => {
       stopChatRef.current = null;
@@ -4995,13 +5098,13 @@ function Chat2(props) {
     };
   }, [stop]);
   const statusRef = useRef13(status);
-  useEffect13(() => {
+  useEffect14(() => {
     statusRef.current = status;
   }, [status]);
-  useEffect13(() => {
+  useEffect14(() => {
     lastStreamActivityRef.current = Date.now();
   }, [messages]);
-  useEffect13(() => {
+  useEffect14(() => {
     const FROZEN_HIDDEN_MS = 3 * 6e4;
     const RESUME_GRACE_MS = 12e3;
     const isStreaming = () => statusRef.current === "streaming" || statusRef.current === "submitted";
@@ -5044,12 +5147,12 @@ function Chat2(props) {
       if (graceTimer) clearTimeout(graceTimer);
     };
   }, [stop]);
-  const [forcedStatus, setForcedStatus] = useState16();
+  const [forcedStatus, setForcedStatus] = useState17();
   const resolvedStatus = useMemo6(
     () => forcedStatus ?? status,
     [status, forcedStatus]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     if (!scrollTrackingId) return;
     dispatchScrollTrackingEvent({
       id: scrollTrackingId,
@@ -5062,7 +5165,7 @@ function Chat2(props) {
       });
     };
   }, [resolvedStatus, scrollTrackingId]);
-  useEffect13(() => {
+  useEffect14(() => {
     window.__PUCK_AI = {
       processData,
       setMessages,
@@ -5559,7 +5662,7 @@ function isScrolledIntoView(el) {
 
 // src/components/ScrollTracking/ScrollTracking.tsx
 init_react_import();
-import { useEffect as useEffect14, useRef as useRef14 } from "react";
+import { useEffect as useEffect15, useRef as useRef14 } from "react";
 
 // src/lib/scroll-into-view-local.ts
 init_react_import();
@@ -5631,7 +5734,7 @@ var ScrollTracking = ({
 }) => {
   const followedRefs = useRef14([]);
   const enabledRef = useRef14(false);
-  useEffect14(() => {
+  useEffect15(() => {
     return subscribeToScrollTrackingEvents(({ id, enabled }) => {
       if (id !== trackingId) return;
       enabledRef.current = enabled;
@@ -5650,7 +5753,7 @@ var ScrollTracking = ({
       });
     }
   });
-  useEffect14(() => {
+  useEffect15(() => {
     follow();
   }, [follow]);
   return children;
@@ -5663,7 +5766,7 @@ import { createUsePuck as createUsePuck2 } from "@puckeditor/core";
 // src/components/ManageComponents/index.tsx
 init_react_import();
 import { useGetPuck as useGetPuck5 } from "@puckeditor/core";
-import { useCallback as useCallback8, useEffect as useEffect15, useState as useState17, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useState as useState18, useSyncExternalStore as useSyncExternalStore3 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/ManageComponents/styles.module.css#css-module
 init_react_import();
@@ -5680,9 +5783,9 @@ var useRegistrations = () => useSyncExternalStore3(
 function ManageModalContent({ onClose }) {
   const getPuck = useGetPuck5();
   const { visible, setVisible } = useModal();
-  const [confirmTarget, setConfirmTarget] = useState17(null);
+  const [confirmTarget, setConfirmTarget] = useState18(null);
   const entries = useRegistrations();
-  useEffect15(() => {
+  useEffect16(() => {
     if (!visible) onClose();
   }, [visible, onClose]);
   const handleDelete = (name) => {
@@ -5737,7 +5840,7 @@ function ManageModalContent({ onClose }) {
   ] }) });
 }
 function ManageComponentsCta() {
-  const [open, setOpen] = useState17(false);
+  const [open, setOpen] = useState18(false);
   const entries = useRegistrations();
   const handleClose = useCallback8(() => setOpen(false), []);
   if (entries.length === 0) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.9.0-canary.9a2a27cf",
+  "version": "0.9.0-canary.9ff9b8a5",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": {
     "type": "git",
@@ -52,12 +52,12 @@
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "vitest": "^4.1.11",
-    "@puckeditor/ai-types": "0.9.0-canary.9a2a27cf",
-    "@puckeditor/platform-types": "0.9.0-canary.9a2a27cf",
-    "eslint-config-custom": "0.9.0-canary.9a2a27cf",
-    "reducer": "0.9.0-canary.9a2a27cf",
-    "tsconfig": "0.9.0-canary.9a2a27cf",
-    "tsup-config": "0.9.0-canary.9a2a27cf"
+    "@puckeditor/platform-types": "0.9.0-canary.9ff9b8a5",
+    "eslint-config-custom": "0.9.0-canary.9ff9b8a5",
+    "reducer": "0.9.0-canary.9ff9b8a5",
+    "tsconfig": "0.9.0-canary.9ff9b8a5",
+    "tsup-config": "0.9.0-canary.9ff9b8a5",
+    "@puckeditor/ai-types": "0.9.0-canary.9ff9b8a5"
   },
   "peerDependencies": {
     "@puckeditor/core": "^0",