@arbidocs/blocks 0.4.129 → 0.4.130

package/dist/{chunk-H2KQ6OSU.js → chunk-SZX44LCT.js}

@@ -5,10 +5,10 @@ import { BlocksTooltipProvider } from './chunk-7XF5SFJ2.js';
 import { listOptionId } from './chunk-AA3PT6KR.js';
 import { speakerAccent, speakerDot } from './chunk-Z3AZ7Q5X.js';
 import { prefixedTestId, testIdOr } from './chunk-7F6CBP3Z.js';
-import { Globe, BookOpen, ChevronsUpDown, Search, SquareSlash, PenLine, Pin, X, Network, ArrowLeft, ArrowRight, Crown, Glasses, Zap, Sparkles, Check, Settings, Plus, Bot, Download, MessageCircleQuestion, Clock, Play, Pause, Loader2, MessageSquare, CheckCircle, Tag, AudioLines, User } from 'lucide-react';
+import { Globe, BookOpen, ChevronsUpDown, Search, SquareSlash, Download, PenLine, Pin, X, Network, ArrowLeft, ArrowRight, Crown, Glasses, Zap, Sparkles, Check, Settings, Plus, Bot, MessageCircleQuestion, Clock, Play, Pause, Loader2, MessageSquare, CheckCircle, Tag, AudioLines, User } from 'lucide-react';
 import { cn, Button, HoverCardContent, Input, Badge, Tooltip, TooltipTrigger, TooltipContent, Popover, PopoverTrigger, PopoverContent, PassageCard, Tabs, TabsList, TabsTrigger, TabsContent } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { memo, useId, useRef, useEffect, forwardRef, useMemo, useState, useCallback, Fragment as Fragment$1 } from 'react';
