@mjml-agent-editor/editor 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -1389,6 +1389,39 @@ var SECTION_ARG = {
   remove_section: "section_id",
   insert_section: "after_section_id"
 };
+function toBlocks(parts) {
+  const blocks = [];
+  for (const part of parts) {
+    if (part.type.startsWith("tool-")) {
+      const last = blocks[blocks.length - 1];
+      if (last?.kind === "tools") last.tools.push(part);
+      else blocks.push({ kind: "tools", tools: [part] });
+      continue;
+    }
+    if (part.type === "reasoning") {
+      const text = part.text;
+      if (!text.trim()) continue;
+      const last = blocks[blocks.length - 1];
+      if (last?.kind === "reasoning")
+        blocks[blocks.length - 1] = { kind: "reasoning", text: `${last.text}${text}` };
+      else blocks.push({ kind: "reasoning", text });
+      continue;
+    }
+    if (part.type === "text") {
+      if (!part.text.trim()) continue;
+      blocks.push({ kind: "text", text: part.text, narration: false });
+    }
+  }
+  let seenTools = false;
+  for (let i = blocks.length - 1; i >= 0; i--) {
+    const block = blocks[i];
+    if (block.kind === "tools") seenTools = true;
+    else if (block.kind === "text" && seenTools) {
+      blocks[i] = { kind: "text", text: block.text, narration: true };
+    }
+  }
+  return blocks;
+}
 function ToolMarker({ tool }) {
   const name = tool.type.slice(5);
   const done = tool.state === "output-available";
@@ -1414,7 +1447,7 @@ function ToolActivity({ tools }) {
   );
   const failedCount = finished.filter((t) => t.state === "output-error").length;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1 rounded-lg border border-panel-border bg-panel-elevated/60 p-2", children: [
-    finished.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Collapsible, { defaultOpen: true, children: [
+    finished.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Collapsible, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CollapsibleTrigger, { className: "group/col flex w-full items-center gap-1.5 text-left text-xs font-medium text-panel-fg hover:text-panel-fg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: failedCount > 0 ? `Completed steps (${finished.length}, ${failedCount} failed)` : `Completed steps (${finished.length})` })
@@ -1424,6 +1457,16 @@ function ToolActivity({ tools }) {
     running.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolMarker, { tool: t }, `r${i}`))
   ] });
 }
+function ReasoningBlock({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-lg border border-panel-border bg-panel-elevated/60 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Collapsible, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CollapsibleTrigger, { className: "group/col flex w-full items-center gap-1.5 text-left text-xs font-medium text-panel-muted-fg hover:text-panel-fg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Brain, { className: "size-3.5 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Reasoning" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollapsibleContent, { className: "mt-1.5 pl-1 text-xs whitespace-pre-wrap text-panel-muted-fg", children: text })
+  ] }) });
+}
 function ChatPanel({
   docId,
   initialMessages,
@@ -1523,12 +1566,8 @@ function ChatPanel({
         ] }) }) : messages.map((message, mi) => {
           const isUser = message.role === "user";
           const isLast = mi === messages.length - 1;
-          const toolParts = message.parts.filter(
-            (p) => p.type.startsWith("tool-")
-          );
-          const textParts = message.parts.filter(
-            (p) => p.type === "text" && p.text.trim() !== ""
-          );
+          const blocks = toBlocks(message.parts);
+          const hasText = blocks.some((block) => block.kind === "text");
           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)(
@@ -1540,28 +1579,46 @@ function ChatPanel({
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MessageContent, { children: [
-                    toolParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolActivity, { tools: toolParts }),
-                    textParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      Bubble,
-                      {
-                        variant: isUser ? "default" : "muted",
-                        align: isUser ? "end" : "start",
-                        className: cn(
-                          isUser ? "[&_[data-slot=bubble-content]]:bg-brand [&_[data-slot=bubble-content]]:text-brand-fg" : "[&_[data-slot=bubble-content]]:border [&_[data-slot=bubble-content]]:border-panel-border [&_[data-slot=bubble-content]]:bg-panel-elevated [&_[data-slot=bubble-content]]:text-panel-fg [&_code]:!bg-white/12 [&_pre]:!bg-white/10 [&_a]:text-brand"
-                        ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                          BubbleContent,
+                    blocks.map((block, i) => {
+                      if (block.kind === "tools") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolActivity, { tools: block.tools }, i);
+                      }
+                      if (block.kind === "reasoning") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReasoningBlock, { text: block.text }, i);
+                      }
+                      if (block.narration && !isUser) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          "div",
                           {
-                            className: isUser ? "whitespace-pre-wrap" : void 0,
-                            children: isUser && part.type === "text" ? part.text : part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Markdown, { children: part.text }) : null
-                          }
-                        )
-                      },
-                      i
-                    )),
-                    isLast && !isUser && busy && !toolRunning && textParts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BusyMarker, {})
+                            "data-slot": "narration",
+                            className: "px-1 text-xs leading-relaxed text-panel-muted-fg [&_a]:text-brand [&_code]:!bg-white/10 [&_p]:my-0.5",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Markdown, { children: block.text })
+                          },
+                          i
+                        );
+                      }
+                      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        Bubble,
+                        {
+                          variant: isUser ? "default" : "muted",
+                          align: isUser ? "end" : "start",
+                          className: cn(
+                            isUser ? "[&_[data-slot=bubble-content]]:bg-brand [&_[data-slot=bubble-content]]:text-brand-fg" : "[&_[data-slot=bubble-content]]:border [&_[data-slot=bubble-content]]:border-panel-border [&_[data-slot=bubble-content]]:bg-panel-elevated [&_[data-slot=bubble-content]]:text-panel-fg [&_code]:!bg-white/12 [&_pre]:!bg-white/10 [&_a]:text-brand"
+                          ),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                            BubbleContent,
+                            {
+                              className: isUser ? "whitespace-pre-wrap" : void 0,
+                              children: isUser ? block.text : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Markdown, { children: block.text })
+                            }
+                          )
+                        },
+                        i
+                      );
+                    }),
+                    isLast && !isUser && busy && !toolRunning && !hasText && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BusyMarker, {})
                   ] }) }),
-                  (textParts.length > 0 || toolParts.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "px-1 text-[10px] text-panel-muted-fg", children: timeFor(message.id) })
+                  blocks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "px-1 text-[10px] text-panel-muted-fg", children: timeFor(message.id) })
                 ]
               }
             )