@agent-native/core 0.79.27 → 0.80.0

package/dist/client/composer/TiptapComposer.js

@@ -6,7 +6,7 @@ import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { useState, useRef, useEffect, useCallback, useImperativeHandle, useMemo, } from "react";
 import { getReasoningEffortOptionsForModel, reasoningEffortLabel, } from "../../shared/reasoning-effort.js";
-import { normalizeAgentComposerReference, sendToAgentChat, AGENT_CHAT_INSERT_REFERENCE_EVENT, AGENT_CHAT_INSERT_REFERENCE_MESSAGE_TYPE, } from "../agent-chat.js";
+import { formatAgentChatContextItemsForPrompt, normalizeAgentComposerReference, sendToAgentChat, AGENT_CHAT_INSERT_REFERENCE_EVENT, AGENT_CHAT_INSERT_REFERENCE_MESSAGE_TYPE, } from "../agent-chat.js";
 import { tryDelegateBuildRequestToBuilder } from "../builder-frame.js";
 import { isTrustedBuilderMessage } from "../builder-frame.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
@@ -105,6 +105,14 @@ function metadataString(metadata, key) {
     const value = metadata?.[key];
     return typeof value === "string" && value.trim() ? value.trim() : null;
 }
+function trimVoiceContextValue(value, maxChars) {
+    const trimmed = value.replace(/\0/g, "").trim();
+    if (!trimmed)
+        return null;
+    if (trimmed.length <= maxChars)
+        return trimmed;
+    return `${trimmed.slice(0, maxChars).trimEnd()}\n[truncated]`;
+}
 function filterMentionItemsForSlots(items, slotReferences) {
     return items.filter((item) => {
         const requiredSlotKey = metadataString(item.metadata, "requiredSlotKey");
@@ -578,10 +586,11 @@ function ModelSelector({ model, effort = "auto", engines, onChange, onEffortChan
                     }), effortOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-border" }), _jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": reasoningExpanded, onClick: () => setReasoningExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [reasoningExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: "Reasoning" }), !reasoningExpanded && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: reasoningEffortLabel(effort) }))] }) }), reasoningExpanded &&
                                 effortOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => onEffortChange?.(option), className: "flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: reasoningEffortLabel(option) }), option === effort && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, option)))] }))] })] }));
 }
