puckeditor-plugin-ai 0.6.1 → 0.6.3

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PuckAction, Data, Config, Plugin } from '@puckeditor/core';
+import { PuckAction, Data, Config, Plugin } from 'puckeditor-core';
 import { CreateUIMessage, UIMessage, LanguageModelUsage, DataUIPart, ChatStatus } from 'ai';
 
 interface AttachedImage {
@@ -196,7 +196,7 @@ type AiPluginProps = {
     scrollTracking?: boolean;
     prepareRequest?: (opts: RequestOptions) => RequestOptions | Promise<RequestOptions>;
 };
-declare module "@puckeditor/core" {
+declare module "puckeditor-core" {
     interface ComponentMetadata {
         ai?: ComponentAiParams;
     }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PuckAction, Data, Config, Plugin } from '@puckeditor/core';
+import { PuckAction, Data, Config, Plugin } from 'puckeditor-core';
 import { CreateUIMessage, UIMessage, LanguageModelUsage, DataUIPart, ChatStatus } from 'ai';
 
 interface AttachedImage {
@@ -196,7 +196,7 @@ type AiPluginProps = {
     scrollTracking?: boolean;
     prepareRequest?: (opts: RequestOptions) => RequestOptions | Promise<RequestOptions>;
 };
-declare module "@puckeditor/core" {
+declare module "puckeditor-core" {
     interface ComponentMetadata {
         ai?: ComponentAiParams;
     }

package/dist/index.js

@@ -91,7 +91,7 @@ var import_react = __toESM(require("react"));
 
 // index.tsx
 var import_react4 = require("react");
-var import_core = require("@puckeditor/core");
+var import_puckeditor_core = require("puckeditor-core");
 var import_react5 = require("@ai-sdk/react");
 var import_ai = require("ai");
 var import_react_markdown = __toESM(require("react-markdown"));
@@ -274,25 +274,31 @@ var applyArrayDefaults = (oldProps, newProps, fields) => {
     if (field.type === "array") {
       const arrayField = field;
       const arrayFields = arrayField.arrayFields;
-      updatedProps[fieldName] = (updatedProps[fieldName] || []).map((item, index) => {
-        var _a, _b, _c, _d, _e;
-        const newItem = {};
-        const defaultValue = typeof arrayField.defaultItemProps === "function" ? arrayField.defaultItemProps(index) : arrayField.defaultItemProps;
-        for (const arrayFieldName in arrayFields) {
-          const subField = arrayFields[arrayFieldName];
-          if (subField.type === "slot") {
-            newItem[arrayFieldName] = (_d = (_c = item[arrayFieldName]) != null ? _c : (_b = (_a = oldProps[fieldName]) == null ? void 0 : _a[index]) == null ? void 0 : _b[arrayFieldName]) != null ? _d : defaultValue == null ? void 0 : defaultValue[arrayFieldName];
-          } else {
-            newItem[arrayFieldName] = (_e = item[arrayFieldName]) != null ? _e : defaultValue == null ? void 0 : defaultValue[arrayFieldName];
+      updatedProps[fieldName] = (updatedProps[fieldName] || []).map(
+        (item, index) => {
+          var _a, _b, _c, _d, _e;
+          const newItem = {};
+          const defaultValue = typeof arrayField.defaultItemProps === "function" ? arrayField.defaultItemProps(index) : arrayField.defaultItemProps;
+          for (const arrayFieldName in arrayFields) {
+            const subField = arrayFields[arrayFieldName];
+            if (subField.type === "slot") {
+              newItem[arrayFieldName] = (_d = (_c = item[arrayFieldName]) != null ? _c : (_b = (_a = oldProps[fieldName]) == null ? void 0 : _a[index]) == null ? void 0 : _b[arrayFieldName]) != null ? _d : defaultValue == null ? void 0 : defaultValue[arrayFieldName];
+            } else {
+              newItem[arrayFieldName] = (_e = item[arrayFieldName]) != null ? _e : defaultValue == null ? void 0 : defaultValue[arrayFieldName];
+            }
           }
+          return newItem;
         }
-        return newItem;
-      });
+      );
     }
   }
   return updatedProps;
 };
-var dispatchOp = (operation, { getState, dispatchAction, config }) => {
+var dispatchOp = (operation, {
+  getState,
+  dispatchAction,
+  config
+}) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const state = getState();
   try {
@@ -308,7 +314,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
         });
         const existing = getItemById(getState(), operation.id);
         if (!existing) {
-          throw new Error(`Tried to update an item that doesn't exist: ${operation.id}`);
+          throw new Error(
+            `Tried to update an item that doesn't exist: ${operation.id}`
+          );
         }
         const newData = __spreadProps(__spreadValues({}, existing), {
           props: applyArrayDefaults(
@@ -329,7 +337,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
       const selector = getSelectorForId(state, operation.id);
       const existing = getItemById(state, operation.id);
       if (!selector || !existing) {
-        throw new Error(`Tried to update an item that doesn't exist: ${operation.id}`);
+        throw new Error(
+          `Tried to update an item that doesn't exist: ${operation.id}`
+        );
       }
       const newData = __spreadProps(__spreadValues({}, existing), {
         props: applyArrayDefaults(
@@ -358,7 +368,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
     } else if (operation.op === "delete") {
       const selector = getSelectorForId(state, operation.id);
       if (!selector) {
-        throw new Error(`Tried to delete an item that doesn't exist: ${operation.id}`);
+        throw new Error(
+          `Tried to delete an item that doesn't exist: ${operation.id}`
+        );
       }
       dispatchAction({
         type: "remove",
@@ -369,7 +381,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
     } else if (operation.op === "duplicate") {
       const selector = getSelectorForId(state, operation.id);
       if (!selector) {
-        throw new Error(`Tried to duplicate an item that doesn't exist: ${operation.id}`);
+        throw new Error(
+          `Tried to duplicate an item that doesn't exist: ${operation.id}`
+        );
       }
       dispatchAction({
         type: "duplicate",
@@ -380,7 +394,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
     } else if (operation.op === "move") {
       const selector = getSelectorForId(state, operation.id);
       if (!selector) {
-        throw new Error(`Tried to move an item that doesn't exist: ${operation.id}`);
+        throw new Error(
+          `Tried to move an item that doesn't exist: ${operation.id}`
+        );
       }
       dispatchAction({
         type: "move",
@@ -466,10 +482,18 @@ function ExamplePrompt({
   onClick
 }) {
   const El = href ? "a" : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(El, { className: "puck-ai-chatbody-example-prompt", href, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "puck-ai-chatbody-example-prompt-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUp, { size: 16 }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    El,
+    {
+      className: "puck-ai-chatbody-example-prompt",
+      href,
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "puck-ai-chatbody-example-prompt-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUp, { size: 16 }) })
+      ]
+    }
+  );
 }
 function PromptForm({
   handleSubmit,
@@ -499,15 +523,21 @@ function PromptForm({
       setPrompt(initialPrompt);
     }
   }, []);
-  const addImages = (0, import_react4.useCallback)((files) => __async(null, null, function* () {
-    const newImgs = yield filesToAttachedImages(files);
-    if (newImgs.length > 0) {
-      onImagesChange == null ? void 0 : onImagesChange([...images, ...newImgs]);
-    }
-  }), [images, onImagesChange]);
-  const removeImage = (0, import_react4.useCallback)((id) => {
-    onImagesChange == null ? void 0 : onImagesChange(images.filter((img) => img.id !== id));
-  }, [images, onImagesChange]);
+  const addImages = (0, import_react4.useCallback)(
+    (files) => __async(null, null, function* () {
+      const newImgs = yield filesToAttachedImages(files);
+      if (newImgs.length > 0) {
+        onImagesChange == null ? void 0 : onImagesChange([...images, ...newImgs]);
+      }
+    }),
+    [images, onImagesChange]
+  );
+  const removeImage = (0, import_react4.useCallback)(
+    (id) => {
+      onImagesChange == null ? void 0 : onImagesChange(images.filter((img) => img.id !== id));
+    },
+    [images, onImagesChange]
+  );
   const sendPrompt = () => {
     if (isLoading) return;
     if (prompt.trim() || images.length > 0) {
@@ -533,6 +563,13 @@ function PromptForm({
       yield addImages(e.dataTransfer.files);
     }
   });
+  const handlePaste = (e) => __async(null, null, function* () {
+    const items = Array.from(e.clipboardData.items);
+    const imageFiles = items.filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((file) => file !== null);
+    if (imageFiles.length > 0) {
+      yield addImages(imageFiles);
+    }
+  });
   const classNames = [
     "puck-ai-prompt-form",
     glow ? "puck-ai-prompt-form--glow" : "",
@@ -604,6 +641,7 @@ function PromptForm({
                       internalRef.current = node;
                     },
                     onChange: (e) => setPrompt(e.target.value),
+                    onPaste: handlePaste,
                     onKeyDown: (e) => {
                       if (!e.shiftKey && e.key === "Enter") {
                         e.preventDefault();
@@ -773,7 +811,14 @@ function Placeholder({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bot, { size: 24 }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Use AI to build a page using the available blocks" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "puck-ai-chat-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "puck-ai-chat-action", onClick: handleEnterPromptClick, children: "Enter prompt" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "puck-ai-chat-action",
+          onClick: handleEnterPromptClick,
+          children: "Enter prompt"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
@@ -807,7 +852,9 @@ function scrollIntoViewLocal(el, win, behavior = "smooth") {
 function useFrameMutationObserver(callback) {
   return (0, import_react4.useCallback)(() => {
     var _a;
-    const frame = document == null ? void 0 : document.getElementById("preview-frame");
+    const frame = document == null ? void 0 : document.getElementById(
+      "preview-frame"
+    );
     if (!frame) return;
     let observer = null;
     const win = frame.contentWindow;
@@ -860,7 +907,7 @@ function ScrollTracking({ children }) {
   }, [follow]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 }
-var usePuck = (0, import_core.createUsePuck)();
+var usePuck = (0, import_puckeditor_core.createUsePuck)();
 function Chat({
   chat,
   host = "/api/puck/chat",
@@ -868,7 +915,7 @@ function Chat({
 }) {
   const { examplePrompts } = chat != null ? chat : {};
   const puckDispatch = usePuck((s) => s.dispatch);
-  const getPuck = (0, import_core.useGetPuck)();
+  const getPuck = (0, import_puckeditor_core.useGetPuck)();
   const localChatId = (0, import_react4.useRef)("");
   const inputRef = (0, import_react4.useRef)(null);
   const pluginRef = (0, import_react4.useRef)(null);
@@ -966,7 +1013,9 @@ function Chat({
         var _a, _b, _c, _d;
         const puck = getPuck();
         const config = (_a = puck == null ? void 0 : puck.config) != null ? _a : { components: {} };
-        const appState = (_b = puck == null ? void 0 : puck.appState) != null ? _b : { data: { root: { props: {} }, content: [], zones: {} } };
+        const appState = (_b = puck == null ? void 0 : puck.appState) != null ? _b : {
+          data: { root: { props: {} }, content: [], zones: {} }
+        };
         const root = (_c = config.root) != null ? _c : {
           fields: {
             title: {
@@ -1015,7 +1064,11 @@ function Chat({
     onFinish: () => {
       const puck = getPuck();
       if (puck == null ? void 0 : puck.appState) {
-        puckDispatch({ type: "set", state: puck.appState, recordHistory: true });
+        puckDispatch({
+          type: "set",
+          state: puck.appState,
+          recordHistory: true
+        });
       }
     }
   });
@@ -1084,7 +1137,15 @@ function Chat({
         handleSubmit,
         inputRef,
         status: resolvedStatus,
-        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExamplePrompt, { label, href, onClick }, label)),
+        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ExamplePrompt,
+          {
+            label,
+            href,
+            onClick
+          },
+          label
+        )),
         error,
         handleRetry: () => {
           setError("");
@@ -1095,7 +1156,14 @@ function Chat({
         onClearTarget: () => setTargetComponent(null),
         images: attachedImages,
         onImagesChange: setAttachedImages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Placeholder, { dispatch: puckDispatch, inputRef, pluginRef })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Placeholder,
+          {
+            dispatch: puckDispatch,
+            inputRef,
+            pluginRef
+          }
+        )
       }
     ) })
   ] });