@mjml-agent-editor/editor 0.1.12 → 0.1.15

package/dist/{chunk-4N2OJT22.js → chunk-3RCKZYM4.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk-V6RR4VRD.js";
 
 // src/stores.tsx
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 
 // src/labels.ts
 var DEFAULT_LABELS = {
@@ -49,6 +49,29 @@ var DEFAULT_LABELS = {
   rteBackgroundColor: "Background color",
   documentLoadFailed: "Failed to load the document.",
   documentSaveFailed: "Failed to save changes.",
+  retry: "Retry",
+  chooseImage: "Choose image",
+  imagePickerTitle: "Choose an image",
+  imagePickerDrop: "Drag images here, or",
+  imagePickerBrowse: "Browse files",
+  imagePickerUrlPlaceholder: "\u2026or paste an image URL",
+  imagePickerUseUrl: "Use URL",
+  imagePickerGallery: "Your images",
+  imagePickerEmpty: "No images yet \u2014 the ones you upload will be kept here.",
+  imagePickerQuota: (used, limit) => `${used} of ${limit} uploads used`,
+  imagePickerQuotaFull: "Upload limit reached \u2014 pick an image below or paste a URL.",
+  imagePickerDelete: "Delete image",
+  imagePickerConfirmDelete: "Click again to delete",
+  imagePickerLoadFailed: "Failed to load your images.",
+  imageUploadFailed: "Failed to upload the image.",
+  imageDeleteFailed: "Failed to delete the image.",
+  imagePickerUnsupported: (fileName) => `${fileName} is not a supported image type.`,
+  imageFieldRemove: "Remove image",
+  colorPickerOpen: "Pick a color",
+  colorPickerEyedropper: "Pick from the screen",
+  colorPickerDocument: "In this email",
+  colorPickerPresets: "Presets",
+  colorPickerTransparent: "Transparent",
   commentOnSection: "Comment on the whole section",
   closeComments: "Close",
   noCommentsYet: "No comments yet \u2014 add the first one.",
@@ -60,6 +83,7 @@ var DEFAULT_LABELS = {
   agentWorking: "Agent is working\u2026",
   reasoning: "Reasoning",
   completedSteps: (count, failed) => failed > 0 ? `Completed steps (${count}, ${failed} failed)` : `Completed steps (${count})`,
+  stepLimitReached: "The agent ran out of steps for this turn. Ask it to continue.",
   applyComments: "Apply changes from comments",
   chatPlaceholder: "Describe what you want to change\u2026 (Enter = send, Shift+Enter = new line)",
   stop: "Stop",
@@ -90,13 +114,27 @@ function mergeLabels(overrides) {
 import { jsx } from "react/jsx-runtime";
 var StoreContext = createContext(null);
 var LabelContext = createContext(null);
+var TurnContext = createContext({
+  running: false,
+  setRunning: () => {
+  },
+  locked: false,
+  setLocked: () => {
+  }
+});
 function EditorStoreProvider({
   stores,
   labels,
   children
 }) {
   const merged = useMemo(() => mergeLabels(labels), [labels]);
-  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: stores, children: /* @__PURE__ */ jsx(LabelContext.Provider, { value: merged, children }) });
+  const [running, setRunning] = useState(false);
+  const [locked, setLocked] = useState(false);
+  const turn = useMemo(() => ({ running, setRunning, locked, setLocked }), [running, locked]);
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: stores, children: /* @__PURE__ */ jsx(LabelContext.Provider, { value: merged, children: /* @__PURE__ */ jsx(TurnContext.Provider, { value: turn, children }) }) });
+}
+function useAgentTurn() {
+  return useContext(TurnContext);
 }
 function useLabels() {
   return useContext(LabelContext) ?? mergeLabels();
@@ -116,12 +154,15 @@ function useDocumentStore() {
 function useCommentStore() {
   return useStores().comments;
 }
+function useImageLibrary() {
+  return useStores().images;
+}
 
 // src/index.ts
 import { STARTER_MJML } from "@mjml-agent-editor/core";
 
 // src/components/editor/EditorHeader.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 import { toast } from "sonner";
 import {
   Undo2,
@@ -420,6 +461,22 @@ function DialogTitle({ className, ...props }) {
     }
   );
 }
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/editor/EditorHeader.tsx
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -465,17 +522,18 @@ function EditorHeader({
 }) {
   const documents = useDocumentStore();
   const labels = useLabels();
-  const [name, setName] = useState("");
-  const [state, setState] = useState({
+  const [name, setName] = useState2("");
+  const [state, setState] = useState2({
     device: "Desktop",
     canUndo: false,
     canRedo: false,
     saveStatus: "idle",
     zoom: 100,
-    contentWidth: "600px"
+    contentWidth: "600px",
+    readOnly: false
   });
-  const [code, setCode] = useState({ mjml: "", html: "" });
-  const [preview, setPreview] = useState("");
+  const [code, setCode] = useState2({ mjml: "", html: "" });
+  const [preview, setPreview] = useState2("");
   useEffect(() => {
     documents.get(docId).then((d) => setName(d.name)).catch(() => {
     });
@@ -569,6 +627,7 @@ function EditorHeader({
         {
           variant: "ghost",
           size: "sm",
+          disabled: state.readOnly,
           className: cn(darkGhost, "gap-1.5 rounded-md border border-panel-border max-xl:hidden"),
           children: [
             /* @__PURE__ */ jsx7("span", { className: "text-panel-muted-fg", children: labels.contentWidth }),
@@ -801,7 +860,7 @@ function EditorHeader({
 // src/components/chat/ChatPanel.tsx
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { toast as toast2 } from "sonner";
 import {
   Brain,
@@ -815,6 +874,27 @@ import {
   ChevronRight
 } from "lucide-react";
 
+// src/lib/refusal.ts
+function refusal(error) {
+  if (!(error instanceof Error)) return null;
+  const status = error.status;
+  const deliberate = typeof status === "number" ? status >= 400 && status < 500 : null;
+  if (deliberate === false) return null;
+  if (error.message.startsWith("{")) {
+    try {
+      const parsed = JSON.parse(error.message);
+      return typeof parsed.error === "string" && parsed.error.trim() !== "" ? parsed.error : null;
+    } catch {
+      return null;
+    }
+  }
+  const message = error.message.trim();
+  return deliberate && message !== "" && !message.startsWith("<") ? error.message : null;
+}
+function saveToastId(docId) {
+  return `document-save-${docId}`;
+}
+
 // src/components/ui/message.tsx
 import "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -1199,16 +1279,6 @@ function toBlocks(parts) {
   }
   return blocks;
 }
-function refusal(error) {
-  const body = error instanceof Error ? error.message : "";
-  if (!body.startsWith("{")) return null;
-  try {
-    const parsed = JSON.parse(body);
-    return typeof parsed.error === "string" && parsed.error.trim() !== "" ? parsed.error : null;
-  } catch {
-    return null;
-  }
-}
 function ToolMarker({ tool }) {
   const labels = useLabels();
   const name = tool.type.slice(5);
@@ -1270,8 +1340,10 @@ function ChatPanel({
   onSectionEditEnd
 }) {
   const labels = useLabels();
-  const [input, setInput] = useState2("");
+  const [input, setInput] = useState3("");
   const taRef = useRef(null);
+  const sending = useRef(false);
+  const [flushing, setFlushing] = useState3(false);
   const times = useRef(/* @__PURE__ */ new Map());
   const timeFor = (id) => {
     if (!times.current.has(id)) {
@@ -1335,6 +1407,9 @@ function ChatPanel({
     }
   }, [messages, onLiveUpdate, onSectionEditStart, onSectionEditEnd]);
   const busy = status === "submitted" || status === "streaming";
+  const { setRunning, locked } = useAgentTurn();
+  useEffect2(() => setRunning(busy || flushing), [busy, flushing, setRunning]);
+  useEffect2(() => () => setRunning(false), [setRunning]);
   const lastMsg = messages[messages.length - 1];
   const toolRunning = lastMsg?.role === "assistant" && lastMsg.parts.some((p) => {
     if (!p.type.startsWith("tool-")) return false;
@@ -1349,8 +1424,19 @@ function ChatPanel({
   };
   const send = async (text) => {
     const trimmed = text.trim();
-    if (!trimmed || busy) return;
-    await onBeforeSend().catch(console.error);
+    if (!trimmed || busy || locked || sending.current) return;
+    sending.current = true;
+    setFlushing(true);
+    try {
+      await onBeforeSend();
+    } catch (error) {
+      console.error(error);
+      toast2.error(refusal(error) ?? labels.documentSaveFailed, { id: saveToastId(docId) });
+      return;
+    } finally {
+      sending.current = false;
+      setFlushing(false);
+    }
     void sendMessage({ text: trimmed });
     setInput("");
     if (taRef.current) taRef.current.style.height = "auto";
@@ -1367,6 +1453,7 @@ function ChatPanel({
           const isLast = mi === messages.length - 1;
           const blocks = toBlocks(message.parts);
           const hasText = blocks.some((block) => block.kind === "text");
+          const metadata = message.metadata;
           return /* @__PURE__ */ jsx14(MessageScrollerItem, { messageId: message.id, children: /* @__PURE__ */ jsxs4("div", { className: cn("flex w-full gap-2", isUser && "flex-row-reverse"), children: [
             !isUser && /* @__PURE__ */ jsx14("span", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-brand/15 text-brand", children: /* @__PURE__ */ jsx14(Sparkles, { className: "size-3.5" }) }),
             /* @__PURE__ */ jsxs4(
@@ -1415,7 +1502,11 @@ function ChatPanel({
                         i
                       );
                     }),
-                    isLast && !isUser && busy && !toolRunning && !hasText && /* @__PURE__ */ jsx14(BusyMarker, {})
+                    isLast && !isUser && busy && !toolRunning && !hasText && /* @__PURE__ */ jsx14(BusyMarker, {}),
+                    metadata?.stepLimitReached && /* @__PURE__ */ jsxs4(Marker, { className: "text-panel-muted-fg", children: [
+                      /* @__PURE__ */ jsx14(MarkerIcon, { children: /* @__PURE__ */ jsx14(TriangleAlert, {}) }),
+                      /* @__PURE__ */ jsx14(MarkerContent, { children: labels.stepLimitReached })
+                    ] })
                   ] }) }),
                   blocks.length > 0 && /* @__PURE__ */ jsx14("span", { className: "px-1 text-[10px] text-panel-muted-fg", children: timeFor(message.id) })
                 ]
@@ -1432,7 +1523,7 @@ function ChatPanel({
         Button,
         {
           className: "mb-2 w-full bg-brand text-brand-fg hover:bg-brand/90",
-          disabled: busy,
+          disabled: busy || flushing || locked,
           onClick: () => void send(APPLY_COMMENTS_PROMPT),
           children: [
             /* @__PURE__ */ jsx14(Sparkles, {}),
@@ -1491,7 +1582,7 @@ function ChatPanel({
                 {
                   type: "submit",
                   size: "sm",
-                  disabled: busy || !input.trim(),
+                  disabled: busy || flushing || locked || !input.trim(),
                   className: "bg-brand text-brand-fg hover:bg-brand/90",
                   children: [
                     /* @__PURE__ */ jsx14(Send, {}),
@@ -1510,7 +1601,7 @@ function ChatPanel({
 
 // src/components/comments/CanvasComments.tsx
 import { useEditorMaybe } from "@grapesjs/react";
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState4 } from "react";
 import { Check as Check2, MessageSquarePlus, X as X2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var keyOf = (c) => c.objectId ? `obj-${c.objectId}` : `sec-${c.sectionId}`;
@@ -1526,11 +1617,11 @@ function CanvasComments({
   const labels = useLabels();
   const editor = useEditorMaybe();
   const containerRef = useRef2(null);
-  const [comments, setComments] = useState3([]);
-  const [positions, setPositions] = useState3({});
-  const [activeKey, setActiveKey] = useState3(null);
-  const [composeInfo, setComposeInfo] = useState3(null);
-  const [body, setBody] = useState3("");
+  const [comments, setComments] = useState4([]);
+  const [positions, setPositions] = useState4({});
+  const [activeKey, setActiveKey] = useState4(null);
+  const [composeInfo, setComposeInfo] = useState4(null);
+  const [body, setBody] = useState4("");
   const reload = useCallback(() => {
     commentStore.list(docId).then(setComments).catch(console.error);
   }, [docId]);
@@ -1779,13 +1870,26 @@ export {
   DEFAULT_LABELS,
   mergeLabels,
   EditorStoreProvider,
+  useAgentTurn,
   useLabels,
   useDocumentStore,
   useCommentStore,
+  useImageLibrary,
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverContent,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
   EditorHeader,
+  refusal,
+  saveToastId,
   Markdown,
   ChatPanel,
   CanvasComments,
   STARTER_MJML
 };
-//# sourceMappingURL=chunk-4N2OJT22.js.map
+//# sourceMappingURL=chunk-3RCKZYM4.js.map