@puckeditor/plugin-ai 0.8.2 → 0.9.0-canary.50fad349

package/dist/index.js

@@ -43,37 +43,6 @@ var init_react_import = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js
-var require_throttleit = __commonJS({
-  "../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js"(exports2, module2) {
-    "use strict";
-    init_react_import();
-    function throttle2(function_, wait) {
-      if (typeof function_ !== "function") {
-        throw new TypeError(`Expected the first argument to be a \`function\`, got \`${typeof function_}\`.`);
-      }
-      let timeoutId;
-      let lastCallTime = 0;
-      return function throttled(...arguments_) {
-        clearTimeout(timeoutId);
-        const now = Date.now();
-        const timeSinceLastCall = now - lastCallTime;
-        const delayForNextCall = wait - timeSinceLastCall;
-        if (delayForNextCall <= 0) {
-          lastCallTime = now;
-          function_.apply(this, arguments_);
-        } else {
-          timeoutId = setTimeout(() => {
-            lastCallTime = Date.now();
-            function_.apply(this, arguments_);
-          }, delayForNextCall);
-        }
-      };
-    }
-    module2.exports = throttle2;
-  }
-});
-
 // ../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
 var require_classnames = __commonJS({
   "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports2, module2) {
@@ -136,267 +105,34 @@ var require_classnames = __commonJS({
   }
 });
 
-// ../reducer/dist/index.js
-var require_dist = __commonJS({
-  "../reducer/dist/index.js"(exports2, module2) {
+// ../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js
+var require_throttleit = __commonJS({
+  "../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js"(exports2, module2) {
     "use strict";
     init_react_import();
-    var __defProp2 = Object.defineProperty;
-    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-    var __getOwnPropNames2 = Object.getOwnPropertyNames;
-    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-    var __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: true });
-    };
-    var __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from === "object" || typeof from === "function") {
-        for (let key of __getOwnPropNames2(from))
-          if (!__hasOwnProp2.call(to, key) && key !== except)
-            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      }
-      return to;
-    };
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var index_exports2 = {};
-    __export2(index_exports2, {
-      dispatchOp: () => dispatchOp2,
-      resolveAppends: () => resolveAppends
-    });
-    module2.exports = __toCommonJS2(index_exports2);
-    var parseAppendPath = (path) => {
-      const segments = [];
-      const pattern = /([^.[\]]+)|\[(\d+)\]/g;
-      let match;
-      while ((match = pattern.exec(path)) !== null) {
-        segments.push(match[2] !== void 0 ? Number(match[2]) : match[1]);
-      }
-      return segments;
-    };
-    var appendAtPath = (base, segments, tail) => {
-      if (segments.length === 0) {
-        return `${typeof base === "string" ? base : ""}${tail}`;
-      }
-      const [head, ...rest] = segments;
-      if (typeof head === "number") {
-        const arr = Array.isArray(base) ? [...base] : [];
-        arr[head] = appendAtPath(arr[head], rest, tail);
-        return arr;
-      }
-      const obj = typeof base === "object" && base !== null && !Array.isArray(base) ? { ...base } : {};
-      obj[head] = appendAtPath(obj[head], rest, tail);
-      return obj;
-    };
-    var resolveAppends = (existingProps, props, appends) => {
-      if (!appends) return props;
-      const resolved = { ...props };
-      for (const [path, tail] of Object.entries(appends)) {
-        const [rootKey, ...rest] = parseAppendPath(path);
-        if (typeof rootKey !== "string") continue;
-        const base = rootKey in resolved ? resolved[rootKey] : existingProps == null ? void 0 : existingProps[rootKey];
-        resolved[rootKey] = appendAtPath(base, rest, tail);
-      }
-      return resolved;
-    };
-    var getSelectorForId = (state, id) => {
-      const node = state.indexes.nodes[id];
-      if (!node) return;
-      const zoneCompound = `${node.parentId}:${node.zone}`;
-      const zone = state.indexes.zones[zoneCompound];
-      if (!zone) return;
-      const index = zone.contentIds.indexOf(id);
-      return { zone: zoneCompound, index };
-    };
-    var getItemById = (state, id) => {
-      var _a;
-      return (_a = state.indexes.nodes[id]) == null ? void 0 : _a.data;
-    };
-    var applyArrayDefaults = (oldProps, newProps, fields) => {
-      const updatedProps = {
-        ...oldProps,
-        ...newProps
-      };
-      for (const fieldName in fields) {
-        const field = fields[fieldName];
-        if (field.type === "array") {
-          const arrayField = field;
-          const arrayFields = arrayField.arrayFields;
-          const value = updatedProps[fieldName];
-          if (value === void 0) continue;
-          if (!Array.isArray(value)) {
-            const oldValue = oldProps[fieldName];
-            if (Array.isArray(oldValue)) {
-              updatedProps[fieldName] = oldValue;
-            } else {
-              delete updatedProps[fieldName];
-            }
-            continue;
-          }
-          updatedProps[fieldName] = value.map(
-            (item, index) => {
-              var _a, _b;
-              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] = item[arrayFieldName] ?? ((_b = (_a = oldProps[fieldName]) == null ? void 0 : _a[index]) == null ? void 0 : _b[arrayFieldName]) ?? (defaultValue == null ? void 0 : defaultValue[arrayFieldName]);
-                } else {
-                  newItem[arrayFieldName] = item[arrayFieldName] ?? (defaultValue == null ? void 0 : defaultValue[arrayFieldName]);
-                }
-              }
-              return newItem;
-            }
-          );
-        }
+    function throttle2(function_, wait) {
+      if (typeof function_ !== "function") {
+        throw new TypeError(`Expected the first argument to be a \`function\`, got \`${typeof function_}\`.`);
       }
-      return updatedProps;
-    };
-    var dispatchOp2 = (operation, {
-      getState,
-      dispatchAction,
-      config
-    }) => {
-      var _a, _b;
-      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 = {
-              ...existing,
-              props: applyArrayDefaults(
-                existing.props,
-                operation.props,
-                config.components[existing.type].fields
-              )
-            };
-            newData.props.id ||= operation.id;
-            const selector = getSelectorForId(getState(), operation.id);
-            if (!selector) {
-              throw new Error(
-                `Tried to replace an item that doesn't exist: ${operation.id}`
-              );
-            }
-            dispatchAction({
-              type: "replace",
-              destinationIndex: selector.index,
-              destinationZone: selector.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 = {
-            ...existing,
-            props: applyArrayDefaults(
-              existing.props,
-              resolveAppends(
-                existing.props,
-                operation.props,
-                operation.appends
-              ),
-              config.components[existing.type].fields
-            )
-          };
-          dispatchAction({
-            type: "replace",
-            destinationIndex: selector.index,
-            destinationZone: selector.zone,
-            data: newData,
-            recordHistory: false
-          });
-        } else if (operation.op === "updateRoot") {
-          const existing = state.data.root;
-          const defaultProps = ((_a = config.root) == null ? void 0 : _a.defaultProps) ?? {};
-          dispatchAction({
-            type: "replaceRoot",
-            root: {
-              ...existing,
-              props: {
-                ...defaultProps,
-                ...existing.props,
-                ...resolveAppends(
-                  existing.props ?? {},
-                  operation.props,
-                  operation.appends
-                )
-              }
-            },
-            recordHistory: false
-          });
-        } else if (operation.op === "delete") {
-          const selector = getSelectorForId(state, operation.id);
-          if (selector) {
-            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 = ((_b = config.root) == null ? void 0 : _b.defaultProps) ?? {};
-          dispatchAction({
-            type: "setData",
-            data: { content: [], root: defaultRootProps },
-            recordHistory: false
-          });
+      let timeoutId;
+      let lastCallTime = 0;
+      return function throttled(...arguments_) {
+        clearTimeout(timeoutId);
+        const now = Date.now();
+        const timeSinceLastCall = now - lastCallTime;
+        const delayForNextCall = wait - timeSinceLastCall;
+        if (delayForNextCall <= 0) {
+          lastCallTime = now;
+          function_.apply(this, arguments_);
         } else {
-          throw new Error(`Unknown operation: ${operation.op}`);
+          timeoutId = setTimeout(() => {
+            lastCallTime = Date.now();
+            function_.apply(this, arguments_);
+          }, delayForNextCall);
         }
-      } catch (e) {
-        console.error("Error applying operation, skipping...", operation, e);
-      }
-    };
+      };
+    }
+    module2.exports = throttle2;
   }
 });
 
