@mjml-agent-editor/editor 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -112,11 +112,13 @@ 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",
   send: "Send",
   chatError: "Agent chat error.",
+  agentUnavailable: "The agent is unavailable right now. You can still edit the email and leave comments.",
   toolLabels: {
     get_document: "Reading document",
     get_section: "Reading section",
@@ -1076,6 +1078,11 @@ function saveToastId(docId) {
   return `document-save-${docId}`;
 }
 
+// src/lib/turn-gate.ts
+function canStartTurn(text, gate) {
+  return !gate.unavailable && !gate.busy && !gate.flushing && !gate.locked && text.trim() !== "";
+}
+
 // src/components/ui/textarea.tsx
 var React11 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -1605,6 +1612,7 @@ function ChatPanel({
   initialMessages,
   transport,
   resume,
+  agentUnavailable = false,
   onBeforeSend,
   onAgentFinish,
   onLiveUpdate,
@@ -1612,6 +1620,9 @@ function ChatPanel({
   onSectionEditEnd
 }) {
   const labels = useLabels();
+  const unavailableId = (0, import_react5.useId)();
+  const footerRef = (0, import_react5.useRef)(null);
+  const statusRef = (0, import_react5.useRef)(null);
   const [input, setInput] = (0, import_react5.useState)("");
   const taRef = (0, import_react5.useRef)(null);
   const sending = (0, import_react5.useRef)(false);
@@ -1680,6 +1691,7 @@ function ChatPanel({
   }, [messages, onLiveUpdate, onSectionEditStart, onSectionEditEnd]);
   const busy = status === "submitted" || status === "streaming";
   const { setRunning, locked } = useAgentTurn();
+  const gate = { unavailable: agentUnavailable, busy, flushing, locked };
   (0, import_react5.useEffect)(() => setRunning(busy || flushing), [busy, flushing, setRunning]);
   (0, import_react5.useEffect)(() => () => setRunning(false), [setRunning]);
   const lastMsg = messages[messages.length - 1];
@@ -1694,24 +1706,40 @@ function ChatPanel({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
   };
+  (0, import_react5.useLayoutEffect)(() => {
+    const active = document.activeElement;
+    if (agentUnavailable && active?.matches(":disabled") && footerRef.current?.contains(active)) {
+      statusRef.current?.focus();
+    } else if (!agentUnavailable && active === statusRef.current) {
+      taRef.current?.focus();
+    }
+  }, [agentUnavailable]);
+  const [pending, setPending] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (pending === null) return;
+    setPending(null);
+    sending.current = false;
+    setFlushing(false);
+    if (agentUnavailable || pending.docId !== docId) return;
+    void sendMessage({ text: pending.text });
+    setInput("");
+    if (taRef.current) taRef.current.style.height = "auto";
+  }, [pending, agentUnavailable, docId, sendMessage]);
   const send = async (text) => {
+    if (!canStartTurn(text, gate) || sending.current) return;
     const trimmed = text.trim();
-    if (!trimmed || busy || locked || sending.current) return;
     sending.current = true;
     setFlushing(true);
     try {
       await onBeforeSend();
     } catch (error) {
+      sending.current = false;
+      setFlushing(false);
       console.error(error);
       import_sonner2.toast.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";
+    setPending({ text: trimmed, docId });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MessageScroller, { className: "flex-1", children: [
@@ -1725,6 +1753,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__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerItem, { messageId: message.id, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex w-full gap-2", isUser && "flex-row-reverse"), children: [
             !isUser && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-brand/15 text-brand", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Sparkles, { className: "size-3.5" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -1773,7 +1802,11 @@ function ChatPanel({
                         i
                       );
                     }),
-                    isLast && !isUser && busy && !toolRunning && !hasText && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BusyMarker, {})
+                    isLast && !isUser && busy && !toolRunning && !hasText && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BusyMarker, {}),
+                    metadata?.stepLimitReached && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Marker, { className: "text-panel-muted-fg", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.TriangleAlert, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerContent, { children: labels.stepLimitReached })
+                    ] })
                   ] }) }),
                   blocks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "px-1 text-[10px] text-panel-muted-fg", children: timeFor(message.id) })
                 ]
@@ -1785,12 +1818,17 @@ function ChatPanel({
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerButton, { direction: "end" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "border-t border-panel-border p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: footerRef, className: "border-t border-panel-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref: statusRef, id: unavailableId, role: "status", tabIndex: -1, className: "rounded-lg", children: agentUnavailable && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "mb-2 flex items-start gap-2 rounded-lg border border-panel-border bg-panel-elevated/60 px-3 py-2 text-xs text-panel-fg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.CirclePause, { className: "mt-px size-3.5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: labels.agentUnavailable })
+      ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         Button,
         {
           className: "mb-2 w-full bg-brand text-brand-fg hover:bg-brand/90",
-          disabled: busy || flushing || locked,
+          disabled: !canStartTurn(APPLY_COMMENTS_PROMPT, gate),
+          "aria-describedby": agentUnavailable ? unavailableId : void 0,
           onClick: () => void send(APPLY_COMMENTS_PROMPT),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Sparkles, {}),
@@ -1813,8 +1851,10 @@ function ChatPanel({
               {
                 ref: taRef,
                 rows: 2,
-                className: "max-h-40 min-h-14 resize-none border-0 bg-transparent px-3 pt-2.5 text-panel-fg shadow-none placeholder:text-panel-muted-fg focus-visible:ring-0",
-                placeholder: labels.chatPlaceholder,
+                className: "max-h-40 min-h-14 resize-none border-0 bg-transparent px-3 pt-2.5 text-panel-fg shadow-none placeholder:text-panel-muted-fg focus-visible:ring-0 disabled:bg-transparent",
+                placeholder: agentUnavailable ? void 0 : labels.chatPlaceholder,
+                disabled: agentUnavailable,
+                "aria-describedby": agentUnavailable ? unavailableId : void 0,
                 value: input,
                 onChange: (e) => {
                   setInput(e.target.value);
@@ -1849,7 +1889,8 @@ function ChatPanel({
                 {
                   type: "submit",
                   size: "sm",
-                  disabled: busy || flushing || locked || !input.trim(),
+                  disabled: !canStartTurn(input, gate),
+                  "aria-describedby": agentUnavailable ? unavailableId : void 0,
                   className: "bg-brand text-brand-fg hover:bg-brand/90",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Send, {}),