@arbidocs/blocks 0.4.16 → 0.4.18

package/dist/{chunk-IMA6I73C.js → chunk-ABSII3ND.js}

@@ -4,7 +4,7 @@ import { useAssistantDock, useChatSurface } from './chunk-UVIOQUJA.js';
 import { BlocksTooltipProvider } from './chunk-KZJAG7T3.js';
 import { prefixedTestId, testIdOr } from './chunk-7F6CBP3Z.js';
 import { memo, useId, useRef, useEffect, forwardRef, useState, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
-import { Globe, BookOpen, ChevronsUpDown, Search, SquareSlash, Pin, X, Network, ArrowLeft, ArrowRight, Crown, Glasses, Zap, Sparkles, Check, Settings, Plus, Bot, Download, MessageCircleQuestion, Clock, Play, Pause, Loader2, MessageSquare, CheckCircle, Tag, User } from 'lucide-react';
+import { Globe, BookOpen, Bot, AtSign, ChevronsUpDown, Search, SquareSlash, MessagesSquare, Pin, X, Network, ArrowLeft, ArrowRight, Crown, Glasses, Zap, Sparkles, Check, Settings, Plus, Download, MessageCircleQuestion, Clock, Play, Pause, Loader2, MessageSquare, CheckCircle, Tag, 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 DOMPurify from 'dompurify';
@@ -221,6 +221,338 @@ var SlashMenu = memo(function SlashMenu2({
     }
   );
 });
+var DEFAULT_MENTION_LABELS = {
+  hint: "Enter or Tab to mention, Esc to dismiss",
+  list: "People and assistant to mention",
+  resultCount: (count) => `${count} ${count === 1 ? "match" : "matches"}`,
+  assistantBadge: "AI",
+  chipTitle: (label, kind) => kind === "assistant" ? `${label} (AI assistant)` : label
+};
+var MentionMenu = memo(function MentionMenu2({
+  open,
+  placement = "above",
+  items,
+  selectedIndex,
+  setSelectedIndex,
+  listboxId: listboxIdProp,
+  onSelect,
+  className,
+  labels,
+  testId,
+  itemTestIdPrefix
+}) {
+  const l = { ...DEFAULT_MENTION_LABELS, ...labels };
+  const ownId = useId();
+  const listboxId = listboxIdProp ?? ownId;
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const el = scrollRef.current?.querySelector(
+      `[data-mention-index="${selectedIndex}"]`
+    );
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [open, selectedIndex]);
+  if (!open || items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "mention-menu",
+      className: cn(
+        "absolute left-0 right-0 z-30 max-h-64 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg",
+        placement === "above" ? "bottom-full mb-2" : "top-full mt-2",
+        className
+      ),
+      onMouseDown: (e) => e.preventDefault(),
+      "data-testid": testIdOr(testId, { testId: "mention-menu" }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-border/50 px-3 py-1.5 text-xs text-muted-foreground", children: l.hint }),
+        /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: l.resultCount(items.length) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            id: listboxId,
+            role: "listbox",
+            "aria-label": l.list,
+            className: "scrollbar-subtle max-h-56 overflow-y-auto py-1",
+            children: items.map((item, index) => {
+              const isActive = index === selectedIndex;
+              const Icon = item.kind === "assistant" ? Bot : AtSign;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: listOptionId(listboxId, index),
+                  role: "option",
+                  "aria-selected": isActive,
+                  "data-mention-index": index,
+                  className: cn(
+                    "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm pointer-coarse:min-h-11",
+                    isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+                  ),
+                  onMouseEnter: () => setSelectedIndex(index),
+                  onClick: () => onSelect(item),
+                  "data-testid": prefixedTestId(itemTestIdPrefix, item.id, {
+                    testId: `mention-item-${item.id}`
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: item.label }),
+                    item.kind === "assistant" && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted px-1 text-[10px] font-medium uppercase text-muted-foreground", children: l.assistantBadge }),
+                    item.description && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: item.description })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+function MentionChip({
+  label,
+  kind,
+  id,
+  isSelf,
+  labels,
+  className,
+  testId
+}) {
+  const l = { ...DEFAULT_MENTION_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "mention-chip",
+      "data-mention-kind": kind,
+      "data-mention-id": id,
+      title: l.chipTitle(label, kind),
+      className: cn(
+        "inline-flex items-baseline rounded px-1 font-medium",
+        isSelf ? "bg-primary/15 text-primary" : "bg-accent text-accent-foreground",
+        className
+      ),
+      "data-testid": testIdOr(testId, { testId: `mention-chip-${id ?? kind}` }),
+      children: [
+        "@",
+        label
+      ]
+    }
+  );
+}
+
+// src/chat/mentions.ts
+var MAX_QUERY_LENGTH = 40;
+function findMentionQuery(text, caret) {
+  const before = text.slice(0, caret);
+  const at = before.lastIndexOf("@");
+  if (at < 0) return null;
+  if (at > 0 && !/\s/.test(before[at - 1])) return null;
+  const query = before.slice(at + 1);
+  if (query.length > MAX_QUERY_LENGTH || query.includes("\n") || query.startsWith(" ")) return null;
+  return { start: at, query };
+}
+function filterMentionCandidates(candidates, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return candidates.slice();
+  const scored = [];
+  for (const c of candidates) {
+    const label = c.label.toLowerCase();
+    if (label.startsWith(q)) scored.push({ c, score: 0 });
+    else if (label.split(/\s+/).some((word) => word.startsWith(q))) scored.push({ c, score: 1 });
+    else if (c.description?.toLowerCase().startsWith(q)) scored.push({ c, score: 2 });
+  }
+  return scored.sort((a, b) => a.score - b.score).map((s) => s.c);
+}
+function insertMention(text, start, caret, label) {
+  const inserted = `@${label} `;
+  return {
+    text: text.slice(0, start) + inserted + text.slice(caret),
+    caret: start + inserted.length
+  };
+}
+function tokenRanges(text, label) {
+  const needle = `@${label}`;
+  const ranges = [];
+  let from = 0;
+  for (; ; ) {
+    const i = text.indexOf(needle, from);
+    if (i < 0) break;
+    const end = i + needle.length;
+    const startsToken = i === 0 || /\s|\(|\[/.test(text[i - 1]);
+    const endsToken = end === text.length || !/[\p{L}\p{N}_]/u.test(text[end]);
+    if (startsToken && endsToken) ranges.push([i, end]);
+    from = end;
+  }
+  return ranges;
+}
+function extractMentions(text, candidates) {
+  const taken = [];
+  const found = [];
+  const byLength = [...candidates].sort((a, b) => b.label.length - a.label.length);
+  for (const c of byLength) {
+    if (!c.label) continue;
+    for (const [from, to] of tokenRanges(text, c.label)) {
+      if (taken.some(([a, b]) => from < b && to > a)) continue;
+      taken.push([from, to]);
+      if (!found.some((f) => f.c.id === c.id)) found.push({ c, at: from });
+    }
+  }
+  return found.sort((a, b) => a.at - b.at).map((f) => f.c);
+}
+function toMessageMentions(mentioned) {
+  return mentioned.map(
+    (c) => c.kind === "assistant" ? { type: "assistant" } : { type: "user", user_ext_id: c.id }
+  );
+}
+var MENTION_HREF_PREFIX = "#mention-";
+function escapeLinkText(label) {
+  return label.replace(/[[\]\\]/g, (ch) => `\\${ch}`);
+}
+function linkMentions(content, mentions, assistantLabels = []) {
+  if (!mentions || mentions.length === 0 || !content) return content;
+  const targets = [];
+  for (const m of mentions) {
+    const id = m.type === "assistant" ? "assistant" : m.user_ext_id;
+    if (!id) continue;
+    const labels = m.type === "assistant" ? [m.label ?? "", ...assistantLabels] : [m.label ?? ""];
+    for (const label of labels) if (label) targets.push({ label, id });
+  }
+  targets.sort((a, b) => b.label.length - a.label.length);
+  const replacements = [];
+  for (const { label, id } of targets) {
+    for (const [from, to] of tokenRanges(content, label)) {
+      if (replacements.some((r) => from < r.to && to > r.from)) continue;
+      replacements.push({
+        from,
+        to,
+        text: `[@${escapeLinkText(label)}](${MENTION_HREF_PREFIX}${id})`
+      });
+    }
+  }
+  replacements.sort((a, b) => b.from - a.from);
+  let out = content;
+  for (const r of replacements) out = out.slice(0, r.from) + r.text + out.slice(r.to);
+  return out;
+}
+function mentionFromHref(href) {
+  if (!href?.startsWith(MENTION_HREF_PREFIX)) return null;
+  const id = href.slice(MENTION_HREF_PREFIX.length);
+  if (!id) return null;
+  return { kind: id === "assistant" ? "assistant" : "user", id };
+}
+function useMentionAutocomplete({
+  value,
+  onValueChange,
+  candidates,
+  textareaRef
+}) {
+  const [caret, setCaret] = useState(null);
+  const [dismissedAt, setDismissedAt] = useState(null);
+  useEffect(() => {
+    if (dismissedAt !== null && value[dismissedAt] !== "@") setDismissedAt(null);
+  }, [value, dismissedAt]);
+  const match = useMemo(
+    () => caret === null ? null : findMentionQuery(value, Math.min(caret, value.length)),
+    [value, caret]
+  );
+  const items = useMemo(
+    () => match ? filterMentionCandidates(candidates, match.query) : [],
+    [match, candidates]
+  );
+  const isOpen = !!match && items.length > 0 && dismissedAt !== match.start;
+  const readCaret = useCallback(() => {
+    const ta = textareaRef.current;
+    setCaret(ta ? ta.selectionStart : null);
+  }, [textareaRef]);
+  const pick = useCallback(
+    (candidate) => {
+      if (!match || caret === null) return;
+      const next = insertMention(value, match.start, Math.min(caret, value.length), candidate.label);
+      onValueChange(next.text);
+      setCaret(next.caret);
+      setDismissedAt(match.start);
+      requestAnimationFrame(() => {
+        const ta = textareaRef.current;
+        if (!ta) return;
+        ta.focus();
+        ta.setSelectionRange(next.caret, next.caret);
+      });
+    },
+    [match, caret, value, onValueChange, textareaRef]
+  );
+  const nav = useListKeyNav({
+    open: isOpen,
+    items,
+    onPick: pick,
+    onDismiss: () => setDismissedAt(match?.start ?? null),
+    resetKey: match?.query
+  });
+  const handleValueChange = useCallback(
+    (next) => {
+      onValueChange(next);
+      const ta = textareaRef.current;
+      setCaret(ta ? ta.selectionStart : next.length);
+      if (dismissedAt !== null && (next.length < value.length || next[dismissedAt] !== "@")) {
+        setDismissedAt(null);
+      }
+    },
+    [onValueChange, textareaRef, dismissedAt, value]
+  );
+  return {
+    isOpen,
+    items,
+    nav,
+    pick,
+    onValueChange: handleValueChange,
+    textareaProps: { onSelect: readCaret }
+  };
+}
+var DEFAULT_ASSISTANT_MODE_TOGGLE_LABELS = {
+  always: "Assistant replies",
+  mentioned: "Thread",
+  alwaysHint: "The assistant answers every message. Click to make this a thread.",
+  mentionedHint: "A thread: messages are comments between people. @mention the assistant to get an answer. Click to have it answer every message."
+};
+function AssistantModeToggle({
+  mode,
+  onModeChange,
+  disabled,
+  labels,
+  className,
+  testId
+}) {
+  const l = { ...DEFAULT_ASSISTANT_MODE_TOGGLE_LABELS, ...labels };
+  const isThread = mode === "mentioned";
+  const hint = isThread ? l.mentionedHint : l.alwaysHint;
+  const Icon = isThread ? MessagesSquare : Bot;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        disabled,
+        "aria-pressed": isThread,
+        "aria-label": `${isThread ? l.mentioned : l.always}. ${hint}`,
+        onClick: () => onModeChange(isThread ? "always" : "mentioned"),
+        className: cn(
+          "h-8 gap-1.5 px-2 text-xs text-muted-foreground hover:bg-muted pointer-coarse:h-11",
+          isThread && "bg-accent text-accent-foreground",
+          className
+        ),
+        "data-mode": mode,
+        "data-testid": testIdOr(testId, { testId: "assistant-mode-toggle" }),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: isThread ? l.mentioned : l.always })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-xs", children: hint })
+  ] });
+}
 var DEFAULT_PINNED_DOC_CHIP_LABELS = {
   unpin: "Unpin",
   unpinDocument: (title) => `Unpin ${title}`
@@ -1627,6 +1959,6 @@ function AssistantToaster(props) {
   return /* @__PURE__ */ jsx(Toaster, { ...props, dockOpen: dock.isOpen && isDockAvailable });
 }
 
-export { AssistantToaster, BranchControls, ComposerAccessories, ComposerTools, ContextActionButton, ContextCheckRow, ContextPanelContent, ContextPanelFooter, ContextPanelTabs, ContextPickerList, ContextPickerRow, ContextSearchInput, ContextSelectList, ContextSelectRow, Conversation, ConversationBody, 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_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, LabelPinRow, ModelAutoIcon, ModelConfigureButton, ModelDot, ModelMenuDivider, ModelMenuMessage, ModelOption, ModelOptionLabel, ModelPickerPopover, ModelPickerTrigger, ModelPricingTip, ModelTierIcon, ModelTierOption, ModelTriggerContent, NewChatButton, NewPaChatButton, PaModeBadge, PendingAnswerBar, PinnedDocChip, SlashMenu, ThreadMap, ThreadMapDiagram, ThreadMapError, ThreadMapLoading, isLongPastedText, useDismissibleCard, useListKeyNav, useLongPaste };
-//# sourceMappingURL=chunk-IMA6I73C.js.map
-//# sourceMappingURL=chunk-IMA6I73C.js.map
+export { AssistantModeToggle, AssistantToaster, BranchControls, ComposerAccessories, ComposerTools, ContextActionButton, ContextCheckRow, ContextPanelContent, ContextPanelFooter, ContextPanelTabs, ContextPickerList, ContextPickerRow, ContextSearchInput, ContextSelectList, ContextSelectRow, Conversation, ConversationBody, ConversationHeader, ConversationHeaderActions, ConversationHistoryPane, ConversationLoading, ConversationMain, ConversationRoot, ConversationSearchView, ConversationSettingsButton, DEFAULT_ASSISTANT_MODE_TOGGLE_LABELS, DEFAULT_BRANCH_CONTROLS_LABELS, DEFAULT_CONVERSATION_LAYOUT_LABELS, DEFAULT_CONVERSATION_PARTS_LABELS, DEFAULT_CONVERSATION_SEARCH_LABELS, DEFAULT_LABEL_PIN_ROW_LABELS, DEFAULT_MENTION_LABELS, DEFAULT_MODEL_PRICING_TIP_LABELS, DEFAULT_PENDING_ANSWER_BAR_LABELS, DEFAULT_PINNED_DOC_CHIP_LABELS, DEFAULT_SLASH_MENU_LABELS, DEFAULT_THREAD_MAP_LABELS, LabelPinRow, MENTION_HREF_PREFIX, MentionChip, MentionMenu, ModelAutoIcon, ModelConfigureButton, ModelDot, ModelMenuDivider, ModelMenuMessage, ModelOption, ModelOptionLabel, ModelPickerPopover, ModelPickerTrigger, ModelPricingTip, ModelTierIcon, ModelTierOption, ModelTriggerContent, NewChatButton, NewPaChatButton, PaModeBadge, PendingAnswerBar, PinnedDocChip, SlashMenu, ThreadMap, ThreadMapDiagram, ThreadMapError, ThreadMapLoading, extractMentions, filterMentionCandidates, findMentionQuery, insertMention, isLongPastedText, linkMentions, mentionFromHref, toMessageMentions, useDismissibleCard, useListKeyNav, useLongPaste, useMentionAutocomplete };
+//# sourceMappingURL=chunk-ABSII3ND.js.map
+//# sourceMappingURL=chunk-ABSII3ND.js.map