@arbidocs/react 0.5.111 → 0.5.112

package/dist/ai/ArtifactCanvas.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {
+  FileText,
+  Download,
+  Copy,
+  Check,
+  Loader2,
+  GitCompareArrows,
+  AlertTriangle
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+import { AiMarkdown } from "./AiMarkdown.js";
+function ArtifactCanvas({
+  artifacts,
+  className,
+  emptyHint = "Draft artifacts produced by the agent will open here.",
+  busy = false,
+  busyHint = "The agent is working through the documents\u2026",
+  stepCount,
+  error = null
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (artifacts.length && (!activeId || !artifacts.some((a) => a.doc_ext_id === activeId))) {
+      setActiveId(artifacts[artifacts.length - 1].doc_ext_id);
+    }
+  }, [artifacts, activeId]);
+  if (artifacts.length === 0) {
+    if (error && !busy) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-full min-h-[280px] flex-col items-center justify-center rounded-xl border border-destructive/30 bg-destructive/5 p-8 text-center",
+            className
+          ),
+          "data-testid": "artifact-canvas-error",
+          children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "size-8 text-destructive/70" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-md text-sm text-foreground", children: error })
+          ]
+        }
+      );
+    }
+    if (busy) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-full min-h-[280px] flex-col items-center justify-center rounded-xl border border-border bg-ai-surface/40 p-8 text-center",
+            className
+          ),
+          "data-testid": "artifact-canvas-busy",
+          children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-ai-accent" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-xs text-sm font-medium text-foreground", children: busyHint }),
+            typeof stepCount === "number" && stepCount > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", "data-testid": "artifact-canvas-steps", children: [
+              stepCount,
+              " ",
+              stepCount === 1 ? "step" : "steps",
+              " so far"
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full min-h-[280px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-secondary/30 p-8 text-center",
+          className
+        ),
+        "data-testid": "artifact-canvas-empty",
+        children: [
+          /* @__PURE__ */ jsx(FileText, { className: "size-8 text-muted-foreground/50" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-xs text-sm text-muted-foreground", children: emptyHint })
+        ]
+      }
+    );
+  }
+  const active = artifacts.find((a) => a.doc_ext_id === activeId) ?? artifacts[artifacts.length - 1];
+  const isRedline = /~~|<ins|<del|<mark/i.test(active.content);
+  const copy = async () => {
+    await navigator.clipboard.writeText(active.content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1600);
+  };
+  const download = () => {
+    const ext = active.mode === "html" ? "html" : active.mode === "text" ? "txt" : "md";
+    const blob = new Blob([active.content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${active.title.replace(/[^\w.-]+/g, "_") || "artifact"}.${ext}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card",
+        className
+      ),
+      "data-testid": "artifact-canvas",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-secondary/40 px-4 py-2.5", children: [
+          /* @__PURE__ */ jsx(FileText, { className: "size-4 shrink-0 text-ai-accent" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground",
+              "data-testid": "artifact-title",
+              children: active.title
+            }
+          ),
+          isRedline && /* @__PURE__ */ jsxs(Badge, { variant: "accent", className: "gap-1", children: [
+            /* @__PURE__ */ jsx(GitCompareArrows, { className: "size-3" }),
+            " Redline"
+          ] }),
+          /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+            "v",
+            active.version
+          ] }),
+          !active.is_complete ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 text-xs text-ai-accent",
+              "data-testid": "artifact-streaming",
+              children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }),
+                " drafting"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: copy,
+                className: "rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
+                title: "Copy",
+                "data-testid": "artifact-copy",
+                children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-ai-accent" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: download,
+                className: "rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
+                title: "Download",
+                "data-testid": "artifact-download",
+                children: /* @__PURE__ */ jsx(Download, { className: "size-3.5" })
+              }
+            )
+          ] })
+        ] }),
+        artifacts.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 overflow-x-auto border-b border-border bg-card px-2 py-1.5", children: artifacts.map((a) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setActiveId(a.doc_ext_id),
+            className: cn(
+              "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium",
+              a.doc_ext_id === active.doc_ext_id ? "bg-ai-accent-soft text-ai-accent" : "text-muted-foreground hover:bg-accent"
+            ),
+            children: a.title.slice(0, 28)
+          },
+          a.doc_ext_id
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto bg-ai-surface/40 p-6", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 6 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.2 },
+            className: "mx-auto max-w-2xl rounded-lg bg-card p-8 shadow-sm ring-1 ring-border",
+            children: active.mode === "html" ? /* @__PURE__ */ jsx("div", { className: "text-sm", dangerouslySetInnerHTML: { __html: active.content } }) : active.mode === "text" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap font-mono text-xs text-foreground", children: active.content }) : /* @__PURE__ */ jsx(AiMarkdown, { children: active.content })
+          },
+          active.doc_ext_id
+        ) }) })
+      ]
+    }
+  );
+}
+export {
+  ArtifactCanvas
+};
+//# sourceMappingURL=ArtifactCanvas.js.map