@@ -404,6 +140,7 @@ var require_dist = __commonJS({
 var index_exports = {};
 __export(index_exports, {
   createAiPlugin: () => createAiPlugin,
+  usePuckAi: () => usePuckAi,
   withDynamicConfig: () => withDynamicConfig
 });
 module.exports = __toCommonJS(index_exports);
@@ -741,293 +478,39 @@ var import_ulid2 = require("ulid");
 
 // src/components/Chat/index.tsx
 init_react_import();
+var import_core6 = require("@puckeditor/core");
+var import_react28 = require("react");
 
-// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@4.4.3/node_modules/@ai-sdk/react/dist/index.mjs
+// ../utils/lib/get-class-name-factory.ts
 init_react_import();
-var import_ai = require("ai");
-var import_react4 = require("react");
-var import_ai2 = require("ai");
-var import_throttleit = __toESM(require_throttleit(), 1);
-var import_ai3 = require("ai");
-var import_react5 = require("react");
-var import_ai4 = require("ai");
-var import_react6 = require("react");
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-function throttle(fn, waitMs) {
-  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
-}
-var _messages;
-var _status;
-var _error;
-var _messagesCallbacks;
-var _statusCallbacks;
-var _errorCallbacks;
-var _callMessagesCallbacks;
-var _callStatusCallbacks;
-var _callErrorCallbacks;
-var ReactChatState = class {
-  constructor(initialMessages = []) {
-    __privateAdd(this, _messages, void 0);
-    __privateAdd(this, _status, "ready");
-    __privateAdd(this, _error, void 0);
-    __privateAdd(this, _messagesCallbacks, /* @__PURE__ */ new Set());
-    __privateAdd(this, _statusCallbacks, /* @__PURE__ */ new Set());
-    __privateAdd(this, _errorCallbacks, /* @__PURE__ */ new Set());
-    this.pushMessage = (message) => {
-      __privateSet(this, _messages, __privateGet(this, _messages).concat(message));
-      __privateGet(this, _callMessagesCallbacks).call(this);
-    };
-    this.popMessage = () => {
-      __privateSet(this, _messages, __privateGet(this, _messages).slice(0, -1));
-      __privateGet(this, _callMessagesCallbacks).call(this);
-    };
-    this.replaceMessage = (index, message) => {
-      __privateSet(this, _messages, [
-        ...__privateGet(this, _messages).slice(0, index),
-        // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
-        this.snapshot(message),
-        ...__privateGet(this, _messages).slice(index + 1)
-      ]);
-      __privateGet(this, _callMessagesCallbacks).call(this);
-    };
-    this.snapshot = (value) => structuredClone(value);
-    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => {
-      const callback = throttleWaitMs ? throttle(onChange, throttleWaitMs) : onChange;
-      __privateGet(this, _messagesCallbacks).add(callback);
-      return () => {
-        __privateGet(this, _messagesCallbacks).delete(callback);
-      };
-    };
-    this["~registerStatusCallback"] = (onChange) => {
-      __privateGet(this, _statusCallbacks).add(onChange);
-      return () => {
-        __privateGet(this, _statusCallbacks).delete(onChange);
-      };
-    };
-    this["~registerErrorCallback"] = (onChange) => {
-      __privateGet(this, _errorCallbacks).add(onChange);
-      return () => {
-        __privateGet(this, _errorCallbacks).delete(onChange);
-      };
-    };
-    __privateAdd(this, _callMessagesCallbacks, () => {
-      __privateGet(this, _messagesCallbacks).forEach((callback) => callback());
-    });
-    __privateAdd(this, _callStatusCallbacks, () => {
-      __privateGet(this, _statusCallbacks).forEach((callback) => callback());
-    });
-    __privateAdd(this, _callErrorCallbacks, () => {
-      __privateGet(this, _errorCallbacks).forEach((callback) => callback());
-    });
-    __privateSet(this, _messages, initialMessages);
-  }
-  get status() {
-    return __privateGet(this, _status);
-  }
-  set status(newStatus) {
-    __privateSet(this, _status, newStatus);
-    __privateGet(this, _callStatusCallbacks).call(this);
-  }
-  get error() {
-    return __privateGet(this, _error);
-  }
-  set error(newError) {
-    __privateSet(this, _error, newError);
-    __privateGet(this, _callErrorCallbacks).call(this);
-  }
-  get messages() {
-    return __privateGet(this, _messages);
+var import_classnames = __toESM(require_classnames());
+var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
+  let descendant = false;
+  let modifiers = false;
+  if (typeof options === "string") {
+    descendant = options;
+  } else if (typeof options === "object") {
+    modifiers = options;
   }
-  set messages(newMessages) {
-    __privateSet(this, _messages, [...newMessages]);
-    __privateGet(this, _callMessagesCallbacks).call(this);
-  }
-};
-_messages = /* @__PURE__ */ new WeakMap();
-_status = /* @__PURE__ */ new WeakMap();
-_error = /* @__PURE__ */ new WeakMap();
-_messagesCallbacks = /* @__PURE__ */ new WeakMap();
-_statusCallbacks = /* @__PURE__ */ new WeakMap();
-_errorCallbacks = /* @__PURE__ */ new WeakMap();
-_callMessagesCallbacks = /* @__PURE__ */ new WeakMap();
-_callStatusCallbacks = /* @__PURE__ */ new WeakMap();
-_callErrorCallbacks = /* @__PURE__ */ new WeakMap();
-var _state;
-var Chat = class extends import_ai2.AbstractChat {
-  constructor({ messages, ...init }) {
-    const state = new ReactChatState(messages);
-    super({ ...init, state });
-    __privateAdd(this, _state, void 0);
-    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => __privateGet(this, _state)["~registerMessagesCallback"](onChange, throttleWaitMs);
-    this["~registerStatusCallback"] = (onChange) => __privateGet(this, _state)["~registerStatusCallback"](onChange);
-    this["~registerErrorCallback"] = (onChange) => __privateGet(this, _state)["~registerErrorCallback"](onChange);
-    __privateSet(this, _state, state);
-  }
-};
-_state = /* @__PURE__ */ new WeakMap();
-function useChat({
-  experimental_throttle: throttleWaitMs,
-  resume = false,
-  ...options
-} = {}) {
-  const latestRef = (0, import_react4.useRef)({});
-  if (!("chat" in options)) {
-    latestRef.current = {
-      onToolCall: options.onToolCall,
-      onData: options.onData,
-      onFinish: options.onFinish,
-      onError: options.onError,
-      sendAutomaticallyWhen: options.sendAutomaticallyWhen,
-      transport: options.transport
-    };
-  }
-  let defaultTransport;
-  const getTransport = () => {
-    var _a;
-    return (_a = latestRef.current.transport) != null ? _a : defaultTransport != null ? defaultTransport : defaultTransport = new import_ai.DefaultChatTransport();
-  };
-  const chatOptions = {
-    ...options,
-    transport: {
-      sendMessages: (sendOptions) => getTransport().sendMessages(sendOptions),
-      reconnectToStream: (reconnectOptions) => getTransport().reconnectToStream(reconnectOptions)
-    },
-    onToolCall: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onToolCall) == null ? void 0 : _b.call(_a, arg);
-    },
-    onData: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onData) == null ? void 0 : _b.call(_a, arg);
-    },
-    onFinish: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onFinish) == null ? void 0 : _b.call(_a, arg);
-    },
-    onError: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onError) == null ? void 0 : _b.call(_a, arg);
-    },
-    sendAutomaticallyWhen: (arg) => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = latestRef.current).sendAutomaticallyWhen) == null ? void 0 : _b.call(_a, arg)) != null ? _c : false;
-    }
-  };
-  const chatRef = (0, import_react4.useRef)(
-    "chat" in options ? options.chat : new Chat(chatOptions)
-  );
-  const shouldRecreateChat = "chat" in options && options.chat !== chatRef.current || "id" in options && options.id != null && chatRef.current.id !== options.id;
-  if (shouldRecreateChat) {
-    chatRef.current = "chat" in options ? options.chat : new Chat(chatOptions);
-  }
-  const subscribeToMessages = (0, import_react4.useCallback)(
-    (update) => chatRef.current["~registerMessagesCallback"](update, throttleWaitMs),
-    // `chatRef.current.id` is required to trigger re-subscription when the chat ID changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [throttleWaitMs, chatRef.current.id]
-  );
-  const messages = (0, import_react4.useSyncExternalStore)(
-    subscribeToMessages,
-    () => chatRef.current.messages,
-    () => chatRef.current.messages
-  );
-  const status = (0, import_react4.useSyncExternalStore)(
-    chatRef.current["~registerStatusCallback"],
-    () => chatRef.current.status,
-    () => chatRef.current.status
-  );
-  const error = (0, import_react4.useSyncExternalStore)(
-    chatRef.current["~registerErrorCallback"],
-    () => chatRef.current.error,
-    () => chatRef.current.error
-  );
-  const setMessages = (0, import_react4.useCallback)(
-    (messagesParam) => {
-      if (typeof messagesParam === "function") {
-        messagesParam = messagesParam(chatRef.current.messages);
-      }
-      chatRef.current.messages = messagesParam;
-    },
-    [chatRef]
-  );
-  (0, import_react4.useEffect)(() => {
-    if (resume) {
-      chatRef.current.resumeStream();
-    }
-  }, [resume, chatRef]);
-  return {
-    id: chatRef.current.id,
-    messages,
-    setMessages,
-    sendMessage: chatRef.current.sendMessage,
-    regenerate: chatRef.current.regenerate,
-    clearError: chatRef.current.clearError,
-    stop: chatRef.current.stop,
-    error,
-    resumeStream: chatRef.current.resumeStream,
-    status,
-    /**
-     * @deprecated Use `addToolOutput` instead.
-     */
-    addToolResult: chatRef.current.addToolOutput,
-    addToolOutput: chatRef.current.addToolOutput,
-    addToolApprovalResponse: chatRef.current.addToolApprovalResponse
-  };
-}
-
-// src/components/Chat/index.tsx
-var import_core5 = require("@puckeditor/core");
-var import_ai5 = require("ai");
-var import_react27 = require("react");
-var import_ulid = require("ulid");
-
-// ../utils/lib/get-class-name-factory.ts
-init_react_import();
-var import_classnames = __toESM(require_classnames());
-var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
-  let descendant = false;
-  let modifiers = false;
-  if (typeof options === "string") {
-    descendant = options;
-  } else if (typeof options === "object") {
-    modifiers = options;
-  }
-  if (descendant) {
-    const style = styles[`${rootClass}-${descendant}`];
-    if (style) {
-      return baseClass + styles[`${rootClass}-${descendant}`] || "";
-    }
-    return "";
-  } else if (modifiers) {
-    const prefixedModifiers = {};
-    for (let modifier in modifiers) {
-      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
-    }
-    const c = styles[rootClass];
-    return baseClass + (0, import_classnames.default)({
-      [c]: !!c,
-      // only apply the class if it exists
-      ...prefixedModifiers
-    });
-  } else {
-    return baseClass + styles[rootClass] || "";
+  if (descendant) {
+    const style = styles[`${rootClass}-${descendant}`];
+    if (style) {
+      return baseClass + styles[`${rootClass}-${descendant}`] || "";
+    }
+    return "";
+  } else if (modifiers) {
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return baseClass + (0, import_classnames.default)({
+      [c]: !!c,
+      // only apply the class if it exists
+      ...prefixedModifiers
+    });
+  } else {
+    return baseClass + styles[rootClass] || "";
   }
 };
 var get_class_name_factory_default = getClassNameFactory;