-export function TiptapComposer({ placeholder = "Message agent...", disabled = false, focusRef, initialText, initialTextKey, onSubmit, clearOnSubmit = true, onTextChange, actionButton, extraActionButton, attachButton, modeControl, toolbarSlot, layoutVariant = "default", slashCommands = [], slashSkills = [], includeDefaultSlashCommands = true, includeDefaultSlashSkills = true, onSlashCommand, execMode, onExecModeChange, planModeDisabled = false, planModeDisabledReason, voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED, selectedModel, selectedEffort, availableModels, onModelChange, onEffortChange, providerConnectStatusEnabled, onConnectProvider, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
+export function TiptapComposer({ placeholder = "Message agent...", disabled = false, focusRef, initialText, initialTextKey, onSubmit, onBeforeSubmit, clearOnSubmit = true, onTextChange, actionButton, extraActionButton, attachButton, modeControl, toolbarSlot, layoutVariant = "default", slashCommands = [], slashSkills = [], includeDefaultSlashCommands = true, includeDefaultSlashSkills = true, onSlashCommand, execMode, onExecModeChange, planModeDisabled = false, planModeDisabledReason, voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED, selectedModel, selectedEffort, availableModels, onModelChange, onEffortChange, providerConnectStatusEnabled, onConnectProvider, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
     const [popover, setPopover] = useState(null);
     const popoverRef = useRef(null);
     const composerRuntime = useComposerRuntime();
+    const submitInFlightRef = useRef(false);
     const [editorHasText, setEditorHasText] = useState(false);
     const [slotReferences, setSlotReferences] = useState([]);
     const composerText = useComposer((state) => state.text);
@@ -868,7 +877,7 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                 const submitIntent = getComposerSubmitIntentForEnterKey(event, isMac);
                 if (submitIntent) {
                     event.preventDefault();
-                    submitComposer(submitIntent);
+                    void submitComposer(submitIntent);
                     return true;
                 }
                 // Detect @ trigger — only when preceded by start-of-text, space, or newline
@@ -1090,9 +1099,46 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                 .run();
         }
     }, [editor]);
+    const buildVoiceContextPack = useCallback(() => {
+        const snippets = [];
+        const activeContext = trimVoiceContextValue(formatAgentChatContextItemsForPrompt(contextItems), 3200);
+        if (activeContext) {
+            snippets.push({ label: "Active app context", value: activeContext });
+        }
+        const selectedReferences = trimVoiceContextValue(slotReferences.map((ref) => slotReferenceTitle(ref)).join(", "), 1200);
+        if (selectedReferences) {
+            snippets.push({
+                label: "Selected references",
+                value: selectedReferences,
+            });
+        }
+        const draft = editor
+            ? trimVoiceContextValue(editor.state.doc.textContent, 1200)
+            : null;
+        if (draft)
+            snippets.push({ label: "Current draft", value: draft });
+        if (typeof document !== "undefined") {
+            const title = trimVoiceContextValue(document.title, 160);
+            if (title)
+                snippets.push({ label: "Page title", value: title });
+        }
+        if (typeof window !== "undefined") {
+            const route = trimVoiceContextValue(window.location.pathname, 240);
+            if (route)
+                snippets.push({ label: "Route", value: route });
+        }
+        if (snippets.length === 0)
+            return undefined;
+        return {
+            surface: "agent-composer",
+            mode: "dictation",
+            snippets,
+        };
+    }, [contextItems, editor, slotReferences]);
     const voice = useVoiceDictation({
         onTranscript: insertTranscript,
         onLiveUpdate: handleLiveUpdate,
+        contextPack: buildVoiceContextPack,
     });
     // Clean up live text if voice session ends without a final transcript (cancel/error)
     useEffect(() => {
@@ -1234,10 +1280,12 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
         composerRuntime.setRunConfig(Object.keys(custom).length > 0 ? { custom } : {});
         return { text, references };
     }, [composerRuntime, execMode, extractComposerPayload]);
-    const submitComposer = useCallback((intent = "immediate") => {
+    const submitComposer = useCallback(async (intent = "immediate") => {
         const ed = editor;
         if (!ed)
             return;
+        if (submitInFlightRef.current)
+            return;
         const { text, references } = syncComposerState();
         const attachments = composerRuntime.getState().attachments;
         if (!text.trim() && references.length === 0 && attachments.length === 0)
@@ -1270,6 +1318,37 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                 return;
             }
         }
+        // Builder iframe delegation: when this app is mounted inside the
+        // Builder.io webview and the user typed a "build me an app/agent"
+        // prompt, hand it up to the parent Builder chat instead of sending
+        // it to this app's domain agent. Builder is the code-writing agent;
+        // the local agent (dispatch, mail, etc.) cannot scaffold workspace
+        // apps from inside its own iframe.
+        if (!composerMode &&
+            interceptBuildRequestsForBuilder &&
+            tryDelegateBuildRequestToBuilder(trimmed)) {
+            cancelActiveVoice();
+            ed.commands.clearContent();
+            setEditorHasText(false);
+            setSlotReferences([]);
+            try {
+                localStorage.removeItem(draftKey);
+            }
+            catch { }
+            closePopover();
+            return;
+        }
+        if (onBeforeSubmit) {
+            submitInFlightRef.current = true;
+            try {
+                const shouldSubmit = await onBeforeSubmit();
+                if (!shouldSubmit)
+                    return;
+            }
+            finally {
+                submitInFlightRef.current = false;
+            }
+        }
         // Composer mode: send with context via agent chat bridge
         if (composerMode) {
             const config = COMPOSER_MODE_CONFIGS[composerMode];
@@ -1310,25 +1389,6 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
             closePopover();
             return;
         }
-        // Builder iframe delegation: when this app is mounted inside the
-        // Builder.io webview and the user typed a "build me an app/agent"
-        // prompt, hand it up to the parent Builder chat instead of sending
-        // it to this app's domain agent. Builder is the code-writing agent;
-        // the local agent (dispatch, mail, etc.) cannot scaffold workspace
-        // apps from inside its own iframe.
-        if (interceptBuildRequestsForBuilder &&
-            tryDelegateBuildRequestToBuilder(trimmed)) {
-            cancelActiveVoice();
-            ed.commands.clearContent();
-            setEditorHasText(false);
-            setSlotReferences([]);
-            try {
-                localStorage.removeItem(draftKey);
-            }
-            catch { }
-            closePopover();
-            return;
-        }
         if (onSubmit) {
             onSubmit(text, references, attachments, { intent });
             // Clear any pending attachments now that the host has them.
@@ -1354,9 +1414,11 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
         closePopover,
         composerMode,
         composerRuntime,
+        draftKey,
         editor,
         interceptBuildRequestsForBuilder,
         clearOnSubmit,
+        onBeforeSubmit,
         onSubmit,
         syncComposerState,
         voice,
@@ -1542,6 +1604,6 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                                     setSlotReferences((current) => removeSlotReference(current, ref));
                                     editor?.commands.focus("end");
                                 }, "aria-label": `Remove ${slotReferenceTitle(ref)} reference`, className: "ms-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconX, { className: "h-3 w-3" }) })] }, ref.slotKey))), contextItems.map((item) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/50 px-2 py-1 text-[11px] font-medium text-foreground", children: [_jsx(IconClipboardList, { className: "h-3 w-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 truncate", children: item.title }), _jsx("button", { type: "button", onClick: () => onRemoveContextItem?.(item.key), "aria-label": `Remove ${item.title} context`, className: "ms-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconX, { className: "h-3 w-3" }) })] }, item.key)))] })), _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: [attachButton ??
-                        (plusMenuMode === "hidden" ? null : (_jsx(ComposerPlusMenu, { onSelectMode: handleSelectMode, mode: plusMenuMode, onAttachmentError: onAttachmentError }))), toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), selectedModel && availableModels && onModelChange && (_jsx(ModelSelector, { model: selectedModel, effort: selectedEffort, engines: availableModels, onChange: onModelChange, onEffortChange: onEffortChange, providerConnectStatusEnabled: providerConnectStatusEnabled, onConnectProvider: onConnectProvider, 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 })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => submitComposer("immediate"), disabled: !canSend, "data-agent-composer-slot": "send-button", className: "agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconArrowUp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Send message" })] })] }))] }), _jsx(MentionPopover, { ref: popoverRef, 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 })] }));
+                        (plusMenuMode === "hidden" ? null : (_jsx(ComposerPlusMenu, { onSelectMode: handleSelectMode, mode: plusMenuMode, onAttachmentError: onAttachmentError }))), toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), selectedModel && availableModels && onModelChange && (_jsx(ModelSelector, { model: selectedModel, effort: selectedEffort, engines: availableModels, onChange: onModelChange, onEffortChange: onEffortChange, providerConnectStatusEnabled: providerConnectStatusEnabled, onConnectProvider: onConnectProvider, 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 })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => void submitComposer("immediate"), disabled: !canSend, "data-agent-composer-slot": "send-button", className: "agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconArrowUp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Send message" })] })] }))] }), _jsx(MentionPopover, { ref: popoverRef, 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 })] }));
 }
 //# sourceMappingURL=TiptapComposer.js.map