package/dist/ai/ArtifactCanvas.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ai/ArtifactCanvas.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  FileText,\n  Download,\n  Copy,\n  Check,\n  Loader2,\n  GitCompareArrows,\n  AlertTriangle,\n} from 'lucide-react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { Badge } from '../ui/badge'\nimport { cn } from '../lib/utils'\nimport type { ArtifactEvent } from './engine'\nimport { AiMarkdown } from './AiMarkdown'\n\n/**\n * The artifacts canvas \u2014 renders agent-produced documents (drafts, redlines,\n * memos) as first-class artifacts in a paper-styled panel. Markdown mode supports\n * redlines (`<del>` deletions / `<ins>` additions). Streams live: content grows\n * and `is_complete` flips when finished. Token-neutral: the \"paper\" surface is\n * the kit's `ai-surface` colour.\n */\nexport function ArtifactCanvas({\n  artifacts,\n  className,\n  emptyHint = 'Draft artifacts produced by the agent will open here.',\n  busy = false,\n  busyHint = 'The agent is working through the documents\u2026',\n  stepCount,\n  error = null,\n}: {\n  artifacts: ArtifactEvent[]\n  className?: string\n  emptyHint?: string\n  /** A run failed before producing content \u2014 show it instead of the empty hint. */\n  error?: string | null\n  /**\n   * The agent is running but hasn't produced streamable content yet. Agentic\n   * drafts spend a while planning/retrieving before the first token, so show a\n   * live working state instead of the empty hint \u2014 otherwise the canvas reads\n   * as broken during a perfectly normal multi-step run.\n   */\n  busy?: boolean\n  busyHint?: string\n  /** Agent steps completed so far, surfaced in the working state when > 0. */\n  stepCount?: number\n}) {\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [copied, setCopied] = useState(false)\n\n  // Follow the most recent artifact as they stream in.\n  useEffect(() => {\n    if (artifacts.length && (!activeId || !artifacts.some((a) => a.doc_ext_id === activeId))) {\n      setActiveId(artifacts[artifacts.length - 1].doc_ext_id)\n    }\n  }, [artifacts, activeId])\n\n  if (artifacts.length === 0) {\n    // A failed run with no partial content \u2014 surface the error, not a dead hint.\n    if (error && !busy) {\n      return (\n        <div\n          className={cn(\n            'flex h-full min-h-[280px] flex-col items-center justify-center rounded-xl border border-destructive/30 bg-destructive/5 p-8 text-center',\n            className\n          )}\n          data-testid=\"artifact-canvas-error\"\n        >\n          <AlertTriangle className=\"size-8 text-destructive/70\" />\n          <p className=\"mt-3 max-w-md text-sm text-foreground\">{error}</p>\n        </div>\n      )\n    }\n    // Running-but-empty: the agent is planning/retrieving before it streams.\n    if (busy) {\n      return (\n        <div\n          className={cn(\n            'flex h-full min-h-[280px] flex-col items-center justify-center rounded-xl border border-border bg-ai-surface/40 p-8 text-center',\n            className\n          )}\n          data-testid=\"artifact-canvas-busy\"\n        >\n          <Loader2 className=\"size-8 animate-spin text-ai-accent\" />\n          <p className=\"mt-4 max-w-xs text-sm font-medium text-foreground\">{busyHint}</p>\n          {typeof stepCount === 'number' && stepCount > 0 && (\n            <p className=\"mt-1 text-xs text-muted-foreground\" data-testid=\"artifact-canvas-steps\">\n              {stepCount} {stepCount === 1 ? 'step' : 'steps'} so far\n            </p>\n          )}\n        </div>\n      )\n    }\n    return (\n      <div\n        className={cn(\n          'flex h-full min-h-[280px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-secondary/30 p-8 text-center',\n          className\n        )}\n        data-testid=\"artifact-canvas-empty\"\n      >\n        <FileText className=\"size-8 text-muted-foreground/50\" />\n        <p className=\"mt-3 max-w-xs text-sm text-muted-foreground\">{emptyHint}</p>\n      </div>\n    )\n  }\n\n  const active = artifacts.find((a) => a.doc_ext_id === activeId) ?? artifacts[artifacts.length - 1]\n  const isRedline = /~~|<ins|<del|<mark/i.test(active.content)\n\n  const copy = async () => {\n    await navigator.clipboard.writeText(active.content)\n    setCopied(true)\n    setTimeout(() => setCopied(false), 1600)\n  }\n\n  const download = () => {\n    const ext = active.mode === 'html' ? 'html' : active.mode === 'text' ? 'txt' : 'md'\n    const blob = new Blob([active.content], { type: 'text/plain' })\n    const url = URL.createObjectURL(blob)\n    const a = document.createElement('a')\n    a.href = url\n    a.download = `${active.title.replace(/[^\\w.-]+/g, '_') || 'artifact'}.${ext}`\n    a.click()\n    URL.revokeObjectURL(url)\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card',\n        className\n      )}\n      data-testid=\"artifact-canvas\"\n    >\n      {/* Header */}\n      <div className=\"flex items-center gap-2 border-b border-border bg-secondary/40 px-4 py-2.5\">\n        <FileText className=\"size-4 shrink-0 text-ai-accent\" />\n        <span\n          className=\"min-w-0 flex-1 truncate text-sm font-medium text-foreground\"\n          data-testid=\"artifact-title\"\n        >\n          {active.title}\n        </span>\n        {isRedline && (\n          <Badge variant=\"accent\" className=\"gap-1\">\n            <GitCompareArrows className=\"size-3\" /> Redline\n          </Badge>\n        )}\n        <Badge variant=\"secondary\">v{active.version}</Badge>\n        {!active.is_complete ? (\n          <span\n            className=\"inline-flex items-center gap-1 text-xs text-ai-accent\"\n            data-testid=\"artifact-streaming\"\n          >\n            <Loader2 className=\"size-3 animate-spin\" /> drafting\n          </span>\n        ) : (\n          <div className=\"flex items-center gap-1\">\n            <button\n              onClick={copy}\n              className=\"rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground\"\n              title=\"Copy\"\n              data-testid=\"artifact-copy\"\n            >\n              {copied ? (\n                <Check className=\"size-3.5 text-ai-accent\" />\n              ) : (\n                <Copy className=\"size-3.5\" />\n              )}\n            </button>\n            <button\n              onClick={download}\n              className=\"rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground\"\n              title=\"Download\"\n              data-testid=\"artifact-download\"\n            >\n              <Download className=\"size-3.5\" />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {/* Tabs when multiple artifacts */}\n      {artifacts.length > 1 && (\n        <div className=\"flex gap-1 overflow-x-auto border-b border-border bg-card px-2 py-1.5\">\n          {artifacts.map((a) => (\n            <button\n              key={a.doc_ext_id}\n              onClick={() => setActiveId(a.doc_ext_id)}\n              className={cn(\n                'shrink-0 rounded-md px-2.5 py-1 text-xs font-medium',\n                a.doc_ext_id === active.doc_ext_id\n                  ? 'bg-ai-accent-soft text-ai-accent'\n                  : 'text-muted-foreground hover:bg-accent'\n              )}\n            >\n              {a.title.slice(0, 28)}\n            </button>\n          ))}\n        </div>\n      )}\n\n      {/* Paper body */}\n      <div className=\"flex-1 overflow-y-auto bg-ai-surface/40 p-6\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={active.doc_ext_id}\n            initial={{ opacity: 0, y: 6 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"mx-auto max-w-2xl rounded-lg bg-card p-8 shadow-sm ring-1 ring-border\"\n          >\n            {active.mode === 'html' ? (\n              <div className=\"text-sm\" dangerouslySetInnerHTML={{ __html: active.content }} />\n            ) : active.mode === 'text' ? (\n              <pre className=\"whitespace-pre-wrap font-mono text-xs text-foreground\">\n                {active.content}\n              </pre>\n            ) : (\n              <AiMarkdown>{active.content}</AiMarkdown>\n            )}\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/ai/CitationRenderer.js

@@ -0,0 +1,413 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useMemo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import ReactMarkdown from "react-markdown";
+import { MarkMenu, returnFocusToMark } from "../ui/mark-menu.js";
+import { cn } from "../lib/utils.js";
+import { normalizeCitationMarkup } from "./normalize-citations.js";
+const INLINE_MD_COMPONENTS = {
+  p: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+  em: ({ children }) => /* @__PURE__ */ jsx("em", { children }),
+  code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "font-mono", children }),
+  a: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  li: ({ children }) => /* @__PURE__ */ jsxs("span", { children: [
+    children,
+    " "
+  ] }),
+  h1: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  h5: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  h6: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children })
+};
+const CitationRendererComponent = ({
+  content,
+  citations,
+  citationData,
+  className,
+  messageId,
+  isStreaming = false,
+  renderMarkdown,
+  ExternalLink,
+  onOpenCitation,
+  onActivateChunk,
+  useCitationState,
+  onCloseCitation,
+  onDismissCitation,
+  notify,
+  docTitles
+}) => {
+  const chunkMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (citationData) {
+      Object.entries(citationData).forEach(([, docChunks]) => {
+        if (docChunks && Array.isArray(docChunks)) {
+          docChunks.forEach((chunk) => {
+            if (chunk.metadata && chunk.metadata.chunk_ext_id) {
+              const displayTitle = chunk.metadata.doc_ext_id ? docTitles?.get(chunk.metadata.doc_ext_id) : void 0;
+              map.set(
+                chunk.metadata.chunk_ext_id,
+                displayTitle ? { ...chunk, metadata: { ...chunk.metadata, doc_title: displayTitle } } : chunk
+              );
+            }
+          });
+        }
+      });
+    }
+    return map;
+  }, [citationData, docTitles]);
+  const getChunkDetails = useCallback(
+    (chunkIds) => [...new Set(chunkIds)].map((id) => chunkMap.get(id)).filter((c) => c !== void 0),
+    [chunkMap]
+  );
+  const handleChunkClick = useCallback(
+    (citationNum, chunkIds, chunk) => {
+      onActivateChunk({ messageId, citationNum, chunkIds, chunk, citationData });
+    },
+    [messageId, citationData, onActivateChunk]
+  );
+  const anchorContext = useMemo(
+    () => ({
+      citations,
+      messageId,
+      isStreaming,
+      getChunkDetails,
+      handleChunkClick,
+      onOpenCitation,
+      ExternalLink,
+      useCitationState,
+      onCloseCitation,
+      onDismissCitation,
+      notify
+    }),
+    [
+      citations,
+      messageId,
+      isStreaming,
+      getChunkDetails,
+      handleChunkClick,
+      onOpenCitation,
+      ExternalLink,
+      useCitationState,
+      onCloseCitation,
+      onDismissCitation,
+      notify
+    ]
+  );
+  return /* @__PURE__ */ jsx(CitationAnchorContext.Provider, { value: anchorContext, children: /* @__PURE__ */ jsx("div", { className: cn("citation-container", className), "data-testid": "citation-renderer", children: renderMarkdown({
+    components: CITATION_MARKDOWN_COMPONENTS,
+    isStreaming,
+    children: normalizeCitationMarkup(content)
+  }) }) });
+};
+const CitationAnchorContext = React.createContext(null);
+function CitationAnchor({
+  href,
+  children,
+  ...rest
+}) {
+  const { node, ...props } = rest;
+  void node;
+  const ctx = React.useContext(CitationAnchorContext);
+  if (!ctx || !href?.startsWith("#cite-")) {
+    if (!ctx || !href || href.startsWith("#")) {
+      return /* @__PURE__ */ jsx("a", { className: "text-primary underline underline-offset-2", href, ...props, children });
+    }
+    const { ExternalLink } = ctx;
+    return /* @__PURE__ */ jsx(ExternalLink, { href, ...props, children });
+  }
+  const citationNum = href.slice(6);
+  const { messageId, citations, getChunkDetails, handleChunkClick, onOpenCitation } = ctx;
+  const citationKey = `${messageId}-${citationNum}`;
+  const chunkIds = citations?.[citationNum] || [];
+  const chunks = getChunkDetails(chunkIds);
+  return /* @__PURE__ */ jsx(
+    CitationPopover,
+    {
+      citationNum,
+      messageId,
+      chunks,
+      isStreaming: ctx.isStreaming,
+      onOpen: () => onOpenCitation(citationKey),
+      onChunkClick: (chunk) => handleChunkClick(citationNum, chunkIds, chunk),
+      useCitationState: ctx.useCitationState,
+      onCloseCitation: ctx.onCloseCitation,
+      onDismissCitation: ctx.onDismissCitation,
+      notify: ctx.notify,
+      children
+    },
+    citationKey
+  );
+}
+const CITATION_MARKDOWN_COMPONENTS = { a: CitationAnchor };
+const DOCK_GAP_PX = 8;
+const CitationPopover = ({
+  citationNum,
+  messageId,
+  chunks,
+  isStreaming,
+  onOpen,
+  onChunkClick,
+  useCitationState,
+  onCloseCitation,
+  onDismissCitation,
+  notify,
+  children
+}) => {
+  const { activeCitationKey, viewingPassageId, isOnConversationPage } = useCitationState();
+  const isActive = activeCitationKey === `${messageId}-${citationNum}`;
+  const open = isActive && isOnConversationPage;
+  useEffect(() => {
+    if (isActive && !isOnConversationPage) onDismissCitation();
+  }, [isActive, isOnConversationPage, onDismissCitation]);
+  const triggerRef = useRef(null);
+  const dialogRef = useRef(null);
+  const restoreFocusRef = useRef(false);
+  const dismiss = useCallback(() => {
+    restoreFocusRef.current = true;
+    onDismissCitation();
+  }, [onDismissCitation]);
+  useEffect(() => {
+    if (!open) return;
+    dialogRef.current?.focus({ preventScroll: true });
+    return () => {
+      if (!restoreFocusRef.current) return;
+      restoreFocusRef.current = false;
+      if (triggerRef.current) returnFocusToMark(triggerRef.current);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") dismiss();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, dismiss]);
+  const [dock, setDock] = useState({ left: 0, top: 0, width: 0 });
+  useLayoutEffect(() => {
+    if (!open) return;
+    const edge = document.querySelector('[data-testid="message-input-container"]') ?? document.querySelector('main[data-testid^="conversation-"]') ?? document.body;
+    const measure = () => {
+      const rect = edge.getBoundingClientRect();
+      setDock({ left: rect.left, top: rect.top, width: rect.width });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(edge);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [open]);
+  const handleOpen = useCallback(() => {
+    onOpen();
+    if (chunks.length > 0) {
+      onChunkClick(chunks[0]);
+    }
+  }, [onOpen, onChunkClick, chunks]);
+  const byDoc = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    chunks.forEach((chunk) => {
+      const docId = chunk.metadata.doc_ext_id ?? "unknown";
+      const title = chunk.metadata.doc_title ?? docId;
+      if (!map.has(docId)) map.set(docId, { title, chunks: [] });
+      map.get(docId).chunks.push(chunk);
+    });
+    return Array.from(map.entries()).map(([docId, val]) => ({ docId, ...val }));
+  }, [chunks]);
+  const first = chunks[0];
+  const firstText = first ? first.content.replace(/\n+/g, " ").trim() : "";
+  const firstTitle = first ? first.metadata.doc_title ?? first.metadata.doc_ext_id ?? "" : "";
+  const firstPage = first?.metadata.page_number;
+  const copyCitation = useCallback(async () => {
+    const source = [firstTitle, firstPage != null ? `p.${firstPage}` : null].filter(Boolean).join(", ");
+    try {
+      await navigator.clipboard.writeText(source ? `\u201C${firstText}\u201D (${source})` : firstText);
+      notify?.("Citation copied", "success");
+    } catch {
+      notify?.("Could not copy the citation", "error");
+    }
+  }, [firstText, firstTitle, firstPage, notify]);
+  const items = isStreaming || chunks.length === 0 ? [] : [
+    {
+      id: "open",
+      label: "Open in viewer",
+      primary: true,
+      onSelect: handleOpen,
+      testId: `citation-open-${citationNum}`
+    },
+    {
+      id: "copy",
+      label: "Copy citation",
+      onSelect: () => void copyCitation(),
+      testId: `citation-copy-${citationNum}`
+    }
+  ];
+  const preview = first ? /* @__PURE__ */ jsxs("div", { className: "max-w-xs", "data-testid": `citation-preview-${citationNum}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-foreground", children: firstTitle }),
+    firstPage != null && /* @__PURE__ */ jsxs("span", { className: "block text-xs text-muted-foreground", children: [
+      "Page ",
+      firstPage
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "mt-1 line-clamp-4 block text-sm text-foreground", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: INLINE_MD_COMPONENTS, children: firstText }) }),
+    chunks.length > 1 && /* @__PURE__ */ jsxs("span", { className: "mt-1 block text-xs text-muted-foreground", children: [
+      "+",
+      chunks.length - 1,
+      " more passage",
+      chunks.length > 2 ? "s" : ""
+    ] })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CitationLink,
+      {
+        triggerRef,
+        citationNum,
+        isActive,
+        isStreaming,
+        items,
+        preview,
+        children
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none fixed z-[42] flex justify-center px-2",
+          style: {
+            left: dock.left,
+            width: dock.width,
+            bottom: window.innerHeight - dock.top + DOCK_GAP_PX
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: dialogRef,
+              role: "dialog",
+              tabIndex: -1,
+              "aria-label": `Citation ${citationNum}`,
+              style: { maxHeight: `min(45vh, ${Math.max(dock.top - 2 * DOCK_GAP_PX, 0)}px)` },
+              className: "pointer-events-auto z-[42] outline-none w-[min(100%,48rem)] min-w-0 overflow-y-auto rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-xl",
+              "data-testid": `citation-popover-${citationNum}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 pointer-coarse:py-0 border-b border-border sticky top-0 bg-popover z-10 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground tracking-wide", children: [
+                    "Citation ",
+                    citationNum,
+                    " (",
+                    chunks.length,
+                    " passage",
+                    chunks.length !== 1 ? "s" : "",
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: dismiss,
+                      className: "-m-1.5 flex shrink-0 items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground pointer-coarse:m-0 pointer-coarse:size-11 pointer-coarse:p-0",
+                      "aria-label": "Close",
+                      "data-testid": `citation-popover-close-${citationNum}`,
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 12 12",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M1 1L11 11M11 1L1 11",
+                              stroke: "currentColor",
+                              strokeWidth: "1.5",
+                              strokeLinecap: "round"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                byDoc.map(({ docId, title, chunks: docChunks }) => /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-border last:border-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground mb-1 truncate", title, children: title }),
+                  docChunks.map((chunk) => {
+                    const isSelected = viewingPassageId === chunk.metadata.chunk_ext_id;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": `citation-chunk-${chunk.metadata.chunk_ext_id}`,
+                        onClick: () => onChunkClick(chunk),
+                        className: cn(
+                          "w-full text-left text-sm rounded-md px-2 py-1.5 pointer-coarse:min-h-11 pointer-coarse:py-3 transition-colors flex items-start gap-2 mb-1 last:mb-0",
+                          isSelected ? "bg-ai-soft text-foreground ring-1 ring-ai-accent/40" : "text-muted-foreground hover:text-primary hover:bg-muted"
+                        ),
+                        children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                          chunk.metadata.page_number != null && /* @__PURE__ */ jsxs("span", { className: "block text-xs text-muted-foreground", children: [
+                            "Page ",
+                            chunk.metadata.page_number
+                          ] }),
+                          /* @__PURE__ */ jsx("span", { className: "line-clamp-3 italic", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: INLINE_MD_COMPONENTS, children: chunk.content.replace(/\n+/g, " ").trim() }) })
+                        ] })
+                      },
+                      chunk.metadata.chunk_ext_id
+                    );
+                  })
+                ] }, docId))
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+const CitationLink = ({
+  citationNum,
+  isActive,
+  isStreaming,
+  items,
+  preview,
+  triggerRef,
+  children
+}) => /* @__PURE__ */ jsxs(
+  MarkMenu,
+  {
+    triggerRef,
+    items,
+    preview: isStreaming ? void 0 : preview,
+    menuLabel: `Citation ${citationNum}`,
+    testId: `citation-link-${citationNum}`,
+    tabIndex: isStreaming ? -1 : 0,
+    "data-mark-kind": "citation",
+    className: cn(
+      "cited-text relative rounded-sm px-0.5 transition-colors",
+      // 44px touch hit area without changing the text layout. `touch-hit` grows only up to
+      // 44px (never past the mark's own width), so it doesn't reach over the neighbouring
+      // citation: a fixed inset let citation 2's area cover citation 1, and a tap on [1]
+      // opened [2].
+      "touch-hit",
+      isStreaming ? "cursor-default" : "cursor-pointer",
+      isActive ? "bg-ai-soft text-foreground" : "bg-ai-soft/30 hover:bg-ai-soft/70"
+    ),
+    children: [
+      children,
+      /* @__PURE__ */ jsx("sup", { className: "ml-px top-0 align-super text-[max(0.8em,var(--text-xs))] font-bold leading-none tabular-nums text-ai-ink", children: citationNum })
+    ]
+  }
+);
+const CitationRenderer = React.memo(CitationRendererComponent);
+export {
+  CitationRenderer
+};
+//# sourceMappingURL=CitationRenderer.js.map