@arbidocs/blocks 0.4.27 → 0.4.29

package/dist/{chunk-J22DXUJY.cjs → chunk-ZHLMDJCO.cjs}

@@ -4,6 +4,7 @@
 var chunkVGOFFCMT_cjs = require('./chunk-VGOFFCMT.cjs');
 var chunkPPCATBOY_cjs = require('./chunk-PPCATBOY.cjs');
 var chunkKDG6FER6_cjs = require('./chunk-KDG6FER6.cjs');
+var chunk7UTB4PHM_cjs = require('./chunk-7UTB4PHM.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
@@ -1052,6 +1053,118 @@ var Composer = {
   Container: ComposerContainer,
   Dock: ComposerDock
 };
+function useMentionAutocomplete({
+  value,
+  onValueChange,
+  candidates,
+  textareaRef
+}) {
+  const [caret, setCaret] = react.useState(null);
+  const [dismissedAt, setDismissedAt] = react.useState(null);
+  react.useEffect(() => {
+    if (dismissedAt !== null && value[dismissedAt] !== "@") setDismissedAt(null);
+  }, [value, dismissedAt]);
+  const match = react.useMemo(
+    () => caret === null ? null : chunk7UTB4PHM_cjs.findMentionQuery(value, Math.min(caret, value.length)),
+    [value, caret]
+  );
+  const items = react.useMemo(
+    () => match ? chunk7UTB4PHM_cjs.filterMentionCandidates(candidates, match.query) : [],
+    [match, candidates]
+  );
+  const isOpen2 = !!match && items.length > 0 && dismissedAt !== match.start;
+  const readCaret = react.useCallback(() => {
+    const ta = textareaRef.current;
+    setCaret(ta ? ta.selectionStart : null);
+  }, [textareaRef]);
+  const pick = react.useCallback(
+    (candidate) => {
+      if (!match || caret === null) return;
+      const next = chunk7UTB4PHM_cjs.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 = chunk7UTB4PHM_cjs.useListKeyNav({
+    open: isOpen2,
+    items,
+    onPick: pick,
+    onDismiss: () => setDismissedAt(match?.start ?? null),
+    resetKey: match?.query
+  });
+  const handleValueChange = react.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: isOpen2,
+    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 ? lucideReact.MessagesSquare : lucideReact.Bot;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.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: ui.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": chunkMHVNT4J3_cjs.testIdOr(testId, { testId: "assistant-mode-toggle" }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: isThread ? l.mentioned : l.always })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { side: "top", className: "max-w-xs", children: hint })
+  ] });
+}
 var DEFAULT_CONVERSATION_EMPTY_LABELS = {
   title: "Ask ARBI about your documents",
   description: "Ask a question and verify every answer against the source.",
@@ -1690,16 +1803,19 @@ var LIST_COLUMN_REM = 48;
 var DEFAULT_ASIDE_BREAKPOINT_REM = 60;
 function MessageRow({ message, identity, renderContent, onOpenCitation, labels }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Message.Bubble,
-      {
-        role: "user",
-        messageId: message.id,
-        className: USER_BUBBLE,
-        testId: "chat-message-user",
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 whitespace-pre-wrap break-words text-base leading-relaxed", children: message.content })
-      }
-    ) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsxRuntime.jsxs(Message.Content, { role: "user", messageId: message.id, children: [
+      message.senderName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: message.senderName }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Message.Bubble,
+        {
+          role: "user",
+          messageId: message.id,
+          className: USER_BUBBLE,
+          testId: "chat-message-user",
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 whitespace-pre-wrap break-words text-base leading-relaxed", children: message.content })
+        }
+      )
+    ] }) });
   }
   const isStreaming = message.status === "streaming";
   const isFailed = message.status === "error";
