@puckeditor/plugin-ai 0.3.2-canary.dfd28529 → 0.4.0-canary.d4331212

package/dist/index.d.mts

@@ -160,6 +160,12 @@ type PuckDataParts = {
             input: any;
         }[];
     };
+    "send-screenshot": {
+        id: string;
+        urls: {
+            [breakpoint: number]: string;
+        }[];
+    };
     page: Data;
 };
 type PuckProviderMetadata = {

package/dist/index.d.ts

@@ -160,6 +160,12 @@ type PuckDataParts = {
             input: any;
         }[];
     };
+    "send-screenshot": {
+        id: string;
+        urls: {
+            [breakpoint: number]: string;
+        }[];
+    };
     page: Data;
 };
 type PuckProviderMetadata = {

package/dist/index.js

@@ -1506,6 +1506,7 @@ var dispatchOp = (operation, {
 };
 
 // src/components/Chat/index.tsx
+var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var q = (0, import_qler.default)();
 var BENCHMARK = false;
@@ -1521,6 +1522,34 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
   const pluginRef = (0, import_react22.useRef)(null);
   const [error, setError] = (0, import_react22.useState)();
   const [toolStatus, setToolStatus] = (0, import_react22.useState)({});
+  const uploadScreenshot = (0, import_react22.useCallback)(
+    async (width, bucketUrl) => {
+      const iframeDocument = document?.getElementById("preview-frame")?.contentDocument?.documentElement ?? null;
+      if (!iframeDocument) return;
+      const canvas = await (0, import_html2canvas_pro.default)(iframeDocument, {
+        scale: 2,
+        backgroundColor: "#ffffff",
+        width,
+        windowWidth: width,
+        foreignObjectRendering: false,
+        imageTimeout: 3e4,
+        logging: false,
+        allowTaint: false,
+        useCORS: true,
+        scrollY: 0,
+        ignoreElements: (el) => Array.from(el.classList).some(
+          (c) => c.startsWith("_DraggableComponent--hover") || c.startsWith("_ActionBar")
+        )
+      });
+      const image = canvas.toDataURL("image/webp", 0.8);
+      const blob = await (await fetch(image)).blob();
+      await fetch(bucketUrl, {
+        method: "PUT",
+        body: blob
+      });
+    },
+    []
+  );
   const processData = (0, import_react22.useCallback)(
     (dataPart) => {
       switch (dataPart.type) {
@@ -1561,6 +1590,14 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
           }));
           return;
         }
+        case "data-send-screenshot": {
+          dataPart.data.urls.map((obj) => {
+            const [[key, value]] = Object.entries(obj);
+            const breakpoint = Number(key);
+            uploadScreenshot(breakpoint, value);
+          });
+          return;
+        }
         default:
           console.warn("dataPart without case:", dataPart);
           return;
@@ -1713,7 +1750,7 @@ function Placeholder({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName17("placeholder"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Bot, { size: "24" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Use AI to build a page using your own components" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Use AI to build a page using the available blocks" }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName17("actions"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",

package/dist/index.mjs

@@ -1504,6 +1504,7 @@ var dispatchOp = (operation, {
 };
 
 // src/components/Chat/index.tsx
+import html2canvas from "html2canvas-pro";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var q = qler();
 var BENCHMARK = false;
@@ -1519,6 +1520,34 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
   const pluginRef = useRef8(null);
   const [error, setError] = useState12();
   const [toolStatus, setToolStatus] = useState12({});
+  const uploadScreenshot = useCallback4(
+    async (width, bucketUrl) => {
+      const iframeDocument = document?.getElementById("preview-frame")?.contentDocument?.documentElement ?? null;
+      if (!iframeDocument) return;
+      const canvas = await html2canvas(iframeDocument, {
+        scale: 2,
+        backgroundColor: "#ffffff",
+        width,
+        windowWidth: width,
+        foreignObjectRendering: false,
+        imageTimeout: 3e4,
+        logging: false,
+        allowTaint: false,
+        useCORS: true,
+        scrollY: 0,
+        ignoreElements: (el) => Array.from(el.classList).some(
+          (c) => c.startsWith("_DraggableComponent--hover") || c.startsWith("_ActionBar")
+        )
+      });
+      const image = canvas.toDataURL("image/webp", 0.8);
+      const blob = await (await fetch(image)).blob();
+      await fetch(bucketUrl, {
+        method: "PUT",
+        body: blob
+      });
+    },
+    []
+  );
   const processData = useCallback4(
     (dataPart) => {
       switch (dataPart.type) {
@@ -1559,6 +1588,14 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
           }));
           return;
         }
+        case "data-send-screenshot": {
+          dataPart.data.urls.map((obj) => {
+            const [[key, value]] = Object.entries(obj);
+            const breakpoint = Number(key);
+            uploadScreenshot(breakpoint, value);
+          });
+          return;
+        }
         default:
           console.warn("dataPart without case:", dataPart);
           return;
@@ -1711,7 +1748,7 @@ function Placeholder({
   };
   return /* @__PURE__ */ jsxs14("div", { className: getClassName17("placeholder"), children: [
     /* @__PURE__ */ jsx27(Bot, { size: "24" }),
-    /* @__PURE__ */ jsx27("div", { children: "Use AI to build a page using your own components" }),
+    /* @__PURE__ */ jsx27("div", { children: "Use AI to build a page using the available blocks" }),
     /* @__PURE__ */ jsxs14("div", { className: getClassName17("actions"), children: [
       /* @__PURE__ */ jsx27(
         "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.3.2-canary.dfd28529",
+  "version": "0.4.0-canary.d4331212",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "puckeditor/puck",
   "bugs": "https://github.com/puckeditor/puck/issues",
@@ -28,6 +28,7 @@
   ],
   "dependencies": {
     "ai": "^5.0.29",
+    "html2canvas-pro": "^1.5.13",
     "qler": "^0.6.2",
     "react-markdown": "^10.1.0",
     "react-textarea-autosize": "^8.5.9",
@@ -36,7 +37,7 @@
   },
   "devDependencies": {
     "@ai-sdk/react": "^2.0.29",
-    "@measured/puck": "0.21.0-canary.c0db75c1",
+    "@measured/puck": "0.21.0-canary.17395b2c",
     "@puckeditor/ai-types": "workspace:*",
     "@puckeditor/platform-types": "workspace:*",
     "@types/jest": "^30.0.0",
@@ -53,7 +54,7 @@
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "@measured/puck": "0.21.0-canary.c0db75c1",
+    "@measured/puck": "0.21.0-canary.17395b2c",
     "react": "^18.0.0 || ^19.0.0"
   }
 }