puckeditor-plugin-ai 0.6.0

package/dist/index.mjs

@@ -0,0 +1,1123 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// ../tsup-config/react-import.js
+import React from "react";
+
+// index.tsx
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useContext,
+  createContext,
+  useMemo
+} from "react";
+import { useGetPuck, createUsePuck } from "@puckeditor/core";
+import { useChat } from "@ai-sdk/react";
+import {
+  DefaultChatTransport
+} from "ai";
+import ReactMarkdown from "react-markdown";
+import TextareaAutosize from "react-textarea-autosize";
+import { useStickToBottom } from "use-stick-to-bottom";
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/createLucideIcon.js
+import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && array.indexOf(className) === index;
+}).join(" ");
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/Icon.js
+import { forwardRef, createElement } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      color = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode
+    } = _b, rest = __objRest(_b, [
+      "color",
+      "size",
+      "strokeWidth",
+      "absoluteStrokeWidth",
+      "className",
+      "children",
+      "iconNode"
+    ]);
+    return createElement(
+      "svg",
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, defaultAttributes), {
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className)
+      }), rest),
+      [
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef2(
+    (_a, ref) => {
+      var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+      return createElement2(Icon, __spreadValues({
+        ref,
+        iconNode,
+        className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
+      }, props));
+    }
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/arrow-up.js
+var ArrowUp = createLucideIcon("ArrowUp", [
+  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
+  ["path", { d: "M12 19V5", key: "x0mq9r" }]
+]);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/bot.js
+var Bot = createLucideIcon("Bot", [
+  ["path", { d: "M12 8V4H8", key: "hb8ula" }],
+  ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
+  ["path", { d: "M2 14h2", key: "vft8re" }],
+  ["path", { d: "M20 14h2", key: "4cs60a" }],
+  ["path", { d: "M15 13v2", key: "1xurst" }],
+  ["path", { d: "M9 13v2", key: "rq6x2g" }]
+]);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/check.js
+var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/image.js
+var Image = createLucideIcon("Image", [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
+  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
+  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
+]);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
+var RotateCcw = createLucideIcon("RotateCcw", [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+]);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/triangle-alert.js
+var TriangleAlert = createLucideIcon("TriangleAlert", [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+]);
+
+// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/x.js
+var X = createLucideIcon("X", [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+]);
+
+// index.tsx
+import qler from "qler";
+import { ulid } from "ulid";
+import html2canvas from "html2canvas-pro";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function readFileAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+function filesToAttachedImages(files) {
+  return __async(this, null, function* () {
+    const results = [];
+    for (const file of Array.from(files)) {
+      if (!file.type.startsWith("image/")) continue;
+      const dataUrl = yield readFileAsDataURL(file);
+      results.push({ id: prefixedUlid("img"), dataUrl, name: file.name });
+    }
+    return results;
+  });
+}
+var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
+var q = qler();
+var getSelectorForId = (state, id) => {
+  var _a, _b, _c, _d;
+  const node = (_b = (_a = state == null ? void 0 : state.indexes) == null ? void 0 : _a.nodes) == null ? void 0 : _b[id];
+  if (!node) return void 0;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = (_d = (_c = state.indexes.zones[zoneCompound]) == null ? void 0 : _c.contentIds) == null ? void 0 : _d.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+var getItemById = (state, id) => {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = state == null ? void 0 : state.indexes) == null ? void 0 : _a.nodes) == null ? void 0 : _b[id]) == null ? void 0 : _c.data;
+};
+var applyArrayDefaults = (oldProps, newProps, fields) => {
+  const updatedProps = __spreadValues(__spreadValues({}, oldProps), newProps);
+  for (const fieldName in fields) {
+    const field = fields[fieldName];
+    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];
+          }
+        }
+        return newItem;
+      });
+    }
+  }
+  return updatedProps;
+};
+var dispatchOp = (operation, { getState, dispatchAction, config }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const state = getState();
+  try {
+    if (operation.op === "add") {
+      if (operation.zone) {
+        dispatchAction({
+          type: "insert",
+          destinationIndex: operation.index,
+          destinationZone: operation.zone,
+          componentType: operation.type,
+          id: operation.id,
+          recordHistory: false
+        });
+        const existing = getItemById(getState(), operation.id);
+        if (!existing) {
+          throw new Error(`Tried to update an item that doesn't exist: ${operation.id}`);
+        }
+        const newData = __spreadProps(__spreadValues({}, existing), {
+          props: applyArrayDefaults(
+            existing.props,
+            operation.props,
+            (_b = (_a = config.components[existing.type]) == null ? void 0 : _a.fields) != null ? _b : {}
+          )
+        });
+        dispatchAction({
+          type: "replace",
+          destinationIndex: operation.index,
+          destinationZone: operation.zone,
+          data: newData,
+          recordHistory: false
+        });
+      }
+    } else if (operation.op === "update") {
+      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}`);
+      }
+      const newData = __spreadProps(__spreadValues({}, existing), {
+        props: applyArrayDefaults(
+          existing.props,
+          operation.props,
+          (_d = (_c = config.components[existing.type]) == null ? void 0 : _c.fields) != null ? _d : {}
+        )
+      });
+      dispatchAction({
+        type: "replace",
+        destinationIndex: selector.index,
+        destinationZone: selector.zone,
+        data: newData,
+        recordHistory: false
+      });
+    } else if (operation.op === "updateRoot") {
+      const existing = (_e = state == null ? void 0 : state.data) == null ? void 0 : _e.root;
+      const defaultProps = (_g = (_f = config.root) == null ? void 0 : _f.defaultProps) != null ? _g : {};
+      dispatchAction({
+        type: "replaceRoot",
+        root: __spreadProps(__spreadValues({}, existing), {
+          props: __spreadValues(__spreadValues(__spreadValues({}, defaultProps), existing == null ? void 0 : existing.props), operation.props)
+        }),
+        recordHistory: false
+      });
+    } 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}`);
+      }
+      dispatchAction({
+        type: "remove",
+        zone: selector.zone,
+        index: selector.index,
+        recordHistory: false
+      });
+    } 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}`);
+      }
+      dispatchAction({
+        type: "duplicate",
+        sourceZone: selector.zone,
+        sourceIndex: selector.index,
+        recordHistory: false
+      });
+    } 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}`);
+      }
+      dispatchAction({
+        type: "move",
+        sourceZone: selector.zone,
+        sourceIndex: selector.index,
+        destinationIndex: operation.index,
+        destinationZone: operation.zone,
+        recordHistory: false
+      });
+    } else if (operation.op === "reset") {
+      const defaultRootProps = (_i = (_h = config.root) == null ? void 0 : _h.defaultProps) != null ? _i : {};
+      dispatchAction({
+        type: "setData",
+        data: { content: [], root: defaultRootProps },
+        recordHistory: false
+      });
+    } else {
+      throw new Error(`Unknown operation: ${operation.op}`);
+    }
+  } catch (e) {
+    console.error("Error applying operation, skipping...", operation, e);
+  }
+};
+var toolStatusContext = createContext({});
+var ToolStatusProvider = toolStatusContext.Provider;
+function Loader({ size = 16 }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "puck-ai-loader",
+      style: { width: size, height: size },
+      "aria-label": "loading"
+    }
+  );
+}
+function ToolStatusDisplay({ status }) {
+  return /* @__PURE__ */ jsx("div", { className: "puck-ai-chat-message-data", children: /* @__PURE__ */ jsxs("div", { className: "puck-ai-chat-message-data-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "puck-ai-chat-message-data-icon", children: status.error ? /* @__PURE__ */ jsx(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ jsx(Loader, { size: 16 }) : /* @__PURE__ */ jsx(Check, { size: 18 }) }),
+    /* @__PURE__ */ jsx("div", { children: status.label })
+  ] }) });
+}
+function PuckTool({
+  toolCallId,
+  output,
+  defaultLabel = "Thinking..."
+}) {
+  const toolStatusMap = useContext(toolStatusContext);
+  const contextStatus = toolStatusMap[toolCallId];
+  const outputObj = output;
+  const status = outputObj && "status" in outputObj ? outputObj.status : contextStatus != null ? contextStatus : { loading: true, label: defaultLabel };
+  return /* @__PURE__ */ jsx(ToolStatusDisplay, { status });
+}
+function ChatMessagePart({ part, role }) {
+  if (part.type === "text") {
+    return /* @__PURE__ */ jsx("div", { className: "puck-ai-chat-message-text", children: role === "assistant" || role === "user" ? /* @__PURE__ */ jsx(ReactMarkdown, { children: part.text }) : /* @__PURE__ */ jsx("span", { children: part.text }) });
+  }
+  if (part.type === "tool-createPage" || part.type === "tool-updatePage" || part.type === "tool-userTool") {
+    return /* @__PURE__ */ jsx(PuckTool, __spreadValues({}, part));
+  }
+  return null;
+}
+function ChatMessage({ message }) {
+  const { role, parts } = message;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `puck-ai-chat-message${role === "user" ? " puck-ai-chat-message--user-role" : ""}`,
+      "data-message-id": message.id,
+      children: parts.map((part, i) => /* @__PURE__ */ jsx(
+        ChatMessagePart,
+        {
+          part,
+          role
+        },
+        `${message.id}-${part.type}-${i}`
+      ))
+    }
+  );
+}
+function ExamplePrompt({
+  label,
+  href,
+  onClick
+}) {
+  const El = href ? "a" : "button";
+  return /* @__PURE__ */ jsxs(El, { className: "puck-ai-chatbody-example-prompt", href, onClick, children: [
+    /* @__PURE__ */ jsx("div", { children: label }),
+    /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-example-prompt-arrow", children: /* @__PURE__ */ jsx(ArrowUp, { size: 16 }) })
+  ] });
+}
+function PromptForm({
+  handleSubmit,
+  inputRef,
+  isLoading,
+  glow,
+  placeholder = "What do you want to build?",
+  minRows = 2,
+  maxRows = 5,
+  value = "",
+  images = [],
+  onImagesChange
+}) {
+  const [prompt, setPrompt] = useState(value);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const hasSetInitialPrompt = useRef(false);
+  const internalRef = useRef(null);
+  const fileInputRef = useRef(null);
+  useEffect(() => {
+    setPrompt(value);
+  }, [value]);
+  useEffect(() => {
+    const currentUrl = new URL(location.href);
+    const initialPrompt = currentUrl.searchParams.get("initialPrompt");
+    if (!hasSetInitialPrompt.current && initialPrompt && prompt === "") {
+      hasSetInitialPrompt.current = true;
+      setPrompt(initialPrompt);
+    }
+  }, []);
+  const addImages = 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 = 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) {
+      handleSubmit(prompt);
+    }
+    setPrompt("");
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (e.dataTransfer.types.some((t) => t === "Files")) {
+      setIsDragOver(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+  const handleDrop = (e) => __async(null, null, function* () {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (e.dataTransfer.files.length > 0) {
+      yield addImages(e.dataTransfer.files);
+    }
+  });
+  const classNames = [
+    "puck-ai-prompt-form",
+    glow ? "puck-ai-prompt-form--glow" : "",
+    isLoading ? "puck-ai-prompt-form--is-loading" : "",
+    isDragOver ? "puck-ai-prompt-form--drag-over" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames,
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: /* @__PURE__ */ jsxs("div", { className: "puck-ai-prompt-form-inner", children: [
+        /* @__PURE__ */ jsx("span", { className: "puck-ai-prompt-form-glow" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            multiple: true,
+            style: { display: "none" },
+            onChange: (e) => __async(null, null, function* () {
+              if (e.target.files) {
+                yield addImages(e.target.files);
+                e.target.value = "";
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: (e) => {
+              e.preventDefault();
+              sendPrompt();
+            },
+            children: [
+              images.length > 0 && /* @__PURE__ */ jsx("div", { className: "puck-ai-image-thumbnails", children: images.map((img) => /* @__PURE__ */ jsxs("div", { className: "puck-ai-image-thumbnail", children: [
+                /* @__PURE__ */ jsx("img", { src: img.dataUrl, alt: img.name }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "puck-ai-image-thumbnail-remove",
+                    onClick: () => removeImage(img.id),
+                    title: "Remove image",
+                    children: /* @__PURE__ */ jsx(X, { size: 10 })
+                  }
+                )
+              ] }, img.id)) }),
+              /* @__PURE__ */ jsxs("div", { className: "puck-ai-prompt-form-form-inner", children: [
+                /* @__PURE__ */ jsx(
+                  TextareaAutosize,
+                  {
+                    className: "puck-ai-prompt-form-input",
+                    name: "prompt",
+                    minRows,
+                    maxRows,
+                    placeholder: isDragOver ? "Drop images here\u2026" : placeholder,
+                    disabled: isLoading,
+                    value: prompt,
+                    ref: (node) => {
+                      if (inputRef) {
+                        inputRef.current = node;
+                      }
+                      internalRef.current = node;
+                    },
+                    onChange: (e) => setPrompt(e.target.value),
+                    onKeyDown: (e) => {
+                      if (!e.shiftKey && e.key === "Enter") {
+                        e.preventDefault();
+                      }
+                    },
+                    onKeyUp: (e) => {
+                      if (!e.shiftKey && e.key === "Enter") {
+                        e.preventDefault();
+                        sendPrompt();
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "puck-ai-prompt-form-actions",
+                    onClick: () => {
+                      var _a;
+                      return (_a = internalRef.current) == null ? void 0 : _a.focus();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "puck-ai-prompt-form-actions-left",
+                          onClick: (e) => e.stopPropagation(),
+                          children: /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "puck-ai-image-attach-btn",
+                              title: "Attach image",
+                              onClick: () => {
+                                var _a;
+                                return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+                              },
+                              disabled: isLoading,
+                              children: /* @__PURE__ */ jsx(Image, { size: 15 })
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "puck-ai-prompt-form-actions-right",
+                          onClick: (e) => e.stopPropagation(),
+                          children: /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              className: "puck-ai-prompt-form-action-submit",
+                              type: "submit",
+                              disabled: isLoading,
+                              children: /* @__PURE__ */ jsx(ArrowUp, { size: 24 })
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function ChatBody({
+  children,
+  examplePrompts,
+  handleSubmit,
+  hideInput,
+  inputRef,
+  messages = [],
+  status,
+  error,
+  handleRetry,
+  promptValue,
+  targetComponent,
+  onClearTarget,
+  images,
+  onImagesChange
+}) {
+  const { scrollRef, contentRef } = useStickToBottom();
+  const hasMessages = messages && messages.length > 0;
+  const classNames = [
+    "puck-ai-chatbody",
+    hasMessages ? "puck-ai-chatbody--has-messages" : "",
+    children ? "puck-ai-chatbody--has-children" : "",
+    hideInput ? "puck-ai-chatbody--hide-input" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classNames, children: [
+    children ? /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-default", children }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "puck-ai-chatbody-inner", ref: scrollRef, children: [
+      /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-messages", ref: contentRef, children: [...messages].reverse().map((message) => /* @__PURE__ */ jsx(ChatMessage, { message }, message.id)) }),
+      status === "submitted" && /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-loader", children: /* @__PURE__ */ jsx(Loader, { size: 14 }) }),
+      error && /* @__PURE__ */ jsxs("div", { className: "puck-ai-chatbody-error", children: [
+        /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-error-label", children: "Something went wrong." }),
+        handleRetry && /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-error-action", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "puck-ai-icon-button",
+            title: "Retry",
+            onClick: handleRetry,
+            children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "puck-ai-chatbody-form", children: [
+        targetComponent && /* @__PURE__ */ jsxs("div", { className: "puck-ai-target-banner", children: [
+          /* @__PURE__ */ jsx("span", { className: "puck-ai-target-banner-label", children: "Targeting:" }),
+          /* @__PURE__ */ jsx("span", { className: "puck-ai-target-banner-name", children: targetComponent.label || targetComponent.type }),
+          /* @__PURE__ */ jsx("code", { className: "puck-ai-target-banner-id", children: targetComponent.id }),
+          onClearTarget && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "puck-ai-target-banner-clear",
+              onClick: onClearTarget,
+              title: "Clear target",
+              type: "button",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          PromptForm,
+          {
+            glow: !hasMessages && !targetComponent,
+            handleSubmit,
+            inputRef,
+            isLoading: status === "submitted" || status === "streaming",
+            placeholder: targetComponent ? `What should I do with the ${targetComponent.label || targetComponent.type}?` : "What do you want to build?",
+            value: promptValue,
+            images,
+            onImagesChange
+          }
+        ),
+        examplePrompts ? /* @__PURE__ */ jsx("div", { className: "puck-ai-chatbody-example-prompts", children: examplePrompts }) : null
+      ] })
+    ] })
+  ] });
+}
+function isScrolledIntoView(el) {
+  const rect = el.getBoundingClientRect();
+  return rect.top >= 0 && rect.bottom <= window.innerHeight;
+}
+function Placeholder({
+  dispatch,
+  inputRef,
+  pluginRef
+}) {
+  const handleEnterPromptClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+    setTimeout(() => {
+      if (pluginRef.current && inputRef.current && !isScrolledIntoView(inputRef.current)) {
+        const box = pluginRef.current.getBoundingClientRect();
+        const top = box.top - (window.innerHeight - box.height) / 2;
+        window.scrollTo({ behavior: "smooth", top });
+      }
+    }, 10);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "puck-ai-chat-placeholder", children: [
+    /* @__PURE__ */ jsx(Bot, { size: 24 }),
+    /* @__PURE__ */ jsx("div", { children: "Use AI to build a page using the available blocks" }),
+    /* @__PURE__ */ jsxs("div", { className: "puck-ai-chat-actions", children: [
+      /* @__PURE__ */ jsx("button", { className: "puck-ai-chat-action", onClick: handleEnterPromptClick, children: "Enter prompt" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "puck-ai-chat-action-outlined",
+          onClick: () => {
+            dispatch({ type: "setUi", ui: { plugin: { current: "blocks" } } });
+          },
+          children: "Build manually"
+        }
+      )
+    ] })
+  ] });
+}
+function scrollIntoViewLocal(el, win, behavior = "smooth") {
+  var _a, _b;
+  const scroller = ((_a = el.ownerDocument) == null ? void 0 : _a.scrollingElement) || ((_b = el.ownerDocument) == null ? void 0 : _b.documentElement);
+  const rect = el.getBoundingClientRect();
+  const vpH = win.innerHeight;
+  const current = scroller.scrollTop;
+  const offset = win.innerHeight / 2;
+  let targetTop = current;
+  if (rect.top < 0) {
+    targetTop = current + rect.top;
+  } else if (rect.bottom > vpH) {
+    targetTop = current + (rect.bottom - vpH);
+  }
+  if (targetTop !== current) {
+    scroller.scrollTo({ top: targetTop + offset, behavior });
+  }
+}
+function useFrameMutationObserver(callback) {
+  return useCallback(() => {
+    var _a;
+    const frame = document == null ? void 0 : document.getElementById("preview-frame");
+    if (!frame) return;
+    let observer = null;
+    const win = frame.contentWindow;
+    let enabled = true;
+    const disable = () => {
+      enabled = false;
+    };
+    const attachObserver = () => {
+      const win2 = frame.contentWindow;
+      const doc = frame.contentDocument || (win2 == null ? void 0 : win2.document);
+      if (!win2 || !doc) return;
+      const target = doc.querySelector("#frame-root > div");
+      if (!target) return;
+      observer = new MutationObserver((entries) => {
+        if (enabled) callback(entries, win2);
+      });
+      observer.observe(target, { childList: true, subtree: true });
+      win2.addEventListener("pointerdown", disable);
+      win2.addEventListener("wheel", disable);
+    };
+    if (((_a = frame.contentDocument) == null ? void 0 : _a.readyState) === "complete") {
+      attachObserver();
+    } else {
+      frame.addEventListener("load", attachObserver, { once: true });
+    }
+    return () => {
+      frame.removeEventListener("load", attachObserver);
+      win == null ? void 0 : win.removeEventListener("pointerdown", disable);
+      win == null ? void 0 : win.removeEventListener("wheel", disable);
+      observer == null ? void 0 : observer.disconnect();
+    };
+  }, [callback]);
+}
+function ScrollTracking({ children }) {
+  const followedRefs = useRef([]);
+  const follow = useFrameMutationObserver((records, win) => {
+    if (records.length > 0) {
+      const lastRecord = records[records.length - 1];
+      if (followedRefs.current.includes(lastRecord.target)) return;
+      followedRefs.current.push(lastRecord.target);
+      requestAnimationFrame(() => {
+        const el = lastRecord.target;
+        scrollIntoViewLocal(el, win);
+      });
+    }
+  });
+  useEffect(() => {
+    const cleanup = follow();
+    return cleanup;
+  }, [follow]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var usePuck = createUsePuck();
+function Chat({
+  chat,
+  host = "/api/puck/chat",
+  prepareRequest
+}) {
+  const { examplePrompts } = chat != null ? chat : {};
+  const puckDispatch = usePuck((s) => s.dispatch);
+  const getPuck = useGetPuck();
+  const localChatId = useRef("");
+  const inputRef = useRef(null);
+  const pluginRef = useRef(null);
+  const [error, setError] = useState();
+  const [toolStatus, setToolStatus] = useState({});
+  const uploadScreenshot = useCallback(
+    (width, bucketUrl) => __async(null, null, function* () {
+      var _a, _b, _c;
+      const iframeDocument = (_c = (_b = (_a = document == null ? void 0 : document.getElementById("preview-frame")) == null ? void 0 : _a.contentDocument) == null ? void 0 : _b.documentElement) != null ? _c : null;
+      if (!iframeDocument) return;
+      const canvas = yield 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 = yield (yield fetch(image)).blob();
+      yield fetch(bucketUrl, { method: "PUT", body: blob });
+    }),
+    []
+  );
+  const processData = useCallback(
+    (dataPart) => {
+      switch (dataPart.type) {
+        case "data-new-chat-created": {
+          localChatId.current = dataPart.data.chatId;
+          return;
+        }
+        case "data-puck-actions": {
+          dataPart.data.forEach((action) => {
+            try {
+              puckDispatch(action);
+            } catch (e) {
+              console.error("Bad action: ", action);
+              console.error(e);
+            }
+          });
+          return;
+        }
+        case "data-build-op": {
+          const data = dataPart.data;
+          q.queue(() => {
+            const puck = getPuck();
+            if (!puck) return;
+            dispatchOp(data, {
+              getState: () => {
+                var _a;
+                return (_a = puck.__private) == null ? void 0 : _a.appState;
+              },
+              dispatchAction: puck.dispatch,
+              config: puck.config
+            });
+          });
+          return;
+        }
+        case "data-tool-status": {
+          const { toolCallId, status: toolSt } = dataPart.data;
+          setToolStatus((s) => __spreadProps(__spreadValues({}, s), { [toolCallId]: toolSt }));
+          return;
+        }
+        case "data-send-screenshot": {
+          const { urls } = dataPart.data;
+          urls.forEach((obj) => {
+            const entries = Object.entries(obj);
+            if (entries.length === 0) return;
+            const [key, value] = entries[0];
+            const breakpoint = Number(key);
+            uploadScreenshot(breakpoint, value);
+          });
+          return;
+        }
+        default:
+          console.warn("dataPart without case:", dataPart);
+          return;
+      }
+    },
+    [getPuck, puckDispatch, uploadScreenshot]
+  );
+  const { messages, status, sendMessage, regenerate, setMessages } = useChat({
+    generateId: () => prefixedUlid("msg"),
+    messages: [],
+    transport: new DefaultChatTransport({
+      api: host,
+      prepareSendMessagesRequest: (opts) => __async(null, null, function* () {
+        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 root = (_c = config.root) != null ? _c : {
+          fields: {
+            title: {
+              type: "text",
+              ai: { instructions: "The title for the page" }
+            }
+          }
+        };
+        const configWithRoot = __spreadProps(__spreadValues({}, config), { root });
+        const defaultBody = __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, opts.body), {
+          chatId: localChatId.current,
+          trigger: opts.trigger,
+          messages: opts.messages,
+          pageData: appState.data,
+          config: configWithRoot
+        }), targetComponentRef.current ? { selectedComponentId: targetComponentRef.current.id } : {}), pendingSendImagesRef.current.length > 0 ? (() => {
+          const imgs = pendingSendImagesRef.current;
+          pendingSendImagesRef.current = [];
+          return { images: imgs };
+        })() : {});
+        const defaultOptions = {
+          headers: opts.headers,
+          credentials: opts.credentials,
+          body: defaultBody
+        };
+        if (prepareRequest) {
+          const userOptions = yield prepareRequest(defaultOptions);
+          return {
+            headers: __spreadValues(__spreadValues({}, defaultOptions.headers), userOptions.headers),
+            credentials: (_d = userOptions.credentials) != null ? _d : defaultOptions.credentials,
+            body: __spreadValues(__spreadValues({}, defaultBody), userOptions.body)
+          };
+        }
+        return {
+          headers: defaultOptions.headers,
+          credentials: defaultOptions.credentials,
+          body: defaultBody
+        };
+      })
+    }),
+    onData: processData,
+    onError: (e) => {
+      console.error(e);
+      setError(e.message);
+    },
+    onFinish: () => {
+      const puck = getPuck();
+      if (puck == null ? void 0 : puck.appState) {
+        puckDispatch({ type: "set", state: puck.appState, recordHistory: true });
+      }
+    }
+  });
+  const [forcedStatus, setForcedStatus] = useState();
+  const resolvedStatus = useMemo(
+    () => forcedStatus != null ? forcedStatus : status,
+    [status, forcedStatus]
+  );
+  const [promptValue, setPromptValue] = useState("");
+  const [attachedImages, setAttachedImages] = useState([]);
+  const pendingSendImagesRef = useRef([]);
+  const [targetComponent, setTargetComponent] = useState(null);
+  const targetComponentRef = useRef(null);
+  useEffect(() => {
+    targetComponentRef.current = targetComponent;
+  }, [targetComponent]);
+  useEffect(() => {
+    window.__PUCK_AI = {
+      processData,
+      setMessages,
+      setStatus: setForcedStatus,
+      sendMessage,
+      setPrompt: (value) => {
+        var _a;
+        setPromptValue(value);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      setTargetComponent: (target) => {
+        var _a;
+        setTargetComponent(target);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+  }, [processData, setMessages, sendMessage]);
+  const handleSubmit = (prompt) => {
+    const text = prompt.trim();
+    if (chat == null ? void 0 : chat.onSubmit) {
+      chat.onSubmit(text);
+      return;
+    }
+    if (!text && attachedImages.length === 0) return;
+    setError("");
+    setPromptValue("");
+    pendingSendImagesRef.current = attachedImages.map((img) => img.dataUrl);
+    setAttachedImages([]);
+    sendMessage({ text }).catch((e) => {
+      console.error(e);
+    });
+  };
+  const messagesWithStatuses = useMemo(() => {
+    return messages.map((msg) => __spreadProps(__spreadValues({}, msg), {
+      parts: msg.parts.map((part) => {
+        if ("toolCallId" in part) {
+          return __spreadProps(__spreadValues({}, part), { status: toolStatus[part.toolCallId] });
+        }
+        return part;
+      })
+    }));
+  }, [messages, toolStatus]);
+  return /* @__PURE__ */ jsxs("div", { className: "puck-ai-chat", ref: pluginRef, children: [
+    /* @__PURE__ */ jsx("div", { className: "puck-ai-chat-header", children: "AI page builder" }),
+    /* @__PURE__ */ jsx(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ jsx(
+      ChatBody,
+      {
+        messages: messagesWithStatuses,
+        handleSubmit,
+        inputRef,
+        status: resolvedStatus,
+        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href, onClick }) => /* @__PURE__ */ jsx(ExamplePrompt, { label, href, onClick }, label)),
+        error,
+        handleRetry: () => {
+          setError("");
+          regenerate();
+        },
+        promptValue,
+        targetComponent,
+        onClearTarget: () => setTargetComponent(null),
+        images: attachedImages,
+        onImagesChange: setAttachedImages,
+        children: /* @__PURE__ */ jsx(Placeholder, { dispatch: puckDispatch, inputRef, pluginRef })
+      }
+    ) })
+  ] });
+}
+function createAiPlugin(opts = {}) {
+  const { scrollTracking = true, host, chat, prepareRequest } = opts;
+  return {
+    label: "AI",
+    name: "ai",
+    icon: /* @__PURE__ */ jsx(Bot, {}),
+    mobilePanelHeight: "min-content",
+    render: () => /* @__PURE__ */ jsx(Chat, { host, chat, prepareRequest }),
+    overrides: {
+      preview: ({ children }) => {
+        if (scrollTracking) {
+          return /* @__PURE__ */ jsx(ScrollTracking, { children });
+        }
+        return /* @__PURE__ */ jsx(Fragment, { children });
+      }
+    }
+  };
+}
+var index_default = createAiPlugin;
+export {
+  Chat,
+  createAiPlugin,
+  index_default as default
+};
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+lucide-react/dist/esm/defaultAttributes.js:
+lucide-react/dist/esm/Icon.js:
+lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/icons/arrow-up.js:
+lucide-react/dist/esm/icons/bot.js:
+lucide-react/dist/esm/icons/check.js:
+lucide-react/dist/esm/icons/image.js:
+lucide-react/dist/esm/icons/rotate-ccw.js:
+lucide-react/dist/esm/icons/triangle-alert.js:
+lucide-react/dist/esm/icons/x.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.452.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
+//# sourceMappingURL=index.mjs.map