@@ -1751,6 +1867,7 @@ function ChatPage({
   identity,
   renderContent,
   onOpenCitation,
+  targetMessageId,
   asideBreakpoint = DEFAULT_ASIDE_BREAKPOINT_REM,
   fillHeight = false,
   minHeight = 360,
@@ -1770,8 +1887,17 @@ function ChatPage({
   const asideToggleRef = react.useRef(null);
   const asideRef = react.useRef(null);
   const scrollRef = react.useRef(null);
+  const jumpedToMessage = react.useRef(null);
   const fileRef = react.useRef(null);
   const textareaRef = react.useRef(null);
+  const currentThreadRef = react.useRef(chat.activeThreadId);
+  currentThreadRef.current = chat.activeThreadId;
+  const mentions = useMentionAutocomplete({
+    value: draft,
+    onValueChange: setDraft,
+    candidates: chat.mentionCandidates ?? [],
+    textareaRef
+  });
   const { width } = useElementSize(rootRef);
   const { height: headerHeight } = useElementSize(headerRef);
   const rem = rootFontSizePx();
@@ -1812,6 +1938,21 @@ function ChatPage({
   react.useEffect(() => {
     if (!isAway) scrollToEnd();
   }, [chat.messages, isAway, scrollToEnd]);
+  react.useEffect(() => {
+    if (!targetMessageId) {
+      jumpedToMessage.current = null;
+      return;
+    }
+    const key = `${chat.activeThreadId}:${targetMessageId}`;
+    if (jumpedToMessage.current === key) return;
+    const row = Array.from(
+      scrollRef.current?.querySelectorAll("[data-message-id]") || []
+    ).find((element) => element.dataset.messageId === targetMessageId);
+    if (!row) return;
+    jumpedToMessage.current = key;
+    row.scrollIntoView({ block: "center" });
+    setIsAway(true);
+  }, [targetMessageId, chat.activeThreadId, chat.messages]);
   react.useEffect(() => {
     setIsAway(false);
   }, [chat.activeThreadId]);
@@ -1822,10 +1963,21 @@ function ChatPage({
   const submit = (e) => {
     e?.preventDefault();
     const text = draft.trim();
-    if (!text || chat.isRunning) return;
+    if (!text || chat.isRunning || chat.isPostingComment || chat.isUpdatingAssistantMode || chat.isLoadingThread || chat.historyError)
+      return;
     setDraft("");
     setIsAway(false);
-    void chat.send(text);
+    const selectedMentions = chunk7UTB4PHM_cjs.toMessageMentions(chunk7UTB4PHM_cjs.extractMentions(text, chat.mentionCandidates ?? []));
+    const threadId = chat.activeThreadId;
+    const restoreDraft = () => {
+      if (currentThreadRef.current === threadId) setDraft((current) => current || text);
+    };
+    try {
+      const sent = selectedMentions.length ? chat.send(text, { mentions: selectedMentions }) : chat.send(text);
+      void Promise.resolve(sent).catch(restoreDraft);
+    } catch {
+      restoreDraft();
+    }
   };
   const pickFiles = () => fileRef.current?.click();
   const onFiles = (files) => {
@@ -1982,16 +2134,25 @@ function ChatPage({
                         role: "list",
                         "aria-label": "Conversation messages",
                         className: "mx-auto flex w-full max-w-3xl flex-col gap-5 px-3 py-5 @lg/chat:px-6",
-                        children: chat.messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", "data-message-id": message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          MessageRow,
+                        children: chat.messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
                           {
-                            message,
-                            identity,
-                            renderContent,
-                            onOpenCitation,
-                            labels: l
-                          }
-                        ) }, message.id))
+                            role: "listitem",
+                            "data-message-id": message.id,
+                            className: message.id === targetMessageId ? "rounded-lg ring-2 ring-primary/40" : void 0,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              MessageRow,
+                              {
+                                message,
+                                identity,
+                                renderContent,
+                                onOpenCitation,
+                                labels: l
+                              }
+                            )
+                          },
+                          message.id
+                        ))
                       }
                     )
                   }
