@agent-native/toolkit 0.204.0 → 0.204.1-nightly-20261008065100

package/dist/composer/TiptapComposer.js

@@ -11,6 +11,7 @@ import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "../ui/p
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { formatAttachmentError } from "./attachment-accept.js";
 import { BuilderBMark } from "./BuilderBMark.js";
+import { searchComposerContextActions, } from "./ComposerContextMenu.js";
 import { ComposerPlusMenu, } from "./ComposerPlusMenu.js";
 import { areComposerContextItemsReady, ComposerContextError, snapshotComposerContextItems, } from "./context-items.js";
 import { getComposerDraftKey } from "./draft-key.js";
@@ -167,6 +168,9 @@ function isSameComposerAttachment(current, submitted) {
 function isSameComposerAttachmentSnapshot(current, snapshot) {
     return current.id === snapshot.id && current.file === snapshot.file;
 }
+// Host Add-menu actions listed among "@" suggestions. Picking one runs the
+// action or opens its picker as a dialog instead of inserting a mention.
+const COMPOSER_CONTEXT_ENTRY_SOURCE = "composer-context";
 function composerReferenceFromMentionItem(item) {
     return {
         label: item.referenceLabel ?? item.label,
@@ -1338,6 +1342,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
     });
     const [popover, setPopover] = useState(null);
     const [contextMenuOpen, setContextMenuOpen] = useState(false);
+    const [contextEntryRequest, setContextEntryRequest] = useState(null);
     const popoverRef = useRef(null);
     const composerRuntime = useComposerRuntime();
     const lastComposerRuntimeSyncRef = useRef(null);
@@ -1418,13 +1423,48 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
     onExecModeChangeRef.current = onExecModeChange;
     const planModeDisabledRef = useRef(planModeDisabled);
     planModeDisabledRef.current = planModeDisabled;
-    const { items: mentionItems, isLoading: mentionsLoading, error: mentionsError, retry: retryMentions, } = useMentionSearch(popover?.type === "@" ? popover.query : "", includeDefaultMentionSearch && (contextMenuOpen || popover?.type === "@"));
+    const { items: mentionItems, isLoading: mentionsLoading, error: mentionsError, retry: retryMentions, settledQuery: settledMentionQuery, } = useMentionSearch(popover?.type === "@" ? popover.query : "", includeDefaultMentionSearch && (contextMenuOpen || popover?.type === "@"));
     const mentionQuery = popover?.type === "@" ? popover.query : "";
     const filteredMentionItems = useMemo(() => filterMentionItemsForSlots([
         // Host items arrive unfiltered; the default search filters itself.
         ...hostMentionItems.filter((item) => mentionItemMatchesQuery(item, mentionQuery)),
         ...mentionItems,
     ].filter((item, index, items) => items.findIndex((candidate) => candidate.id === item.id) === index), slotReferences), [hostMentionItems, mentionItems, mentionQuery, slotReferences]);
+    const inlineMentionItems = useMemo(() => {
+        if (popover?.type !== "@" ||
+            !hasContextMenu ||
+            disabled ||
+            contextControlsDisabled ||
+            !contextMenuItems?.length)
+            return filteredMentionItems;
+        const addContextLabel = t("agentChat.composer.addContext", {
+            defaultValue: "Add context",
+        });
+        return [
+            ...searchComposerContextActions(contextMenuItems, mentionQuery)
+                // Custom pages only render inside the + menu.
+                .filter(({ action }) => !action.disabled && !action.render)
+                .map(({ action, categories }) => ({
+                id: `${COMPOSER_CONTEXT_ENTRY_SOURCE}:${action.id}`,
+                label: action.label,
+                description: action.description,
+                source: COMPOSER_CONTEXT_ENTRY_SOURCE,
+                refType: COMPOSER_CONTEXT_ENTRY_SOURCE,
+                refId: action.id,
+                section: categories[0] ?? addContextLabel,
+            })),
+            ...filteredMentionItems,
+        ];
+    }, [
+        popover?.type,
+        hasContextMenu,
+        disabled,
+        contextControlsDisabled,
+        contextMenuItems,
+        mentionQuery,
+        filteredMentionItems,
+        t,
+    ]);
     const { skills, hint, isLoading: skillsLoading, } = useSkills(includeDefaultSlashSkills && popover?.type === "/");
     const allSlashCommands = useMemo(() => {
         // A command without a host callback would be deleted as an invisible no-op.
@@ -1458,14 +1498,17 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
             s.description?.toLowerCase().includes(q));
     }, [allSlashSkills, popover]);
     // Keep refs in sync with state
-    const mentionItemsRef = useRef(filteredMentionItems);
-    mentionItemsRef.current = filteredMentionItems;
+    // Results for an earlier query are stale until the search for this one
+    // settles, so auto-close may not treat them as final. Host mention items
+    // carry no readiness signal (they may still be loading), so only a settled
+    // default search can end a query as "nothing matches".
+    const mentionSearchSettled = includeDefaultMentionSearch &&
+        !mentionsLoading &&
+        settledMentionQuery === mentionQuery;
     const filteredCommandsRef = useRef(filteredCommands);
     filteredCommandsRef.current = filteredCommands;
     const filteredSkillsRef = useRef(filteredSkills);
     filteredSkillsRef.current = filteredSkills;
-    const hasContextMenuRef = useRef(hasContextMenu);
-    hasContextMenuRef.current = hasContextMenu;
     const launchersDisabledRef = useRef(disabled || contextControlsDisabled);
     launchersDisabledRef.current = disabled || contextControlsDisabled;
     const onSlashCommandRef = useRef(onSlashCommand);
@@ -1510,6 +1553,21 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
         setPopover(null);
         popoverStateRef.current = null;
     }, []);
+    // A query nothing matches is plain text ("@builder.io", "@3pm"), so end the
+    // mention there instead of holding later keys.
+    useEffect(() => {
+        if (mentionQuery &&
+            mentionSearchSettled &&
+            inlineMentionItems.length === 0) {
+            closePopover();
+        }
+    }, [mentionQuery, mentionSearchSettled, inlineMentionItems, closePopover]);
+    // The + menu runs a request from its own effect, which fires before this one;
+    // clear it so a remounted menu cannot run the same action again.
+    useEffect(() => {
+        if (contextEntryRequest)
+            setContextEntryRequest(null);
+    }, [contextEntryRequest]);
     // Persist draft to localStorage so refreshes don't lose the prompt.
     const hasDraftScope = Boolean(draftScope?.trim());
     const draftKey = hasDraftScope || initialText === undefined
@@ -1910,14 +1968,6 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
                 const pop = popoverStateRef.current;
                 // Handle popover keyboard nav
                 if (pop) {
-                    if (event.key === " " && pop.type === "@" && pop.query) {
-                        const exact = findExactMentionItem(mentionItemsRef.current, pop.query);
-                        if (exact) {
-                            event.preventDefault();
-                            selectMention(view, pop, exact);
-                            return true;
-                        }
-                    }
                     if (event.key === "ArrowUp") {
                         event.preventDefault();
                         popoverRef.current?.moveUp();
@@ -1928,7 +1978,19 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
                         popoverRef.current?.moveDown();
                         return true;
                     }
-                    if (event.key === "Enter") {
+                    // A mention comes only from an explicit pick of a highlighted row. With
+                    // nothing highlighted, even while a search is pending, the "@" is
+                    // plain text: Enter submits it and a late result changes nothing.
+                    const highlighted = pop.type === "@" ? popoverRef.current?.getSelectedMention() : null;
+                    if (event.key === "Enter" && pop.type === "@" && !highlighted) {
+                        closePopover();
+                    }
+                    else if (event.key === "Tab" && !event.shiftKey && highlighted) {
+                        event.preventDefault();
+                        selectMention(view, pop, highlighted);
+                        return true;
+                    }
+                    else if (event.key === "Enter") {
                         event.preventDefault();
                         const idx = popoverRef.current?.getSelectedIndex() ?? 0;
                         const currentCommands = filteredCommandsRef.current;
@@ -2035,20 +2097,15 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
                     return true;
                 }
                 // Detect @ trigger — only when preceded by start-of-text, space, or newline
-                // (not after alphanumeric chars, which would indicate an email address)
+                // (not after alphanumeric chars, which would indicate an email address).
+                // Keep the typed "@" in the draft and focus in the editor: a focus-taking
+                // menu here would swallow the rest of a literal like "@builder.io".
                 if (event.key === "@") {
+                    if (launchersDisabledRef.current)
+                        return false;
                     const { from } = view.state.selection;
                     const textBefore = view.state.doc.textBetween(Math.max(0, from - 1), from);
                     if (from === 1 || textBefore === "" || /\s/.test(textBefore)) {
-                        if (hasContextMenuRef.current) {
-                            if (launchersDisabledRef.current)
-                                return false;
-                            event.preventDefault();
-                            popoverStateRef.current = null;
-                            setPopover(null);
-                            setContextMenuOpen(true);
-                            return true;
-                        }
                         const position = getComposerPopoverAnchorPosition(view, from);
                         if (!position)
                             return false;
@@ -2234,16 +2291,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
             if (!isComposerEditorUsable(editor))
                 return;
             editor.commands.focus();
-            // An inserted "@" opens the shared Add menu when the host provides one.
-            const mention = text === "@";
-            if (mention && hasContextMenuRef.current) {
-                if (launchersDisabledRef.current)
-                    return;
-                popoverStateRef.current = null;
-                setPopover(null);
-                setContextMenuOpen(true);
-                return;
-            }
+            const mention = text === "@" && !launchersDisabledRef.current;
             let inserted = text;
             if (mention) {
                 const { from } = editor.state.selection;
@@ -3462,6 +3510,14 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
         const currentPos = ed.state.selection.from;
         // startPos is after the trigger char, so -1 to include the @ or /
         const deleteFrom = Math.max(0, pop.startPos - 1);
+        if (item.source === COMPOSER_CONTEXT_ENTRY_SOURCE && item.refId) {
+            ed.chain()
+                .focus()
+                .deleteRange({ from: deleteFrom, to: currentPos })
+                .run();
+            setContextEntryRequest({ id: item.refId });
+            return;
+        }
         const normalized = adapters.agentChat.normalizeReference(composerReferenceFromMentionItem(item));
         if (!normalized)
             return;
@@ -3853,7 +3909,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
                                             }), className: "flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconRefresh, { "aria-hidden": "true", className: "size-3.5" }) }) }), _jsx(TooltipContent, { children: t("agentChat.composer.retryContext", {
                                             defaultValue: "Retry {{name}} context",
                                             name: item.title,
-                                        }) })] })) : null] }, item.key)))] })), contextSubmissionError ? (_jsx("p", { role: "alert", className: "px-2 text-xs text-destructive", children: contextSubmissionError })) : null, attachmentError ? (_jsx("p", { role: "alert", className: "break-words px-2.5 pt-2 text-xs text-destructive", children: attachmentError })) : null, _jsx("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "editor-wrap", className: `agent-composer-editor-wrap ${composerMode || hasContextRows ? "px-2 pt-1 pb-1" : "px-2 pt-2 pb-1"}`, children: _jsx(EditorContent, { editor: editor, "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "editor", className: "agent-composer-editor aui-composer flex-1 min-w-0 [&_.ProseMirror]:outline-none [&_.ProseMirror_p]:m-0 px-0.5" }) }), voiceEnabled && _jsx(VoiceRecordingOverlay, { voice: voice }), _jsxs("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "toolbar", className: "agent-composer-toolbar flex items-center gap-1 px-2 py-1.5", children: [!launchersDisabled && attachmentsEnabled && attachButton ? (attachButton) : hasContextMenu ? (_jsx(ComposerPlusMenu, { contextMenuItems: launchersDisabled ? [] : contextLauncherItems, mode: launchersDisabled || plusMenuMode === "hidden"
+                                        }) })] })) : null] }, item.key)))] })), contextSubmissionError ? (_jsx("p", { role: "alert", className: "px-2 text-xs text-destructive", children: contextSubmissionError })) : null, attachmentError ? (_jsx("p", { role: "alert", className: "break-words px-2.5 pt-2 text-xs text-destructive", children: attachmentError })) : null, _jsx("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "editor-wrap", className: `agent-composer-editor-wrap ${composerMode || hasContextRows ? "px-2 pt-1 pb-1" : "px-2 pt-2 pb-1"}`, children: _jsx(EditorContent, { editor: editor, "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "editor", className: "agent-composer-editor aui-composer flex-1 min-w-0 [&_.ProseMirror]:outline-none [&_.ProseMirror_p]:m-0 px-0.5" }) }), voiceEnabled && _jsx(VoiceRecordingOverlay, { voice: voice }), _jsxs("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "toolbar", className: "agent-composer-toolbar flex items-center gap-1 px-2 py-1.5", children: [!launchersDisabled && attachmentsEnabled && attachButton ? (attachButton) : hasContextMenu ? (_jsx(ComposerPlusMenu, { contextMenuItems: launchersDisabled ? [] : contextLauncherItems, openEntry: contextEntryRequest, mode: launchersDisabled || plusMenuMode === "hidden"
                             ? "upload-only"
                             : plusMenuMode, onSelectMode: handleSelectMode, terminalModeControl: terminalModeControl, extensionTools: extensionTools, attachmentsEnabled: attachmentsEnabled, open: contextMenuOpen, onOpenChange: setContextMenuOpen, loading: mentionsLoading, error: mentionsError
                             ? t("agentChat.composer.contextLoadFailed", {
@@ -3873,6 +3929,6 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, conte
                             }
                             const pageTarget = Array.from(document.querySelectorAll('button:not(:disabled), a[href], input:not([type="hidden"]):not(:disabled), textarea:not(:disabled)')).find((element) => !root?.contains(element) && !element.closest("[hidden]"));
                             pageTarget?.focus();
-                        }, disabled: launchersDisabled })) : null, toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), shouldRenderModelSelector(availableModels, onModelChange) && (_jsx(ModelSelector, { model: selectedModel ?? "", selectedEngine: selectedEngine, open: modelSelectorOpen, effort: selectedEffort, engines: availableModels, agents: availableAgents, selectedAgent: selectedAgent, agentOnly: agentOnly, hostedHarness: hostedHarness, showAutoModelOption: showAutoModelOption, modelListLoading: modelListLoading, onChange: onModelChange, onEffortChange: onEffortChange, onAgentChange: onAgentChange, onModelSelectorOpenChange: onModelSelectorOpenChange, providerConnectStatusEnabled: providerConnectStatusEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, terminalModeControl: terminalModeControl, imageModel: imageModelMenu })), execMode && onExecModeChange && (_jsx(ModeSelector, { mode: execMode, onChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason })), actionButton ?? (_jsxs(_Fragment, { children: [extraActionButton, voiceEnabled && (_jsx(VoiceButton, { voice: voice, isMac: isMac, disabled: disabled })), primaryAction === "stop" ? (stopButton) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (event) => void submitComposer("immediate", undefined, event.metaKey || event.ctrlKey), disabled: !canSend || sendButtonDisabled, "aria-label": sendButtonTooltip, "data-agent-composer-slot": "send-button", className: "agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconArrowUp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: sendButtonTooltip })] }))] }))] }), _jsx(MentionPopover, { ref: popoverRef, density: mentionPopoverDensity, type: popover?.type ?? "@", position: popover?.position ?? null, mentionItems: filteredMentionItems, skills: filteredSkills, commands: filteredCommands, hint: hint, isLoading: popover?.type === "@" ? mentionsLoading : skillsLoading, query: popover?.query ?? "", onSelectMention: handleSelectMention, onSelectSkill: handleSelectSkill, onSelectCommand: handleSelectCommand, onClose: closePopover })] }));
+                        }, disabled: launchersDisabled })) : null, toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), shouldRenderModelSelector(availableModels, onModelChange) && (_jsx(ModelSelector, { model: selectedModel ?? "", selectedEngine: selectedEngine, open: modelSelectorOpen, effort: selectedEffort, engines: availableModels, agents: availableAgents, selectedAgent: selectedAgent, agentOnly: agentOnly, hostedHarness: hostedHarness, showAutoModelOption: showAutoModelOption, modelListLoading: modelListLoading, onChange: onModelChange, onEffortChange: onEffortChange, onAgentChange: onAgentChange, onModelSelectorOpenChange: onModelSelectorOpenChange, providerConnectStatusEnabled: providerConnectStatusEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, terminalModeControl: terminalModeControl, imageModel: imageModelMenu })), execMode && onExecModeChange && (_jsx(ModeSelector, { mode: execMode, onChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason })), actionButton ?? (_jsxs(_Fragment, { children: [extraActionButton, voiceEnabled && (_jsx(VoiceButton, { voice: voice, isMac: isMac, disabled: disabled })), primaryAction === "stop" ? (stopButton) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (event) => void submitComposer("immediate", undefined, event.metaKey || event.ctrlKey), disabled: !canSend || sendButtonDisabled, "aria-label": sendButtonTooltip, "data-agent-composer-slot": "send-button", className: "agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconArrowUp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: sendButtonTooltip })] }))] }))] }), _jsx(MentionPopover, { ref: popoverRef, density: mentionPopoverDensity, type: popover?.type ?? "@", position: popover?.position ?? null, mentionItems: inlineMentionItems, skills: filteredSkills, commands: filteredCommands, hint: hint, isLoading: popover?.type === "@" ? mentionsLoading : skillsLoading, query: popover?.query ?? "", onSelectMention: handleSelectMention, onSelectSkill: handleSelectSkill, onSelectCommand: handleSelectCommand, onClose: closePopover })] }));
 }
 //# sourceMappingURL=TiptapComposer.js.map