+import { memo, useId, useRef, useEffect, forwardRef, useState, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
 import DOMPurify from 'dompurify';
 
 // src/chat/participant-tints.ts
@@ -946,6 +946,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 = useRef(null);
+  const [isRendering, setIsRendering] = useState(true);
+  const [renderError, setRenderError] = useState(null);
+  const [svgContent, setSvgContent] = useState("");
+  const renderingRef = useRef(false);
+  const mermaidDiagram = useMemo(() => buildThreadDiagram(threads), [threads]);
+  const handleNodeClick = 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 = 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]);
+  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]);
+  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__ */ jsxs(
+    ThreadMap,
+    {
+      hint,
+      onSave: showDownloadButton && svgContent ? saveSvgAsFile : void 0,
+      className,
+      children: [
+        (isRendering || !svgContent || !mermaidDiagram) && !renderError && /* @__PURE__ */ jsx(ThreadMapLoading, {}),
+        renderError && /* @__PURE__ */ jsx(ThreadMapError, { message: renderError }),
+        svgContent && !renderError && /* @__PURE__ */ jsx(ThreadMapDiagram, { svg: svgContent, diagramRef: svgContainerRef })
+      ]
+    }
+  );
+}
+var ThreadVisualizer = memo(ThreadVisualizerView);
 var LONG_PASTE_CHARACTER_LIMIT = 1e3;
 var LONG_PASTE_LINE_LIMIT = 12;
 function isLongPastedText(value) {
@@ -1830,6 +2055,6 @@ function transcriptRuns(items, speakerOf, timeOf, gapMs = 2 * 6e4) {
   return continued;
 }
 
-export { AssistantToaster, BranchControls, ComposerAccessories, ComposerTools, ContextActionButton, ContextCheckRow, ContextPanelContent, ContextPanelFooter, ContextPanelTabs, ContextPickerList, ContextPickerRow, ContextSearchInput, ContextSelectList, ContextSelectRow, Conversation, ConversationBody, ConversationFilter, ConversationHeader, ConversationHeaderActions, ConversationHistoryPane, ConversationLoading, ConversationMain, ConversationRoot, ConversationSearchView, ConversationSettingsButton, DEFAULT_BRANCH_CONTROLS_LABELS, DEFAULT_CONVERSATION_LAYOUT_LABELS, DEFAULT_CONVERSATION_PARTS_LABELS, DEFAULT_CONVERSATION_SEARCH_LABELS, DEFAULT_DRAFTING_DOC_CHIP_LABELS, DEFAULT_LABEL_PIN_ROW_LABELS, DEFAULT_MODEL_PRICING_TIP_LABELS, DEFAULT_PENDING_ANSWER_BAR_LABELS, DEFAULT_PINNED_DOC_CHIP_LABELS, DEFAULT_SLASH_MENU_LABELS, DEFAULT_THREAD_MAP_LABELS, DraftingDocChip, LabelPinRow, ModelAutoIcon, ModelConfigureButton, ModelDot, ModelMenuDivider, ModelMenuMessage, ModelOption, ModelOptionLabel, ModelPickerPopover, ModelPickerTrigger, ModelPricingTip, ModelTierIcon, ModelTierOption, ModelTriggerContent, NewChatButton, NewPaChatButton, PaModeBadge, PendingAnswerBar, PinnedDocChip, ProvisionalTranscriptLine, SlashMenu, ThreadMap, ThreadMapDiagram, ThreadMapError, ThreadMapLoading, TranscriptLine, flashMessage, getParticipantTints, hasMessageBody, isLongPastedText, transcriptRuns, useDismissibleCard, useLongPaste, useRecipientDraft };
-//# sourceMappingURL=chunk-H2KQ6OSU.js.map
-//# sourceMappingURL=chunk-H2KQ6OSU.js.map
+export { AssistantToaster, BranchControls, ComposerAccessories, ComposerTools, ContextActionButton, ContextCheckRow, ContextPanelContent, ContextPanelFooter, ContextPanelTabs, ContextPickerList, ContextPickerRow, ContextSearchInput, ContextSelectList, ContextSelectRow, Conversation, ConversationBody, ConversationFilter, ConversationHeader, ConversationHeaderActions, ConversationHistoryPane, ConversationLoading, ConversationMain, ConversationRoot, ConversationSearchView, ConversationSettingsButton, DEFAULT_BRANCH_CONTROLS_LABELS, DEFAULT_CONVERSATION_LAYOUT_LABELS, DEFAULT_CONVERSATION_PARTS_LABELS, DEFAULT_CONVERSATION_SEARCH_LABELS, DEFAULT_DRAFTING_DOC_CHIP_LABELS, DEFAULT_LABEL_PIN_ROW_LABELS, DEFAULT_MODEL_PRICING_TIP_LABELS, DEFAULT_PENDING_ANSWER_BAR_LABELS, DEFAULT_PINNED_DOC_CHIP_LABELS, DEFAULT_SLASH_MENU_LABELS, DEFAULT_THREAD_MAP_LABELS, DEFAULT_THREAD_VISUALIZER_LABELS, DraftingDocChip, LabelPinRow, ModelAutoIcon, ModelConfigureButton, ModelDot, ModelMenuDivider, ModelMenuMessage, ModelOption, ModelOptionLabel, ModelPickerPopover, ModelPickerTrigger, ModelPricingTip, ModelTierIcon, ModelTierOption, ModelTriggerContent, NewChatButton, NewPaChatButton, PaModeBadge, PendingAnswerBar, PinnedDocChip, ProvisionalTranscriptLine, SlashMenu, ThreadMap, ThreadMapDiagram, ThreadMapError, ThreadMapLoading, ThreadVisualizer, TranscriptLine, buildThreadDiagram, flashMessage, getParticipantTints, hasMessageBody, isLongPastedText, threadForNode, transcriptRuns, useDismissibleCard, useLongPaste, useRecipientDraft };
+//# sourceMappingURL=chunk-SZX44LCT.js.map
+//# sourceMappingURL=chunk-SZX44LCT.js.map