@@ -2038,11 +2199,29 @@ function ChatPage({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(Composer.Root, { onSubmit: submit, testId: "chat-composer", children: /* @__PURE__ */ jsxRuntime.jsxs(Composer.Frame, { className: "px-3 py-2 shadow-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunk7UTB4PHM_cjs.MentionMenu,
+                {
+                  open: mentions.isOpen,
+                  items: mentions.items,
+                  selectedIndex: mentions.nav.selectedIndex,
+                  setSelectedIndex: mentions.nav.setSelectedIndex,
+                  listboxId: mentions.nav.listboxId,
+                  onSelect: mentions.pick
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Composer.Input,
                 {
                   value: draft,
-                  onValueChange: setDraft,
+                  onValueChange: mentions.onValueChange,
+                  onKeyDown: (event) => {
+                    mentions.nav.handleKeyDown(event);
+                  },
+                  textareaProps: {
+                    ...mentions.textareaProps,
+                    ...chat.mentionCandidates?.length ? mentions.nav.comboboxProps : {}
+                  },
                   placeholder: l.placeholder,
                   ariaLabel: l.composerAriaLabel,
                   textareaRef,
@@ -2052,15 +2231,25 @@ function ChatPage({
               /* @__PURE__ */ jsxRuntime.jsx(
                 Composer.Toolbar,
                 {
-                  leading: /* @__PURE__ */ jsxRuntime.jsx(
-                    ChatDocuments,
-                    {
-                      chat,
-                      labels: l,
-                      onPickFiles: pickFiles,
-                      testIds: { documents: testIds?.documents, upload: testIds?.upload }
-                    }
-                  ),
+                  leading: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    chat.assistantMode && chat.setAssistantMode && /* @__PURE__ */ jsxRuntime.jsx(
+                      AssistantModeToggle,
+                      {
+                        mode: chat.assistantMode,
+                        onModeChange: (mode) => void chat.setAssistantMode?.(mode),
+                        disabled: chat.isRunning || chat.isPostingComment || chat.isUpdatingAssistantMode
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ChatDocuments,
+                      {
+                        chat,
+                        labels: l,
+                        onPickFiles: pickFiles,
+                        testIds: { documents: testIds?.documents, upload: testIds?.upload }
+                      }
+                    )
+                  ] }),
                   trailing: chat.isRunning && chat.stop ? /* @__PURE__ */ jsxRuntime.jsx(
                     ui.Button,
                     {
@@ -2078,7 +2267,7 @@ function ChatPage({
                     Composer.Send,
                     {
                       onSend: () => submit(),
-                      disabled: chat.isRunning || draft.trim() === "",
+                      disabled: chat.isRunning || chat.isPostingComment || chat.isUpdatingAssistantMode || chat.isLoadingThread || Boolean(chat.historyError) || draft.trim() === "",
                       testIds: { send: chunkMHVNT4J3_cjs.testIdOr(testIds?.send, { testId: "chat-send" }) }
                     }
                   )
@@ -2203,6 +2392,7 @@ function AssistantDock({
 
 exports.AssistantDock = AssistantDock;
 exports.AssistantDockToggle = AssistantDockToggle;
+exports.AssistantModeToggle = AssistantModeToggle;
 exports.ChatDocuments = ChatDocuments;
 exports.ChatMessageContent = ChatMessageContent;
 exports.ChatPage = ChatPage;
@@ -2221,6 +2411,7 @@ exports.ComposerToolbar = ComposerToolbar;
 exports.ComposerVoiceButton = ComposerVoiceButton;
 exports.ContextChip = ContextChip;
 exports.ConversationEmpty = ConversationEmpty;
+exports.DEFAULT_ASSISTANT_MODE_TOGGLE_LABELS = DEFAULT_ASSISTANT_MODE_TOGGLE_LABELS;
 exports.DEFAULT_CHAT_PAGE_LABELS = DEFAULT_CHAT_PAGE_LABELS;
 exports.DEFAULT_COMPOSER_LABELS = DEFAULT_COMPOSER_LABELS;
 exports.DEFAULT_CONVERSATION_EMPTY_LABELS = DEFAULT_CONVERSATION_EMPTY_LABELS;
@@ -2253,7 +2444,8 @@ exports.SourceChip = SourceChip;
 exports.toSpeakableText = toSpeakableText;
 exports.useAssistantDock = useAssistantDock;
 exports.useChatSurface = useChatSurface;
+exports.useMentionAutocomplete = useMentionAutocomplete;
 exports.useRegisterEmbeddedChat = useRegisterEmbeddedChat;
 exports.useStreamAnnouncement = useStreamAnnouncement;
-//# sourceMappingURL=chunk-J22DXUJY.cjs.map
-//# sourceMappingURL=chunk-J22DXUJY.cjs.map
+//# sourceMappingURL=chunk-ZHLMDJCO.cjs.map
+//# sourceMappingURL=chunk-ZHLMDJCO.cjs.map