@@ -1038,7 +521,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_react18 = require("react");
 var import_use_stick_to_bottom = require("use-stick-to-bottom");
 var import_react_markdown = __toESM(require("react-markdown"));
 
@@ -1100,15 +583,15 @@ init_react_import();
 var Modal_module_default = { "Modal-background": "_Modal-background_1bedq_1", "Modal--visible": "_Modal--visible_1bedq_16", "Modal-modal": "_Modal-modal_1bedq_22" };
 
 // ../platform-client/components/Modal/Modal.tsx
-var import_react9 = require("react");
+var import_react6 = require("react");
 
 // ../platform-client/lib/use-modal-visible.ts
 init_react_import();
-var import_react7 = require("react");
+var import_react4 = require("react");
 var useModalVisible = (defaultVisible) => {
-  const [visible, setVisible] = (0, import_react7.useState)(defaultVisible ?? false);
-  const ref = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react4.useState)(defaultVisible ?? false);
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!visible) {
       return;
     }
@@ -1130,7 +613,7 @@ init_react_import();
 
 // ../platform-client/components/Button/Button.tsx
 init_react_import();
-var import_react8 = require("react");
+var import_react5 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Button/Button.module.css#css-module
 init_react_import();
@@ -1183,8 +666,8 @@ var Button = ({
   size = "medium",
   loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = (0, import_react8.useState)(loadingProp);
-  (0, import_react8.useEffect)(() => {
+  const [loading, setLoading] = (0, import_react5.useState)(loadingProp);
+  (0, import_react5.useEffect)(() => {
     const resetLoading = () => setLoading(loadingProp);
     resetLoading();
     window.addEventListener("pageshow", resetLoading);
@@ -1234,7 +717,7 @@ var Button = ({
 // ../platform-client/components/Modal/Modal.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getClassName3 = getClassNameFactory2("Modal", Modal_module_default);
-var modalContext = (0, import_react9.createContext)({
+var modalContext = (0, import_react6.createContext)({
   buttonVariant: "primary",
   buttonSize: "medium",
   visible: false,
@@ -1258,7 +741,7 @@ var ModalProvider = ({
   );
 };
 var useModal = () => {
-  const { visible, setVisible } = (0, import_react9.useContext)(modalContext);
+  const { visible, setVisible } = (0, import_react6.useContext)(modalContext);
   return { visible, setVisible };
 };
 var Modal = ({
@@ -1266,7 +749,7 @@ var Modal = ({
   children,
   hideButton = false
 }) => {
-  const { visible, setVisible, buttonVariant, buttonSize, ref } = (0, import_react9.useContext)(modalContext);
+  const { visible, setVisible, buttonVariant, buttonSize, ref } = (0, import_react6.useContext)(modalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName3({ visible }), children: [
     !hideButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("button"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Button,
@@ -1349,7 +832,7 @@ init_react_import();
 
 // ../platform-client/components/Align/Align.tsx
 init_react_import();
-var import_react10 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Align/Align.module.css#css-module
 init_react_import();
@@ -1373,7 +856,7 @@ init_react_import();
 // ../platform-client/components/AutoForm/AutoForm.tsx
 init_react_import();
 var import_core = require("@puckeditor/core");
-var import_react11 = require("react");
+var import_react8 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/AutoForm/AutoForm.module.css#css-module
 init_react_import();
@@ -1421,11 +904,11 @@ var Code_module_default = { "Code": "_Code_d4378_1", "Code-body": "_Code-body_d4
 
 // ../platform-client/components/Code/CopyAction.tsx
 init_react_import();
-var import_react12 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 
 // ../platform-client/components/Code/Code.tsx
-var import_react13 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var getClassName9 = get_class_name_factory_default("Code", Code_module_default);
 var getClassNameTab = get_class_name_factory_default("Tab", Code_module_default);
@@ -1435,7 +918,7 @@ init_react_import();
 
 // ../platform-client/components/IconButton/IconButton.tsx
 init_react_import();
-var import_react14 = require("react");
+var import_react11 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -1457,7 +940,7 @@ var IconButton = ({
   title,
   dark
 }) => {
-  const [loading, setLoading] = (0, import_react14.useState)(false);
+  const [loading, setLoading] = (0, import_react11.useState)(false);
   const ElementType = href ? "a" : onClick ? "button" : "div";
   const el = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     ElementType,
@@ -1589,7 +1072,7 @@ var getClassName12 = get_class_name_factory_default2("Link", Link_module_default
 
 // ../platform-client/components/Menu/index.tsx
 init_react_import();
-var import_react15 = require("react");
+var import_react12 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Menu/styles.module.css#css-module
 init_react_import();
@@ -1622,7 +1105,7 @@ init_react_import();
 
 // ../platform-client/components/Pagination/Pagination.tsx
 init_react_import();
-var import_react16 = require("react");
+var import_react13 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Pagination/Pagination.module.css#css-module
 init_react_import();
@@ -1718,7 +1201,7 @@ init_react_import();
 
 // ../platform-client/components/Table/Table.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react14 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Table/Table.module.css#css-module
 init_react_import();
@@ -1760,9 +1243,9 @@ var cx6 = getClassNameFactory("Viewport", styles_module_default6);
 
 // ../platform-client/context/editor.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var ctx = (0, import_react18.createContext)({});
+var ctx = (0, import_react15.createContext)({});
 
 // css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/ChatBody/styles.module.css#css-module
 init_react_import();
@@ -1770,7 +1253,7 @@ var styles_module_default7 = { "Chat": "_Chat_5z5yi_1", "Chat--hasMessages": "_C
 
 // src/components/PromptForm/index.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react16 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/PromptForm/styles.module.css#css-module
 init_react_import();
@@ -1856,13 +1339,13 @@ function PromptForm({
   maxRows = 5,
   value = ""
 }) {
-  const hasSetInitialPrompt = (0, import_react19.useRef)(false);
-  const [prompt, setPrompt] = (0, import_react19.useState)(value);
-  const internalRef = (0, import_react19.useRef)(null);
-  const [isDragOver, setIsDragOver] = (0, import_react19.useState)(false);
-  const dragCounterRef = (0, import_react19.useRef)(0);
+  const hasSetInitialPrompt = (0, import_react16.useRef)(false);
+  const [prompt, setPrompt] = (0, import_react16.useState)(value);
+  const internalRef = (0, import_react16.useRef)(null);
+  const [isDragOver, setIsDragOver] = (0, import_react16.useState)(false);
+  const dragCounterRef = (0, import_react16.useRef)(0);
   const canDrop = !!onFileDrop && !isDisabled && !isLoading;
-  const handleDragEnter = (0, import_react19.useCallback)(
+  const handleDragEnter = (0, import_react16.useCallback)(
     (e) => {
       e.preventDefault();
       dragCounterRef.current++;
@@ -1872,17 +1355,17 @@ function PromptForm({
     },
     [canDrop]
   );
-  const handleDragLeave = (0, import_react19.useCallback)((e) => {
+  const handleDragLeave = (0, import_react16.useCallback)((e) => {
     e.preventDefault();
     dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
       setIsDragOver(false);
     }
   }, []);
-  const handleDragOver = (0, import_react19.useCallback)((e) => {
+  const handleDragOver = (0, import_react16.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  const handleDrop = (0, import_react19.useCallback)(
+  const handleDrop = (0, import_react16.useCallback)(
     (e) => {
       e.preventDefault();
       dragCounterRef.current = 0;
@@ -1896,7 +1379,7 @@ function PromptForm({
     },
     [canDrop, onFileDrop]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setPrompt(value);
   }, [setPrompt, value]);
   const sendPrompt = async () => {
@@ -1911,7 +1394,7 @@ function PromptForm({
       setPrompt("");
     }
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const currentUrl = new URL(location.href);
     const initialPrompt = currentUrl.searchParams.get("initialPrompt");
     if (!hasSetInitialPrompt.current && initialPrompt && prompt === "") {
@@ -2056,12 +1539,12 @@ function PromptForm({
 
 // src/lib/context.ts
 init_react_import();
-var import_react20 = require("react");
-var toolStatusContext = (0, import_react20.createContext)({});
+var import_react17 = require("react");
+var toolStatusContext = (0, import_react17.createContext)({});
 var ToolStatusProvider = toolStatusContext.Provider;
-var hostContext = (0, import_react20.createContext)(void 0);
+var hostContext = (0, import_react17.createContext)(void 0);
 var HostProvider = hostContext.Provider;
-var subagentStateContext = (0, import_react20.createContext)({});
+var subagentStateContext = (0, import_react17.createContext)({});
 var SubagentStateProvider = subagentStateContext.Provider;
 
 // src/components/ChatBody/index.tsx
@@ -2167,7 +1650,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_react18.useMemo)(() => mergeReasoningParts(rawParts), [rawParts]);
   if (role === "user") {
     const attachmentParts = parts.filter((part) => part.type === "file");
     const otherParts = parts.filter((part) => part.type !== "file");
@@ -2219,7 +1702,7 @@ function ChatAttachmentThumbnail({
   mediaType,
   url
 }) {
-  const host = (0, import_react21.useContext)(hostContext);
+  const host = (0, import_react18.useContext)(hostContext);
   const endpoint = host ? `${host.replace(/\/$/, "")}/attachments` : "/api/puck/chat/attachments";
   const resolvedUrl = resolveAttachmentUrl(url, endpoint);
   const attachmentId = getAttachmentIdFromRef(url);
@@ -2256,12 +1739,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_react18.useRef)(null);
+  const [durationSecs, setDurationSecs] = (0, import_react18.useState)(null);
   if (part.state !== "done" && startTimeRef.current === null) {
     startTimeRef.current = Date.now();
   }
-  (0, import_react21.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (part.state === "done" && startTimeRef.current !== null) {
       setDurationSecs(Math.round((Date.now() - startTimeRef.current) / 1e3));
     }
@@ -2313,7 +1796,7 @@ function ChatAttachment({
   mediaType,
   url
 }) {
-  const host = (0, import_react21.useContext)(hostContext);
+  const host = (0, import_react18.useContext)(hostContext);
   const endpoint = host ? `${host.replace(/\/$/, "")}/attachments` : "/api/puck/chat/attachments";
   const resolvedUrl = resolveAttachmentUrl(url, endpoint);
   const attachmentId = getAttachmentIdFromRef(url);
@@ -2332,10 +1815,10 @@ function PuckTool({
   defaultLabel = "Thinking...",
   type
 }) {
-  const toolStatus = (0, import_react21.useContext)(toolStatusContext)[toolCallId];
+  const toolStatus = (0, import_react18.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_react18.useMemo)(() => {
     if (type === "tool-write") {
       return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Pen, { size: 18 });
     } else if (type === "tool-refreshPageData") {
@@ -2352,16 +1835,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_react18.useContext)(subagentStateContext);
   const state = subagentState[toolCallId];
-  const toolStatusMap = (0, import_react21.useContext)(toolStatusContext);
+  const toolStatusMap = (0, import_react18.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_react18.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "details",
     {
@@ -2420,7 +1903,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_react18.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "details",
     {
@@ -2487,12 +1970,6 @@ function ExamplePrompt({
   );
 }
 
-// src/components/Chat/index.tsx
-var import_qler = __toESM(require("qler"));
-var import_reducer = __toESM(require_dist());
-var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
-var import_use_debounce = require("use-debounce");
-
 // src/lib/scroll-tracking-events.ts
 init_react_import();
 var listeners = /* @__PURE__ */ new Set();
@@ -2536,8 +2013,502 @@ function DesignModeToggle({
         "Design"
       ]
     }
-  ) });
-}
+  ) });
+}
+
+// src/lib/use-puck-ai.ts
+init_react_import();
+
+// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@4.4.3/node_modules/@ai-sdk/react/dist/index.mjs
+init_react_import();
+var import_ai = require("ai");
+var import_react19 = require("react");
+var import_ai2 = require("ai");
+var import_throttleit = __toESM(require_throttleit(), 1);
+var import_ai3 = require("ai");
+var import_react20 = require("react");
+var import_ai4 = require("ai");
+var import_react21 = require("react");
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+function throttle(fn, waitMs) {
+  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
+}
+var _messages;
+var _status;
+var _error;
+var _messagesCallbacks;
+var _statusCallbacks;
+var _errorCallbacks;
+var _callMessagesCallbacks;
+var _callStatusCallbacks;
+var _callErrorCallbacks;
+var ReactChatState = class {
+  constructor(initialMessages = []) {
+    __privateAdd(this, _messages, void 0);
+    __privateAdd(this, _status, "ready");
+    __privateAdd(this, _error, void 0);
+    __privateAdd(this, _messagesCallbacks, /* @__PURE__ */ new Set());
+    __privateAdd(this, _statusCallbacks, /* @__PURE__ */ new Set());
+    __privateAdd(this, _errorCallbacks, /* @__PURE__ */ new Set());
+    this.pushMessage = (message) => {
+      __privateSet(this, _messages, __privateGet(this, _messages).concat(message));
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.popMessage = () => {
+      __privateSet(this, _messages, __privateGet(this, _messages).slice(0, -1));
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.replaceMessage = (index, message) => {
+      __privateSet(this, _messages, [
+        ...__privateGet(this, _messages).slice(0, index),
+        // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
+        this.snapshot(message),
+        ...__privateGet(this, _messages).slice(index + 1)
+      ]);
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.snapshot = (value) => structuredClone(value);
+    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => {
+      const callback = throttleWaitMs ? throttle(onChange, throttleWaitMs) : onChange;
+      __privateGet(this, _messagesCallbacks).add(callback);
+      return () => {
+        __privateGet(this, _messagesCallbacks).delete(callback);
+      };
+    };
+    this["~registerStatusCallback"] = (onChange) => {
+      __privateGet(this, _statusCallbacks).add(onChange);
+      return () => {
+        __privateGet(this, _statusCallbacks).delete(onChange);
+      };
+    };
+    this["~registerErrorCallback"] = (onChange) => {
+      __privateGet(this, _errorCallbacks).add(onChange);
+      return () => {
+        __privateGet(this, _errorCallbacks).delete(onChange);
+      };
+    };
+    __privateAdd(this, _callMessagesCallbacks, () => {
+      __privateGet(this, _messagesCallbacks).forEach((callback) => callback());
+    });
+    __privateAdd(this, _callStatusCallbacks, () => {
+      __privateGet(this, _statusCallbacks).forEach((callback) => callback());
+    });
+    __privateAdd(this, _callErrorCallbacks, () => {
+      __privateGet(this, _errorCallbacks).forEach((callback) => callback());
+    });
+    __privateSet(this, _messages, initialMessages);
+  }
+  get status() {
+    return __privateGet(this, _status);
+  }
+  set status(newStatus) {
+    __privateSet(this, _status, newStatus);
+    __privateGet(this, _callStatusCallbacks).call(this);
+  }
+  get error() {
+    return __privateGet(this, _error);
+  }
+  set error(newError) {
+    __privateSet(this, _error, newError);
+    __privateGet(this, _callErrorCallbacks).call(this);
+  }
+  get messages() {
+    return __privateGet(this, _messages);
+  }
+  set messages(newMessages) {
+    __privateSet(this, _messages, [...newMessages]);
+    __privateGet(this, _callMessagesCallbacks).call(this);
+  }
+};
+_messages = /* @__PURE__ */ new WeakMap();
+_status = /* @__PURE__ */ new WeakMap();
+_error = /* @__PURE__ */ new WeakMap();
+_messagesCallbacks = /* @__PURE__ */ new WeakMap();
+_statusCallbacks = /* @__PURE__ */ new WeakMap();
+_errorCallbacks = /* @__PURE__ */ new WeakMap();
+_callMessagesCallbacks = /* @__PURE__ */ new WeakMap();
+_callStatusCallbacks = /* @__PURE__ */ new WeakMap();
+_callErrorCallbacks = /* @__PURE__ */ new WeakMap();
+var _state;
+var Chat = class extends import_ai2.AbstractChat {
+  constructor({ messages, ...init }) {
+    const state = new ReactChatState(messages);
+    super({ ...init, state });
+    __privateAdd(this, _state, void 0);
+    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => __privateGet(this, _state)["~registerMessagesCallback"](onChange, throttleWaitMs);
+    this["~registerStatusCallback"] = (onChange) => __privateGet(this, _state)["~registerStatusCallback"](onChange);
+    this["~registerErrorCallback"] = (onChange) => __privateGet(this, _state)["~registerErrorCallback"](onChange);
+    __privateSet(this, _state, state);
+  }
+};
+_state = /* @__PURE__ */ new WeakMap();
+function useChat({
+  experimental_throttle: throttleWaitMs,
+  resume = false,
+  ...options
+} = {}) {
+  const latestRef = (0, import_react19.useRef)({});
+  if (!("chat" in options)) {
+    latestRef.current = {
+      onToolCall: options.onToolCall,
+      onData: options.onData,
+      onFinish: options.onFinish,
+      onError: options.onError,
+      sendAutomaticallyWhen: options.sendAutomaticallyWhen,
+      transport: options.transport
+    };
+  }
+  let defaultTransport;
+  const getTransport = () => {
+    var _a;
+    return (_a = latestRef.current.transport) != null ? _a : defaultTransport != null ? defaultTransport : defaultTransport = new import_ai.DefaultChatTransport();
+  };
+  const chatOptions = {
+    ...options,
+    transport: {
+      sendMessages: (sendOptions) => getTransport().sendMessages(sendOptions),
+      reconnectToStream: (reconnectOptions) => getTransport().reconnectToStream(reconnectOptions)
+    },
+    onToolCall: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onToolCall) == null ? void 0 : _b.call(_a, arg);
+    },
+    onData: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onData) == null ? void 0 : _b.call(_a, arg);
+    },
+    onFinish: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onFinish) == null ? void 0 : _b.call(_a, arg);
+    },
+    onError: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onError) == null ? void 0 : _b.call(_a, arg);
+    },
+    sendAutomaticallyWhen: (arg) => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = latestRef.current).sendAutomaticallyWhen) == null ? void 0 : _b.call(_a, arg)) != null ? _c : false;
+    }
+  };
+  const chatRef = (0, import_react19.useRef)(
+    "chat" in options ? options.chat : new Chat(chatOptions)
+  );
+  const shouldRecreateChat = "chat" in options && options.chat !== chatRef.current || "id" in options && options.id != null && chatRef.current.id !== options.id;
+  if (shouldRecreateChat) {
+    chatRef.current = "chat" in options ? options.chat : new Chat(chatOptions);
+  }
+  const subscribeToMessages = (0, import_react19.useCallback)(
+    (update) => chatRef.current["~registerMessagesCallback"](update, throttleWaitMs),
+    // `chatRef.current.id` is required to trigger re-subscription when the chat ID changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [throttleWaitMs, chatRef.current.id]
+  );
+  const messages = (0, import_react19.useSyncExternalStore)(
+    subscribeToMessages,
+    () => chatRef.current.messages,
+    () => chatRef.current.messages
+  );
+  const status = (0, import_react19.useSyncExternalStore)(
+    chatRef.current["~registerStatusCallback"],
+    () => chatRef.current.status,
+    () => chatRef.current.status
+  );
+  const error = (0, import_react19.useSyncExternalStore)(
+    chatRef.current["~registerErrorCallback"],
+    () => chatRef.current.error,
+    () => chatRef.current.error
+  );
+  const setMessages = (0, import_react19.useCallback)(
+    (messagesParam) => {
+      if (typeof messagesParam === "function") {
+        messagesParam = messagesParam(chatRef.current.messages);
+      }
+      chatRef.current.messages = messagesParam;
+    },
+    [chatRef]
+  );
+  (0, import_react19.useEffect)(() => {
+    if (resume) {
+      chatRef.current.resumeStream();
+    }
+  }, [resume, chatRef]);
+  return {
+    id: chatRef.current.id,
+    messages,
+    setMessages,
+    sendMessage: chatRef.current.sendMessage,
+    regenerate: chatRef.current.regenerate,
+    clearError: chatRef.current.clearError,
+    stop: chatRef.current.stop,
+    error,
+    resumeStream: chatRef.current.resumeStream,
+    status,
+    /**
+     * @deprecated Use `addToolOutput` instead.
+     */
+    addToolResult: chatRef.current.addToolOutput,
+    addToolOutput: chatRef.current.addToolOutput,
+    addToolApprovalResponse: chatRef.current.addToolApprovalResponse
+  };
+}
+
+// src/lib/use-puck-ai.ts
+var import_core5 = require("@puckeditor/core");
+var import_ai5 = require("ai");
+var import_react27 = require("react");
+var import_ulid = require("ulid");
+var import_qler = __toESM(require("qler"));
+var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
+var import_use_debounce = require("use-debounce");
+
+// ../reducer/index.ts
+init_react_import();
+var import_internal = require("@puckeditor/core/internal");
+var parseAppendPath = (path) => {
+  const segments = [];
+  const pattern = /([^.[\]]+)|\[(\d+)\]/g;
+  let match;
+  while ((match = pattern.exec(path)) !== null) {
+    segments.push(match[2] !== void 0 ? Number(match[2]) : match[1]);
+  }
+  return segments;
+};
+var appendAtPath = (base, segments, tail) => {
+  if (segments.length === 0) {
+    return `${typeof base === "string" ? base : ""}${tail}`;
+  }
+  const [head, ...rest] = segments;
+  if (typeof head === "number") {
+    const arr = Array.isArray(base) ? [...base] : [];
+    arr[head] = appendAtPath(arr[head], rest, tail);
+    return arr;
+  }
+  const obj = typeof base === "object" && base !== null && !Array.isArray(base) ? { ...base } : {};
+  obj[head] = appendAtPath(obj[head], rest, tail);
+  return obj;
+};
+var resolveAppends = (existingProps, props, appends) => {
+  if (!appends) return props;
+  const resolved = { ...props };
+  for (const [path, tail] of Object.entries(appends)) {
+    const [rootKey, ...rest] = parseAppendPath(path);
+    if (typeof rootKey !== "string") continue;
+    const base = rootKey in resolved ? resolved[rootKey] : existingProps?.[rootKey];
+    resolved[rootKey] = appendAtPath(base, rest, tail);
+  }
+  return resolved;
+};
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const zone = state.indexes.zones[zoneCompound];
+  if (!zone) return;
+  const index = zone.contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+var getItemById = (state, id) => state.indexes.nodes[id]?.data;
+var applyArrayDefaults = (oldProps, newProps, fields) => {
+  const updatedProps = {
+    ...oldProps,
+    ...newProps
+  };
+  for (const fieldName in fields) {
+    const field = fields[fieldName];
+    if (field.type === "array") {
+      const arrayField = field;
+      const arrayFields = arrayField.arrayFields;
+      const value = updatedProps[fieldName];
+      if (value === void 0) continue;
+      if (!Array.isArray(value)) {
+        const oldValue = oldProps[fieldName];
+        if (Array.isArray(oldValue)) {
+          updatedProps[fieldName] = oldValue;
+        } else {
+          delete updatedProps[fieldName];
+        }
+        continue;
+      }
+      updatedProps[fieldName] = value.map(
+        (item, index) => {
+          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] = item[arrayFieldName] ?? oldProps[fieldName]?.[index]?.[arrayFieldName] ?? defaultValue?.[arrayFieldName];
+            } else {
+              newItem[arrayFieldName] = item[arrayFieldName] ?? defaultValue?.[arrayFieldName];
+            }
+          }
+          return newItem;
+        }
+      );
+    }
+  }
+  return updatedProps;
+};
+var dispatchOp = (operation, {
+  getState,
+  dispatchAction,
+  config
+}) => {
+  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 = {
+          ...existing,
+          props: applyArrayDefaults(
+            existing.props,
+            operation.props,
+            config.components[existing.type].fields
+          )
+        };
+        newData.props.id ||= operation.id;
+        const selector = getSelectorForId(getState(), operation.id);
+        if (!selector) {
+          throw new Error(
+            `Tried to replace an item that doesn't exist: ${operation.id}`
+          );
+        }
+        dispatchAction({
+          type: "replace",
+          destinationIndex: selector.index,
+          destinationZone: selector.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 = {
+        ...existing,
+        props: applyArrayDefaults(
+          existing.props,
+          resolveAppends(
+            existing.props,
+            operation.props,
+            operation.appends
+          ),
+          config.components[existing.type].fields
+        )
+      };
+      dispatchAction({
+        type: "replace",
+        destinationIndex: selector.index,
+        destinationZone: selector.zone,
+        data: newData,
+        recordHistory: false
+      });
+    } else if (operation.op === "updateRoot") {
+      const existing = state.data.root;
+      const defaultProps = config.root?.defaultProps ?? {};
+      dispatchAction({
+        type: "replaceRoot",
+        root: {
+          ...existing,
+          props: {
+            ...defaultProps,
+            ...existing.props,
+            ...resolveAppends(
+              existing.props ?? {},
+              operation.props,
+              operation.appends
+            )
+          }
+        },
+        recordHistory: false
+      });
+    } else if (operation.op === "delete") {
+      const selector = getSelectorForId(state, operation.id);
+      if (selector) {
+        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 = config.root?.defaultProps ?? {};
+      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);
+  }
+};
 
 // src/lib/design/runtime.tsx
 init_react_import();
@@ -3444,9 +3415,9 @@ var attachInlineEditing = (el, {
       nextValue = parsed;
       lastValidNumberText = String(parsed);
     }
-    const { dispatch, getSelectorForId, getItemById, resolveDataById } = getPuck();
-    const selector = getSelectorForId(componentId);
-    const item = getItemById(componentId);
+    const { dispatch, getSelectorForId: getSelectorForId2, getItemById: getItemById2, resolveDataById } = getPuck();
+    const selector = getSelectorForId2(componentId);
+    const item = getItemById2(componentId);
     if (!selector || !item) return;
     dispatch({
       type: "replace",
@@ -3459,8 +3430,8 @@ var attachInlineEditing = (el, {
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const { getSelectorForId, dispatch } = getPuck();
-    const itemSelector = getSelectorForId(componentId);
+    const { getSelectorForId: getSelectorForId2, dispatch } = getPuck();
+    const itemSelector = getSelectorForId2(componentId);
     if (itemSelector) {
       dispatch({ type: "setUi", ui: { itemSelector } });
     }
@@ -4368,40 +4339,60 @@ var waitForIframeReady = async (root, imageTimeout = 1e4) => {
   await waitForNextPaint(document2);
 };
 
-// src/components/Chat/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+// ../utils/lib/iterate-sse.ts
+init_react_import();
+async function* iterateSSE(body) {
+  const reader = body.getReader();
+  const dec = new TextDecoder();
+  let buf = "";
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      let idx;
+      while ((idx = buf.indexOf("\n\n")) >= 0) {
+        const chunk = buf.slice(0, idx).trim();
+        buf = buf.slice(idx + 2);
+        if (!chunk) continue;
+        const line = chunk.startsWith("data: ") ? chunk.slice(6) : chunk;
+        try {
+          yield JSON.parse(line);
+        } catch {
+        }
+      }
+    }
+  } finally {
+    reader.cancel().catch(() => {
+    });
+    reader.releaseLock();
+  }
+}
+
+// src/lib/use-puck-ai.ts
 var q = (0, import_qler.default)();
+var usePuck = (0, import_core5.createUsePuck)();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.2" : "unknown";
-var BENCHMARK = false;
+var PLUGIN_AI_VERSION = true ? "0.9.0-canary.50fad349" : "unknown";
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
-var getClassName18 = getClassNameFactory("Chat", styles_module_default);
-var usePuck = (0, import_core5.createUsePuck)();
-function Chat2(props) {
-  const {
-    apiVersion = DEFAULT_API_VERSION,
-    chat,
-    designMode = false,
-    defaultMode = "assembly",
-    host = "/api/puck/chat",
-    prepareRequest,
-    scrollTrackingId
-  } = props;
-  const {
-    attachments,
-    examplePrompts,
-    actions: chatActions,
-    placeholder
-  } = chat ?? {};
+function usePuckAi({
+  host = "/api/puck/chat",
+  streamHost = "/api/puck/stream",
+  mode = "assembly",
+  apiVersion = DEFAULT_API_VERSION,
+  prepareRequest,
+  onFinish,
+  onError
+} = {}) {
   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 pendingBuildOpsRef = (0, import_react27.useRef)([]);
+  const [error, setError] = (0, import_react27.useState)();
+  const [toolStatus, setToolStatus] = (0, import_react27.useState)({});
+  const [subagentState, setSubagentState] = (0, import_react27.useState)({});
   const modeRef = (0, import_react27.useRef)(mode);
-  const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
   (0, import_react27.useEffect)(() => {
     modeRef.current = mode;
   }, [mode]);
@@ -4409,43 +4400,6 @@ function Chat2(props) {
   (0, import_react27.useEffect)(() => {
     syncDesignComponents(getPuck);
   }, [puckData, getPuck]);
-  const [error, setError] = (0, import_react27.useState)();
-  const [userError, setUserError] = (0, import_react27.useState)();
-  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 [toolStatus, setToolStatus] = (0, import_react27.useState)({});
-  const [subagentState, setSubagentState] = (0, import_react27.useState)({});
-  const attachmentConfig = (0, import_react27.useMemo)(
-    () => ({
-      accept: attachments?.accept ?? defaultAttachmentAccept,
-      enabled: attachments?.enabled ?? true,
-      endpoint: `${host.replace(/\/$/, "")}/attachments`,
-      maxFiles: attachments?.maxFiles ?? defaultAttachmentConfig.maxFiles,
-      maxSizeBytes: attachments?.maxSizeBytes ?? defaultAttachmentConfig.maxSizeBytes
-    }),
-    [attachments, host]
-  );
-  (0, import_react27.useEffect)(
-    () => () => {
-      uploadControllersRef.current.forEach((controller) => controller.abort());
-      uploadControllersRef.current.clear();
-    },
-    []
-  );
-  const deleteAttachment = (0, import_react27.useCallback)(
-    async (attachmentId) => {
-      try {
-        await fetch(`${attachmentConfig.endpoint}/${attachmentId}`, {
-          method: "DELETE"
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    [attachmentConfig.endpoint]
-  );
   const uploadScreenshot = (0, import_react27.useCallback)(
     async (width, bucketUrl) => {
       try {
@@ -4495,7 +4449,7 @@ function Chat2(props) {
           nextFrame(() => {
             const { dispatch, config, resolveDataById } = getPuck();
             operations.forEach((queuedOperation) => {
-              (0, import_reducer.dispatchOp)(queuedOperation, {
+              dispatchOp(queuedOperation, {
                 getState: () => {
                   const { __private } = getPuck();
                   return __private.appState;
@@ -4527,6 +4481,9 @@ function Chat2(props) {
   );
   const processData = (0, import_react27.useCallback)(
     (dataPart) => {
+      if (dataPart.type.indexOf("data-") !== 0) {
+        return;
+      }
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4644,6 +4601,9 @@ function Chat2(props) {
           debouncedFlushBuildOps.flush();
           return;
         }
+        case "data-page": {
+          return;
+        }
         case "data-version-notice": {
           console.warn(dataPart.data.message);
           return;
@@ -4661,32 +4621,54 @@ function Chat2(props) {
       uploadScreenshot
     ]
   );
-  const { messages, status, sendMessage, regenerate, setMessages, stop } = useChat({
+  const getRequestConfig = (0, import_react27.useCallback)(() => {
+    const { config, appState } = getPuck();
+    const root = config.root ?? {
+      fields: {
+        title: {
+          type: "text",
+          ai: { instructions: "The title for the page" }
+        }
+      }
+    };
+    return {
+      ...config,
+      root,
+      components: {
+        ...config.components,
+        ...getRequestComponentConfigs(appState.data)
+      }
+    };
+  }, [getPuck]);
+  const settle = (0, import_react27.useCallback)(
+    async ({ isAbort } = {}) => {
+      debouncedFlushBuildOps.flush();
+      await q.wait();
+      if (!isAbort) {
+        puckDispatch({
+          type: "set",
+          state: getPuck().appState,
+          recordHistory: true
+        });
+      }
+    },
+    [debouncedFlushBuildOps, getPuck, puckDispatch]
+  );
+  const {
+    messages,
+    status: chatStatus,
+    sendMessage: chatSendMessage,
+    regenerate,
+    setMessages,
+    stop
+  } = useChat({
     generateId: () => prefixedUlid("msg"),
     messages: [],
     transport: new import_ai5.DefaultChatTransport({
       api: host,
       prepareSendMessagesRequest: async (opts) => {
-        const { config, appState } = getPuck();
-        if (BENCHMARK) {
-          console.time("chat");
-        }
-        const root = config.root ?? {
-          fields: {
-            title: {
-              type: "text",
-              ai: { instructions: "The title for the page" }
-            }
-          }
-        };
-        const configWithRoot = {
-          ...config,
-          root,
-          components: {
-            ...config.components,
-            ...getRequestComponentConfigs(appState.data)
-          }
-        };
+        const { appState } = getPuck();
+        const configWithRoot = getRequestConfig();
         const defaultOptions = {
           headers: {
             ...opts.headers,
@@ -4703,62 +4685,346 @@ function Chat2(props) {
             config: configWithRoot,
             mode: modeRef.current
           }
-        };
-        if (prepareRequest) {
-          const userOptions = await prepareRequest(defaultOptions);
-          return {
-            headers: {
-              ...defaultOptions.headers,
-              ...userOptions.headers
-            },
-            credentials: userOptions.credentials ?? defaultOptions.credentials,
-            body: {
-              ...defaultOptions.body,
-              ...userOptions.body
-            }
-          };
-        }
-        return defaultOptions;
+        };
+        if (prepareRequest) {
+          const userOptions = await prepareRequest(defaultOptions);
+          return {
+            headers: {
+              ...defaultOptions.headers,
+              ...userOptions.headers
+            },
+            credentials: userOptions.credentials ?? defaultOptions.credentials,
+            body: {
+              ...defaultOptions.body,
+              ...userOptions.body
+            }
+          };
+        }
+        return defaultOptions;
+      }
+    }),
+    onData: processData,
+    onError: (e) => {
+      console.error(e);
+      setError(e.message);
+      onError?.(e);
+    },
+    onFinish: (options) => {
+      settle(options).then(() => onFinish?.(options));
+    }
+  });
+  const sendMessage = (0, import_react27.useCallback)(
+    async (prompt, opts = {}) => {
+      const text = prompt.trim();
+      const files = opts.files ?? [];
+      if (!text && files.length === 0) return;
+      if (opts.mode) modeRef.current = opts.mode;
+      setError(void 0);
+      await chatSendMessage({
+        role: "user",
+        parts: [...text ? [{ type: "text", text }] : [], ...files]
+      });
+    },
+    [chatSendMessage]
+  );
+  const [isStreaming, setIsStreaming] = (0, import_react27.useState)(false);
+  const streamAbortRef = (0, import_react27.useRef)(null);
+  const stream = (0, import_react27.useCallback)(
+    async (prompt, opts = {}) => {
+      const text = prompt.trim();
+      if (!text) return;
+      streamAbortRef.current?.abort();
+      const controller = new AbortController();
+      streamAbortRef.current = controller;
+      setError(void 0);
+      setIsStreaming(true);
+      try {
+        const { appState } = getPuck();
+        const response = await fetch(streamHost, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "puck-api-version": apiVersion,
+            "x-puck-plugin-ai-version": PLUGIN_AI_VERSION
+          },
+          body: JSON.stringify({
+            prompt: text,
+            config: getRequestConfig(),
+            pageData: appState.data,
+            mode: opts.mode ?? modeRef.current,
+            context: opts.context
+          }),
+          signal: controller.signal
+        });
+        if (!response.ok || !response.body) {
+          throw new Error(
+            `Puck AI request failed: ${response.status} ${response.statusText}`
+          );
+        }
+        for await (const part of iterateSSE(response.body)) {
+          if (controller.signal.aborted) return;
+          if (part.type === "error") throw new Error(part.errorText);
+          processData(part);
+        }
+        await settle();
+      } catch (e) {
+        if (controller.signal.aborted) return;
+        const err = e instanceof Error ? e : new Error(String(e));
+        console.error(err);
+        setError(err.message);
+        onError?.(err);
+      } finally {
+        if (streamAbortRef.current === controller) {
+          streamAbortRef.current = null;
+          setIsStreaming(false);
+        }
+      }
+    },
+    [
+      apiVersion,
+      getPuck,
+      getRequestConfig,
+      onError,
+      processData,
+      settle,
+      streamHost
+    ]
+  );
+  const stopAll = (0, import_react27.useCallback)(() => {
+    streamAbortRef.current?.abort();
+    streamAbortRef.current = null;
+    setIsStreaming(false);
+    stop();
+  }, [stop]);
+  (0, import_react27.useEffect)(() => () => stopAll(), [stopAll]);
+  return {
+    /**
+     * Send a prompt as the next turn of a conversation. The agent sees the
+     * history, and can write, check its work and correct itself.
+     */
+    sendMessage,
+    /**
+     * Run a one-shot generation from a prompt, with no conversation. Cheaper
+     * and more predictable than `sendMessage`, but it stops after its first
+     * write rather than reviewing the result.
+     */
+    stream,
+    /** Abort whichever request is in flight */
+    stop: stopAll,
+    status: isStreaming ? "streaming" : chatStatus,
+    /** The conversation so far, for building a transcript */
+    messages,
+    setMessages,
+    regenerate,
+    error,
+    /** Live per-tool progress, keyed by tool call id */
+    toolStatus,
+    /** Live subagent progress, keyed by tool call id */
+    subagentState,
+    /**
+     * @internal Apply a single stream part to the editor. Exposed for
+     * replaying a recorded stream (the marketing demo) — a real agent should
+     * go through `stream`.
+     */
+    processData
+  };
+}
+function finalizeReasoningParts(parts) {
+  return parts.map(
+    (part) => part.kind === "reasoning" && part.state !== "done" ? { ...part, state: "done" } : part
+  );
+}
+function reduceSubagentEvent(current, event) {
+  if (event.kind === "start") {
+    if (current[event.toolCallId]) return current;
+    return {
+      ...current,
+      [event.toolCallId]: {
+        toolCallId: event.toolCallId,
+        parentToolCallId: event.parentToolCallId,
+        agentType: event.agentType,
+        depth: event.depth,
+        label: event.label,
+        state: "running",
+        parts: []
+      }
+    };
+  }
+  const existing = current[event.toolCallId];
+  if (!existing) return current;
+  if (event.kind === "finish") {
+    return {
+      ...current,
+      [event.toolCallId]: {
+        ...existing,
+        state: "done",
+        parts: finalizeReasoningParts(existing.parts)
+      }
+    };
+  }
+  if (event.kind === "reasoning-delta") {
+    const parts = [...existing.parts];
+    const last = parts[parts.length - 1];
+    if (last && last.kind === "reasoning" && last.state !== "done") {
+      const separator = last.blockId !== event.blockId ? "\n\n" : "";
+      parts[parts.length - 1] = {
+        ...last,
+        blockId: event.blockId,
+        text: last.text + separator + event.text
+      };
+    } else {
+      parts.push({
+        kind: "reasoning",
+        blockId: event.blockId,
+        text: event.text,
+        state: "streaming"
+      });
+    }
+    return {
+      ...current,
+      [event.toolCallId]: { ...existing, parts }
+    };
+  }
+  if (event.kind === "text-delta") {
+    const parts = finalizeReasoningParts(existing.parts);
+    const last = parts[parts.length - 1];
+    if (last && last.kind === "text" && last.blockId === event.blockId) {
+      parts[parts.length - 1] = { ...last, text: last.text + event.text };
+    } else {
+      parts.push({ kind: "text", blockId: event.blockId, text: event.text });
+    }
+    return {
+      ...current,
+      [event.toolCallId]: { ...existing, parts }
+    };
+  }
+  if (event.kind === "tool-call") {
+    return {
+      ...current,
+      [event.toolCallId]: {
+        ...existing,
+        parts: [
+          ...finalizeReasoningParts(existing.parts),
+          {
+            kind: "tool",
+            childToolCallId: event.childToolCallId,
+            toolName: event.toolName,
+            input: event.input
+          }
+        ]
       }
-    }),
-    onData: processData,
-    onError: (e) => {
-      console.error(e);
-      if (BENCHMARK) {
-        console.timeEnd("chat");
+    };
+  }
+  if (event.kind === "tool-result") {
+    return {
+      ...current,
+      [event.toolCallId]: {
+        ...existing,
+        parts: existing.parts.map(
+          (part) => part.kind === "tool" && part.childToolCallId === event.childToolCallId ? { ...part, output: event.output } : part
+        )
       }
-      setError(e.message);
-    },
-    onFinish: (options) => {
-      debouncedFlushBuildOps.flush();
-      q.wait().then(() => {
-        if (!options.isAbort) {
-          puckDispatch({
-            type: "set",
-            state: getPuck().appState,
-            recordHistory: true
-          });
-        }
-        chat?.onFinish?.(options);
-      }).finally(() => {
-        if (BENCHMARK) {
-          console.timeEnd("chat");
-        }
-      });
-    }
-  });
-  (0, import_react27.useEffect)(
+    };
+  }
+  return current;
+}
+function nextFrame(cb) {
+  let ran = false;
+  const run = () => {
+    if (ran) return;
+    ran = true;
+    cb();
+  };
+  if (typeof document !== "undefined" && document.hidden) {
+    queueMicrotask(run);
+    return;
+  }
+  requestAnimationFrame(run);
+  setTimeout(run, 100);
+}
+
+// src/components/Chat/index.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var getClassName18 = getClassNameFactory("Chat", styles_module_default);
+var usePuck2 = (0, import_core6.createUsePuck)();
+function Chat2(props) {
+  const {
+    apiVersion = DEFAULT_API_VERSION,
+    chat,
+    designMode = false,
+    defaultMode = "assembly",
+    host = "/api/puck/chat",
+    prepareRequest,
+    scrollTrackingId
+  } = props;
+  const {
+    attachments,
+    examplePrompts,
+    actions: chatActions,
+    placeholder
+  } = chat ?? {};
+  const puckDispatch = usePuck2((s) => s.dispatch);
+  const inputRef = (0, import_react28.useRef)(null);
+  const pluginRef = (0, import_react28.useRef)(null);
+  const [mode, setMode] = (0, import_react28.useState)(defaultMode);
+  const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
+  const [error, setError] = (0, import_react28.useState)();
+  const [userError, setUserError] = (0, import_react28.useState)();
+  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 attachmentConfig = (0, import_react28.useMemo)(
+    () => ({
+      accept: attachments?.accept ?? defaultAttachmentAccept,
+      enabled: attachments?.enabled ?? true,
+      endpoint: `${host.replace(/\/$/, "")}/attachments`,
+      maxFiles: attachments?.maxFiles ?? defaultAttachmentConfig.maxFiles,
+      maxSizeBytes: attachments?.maxSizeBytes ?? defaultAttachmentConfig.maxSizeBytes
+    }),
+    [attachments, host]
+  );
+  (0, import_react28.useEffect)(
     () => () => {
-      stop();
+      uploadControllersRef.current.forEach((controller) => controller.abort());
+      uploadControllersRef.current.clear();
+    },
+    []
+  );
+  const deleteAttachment = (0, import_react28.useCallback)(
+    async (attachmentId) => {
+      try {
+        await fetch(`${attachmentConfig.endpoint}/${attachmentId}`, {
+          method: "DELETE"
+        });
+      } catch (e) {
+        console.error(e);
+      }
     },
-    [stop]
+    [attachmentConfig.endpoint]
   );
-  const [forcedStatus, setForcedStatus] = (0, import_react27.useState)();
-  const resolvedStatus = (0, import_react27.useMemo)(
+  const {
+    sendMessage,
+    status,
+    messages,
+    setMessages,
+    regenerate,
+    error: aiError,
+    toolStatus,
+    subagentState,
+    processData
+  } = usePuckAi({
+    host,
+    mode,
+    apiVersion,
+    prepareRequest,
+    onFinish: chat?.onFinish
+  });
+  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,
@@ -4771,12 +5037,16 @@ function Chat2(props) {
       });
     };
   }, [resolvedStatus, scrollTrackingId]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     window.__PUCK_AI = {
       processData,
       setMessages,
       setStatus: setForcedStatus,
-      sendMessage,
+      sendMessage: (message) => sendMessage(
+        message.parts.filter(
+          (part) => Boolean(part && part.type === "text")
+        ).map((part) => part.text).join("")
+      ),
       focus: () => inputRef?.current?.focus()
     };
   }, [processData]);
@@ -4818,13 +5088,7 @@ function Chat2(props) {
     }
     setComposerAttachments([]);
     removedAttachmentClientIdsRef.current.clear();
-    sendMessage({
-      role: "user",
-      parts: [
-        ...text ? [{ type: "text", text }] : [],
-        ...readyAttachments
-      ]
-    }).catch((e) => {
+    sendMessage(text, { files: readyAttachments }).catch((e) => {
       console.error(e);
       setError("Failed to send message.");
       setComposerAttachments(composerAttachments);
@@ -4980,7 +5244,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,
@@ -5040,7 +5304,7 @@ function Chat2(props) {
           label
         )
       ),
-      error,
+      error: error ?? aiError,
       handleRetry: () => {
         setError("");
         regenerate();
@@ -5058,105 +5322,6 @@ function Chat2(props) {
     }
   ) }) }) }) });
 }
-function finalizeReasoningParts(parts) {
-  return parts.map(
-    (part) => part.kind === "reasoning" && part.state !== "done" ? { ...part, state: "done" } : part
-  );
-}
-function reduceSubagentEvent(current, event) {
-  if (event.kind === "start") {
-    if (current[event.toolCallId]) return current;
-    return {
-      ...current,
-      [event.toolCallId]: {
-        toolCallId: event.toolCallId,
-        parentToolCallId: event.parentToolCallId,
-        agentType: event.agentType,
-        depth: event.depth,
-        label: event.label,
-        state: "running",
-        parts: []
-      }
-    };
-  }
-  const existing = current[event.toolCallId];
-  if (!existing) return current;
-  if (event.kind === "finish") {
-    return {
-      ...current,
-      [event.toolCallId]: {
-        ...existing,
-        state: "done",
-        parts: finalizeReasoningParts(existing.parts)
-      }
-    };
-  }
-  if (event.kind === "reasoning-delta") {
-    const parts = [...existing.parts];
-    const last = parts[parts.length - 1];
-    if (last && last.kind === "reasoning" && last.state !== "done") {
-      const separator = last.blockId !== event.blockId ? "\n\n" : "";
-      parts[parts.length - 1] = {
-        ...last,
-        blockId: event.blockId,
-        text: last.text + separator + event.text
-      };
-    } else {
-      parts.push({
-        kind: "reasoning",
-        blockId: event.blockId,
-        text: event.text,
-        state: "streaming"
-      });
-    }
-    return {
-      ...current,
-      [event.toolCallId]: { ...existing, parts }
-    };
-  }
-  if (event.kind === "text-delta") {
-    const parts = finalizeReasoningParts(existing.parts);
-    const last = parts[parts.length - 1];
-    if (last && last.kind === "text" && last.blockId === event.blockId) {
-      parts[parts.length - 1] = { ...last, text: last.text + event.text };
-    } else {
-      parts.push({ kind: "text", blockId: event.blockId, text: event.text });
-    }
-    return {
-      ...current,
-      [event.toolCallId]: { ...existing, parts }
-    };
-  }
-  if (event.kind === "tool-call") {
-    return {
-      ...current,
-      [event.toolCallId]: {
-        ...existing,
-        parts: [
-          ...finalizeReasoningParts(existing.parts),
-          {
-            kind: "tool",
-            childToolCallId: event.childToolCallId,
-            toolName: event.toolName,
-            input: event.input
-          }
-        ]
-      }
-    };
-  }
-  if (event.kind === "tool-result") {
-    return {
-      ...current,
-      [event.toolCallId]: {
-        ...existing,
-        parts: existing.parts.map(
-          (part) => part.kind === "tool" && part.childToolCallId === event.childToolCallId ? { ...part, output: event.output } : part
-        )
-      }
-    };
-  }
-  return current;
-}
 function AttachmentComposer({
   accept,
   attachments,
@@ -5164,8 +5329,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",
@@ -5242,20 +5407,6 @@ function Placeholder({
     ] })
   ] });
 }
-function nextFrame(cb) {
-  let ran = false;
-  const run = () => {
-    if (ran) return;
-    ran = true;
-    cb();
-  };
-  if (typeof document !== "undefined" && document.hidden) {
-    queueMicrotask(run);
-    return;
-  }
-  requestAnimationFrame(run);
-  setTimeout(run, 100);
-}
 function isScrolledIntoView(el) {
   const rect = el.getBoundingClientRect();
   const elemTop = rect.top;
@@ -5265,7 +5416,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();
@@ -5288,9 +5439,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"
     );
@@ -5335,9 +5486,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;
@@ -5356,7 +5507,7 @@ var ScrollTracking = ({
       });
     }
   });
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     follow();
   }, [follow]);
   return children;
@@ -5364,12 +5515,12 @@ var ScrollTracking = ({
 
 // src/components/Drawer/index.tsx
 init_react_import();
-var import_core7 = require("@puckeditor/core");
+var import_core8 = require("@puckeditor/core");
 
 // src/components/ManageComponents/index.tsx
 init_react_import();
-var import_core6 = require("@puckeditor/core");
-var import_react30 = require("react");
+var import_core7 = require("@puckeditor/core");
+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();
@@ -5378,17 +5529,17 @@ 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()
 );
 function ManageModalContent({ onClose }) {
-  const getPuck = (0, import_core6.useGetPuck)();
+  const getPuck = (0, import_core7.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) => {
@@ -5443,9 +5594,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: [
@@ -5462,10 +5613,10 @@ var styles_module_default11 = { "Drawer--empty": "_Drawer--empty_8e8cs_1" };
 
 // src/components/Drawer/index.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var usePuck2 = (0, import_core7.createUsePuck)();
+var usePuck3 = (0, import_core8.createUsePuck)();
 var cx11 = get_class_name_factory_default("Drawer", styles_module_default11);
 var createDrawer = (designModeVisible) => function Drawer({ children }) {
-  const config = usePuck2((s) => s.config);
+  const config = usePuck3((s) => s.config);
   if (Object.keys(config.components).length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx11({ empty: true }), children: "No blocks" });
   }
@@ -5475,8 +5626,8 @@ var createDrawer = (designModeVisible) => function Drawer({ children }) {
   ] });
 };
 
-// src/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+// src/lib/design/with-dynamic-config.ts
+init_react_import();
 function withDynamicConfig(config, data) {
   const registrations = getPersistedRegistrations(data);
   const dynamicConfig = {};
@@ -5506,6 +5657,9 @@ function withDynamicConfig(config, data) {
   applyConfigFieldMetadata(result, dynamicConfig);
   return result;
 }
+
+// src/index.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function createAiPlugin(opts) {
   const { scrollTracking = true, ...rest } = opts || {};
   const scrollTrackingId = `puck-ai-scroll-${(0, import_ulid2.ulid)()}`;
@@ -5530,6 +5684,7 @@ function createAiPlugin(opts) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createAiPlugin,
+  usePuckAi,
   withDynamicConfig
 });
 /*! Bundled license information: