@arbidocs/blocks 0.4.129 → 0.4.130

package/dist/{chunk-DZYAAL4H.cjs → chunk-4S5IDT5F.cjs}

@@ -952,6 +952,231 @@ function ThreadMapDiagram({
     }
   );
 }
+
+// src/chat/thread-diagram.ts
+var DIAGRAM_COLORS = {
+  userBg: "#f1f5f9",
+  // slate-100
+  assistantBg: "#ffffff",
+  stroke: "#cbd5e1",
+  // slate-300
+  strokeLight: "#e2e8f0",
+  // slate-200
+  text: "#334155"
+  // slate-700
+};
+function escapeLabel(text) {
+  return text.replace(/"/g, "&quot;").replace(/'/g, "&apos;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\[/g, "&#91;").replace(/\]/g, "&#93;").replace(/\(/g, "&#40;").replace(/\)/g, "&#41;").replace(/\{/g, "&#123;").replace(/\}/g, "&#125;");
+}
+function buildThreadDiagram(threads) {
+  if (!threads || threads.length === 0) return null;
+  const allMessages = /* @__PURE__ */ new Map();
+  threads.forEach((thread) => {
+    thread.history.forEach((message) => {
+      allMessages.set(message.external_id, message);
+    });
+  });
+  const parentToChildren = /* @__PURE__ */ new Map();
+  threads.forEach((thread) => {
+    thread.history.forEach((message, index) => {
+      const messageId = message.external_id;
+      let parentId = message.parent_message_ext_id;
+      if (!parentId && index > 0) {
+        parentId = thread.history[index - 1].external_id;
+        console.warn(
+          `ThreadVisualizer: Message ${messageId} (${message.role}) missing parent_message_ext_id. Inferred parent: ${parentId}`
+        );
+      } else if (!parentId) {
+        parentId = null;
+      }
+      if (parentId && !allMessages.has(parentId)) {
+        if (index > 0) {
+          const fallbackParentId = thread.history[index - 1].external_id;
+          console.warn(
+            `ThreadVisualizer: Message ${messageId} has invalid parent ${parentId}. Using fallback: ${fallbackParentId}`
+          );
+          parentId = fallbackParentId;
+        } else {
+          console.warn(
+            `ThreadVisualizer: Message ${messageId} has invalid parent ${parentId} and no fallback. Using root.`
+          );
+          parentId = null;
+        }
+      }
+      if (!parentToChildren.has(parentId)) parentToChildren.set(parentId, /* @__PURE__ */ new Set());
+      parentToChildren.get(parentId)?.add(messageId);
+    });
+  });
+  const branchPoints = /* @__PURE__ */ new Set();
+  parentToChildren.forEach((children, parentId) => {
+    if (children.size > 1 && parentId) branchPoints.add(parentId);
+  });
+  allMessages.forEach((message, id) => {
+    if (message.is_branch_point) branchPoints.add(id);
+  });
+  const leafNodes = new Set(threads.map((thread) => thread.leaf_message_ext_id));
+  let diagram = "graph TD\n";
+  diagram += `  classDef user fill:${DIAGRAM_COLORS.userBg},stroke:${DIAGRAM_COLORS.stroke},color:${DIAGRAM_COLORS.text},stroke-width:1px,font-size:12px
+`;
+  diagram += `  classDef assistant fill:${DIAGRAM_COLORS.assistantBg},stroke:${DIAGRAM_COLORS.strokeLight},color:${DIAGRAM_COLORS.text},stroke-width:1px,font-size:12px
+`;
+  diagram += `  linkStyle default stroke:${DIAGRAM_COLORS.stroke},stroke-width:1px
+`;
+  allMessages.forEach((message, id) => {
+    const plain = (message.content || "").replace(/[*_~`#]/g, "");
+    const shortened = plain.substring(0, 180).replace(/\n/g, " ");
+    const content = escapeLabel(shortened) + (shortened.length < plain.length ? "..." : "");
+    let label = `${message.role === "user" ? "User" : "Assistant"}: ${content}`;
+    if (branchPoints.has(id)) label = `${label} \u{1F500}`;
+    if (leafNodes.has(id)) label = `${label} \u{1F3C1}`;
+    diagram += `  ${id}["${label}"]
+`;
+    diagram += `  class ${id} ${message.role === "user" ? "user" : "assistant"}
+`;
+  });
+  parentToChildren.forEach((children, parentId) => {
+    children.forEach((childId) => {
+      if (parentId) diagram += `  ${parentId} --> ${childId}
+`;
+    });
+  });
+  return diagram;
+}
+function threadForNode(threads, nodeId) {
+  const messageId = nodeId.replace(/^flowchart-/, "").replace(/-\d+$/, "");
+  if (threads.some((thread) => thread.leaf_message_ext_id === messageId)) return messageId;
+  const containing = threads.find(
+    (thread) => thread.history.some((msg) => msg.external_id === messageId)
+  );
+  return containing ? containing.leaf_message_ext_id : null;
+}
+var DEFAULT_THREAD_VISUALIZER_LABELS = {
+  hint: "Click on a message to resume conversation thread.",
+  hintMany: "This conversation has many threads. Click on a message to resume conversation thread."
+};
+var mermaidInitialized = false;
+var mermaidModule = null;
+async function getMermaid() {
+  if (!mermaidModule) {
+    mermaidModule = (await import('mermaid')).default;
+  }
+  if (!mermaidInitialized) {
+    try {
+      mermaidModule.initialize({
+        startOnLoad: false,
+        flowchart: { useMaxWidth: true, curve: "basis" },
+        securityLevel: "loose"
+        // Required for click interactivity
+      });
+      mermaidInitialized = true;
+    } catch (error) {
+      console.error("Error initializing Mermaid:", error);
+    }
+  }
+  return mermaidModule;
+}
+function ThreadVisualizerView({
+  threads,
+  switchToThread,
+  showHeader = true,
+  showDownloadButton = true,
+  className,
+  labels
+}) {
+  const svgContainerRef = react.useRef(null);
+  const [isRendering, setIsRendering] = react.useState(true);
+  const [renderError, setRenderError] = react.useState(null);
+  const [svgContent, setSvgContent] = react.useState("");
+  const renderingRef = react.useRef(false);
+  const mermaidDiagram = react.useMemo(() => buildThreadDiagram(threads), [threads]);
+  const handleNodeClick = react.useCallback(
+    (nodeId) => {
+      try {
+        const threadId = threadForNode(threads, nodeId);
+        if (threadId) switchToThread(threadId);
+      } catch (error) {
+        console.error("Error in thread navigation callback:", error);
+      }
+    },
+    [threads, switchToThread]
+  );
+  const saveSvgAsFile = react.useCallback(() => {
+    if (!svgContent) return;
+    try {
+      const blob = new Blob([svgContent], { type: "image/svg+xml" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `thread-visualizer-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.svg`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to save SVG:", error);
+    }
+  }, [svgContent]);
+  react.useEffect(() => {
+    if (renderingRef.current || !mermaidDiagram) return;
+    const renderDiagram = async () => {
+      renderingRef.current = true;
+      setIsRendering(true);
+      setRenderError(null);
+      setSvgContent("");
+      try {
+        const renderDiagramId = `mermaid-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+        const mermaid = await getMermaid();
+        const { svg } = await mermaid.render(renderDiagramId, mermaidDiagram);
+        setSvgContent(svg);
+        setIsRendering(false);
+      } catch (error) {
+        console.error("Error rendering mermaid diagram:", error);
+        setRenderError(error instanceof Error ? error.message : String(error));
+        setIsRendering(false);
+        setSvgContent("");
+      } finally {
+        renderingRef.current = false;
+      }
+    };
+    renderDiagram();
+  }, [mermaidDiagram]);
+  react.useEffect(() => {
+    if (!svgContent || !svgContainerRef.current) return;
+    const svgElement = svgContainerRef.current.querySelector("svg");
+    if (!svgElement) return;
+    svgElement.style.maxWidth = "100%";
+    svgElement.style.height = "auto";
+    svgElement.style.minHeight = "400px";
+    const textElements = svgElement.getElementsByTagName("text");
+    for (let i = 0; i < textElements.length; i++) {
+      textElements[i].setAttribute("font-family", "system-ui, sans-serif");
+      textElements[i].setAttribute("font-size", "12px");
+      textElements[i].style.fontSize = "12px !important";
+    }
+    svgElement.querySelectorAll("g.node").forEach((element) => {
+      const nodeId = element.getAttribute("id");
+      if (!nodeId) return;
+      element.style.cursor = "pointer";
+      element.addEventListener("click", () => handleNodeClick(nodeId));
+    });
+  }, [svgContent, handleNodeClick]);
+  const l = { ...DEFAULT_THREAD_VISUALIZER_LABELS, ...labels };
+  const hint = showHeader ? threads.length > 5 ? l.hintMany : l.hint : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ThreadMap,
+    {
+      hint,
+      onSave: showDownloadButton && svgContent ? saveSvgAsFile : void 0,
+      className,
+      children: [
+        (isRendering || !svgContent || !mermaidDiagram) && !renderError && /* @__PURE__ */ jsxRuntime.jsx(ThreadMapLoading, {}),
+        renderError && /* @__PURE__ */ jsxRuntime.jsx(ThreadMapError, { message: renderError }),
+        svgContent && !renderError && /* @__PURE__ */ jsxRuntime.jsx(ThreadMapDiagram, { svg: svgContent, diagramRef: svgContainerRef })
+      ]
+    }
+  );
+}
+var ThreadVisualizer = react.memo(ThreadVisualizerView);
 var LONG_PASTE_CHARACTER_LIMIT = 1e3;
 var LONG_PASTE_LINE_LIMIT = 12;
 function isLongPastedText(value) {
@@ -1872,6 +2097,7 @@ exports.DEFAULT_PENDING_ANSWER_BAR_LABELS = DEFAULT_PENDING_ANSWER_BAR_LABELS;
 exports.DEFAULT_PINNED_DOC_CHIP_LABELS = DEFAULT_PINNED_DOC_CHIP_LABELS;
 exports.DEFAULT_SLASH_MENU_LABELS = DEFAULT_SLASH_MENU_LABELS;
 exports.DEFAULT_THREAD_MAP_LABELS = DEFAULT_THREAD_MAP_LABELS;
+exports.DEFAULT_THREAD_VISUALIZER_LABELS = DEFAULT_THREAD_VISUALIZER_LABELS;
 exports.DraftingDocChip = DraftingDocChip;
 exports.LabelPinRow = LabelPinRow;
 exports.ModelAutoIcon = ModelAutoIcon;
@@ -1898,14 +2124,17 @@ exports.ThreadMap = ThreadMap;
 exports.ThreadMapDiagram = ThreadMapDiagram;
 exports.ThreadMapError = ThreadMapError;
 exports.ThreadMapLoading = ThreadMapLoading;
+exports.ThreadVisualizer = ThreadVisualizer;
 exports.TranscriptLine = TranscriptLine;
+exports.buildThreadDiagram = buildThreadDiagram;
 exports.flashMessage = flashMessage;
 exports.getParticipantTints = getParticipantTints;
 exports.hasMessageBody = hasMessageBody;
 exports.isLongPastedText = isLongPastedText;
+exports.threadForNode = threadForNode;
 exports.transcriptRuns = transcriptRuns;
 exports.useDismissibleCard = useDismissibleCard;
 exports.useLongPaste = useLongPaste;
 exports.useRecipientDraft = useRecipientDraft;
-//# sourceMappingURL=chunk-DZYAAL4H.cjs.map
-//# sourceMappingURL=chunk-DZYAAL4H.cjs.map
+//# sourceMappingURL=chunk-4S5IDT5F.cjs.map
+//# sourceMappingURL=chunk-4S5IDT5F.cjs.map